yefeme 0.8.5 → 0.8.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 626185be9bed83f48402ae2ee070050a10747bcaf7873e189ac4137c3d35e3d3
-  data.tar.gz: fba5761afaa71d5d584c7954361b73c28d89198b5d843aee715b2d82580f3748
+  metadata.gz: a53d4e13b572c6fc98aa23ab01246954cb507ada25c039b2bbe23b411940f1e0
+  data.tar.gz: b0d9f04c159ffbb0461de0d3f7bc4c196d076b4e6306e617c853cc7793402878
 SHA512:
-  metadata.gz: f4306e011c6624393f37d15a981dbb182db2145d368a6a6ce3ea7f5c93ba6f9ba41be46e9d69d67b9d80fdd8ce7f912064bad377749add50341d3a3ba6367ce4
-  data.tar.gz: 22822ada310aca330d7495c24bd208cb87183b764e1ea393e43b890cc1ba675f3d4ba3dd13db015b57e2a103a57c09fb2dc53620a897d18b44e1584f92f1850b
+  metadata.gz: 452d2b3a08470c568cf4ac73bdd7c029fef5e44ff0f3526c0cc2d23d301e14e15e4772f9bf78f8d190d9e95882477b0f401a36bf25eff9a674af6323b124bcdf
+  data.tar.gz: edbda65379bb1406841d8bb83c951a59b3e28be7238befc54623000169cd14ab033572fbb1fd8fed43c3e69923f1c2b6db4fca983b819294281fa413541095a2

data/README.md

@@ -77,7 +77,7 @@ images:
 ---
 ```
 
-The theme decodes each BlurHash in the browser and displays it as an immediate placeholder behind the full thumbnail. Scalar image IDs remain supported for existing sites, but do not provide intrinsic sizing or placeholder information.
+The theme decodes each BlurHash in the browser and displays it as an immediate placeholder behind the full thumbnail. Selecting a thumbnail opens the shoot in a full-screen lightbox with button, keyboard, and swipe navigation. Scalar image IDs remain supported for existing sites, but do not provide intrinsic sizing or placeholder information.
 
 ## Contributing
 
@@ -89,11 +89,11 @@ To set up your environment to develop this theme, run `bundle install`.
 
 Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
-When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
+Gem releases are built from a clean checkout and include the tracked theme layouts, includes, Sass, and browser assets selected by `yefeme.gemspec`. The release workflow verifies the package and rejects site content from `_posts` or `_shoots`.
 
 ## Releasing
 
-Gem releases are published by GitHub Actions using RubyGems Trusted Publishing.
+Gem releases are published by the [`Release gem`](.github/workflows/release.yml) GitHub Actions workflow using RubyGems Trusted Publishing. Publishing uses short-lived credentials, so the repository does not need a `RUBYGEMS_API_KEY` secret.
 
 1. Update the version in `yefeme.gemspec` and merge the change to `master`.
 2. Create and push the matching version tag, for example:
@@ -103,9 +103,9 @@ Gem releases are published by GitHub Actions using RubyGems Trusted Publishing.
    git push origin v0.8.5
    ```
 
-The release workflow verifies that the tag matches the gemspec, builds and inspects the package from a clean checkout, publishes it to RubyGems, and waits for the release to propagate.
+The release workflow verifies that the tag matches the gemspec, builds and inspects the package from a clean checkout, publishes it to RubyGems, and waits until the release is available from RubyGems indexes.
 
-Before the first automated release, configure `yefim/yefeme` as a trusted publisher for the `yefeme` gem on RubyGems.org. Use `release.yml` as the workflow filename and `release` as the GitHub environment. The environment can require approval to retain a human release gate.
+Trusted Publishing is configured for `yefim/yefeme`, the `release.yml` workflow, and the `release` GitHub environment. Configure required reviewers on that environment if releases should retain a manual approval gate.
 
 ## License
 

data/_includes/light-box.html

