diff options
| -rwxr-xr-x | build-and-deploy.sh | 19 | ||||
| -rw-r--r-- | captions.json | 3 | ||||
| -rw-r--r-- | images.json | 3 | ||||
| -rw-r--r-- | index.html | 125 | ||||
| -rw-r--r-- | photos-original/20231003_071927.jpg | bin | 0 -> 2920034 bytes | |||
| -rw-r--r-- | photos/20231003_071927.jpg | bin | 0 -> 142230 bytes |
6 files changed, 150 insertions, 0 deletions
diff --git a/build-and-deploy.sh b/build-and-deploy.sh new file mode 100755 index 0000000..b304213 --- /dev/null +++ b/build-and-deploy.sh @@ -0,0 +1,19 @@ +#!/bin/bash + +build () { + for i in $(comm -13 <(ls photos) <(ls photos-original)) ; do + convert "photos-original/$i" -resize 480x480 "photos/$i" + exiftool -q -q -overwrite_original -Software= -gps:all= -camera:all= "photos/$i" + chmod 644 "photos/$i" + done + + ls photos \ + | sort -r \ + | sed 's~.*~ { "path": "photos/&" },~ ; 1i [ + ; $s/,$//;$a ]' \ + > images.json +} + +build + +rsync --recursive --delete --exclude='*original*' captions.json images.json index.html photos sync_root:/www-public/photos/ diff --git a/captions.json b/captions.json new file mode 100644 index 0000000..273ad3e --- /dev/null +++ b/captions.json @@ -0,0 +1,3 @@ +{ + "photos/20231003_071927.jpg": "SomeCaption" +} diff --git a/images.json b/images.json new file mode 100644 index 0000000..bd8eda0 --- /dev/null +++ b/images.json @@ -0,0 +1,3 @@ +[ + { "path": "photos/20231003_071927.jpg" } +] diff --git a/index.html b/index.html new file mode 100644 index 0000000..4e776f5 --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> + <head> + <title>danrh</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <style> + body { + font-family: sans-serif; + background-color: #fdfded; + margin: 2em auto; + max-width: 97vw; + color: #1a1a1a; + } + h1 { + font-family: Georgia, serif; + display: flex; + justify-content: center; + } + em { + display: flex; + justify-content: center; + } + .image-container { + margin: 2px; + width: min(480px,95vw); + height: min(480px,95vw); + border-radius: 10px; + overflow: hidden; + } + .image-container-inner { + border-radius: 10px; + width: 100%; + position: relative; + padding-top: 100%; + background: black; + overflow: hidden; + } + .image-container-inner img { + position: absolute; + top: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left:50%; + } + img { + max-width: 100%; + max-height: 100%; + } + #root { + display: flex; + justify-content: center; + } + #imageroot { + + } + @media only screen and (min-width: 500px) { + body { + width: 500px; + } + } + @media only screen and (min-width: 1000px) { + body { + width: 1000px; + } + } + @media only screen and (min-width: 1500px) { + body { + width: 1500px; + } + } + @media only screen and (min-width: 2000px) { + body { + width: 2000px; + } + } + .image-caption { + position: relative; + top: -10%; + display: flex; + justify-content: space-between; + color: #fdfded; + background: #000a; + padding: 0 1em; + font-size: 0.9em; + } + .image-caption span { + padding: 0.4em; + } + </style> + </head> + <body> + <h1>Some Photos</h1> + <em>That I either took or am a subject of.</em> + <div id="root"></div> + </body> +<script> +const $ = innerHTML => Object.assign(document.createElement('div'), { innerHTML:innerHTML||'<div></div>' }).firstChild; + +Promise.all([ + fetch("images.json").then(r => r.json()), + fetch("captions.json").then(r => r.json()) +]) + .then(([images, captions]) => { + root.appendChild($(`<div id="imageroot"></div>`)); + images.forEach(({path}) => { + const caption = captions[path] || ''; + const date = new Date(path.replace(/.*\/(\d{4})(\d{2})(\d{2}).*/,"$1-$2-$3T23:59:59.000Z")).toDateString(); + const imgBox = $(`<div class="image-container" style="float:left;"></div>`); + const imgBoxOuter = $(`<div class="image-container-inner">`) + imgBox.appendChild(imgBoxOuter); + imgBoxOuter.appendChild($( + `<img loading="lazy" src="${path}">` + )); + imgBox.appendChild($( + `<div class="image-caption"> + <span style="visibility: ${caption ? "visible" : "hidden"};">${caption}</span> + <span>${date}</span> + </div>` + )); + imageroot.appendChild(imgBox); + }); + }); + +</script> +</html> diff --git a/photos-original/20231003_071927.jpg b/photos-original/20231003_071927.jpg Binary files differnew file mode 100644 index 0000000..1b9fa0c --- /dev/null +++ b/photos-original/20231003_071927.jpg diff --git a/photos/20231003_071927.jpg b/photos/20231003_071927.jpg Binary files differnew file mode 100644 index 0000000..271c8f5 --- /dev/null +++ b/photos/20231003_071927.jpg |
