commit newly seperated files

generate.py

@@ -6,6 +6,7 @@ from markdown import markdown
 from glob import glob
 from json import dump, dumps, load
 from os import path
+from subprocess import call
 import re
 
 numbers = re.compile("[0-9]+")
@@ -109,7 +110,7 @@ def render_places():
             with open("md/" + placename + ".md", "r") as f:
                 md = markdown(f.read())
         except FileNotFoundError:
-            md = "<h1>No Story (Yet)</h1>"
+            md = ""
         with open(working_path + "/index.html", "w") as f:
             f.write(template.render({
                 "count": count,
@@ -120,6 +121,10 @@ def render_places():
                 "photos_json": photos_json
             }))
 
+def copy_files():
+    call("cp js/* html/js/", shell=True)
+    call("cp style.css html/style.css", shell=True)
+
 if __name__ == "__main__":
     try:
         overwrite = "overwrite" in argv
@@ -130,3 +135,4 @@ if __name__ == "__main__":
         exit() 
     render_index()
     render_places()
+    copy_files()

js/imgGallery.js

@@ -0,0 +1,108 @@
+// `photos` variable populated by script tag in place page html
+viewState = null;
+galleryContainer = document.getElementById("galleryContainer");
+galleryImage = document.getElementById("galleryImage");
+previewLinks = document.getElementsByClassName("previewLink");
+headerImage = document.getElementById("headerImage");
+
+touchDragStartX = null;
+touchDragThreshold = 75;
+touchDirection = null;
+touchLock = false;
+
+function enlargeImage (filename) {
+  viewState = photos.indexOf(filename);
+  galleryImage.fullRes = filename;
+  galleryImage.src = "/compressed/compressed_" + filename;
+  galleryContainer.style.display = "block";
+  headerImage.style.rotate = "none";
+};
+
+function delGallery () {
+  galleryContainer.style.display = "none";
+  galleryImage.src = "";
+  headerImage.style.rotate = "-3deg";
+};
+
+function nextImage () {
+  viewState++;
+  if (viewState == previewLinks.length) {
+    viewState = 0;  
+  };
+  galleryImage.fullRes = photos[viewState];
+  galleryImage.src = "/compressed/compressed_" + photos[viewState];
+};
+
+function prevImage () {
+  viewState--;
+  if (viewState == -1) {
+    viewState = previewLinks.length - 1;
+  };
+  galleryImage.fullRes = photos[viewState];
+  galleryImage.src = "/compressed/compressed_" + photos[viewState];
+};
+
+function imageNewTab () {
+  window.open(galleryImage.fullRes, "_blank")
+};
+
+function keyHandler (event) {
+  if (event.key == "ArrowRight" | event.key == "Space") {
+    nextImage();
+  } else if (event.key == "ArrowLeft") {
+    prevImage();
+  } else if (event.key == "Escape" | event.key == "q") {
+    delGallery();
+  } 
+};
+
+function delGalleryHandler (event) {
+  if (event.target.id == "galleryContainer") {
+    delGallery();
+  };
+};
+
+function mouseUpHandler (event) {
+  console.log("mousedown");
+  if (event.clientX > window.innerWidth / 2) {
+      nextImage();
+    } else {
+      prevImage();
+    };
+};
+
+function onTouchMove (event) {
+  screenX = event.changedTouches[0].screenX;
+  if (!touchLock && touchDragStartX == null) {
+    touchDragStartX = screenX;
+  };
+  touchDelta = Math.abs(touchDragStartX - screenX);
+  if (!touchLock && (touchDelta > touchDragThreshold)) {
+    touchDirection = touchDragStartX > screenX;
+    touchDragStartX = null;
+    touchLock = true;
+};
+};
+
+function onTouchEnd (event) {
+  touchLock = false;
+  touchDragStartX = null;
+  if (touchDirection == null) {
+    return;
+  };
+  if (touchDirection) {
+    nextImage();
+  } else {
+    prevImage();
+  };
+  touchDirection = null;
+};
+
+document.onkeydown = keyHandler;
+document.body.onclick = delGalleryHandler;
+galleryImage.addEventListener("mouseup", mouseUpHandler);
+galleryImage.addEventListener("touchmove", onTouchMove);
+galleryImage.addEventListener("touchend", onTouchEnd);
+galleryImage.addEventListener("touchstart", function (event) {
+  event.preventDefault();
+});

style.css