@@ -0,0 +1,208 @@
+<template id="shoot-lightbox-template">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .modal {
+      align-items: flex-end;
+      background: #fff;
+      display: flex;
+      gap: 1rem;
+      height: 100%;
+      inset: 0;
+      justify-content: center;
+      padding: 1rem;
+      position: fixed;
+      transition: opacity 0.25s, visibility 0.25s;
+      width: 100%;
+      z-index: 1000;
+    }
+
+    .modal.hidden {
+      opacity: 0;
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    button {
+      align-items: center;
+      background: #999;
+      border: 0;
+      border-radius: 50%;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      height: 2rem;
+      justify-content: center;
+      padding: 0;
+      position: relative;
+      width: 2rem;
+      z-index: 2;
+    }
+
+    button svg {
+      display: block;
+      fill: none;
+      height: 1.125rem;
+      shape-rendering: geometricPrecision;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 2.25;
+      width: 1.125rem;
+    }
+
+    button:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 3px;
+    }
+
+    button[disabled] {
+      background: #eee;
+      cursor: default;
+    }
+
+    .close {
+      position: absolute;
+      right: max(1rem, env(safe-area-inset-right));
+      top: max(1rem, env(safe-area-inset-top));
+    }
+
+    .track {
+      display: flex;
+      height: 100%;
+      inset: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      position: absolute;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+      width: 100%;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .track::-webkit-scrollbar {
+      display: none;
+    }
+
+    .slide {
+      align-items: center;
+      display: flex;
+      flex: 0 0 100%;
+      justify-content: center;
+      position: relative;
+      scroll-snap-align: center;
+    }
+
+    .slide img {
+      height: auto;
+      left: 50%;
+      max-height: calc(100vh - 5rem);
+      max-height: calc(100dvh - 5rem);
+      max-width: 98vw;
+      max-width: 98dvw;
+      object-fit: contain;
+      opacity: var(--resolution-opacity, 1);
+      position: absolute;
+      top: 50%;
+      touch-action: pan-x;
+      transform: translate(-50%, calc(-50% - 1.5rem));
+      transition: opacity 0.3s ease;
+      user-select: none;
+      width: auto;
+      -webkit-user-drag: none;
+    }
+
+    .slide img.high-resolution {
+      --resolution-opacity: 0;
+    }
+
+    .slide img.high-resolution.loaded {
+      --resolution-opacity: 1;
+    }
+
+    .slide img.dragging {
+      opacity: calc(var(--resolution-opacity, 1) * var(--drag-opacity, 1));
+      transform: translate(-50%, calc(-50% - 1.5rem)) translateY(var(--drag-y, 0));
+      transition: none;
+    }
+
+    .slide img.dismissing {
+      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    }
+
+    .status {
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+
+    @media (orientation: landscape) {
+      .modal {
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .slide img {
+        max-height: 98vh;
+        max-height: 98dvh;
+        max-width: calc(98vw - 6rem);
+        max-width: calc(98dvw - 6rem);
+        transform: translate(-50%, -50%);
+      }
+
+      .slide img.dragging {
+        transform: translate(-50%, -50%) translateY(var(--drag-y, 0));
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .modal {
+        background: #000;
+      }
+
+      button {
+        background: #666;
+      }
+
+      button[disabled] {
+        background: #333;
+        color: #000;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .modal,
+      .slide img.dismissing {
+        transition: none;
+      }
+    }
+  </style>
+
+  <div class="modal hidden" role="dialog" aria-label="Photo viewer" aria-hidden="true" tabindex="-1">
+    <div class="track"></div>
+    <button class="previous" type="button" aria-label="Previous photo">
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path d="M15 18l-6-6 6-6"></path>
+      </svg>
+    </button>
+    <button class="next" type="button" aria-label="Next photo">
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path d="M9 6l6 6-6 6"></path>
+      </svg>
+    </button>
+    <button class="close" type="button" aria-label="Close photo viewer">
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path d="M6 6l12 12M18 6L6 18"></path>
+      </svg>
+    </button>
+    <p class="status" aria-live="polite"></p>
+  </div>
+</template>
+
+<shoot-lightbox></shoot-lightbox>

data/_layouts/shoot.html

@@ -10,7 +10,7 @@ layout: entry
     {% for image in page.images %}
       {% assign image_id = image["id"] | default: image %}
       {% assign base = "https://imagedelivery.net/" | append: site.cf_images_account_hash | append: "/" | append: image_id | append: "/" %}
-      <a class="tile" href="{{ base }}{{ xl }}" target="_blank" rel="noopener">
+      <a class="tile" href="{{ base }}{{ xl }}">
         <img
           src="{{ base }}{{ thumb }}"
           {% if image["width"] and image["height"] %}
@@ -28,3 +28,6 @@ layout: entry
     {% endfor %}
   </div>
 </main>
+
+{% include light-box.html %}
+<script defer src="{{ "/assets/lightbox.js" | relative_url }}"></script>

data/_sass/yefeme.scss

@@ -24,6 +24,11 @@ body {
   font-family: "Libre Baskerville", serif;
 }
 
+html.lightbox-open,
+html.lightbox-open body {
+  overflow: hidden;
+}
+
 li,
 ol,
 ul {
@@ -367,6 +372,7 @@ article {
     background: #f6f6f6;
     border-radius: 8px;
     break-inside: avoid;
+    cursor: zoom-in;
     display: block;
     margin-bottom: 12px;
     overflow: hidden;

data/assets/lightbox.js

@@ -0,0 +1,305 @@
+(function () {
+  "use strict";
+
+  if (!window.customElements || window.customElements.get("shoot-lightbox")) return;
+
+  var VERTICAL_DRAG_DISTANCE = 10;
+
+  function getImage(photo) {
+    return photo.querySelector("img");
+  }
+
+  class ShootLightbox extends HTMLElement {
+    constructor() {
+      super();
+
+      var template = document.getElementById("shoot-lightbox-template");
+      if (!template) return;
+
+      this.attachShadow({ mode: "open" });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    connectedCallback() {
+      if (!this.shadowRoot) return;
+
+      this.photos = Array.from(document.querySelectorAll(".portfolio-day .tile"));
+      if (!this.photos.length) return;
+
+      this.currentPhoto = 0;
+      this.modal = this.shadowRoot.querySelector(".modal");
+      this.track = this.shadowRoot.querySelector(".track");
+      this.previousButton = this.shadowRoot.querySelector(".previous");
+      this.nextButton = this.shadowRoot.querySelector(".next");
+      this.closeButton = this.shadowRoot.querySelector(".close");
+      this.status = this.shadowRoot.querySelector(".status");
+
+      this.buildSlides();
+      this.bindEvents();
+      this.updateControls();
+    }
+
+    buildSlides() {
+      this.photos.forEach((photo) => {
+        var sourceImage = getImage(photo);
+        if (!sourceImage) return;
+
+        var slide = document.createElement("div");
+        var image = sourceImage.cloneNode(true);
+
+        slide.className = "slide";
+        image.loading = "eager";
+        image.decoding = "async";
+        image.draggable = false;
+        this.bindImageEvents(image);
+
+        slide.appendChild(image);
+        this.track.appendChild(slide);
+      });
+
+      this.slides = Array.from(this.track.querySelectorAll(".slide"));
+    }
+
+    bindImageEvents(image) {
+      image.addEventListener("click", (event) => event.stopPropagation());
+      image.addEventListener("touchstart", this.startTouch, { passive: true });
+      image.addEventListener("touchmove", this.dragVertically, { passive: false });
+      image.addEventListener("touchend", this.endTouch);
+      image.addEventListener("touchcancel", this.resetGesture);
+    }
+
+    loadHighResolutionImage(slide, photo) {
+      if (!slide || !photo.href || slide.dataset.highResolutionRequested) return;
+
+      var preview = slide.querySelector("img");
+      if (!preview) return;
+
+      slide.dataset.highResolutionRequested = "true";
+
+      var image = preview.cloneNode(true);
+      var revealed = false;
+
+      image.classList.remove("blurhash-loaded");
+      image.classList.add("high-resolution");
+      image.removeAttribute("data-blurhash");
+      image.removeAttribute("style");
+      image.removeAttribute("srcset");
+      image.removeAttribute("sizes");
+      image.setAttribute("alt", "");
+      image.setAttribute("aria-hidden", "true");
+      image.loading = "eager";
+      image.decoding = "async";
+      image.draggable = false;
+      this.bindImageEvents(image);
+
+      var reveal = () => {
+        if (revealed) return;
+        revealed = true;
+
+        var decoded = typeof image.decode === "function" ? image.decode().catch(() => {}) : Promise.resolve();
+        decoded.then(() => {
+          window.requestAnimationFrame(() => image.classList.add("loaded"));
+        });
+      };
+
+      image.addEventListener("load", reveal, { once: true });
+      image.addEventListener("error", () => {
+        delete slide.dataset.highResolutionRequested;
+        image.remove();
+      }, { once: true });
+
+      slide.appendChild(image);
+      image.src = photo.href;
+      if (image.complete && image.naturalWidth) reveal();
+    }
+
+    bindEvents() {
+      this.photos.forEach((photo, index) => {
+        photo.addEventListener("click", (event) => this.open(event, index));
+      });
+
+      this.previousButton.addEventListener("click", this.previous);
+      this.nextButton.addEventListener("click", this.next);
+      this.closeButton.addEventListener("click", this.close);
+      this.modal.addEventListener("click", this.close);
+      this.track.addEventListener("scroll", this.onScroll, { passive: true });
+      document.addEventListener("keydown", this.onKeydown);
+      window.addEventListener("resize", this.onResize, { passive: true });
+    }
+
+    open(event, index) {
+      event.preventDefault();
+
+      this.previouslyFocused = document.activeElement;
+      this.updateCurrentPhoto(index, "auto");
+      this.modal.classList.remove("hidden");
+      this.modal.setAttribute("aria-hidden", "false");
+      document.documentElement.classList.add("lightbox-open");
+      this.loadHighResolutionImage(this.slides[this.currentPhoto], this.photos[this.currentPhoto]);
+      this.modal.focus({ preventScroll: true });
+    }
+
+    close = (event) => {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      if (this.modal.classList.contains("hidden")) return;
+
+      this.modal.classList.add("hidden");
+      this.modal.setAttribute("aria-hidden", "true");
+      document.documentElement.classList.remove("lightbox-open");
+      this.resetGesture();
+
+      if (this.previouslyFocused) this.previouslyFocused.focus({ preventScroll: true });
+    };
+
+    next = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!this.isLastPhoto()) this.updateCurrentPhoto(this.currentPhoto + 1);
+    };
+
+    previous = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!this.isFirstPhoto()) this.updateCurrentPhoto(this.currentPhoto - 1);
+    };
+
+    isFirstPhoto() {
+      return this.currentPhoto <= 0;
+    }
+
+    isLastPhoto() {
+      return this.currentPhoto >= this.photos.length - 1;
+    }
+
+    updateCurrentPhoto(index, behavior) {
+      this.currentPhoto = Math.max(0, Math.min(this.photos.length - 1, index));
+      this.track.scrollTo({
+        left: this.currentPhoto * this.track.clientWidth,
+        behavior: behavior || "smooth"
+      });
+      this.updateControls();
+      this.loadHighResolutionImage(this.slides[this.currentPhoto], this.photos[this.currentPhoto]);
+    }
+
+    updateControls() {
+      this.previousButton.disabled = this.isFirstPhoto();
+      this.nextButton.disabled = this.isLastPhoto();
+      this.status.textContent = "Photo " + (this.currentPhoto + 1) + " of " + this.photos.length;
+    }
+
+    onKeydown = (event) => {
+      if (this.modal.classList.contains("hidden")) return;
+
+      if (event.key === "ArrowLeft") this.previous(event);
+      if (event.key === "ArrowRight") this.next(event);
+      if (event.key === "Escape") this.close(event);
+    };
+
+    onScroll = () => {
+      window.clearTimeout(this.scrollSyncTimeout);
+      this.scrollSyncTimeout = window.setTimeout(() => {
+        var width = this.track.clientWidth || window.innerWidth;
+        this.currentPhoto = Math.max(
+          0,
+          Math.min(this.photos.length - 1, Math.round(this.track.scrollLeft / width))
+        );
+        this.updateControls();
+        this.loadHighResolutionImage(this.slides[this.currentPhoto], this.photos[this.currentPhoto]);
+      }, 100);
+    };
+
+    onResize = () => {
+      if (this.modal.classList.contains("hidden")) return;
+      this.updateCurrentPhoto(this.currentPhoto, "auto");
+    };
+
+    startTouch = (event) => {
+      if (event.touches.length !== 1) return;
+
+      this.touchStartX = event.touches[0].clientX;
+      this.touchStartY = event.touches[0].clientY;
+      this.gestureDirection = "undecided";
+    };
+
+    dragVertically = (event) => {
+      if (event.touches.length !== 1 || this.gestureDirection === "horizontal") return;
+
+      var deltaX = Math.abs(event.touches[0].clientX - this.touchStartX);
+      var deltaY = Math.abs(event.touches[0].clientY - this.touchStartY);
+
+      if (this.gestureDirection === "undecided") {
+        if (deltaX < VERTICAL_DRAG_DISTANCE && deltaY < VERTICAL_DRAG_DISTANCE) return;
+        this.gestureDirection = deltaX > deltaY ? "horizontal" : "vertical";
+      }
+
+      if (this.gestureDirection !== "vertical") return;
+
+      event.preventDefault();
+      this.track.style.scrollSnapType = "none";
+      this.track.style.overflowX = "hidden";
+      this.applyVerticalDrag(event.touches[0].clientY - this.touchStartY);
+    };
+
+    applyVerticalDrag(distance) {
+      var images = this.currentImages();
+      if (!images.length) return;
+
+      var maxDrag = window.innerHeight * 0.5;
+      var opacity = Math.max(0, Math.min(1, 1 - Math.abs(distance) / maxDrag));
+
+      images.forEach((image) => {
+        image.classList.add("dragging");
+        image.style.setProperty("--drag-y", distance + "px");
+        image.style.setProperty("--drag-opacity", opacity);
+      });
+    }
+
+    endTouch = (event) => {
+      if (this.gestureDirection !== "vertical") return;
+
+      var distance = event.changedTouches[0].clientY - this.touchStartY;
+      var dismissDistance = Math.min(window.innerHeight * 0.3, 150);
+
+      if (Math.abs(distance) < dismissDistance) {
+        this.resetGesture();
+        return;
+      }
+
+      var images = this.currentImages();
+      if (!images.length) return;
+
+      images.forEach((image) => {
+        image.classList.add("dismissing");
+        image.style.setProperty("--drag-y", (distance > 0 ? distance + 200 : distance - 200) + "px");
+        image.style.setProperty("--drag-opacity", "0");
+      });
+      window.setTimeout(() => this.close(), 200);
+    };
+
+    currentImages() {
+      var slide = this.slides && this.slides[this.currentPhoto];
+      return slide ? Array.from(slide.querySelectorAll("img")) : [];
+    }
+
+    resetGesture = () => {
+      this.currentImages().forEach((image) => {
+        image.classList.remove("dragging", "dismissing");
+        image.style.removeProperty("--drag-y");
+        image.style.removeProperty("--drag-opacity");
+      });
+
+      if (this.track) {
+        this.track.style.removeProperty("scroll-snap-type");
+        this.track.style.removeProperty("overflow-x");
+      }
+
+      this.gestureDirection = "undecided";
+    };
+  }
+
+  window.customElements.define("shoot-lightbox", ShootLightbox);
+}());

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: yefeme
 version: !ruby/object:Gem::Version
-  version: 0.8.5
+  version: 0.8.6
 platform: ruby
 authors:
 - Yefim Vedernikoff
@@ -36,6 +36,7 @@ files:
 - _includes/email.svg
 - _includes/github.svg
 - _includes/head.html
+- _includes/light-box.html
 - _includes/logo.svg
 - _includes/twitter.svg
 - _layouts/default.html
@@ -46,6 +47,7 @@ files:
 - _sass/highlight.scss
 - _sass/yefeme.scss
 - assets/blurhash.js
+- assets/lightbox.js
 - assets/main.scss
 - index.md
 homepage: https://github.com/yefim/yefeme