host photos.json on cloudflare r2

1 files changed, 73 insertions, 0 deletions

diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000..8071de9
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,73 @@
+---
+layout: default
+title: Photos
+---
+
+<input type="radio" name="layout" value="y-scroll" id="y-scroll" checked>
+<label for="y-scroll">
+  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>vertical scroll</title><path d="M55 0a5 5 0 0 1 5 5v31a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h50ZM55 47a5 5 0 0 1 5 5v8H0v-8a5 5 0 0 1 5-5h50Z" fill="#D9D9D9"/></svg>
+</label>
+<input type="radio" name="layout" value="x-scroll" id="x-scroll">
+<label for="x-scroll">
+  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>horizontal scroll</title><path d="M0 5a5 5 0 0 1 5-5h30a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5ZM47 5a5 5 0 0 1 5-5h8v60h-8a5 5 0 0 1-5-5V5Z" fill="#D9D9D9"/></svg>
+</label>
+<input type="radio" name="layout" value="grid2fr" id="grid2fr">
+<label for="grid2fr">
+  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>grid 2 columns</title><path d="M0 37c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H4c-2 0-4-2-4-4V37zM0 4c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H4c-2 0-4-2-4-4V4zM33 37c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H37c-2 0-4-2-4-4V37zM33 4c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H37c-2 0-4-2-4-4V4z" fill="#D9D9D9"/></svg>
+</label>
+<input type="radio" name="layout" value="grid3fr" id="grid3fr">
+<label for="grid3fr">
+  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>grid 3 columns</title><path d="M22 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4V4zM0 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4v-8zM22 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM0 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4v-8zM44 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM22 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM44 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM0 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4V4zM44 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4V4z" fill="#D9D9D9"/></svg>
+</label>
+
+<div class="photos-wrapper" id="photos">
+
+{% assign photos = site.data.photos %}
+{% for photo in photos %}
+<figure id="P{{ photo.guid }}">
+  <a href="{{ photo.path }}" class="image-link">
+    <img 
+      src="{{ photo.path }}"
+      height="{{ photo.height }}"
+      style="aspect-ratio: {{ photo.ratio }}"
+      alt="{{ photo.alt }}"
+      title="{{ photo.alt }}"
+      class="{{ photo.orientation }}"
+      loading="lazy">
+  </a>
+  <figcaption>
+    {{ photo.caption | strip | markdownify }}
+    <span class="desc photo-metadata">
+      {{ photo.createdAt | date: "%Y/%m/%d (%a)" }}
+    </span>
+  </figcaption>
+</figure>
+{% endfor %}
+
+</div>
+
+<script>
+  const photos = document.querySelector('#photos')
+  const xScroll = document.querySelector('#x-scroll')
+
+  // move scroll area into viewport and user focus
+  document.addEventListener('change', function(event) {
+    if (xScroll.checked) {
+      photos.scrollIntoView()
+      photos.setAttribute('tabindex', '-1')
+      photos.focus()
+
+      photos.addEventListener('blur', function() {
+        photos.blur()
+      }, {once: true})
+    }
+  })
+
+  // return focus
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape' && xScroll.checked && photos.contains(event.target)) {
+      xScroll.focus()
+      window.scrollTo(0, 0)
+    }
+  })
+</script>