@@ -0,0 +1,284 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    font-family: sans-serif;
+    background-color: #B3C8CF;
+}
+
+.mainHeader {
+    background-image: url("/compressed/compressed_199.jpg");
+    background-repeat: none;
+    background-size: cover;
+    background-position: center center;
+    height: 7em;
+    border-bottom: 2px solid #000;
+}
+
+.title {
+    margin: 0px;
+    padding: 0px;
+    color: white;
+    text-shadow: 3px 3px black;
+    text-align: center;
+    font-size: 3em;
+    padding-top: 0.8em;
+    font-family: monospace;
+}
+
+h1, h3 { 
+    text-align: center;
+}
+
+/* in-album image browser */
+
+.galleryContainer {
+    display: none;
+    background-color: rgba(0, 0, 0 , 0.8);
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    margin: 0px;
+    padding: 0px;
+}
+
+.galleryImage {
+    display: block;
+    max-width: 100%;
+    max-height: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.toolbar {
+    padding: 6px;
+    text-align: center;
+}
+
+.toolbar > button {
+    color: white;
+    background-color: #222;
+    border: 2px solid #B3C8CF;
+    border-radius: 4px;
+}
+
+/* in-album page */
+
+.locationDisplay {
+    margin-top: 1em;
+    border-left: 0.2em solid black;
+    padding-left: 1em;
+}
+
+.locationTitle {
+    display: block;
+    font-size: 2em;
+    /* color: white;
+    text-shadow: 2px 2px black; */
+}
+
+.locationState {
+    display: block;
+    font-size: 1.5em;
+    margin-left: 1em;
+}
+
+.postBody {
+    color: #000;
+    font-size: 125%;
+    max-width: 1200px;
+    margin: auto;
+}
+
+p > a, p > a:visited {
+    color: #50593a;
+}
+
+p > a:hover {
+    color: #6f3763;
+}
+
+.allphotos > a {
+    text-decoration: none;
+}
+
+.headerImageContainer {
+    margin: auto;
+}
+
+.headerImage {
+    margin: 1em;
+    border-radius: 1em;
+    max-width: 500px;
+    rotate: -3deg;
+    box-shadow: 4px 4px 10px black;
+}
+
+.indexlink, .indexlink:visited {
+    font-size: 1.3em;
+    color: #007b88;
+}
+
+.indexlink:hover {
+    color: white
+}
+
+.photoCount {
+    text-align: center;
+}
+
+/* index photos */
+
+@keyframes scaleUp {
+    from {transform: scale(1);}
+    to {transform: scale(1.025);}
+}
+
+.tocText {
+    font-size: 1.3em;
+    text-decoration: underline;
+}
+
+.tocText:hover {
+    text-decoration: none;
+}
+
+.tocLink, .tocLink:visited {
+    font-size: 1em;
+    color: #007b88;
+    line-height: 2.6ex;
+    margin-left: 1em;
+}
+
+.tocLink:hover, .placeLink:hover {
+    color: #ffffff;
+    text-shadow: 1px 1px 1px #262219, 0 0 0.125em black;
+}
+
+.photolinks {
+    text-align: center;
+}
+
+.placeLink {
+    color: #FFF;
+    font-size: 145%;
+    text-shadow: 2px 2px #39464a;
+    text-decoration: underline;
+}
+
+.mainImgContainer {
+    position: relative;
+    margin: 0.75em;
+}
+
+.mainImgContainerTop {
+    box-sizing: border-box;
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    top: 0px;
+    background-color: rgba(15, 15, 15 , 0.7);
+    border-top-right-radius: 0.5em;
+    border-top-left-radius: 0.5em;
+    padding: 0.5em;
+}
+
+.mainImgContainerBottom {
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 15px;
+    left: 10px;
+    font-size: 125%;
+    color: white;
+    background-color: rgba(15, 15, 15 , 0.7);
+    border-radius: 0.5em;
+    padding: 0.4em;
+}
+
+.photolink > a > .mainImgContainer > img {
+    border-radius: 0.5em;
+    width: 100%;
+}
+
+.photolink > a > .mainImgContainer:hover {
+    transform: scale(1.025);
+    animation-name: scaleUp;
+    animation-duration: 0.5s;
+}
+
+@media only screen and (min-width: 650px) {
+    .mainBody {
+        max-width: 110em;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 1em;
+    }
+
+    .mainHeader {
+        margin: 1em;
+        border: 2px solid #000;
+        border-radius: 1em;
+    }
+
+    .photolinks {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    .allphotos {
+        text-align: center;
+    }
+
+    .allphotos > a > .preview {
+        margin: 0.5rem;
+        border-radius: 0.5em;
+    }
+}
+
+@media only screen and (min-width: 1400px) {
+    .photolinks {
+        grid-template-columns: 33% 33% 33%;
+    }
+
+    .placeLink {
+        font-size: 145%;
+    }
+}
+
+@media only screen and (max-width: 650px) {
+    .allphotos {
+        text-align: center;
+    }
+
+    .preview {
+        width: 31%;
+        height: 100%;
+        vertical-align: middle;
+        margin-bottom: 0.2em;
+        border-radius: 0.5em;
+    }
+
+    .placeLink {
+        font-size: 150%;
+    }
+
+    .mainBody {
+        margin-left: 1em;
+        margin-right: 1em;
+        padding-top: 1em;
+    }
+
+    .galleryImage {
+        position: relative;
+        top: 45%;
+        transform: translateY(-45%);
+    }
+
+    .headerImage {
+        max-width: 60%;
+    }
+
+    .placeLink {
+        font-size: 125%;
+    }
+}
+

templates/main

@@ -17,33 +17,34 @@
   <div class="mainBody">
     <div class="postBody">
       <p>
-        <h1>Work in progress!</h1>
+        <h1>Exploring America the Beautiful</h1>
-        This is going to be a photo blog. Right now its just a mess of undescribed photos.
+	This is an extensive collection of photos I have taken while traveling
-        A lot of photos have not been uploaded yet and work on CSS and choosing which images
+	across the United States. I have spent countless hours dedicated to
-        are included here are underway. Come back later to see more pictures, descriptive 
+	enjoying and capturing the natural wonders that surround us. These
-        content and better CSS.
+	photos and trips were made possible by the extensive efforts of
+	individuals across our nation, including people from state parks,
+	Bureau of Land Management, United States Forest Service, National Parks
+	Service, and more. I hope you enjoy these photos as much as I enjoyed
+	taking them.
       </p>
-      <h4>A collection of {{ total_count }} photos in {{ album_count }} albums.</h4>
+      <h3>A collection of {{ total_count }} photos in {{ album_count }} albums.</h3>
       <details class="toc">
         <summary class="tocText">Table of Contents</summary>
-        <br>
         {% for placename, info in metadata.items() %}
         <div class="tocEntry">
           <a class="tocLink" href="/{{ placename }}/">{{ info['title'] }}, {{ info['state'] }} [{{ info["count"] }}]</a>
         </div>
         {% endfor %}
-        <br>
       </details>
       <details class="toc">
         <summary class="tocText">Albums With Stories</summary>
-        <br>
         {% for placename in posts %}
         <div class="tocEntry">
           <a class="tocLink" href="/{{ placename }}">{{ metadata[placename]['title'] }}, {{ metadata[placename]['state'] }}</a>
         </div>
         {% endfor %}
-        <br>
       </details>
+      <p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
     </div>
     <br>
     <div class="photolinks">

templates/place

@@ -44,100 +44,12 @@
       </a>
       {% endfor %}
     </div>
+    <p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
   </div>
   <script>
-    viewState = null;
-    // jank here for getting photos during html templating
     photos = JSON.parse('{{ photos_json }}');
-    galleryContainer = document.getElementById("galleryContainer");
-    galleryImage = document.getElementById("galleryImage");
-    previewLinks = document.getElementsByClassName("previewLink");
-    headerImage = document.getElementById("headerImage");
-    
-    function enlargeImage (filename) {
-      viewState = photos.indexOf(filename);
-      galleryImage.fullRes = filename;
-      galleryImage.src = "/compressed/compressed_" + filename;
-      galleryContainer.style.display = "block";
-      headerImage.style.rotate = "none";
-    };
-
-    function delGallery () {
-      galleryContainer.style.display = "none";
-      galleryImage.src = "";
-      headerImage.style.rotate = "-3deg";
-    };
-
-    function nextImage () {
-      viewState++;
-      if (viewState == previewLinks.length) {
-        viewState = 0;  
-      };
-      galleryImage.fullRes = photos[viewState];
-      galleryImage.src = "/compressed/compressed_" + photos[viewState];
-    };
-
-    function prevImage () {
-      viewState--;
-      if (viewState == -1) {
-        viewState = previewLinks.length - 1;
-      };
-      galleryImage.fullRes = photos[viewState];
-      galleryImage.src = "/compressed/compressed_" + photos[viewState];
-    };
-
-    function imageNewTab () {
-      window.open(galleryImage.fullRes, "_blank")
-    };
-
-    function dragHandler (event) {
-
-    };
-
-    function keyHandler (event) {
-      if (event.key == "ArrowRight" | event.key == "Space") {
-        nextImage();
-      } else if (event.key == "ArrowLeft") {
-        prevImage();
-      } else if (event.key == "Escape" | event.key == "q") {
-        delGallery();
-      } 
-    };
-
-    function clickHandler (event) {
-      if (event.target.id == "galleryContainer") {
-        delGallery();
-      } else if (event.target.id == "galleryImage") {
-        if (event.clientX > window.innerWidth / 2) {
-          nextImage();
-        } else {
-          prevImage();
-        };
-      };
-    };
-
-    // last_pointerx = NaN
-    // function onDown (event) {
-    //   // console.log(event);
-    //   last_pointerx = event.x;
-    // };
-
-    // function onUp (event) {
-    //   if (event.x > last_pointerx) {
-
-    //   }
-    //   if (last_pointerx > event.x + 50) {
-    //     prevImage();
-    //   } else {
-    //     nextImage();
-    //   };
-    // };
-
-    document.onkeydown = keyHandler;
-    document.body.onclick = clickHandler;
-    // galleryImage.addEventListener("touchstart", onDown);
-    // galleryImage.addEventListener("touchend", onUp);
   </script>
+  <script src="/js/imgGallery.js"></script>
 </body>
 
 </html>