yefeme 0.8.5 → 0.8.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 626185be9bed83f48402ae2ee070050a10747bcaf7873e189ac4137c3d35e3d3
-  data.tar.gz: fba5761afaa71d5d584c7954361b73c28d89198b5d843aee715b2d82580f3748
+  metadata.gz: 3c7317716ec9a0aebf898f16c054534d4d1600bdc9965e5c2876fdee545461ea
+  data.tar.gz: 43baa2e2347b94d9fe6cd6db04ce537faa7dfc2b8ac7074d99edf0cd6a4b4af2
 SHA512:
-  metadata.gz: f4306e011c6624393f37d15a981dbb182db2145d368a6a6ce3ea7f5c93ba6f9ba41be46e9d69d67b9d80fdd8ce7f912064bad377749add50341d3a3ba6367ce4
-  data.tar.gz: 22822ada310aca330d7495c24bd208cb87183b764e1ea393e43b890cc1ba675f3d4ba3dd13db015b57e2a103a57c09fb2dc53620a897d18b44e1584f92f1850b
+  metadata.gz: 398591c9a678dd1269ff117014dc7cfab2616cb66c7a09db706ebe4978365dfdb129a45201eaffcf55703edc94c12842b54c5f72298d948170c057cef8569816
+  data.tar.gz: c3364c44ad14960d18d85c64d6c7ee7bbc2734b83701295d7edb2ee7af6acf28788b9f9cee2e7d1aabf1d328c76e4f92ca6432ceb81d4a37a40ca7fe66477e58

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, horizontal swipe, and native pinch-to-zoom 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,194 @@
+<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: manipulation;
+      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;
+    }
+
+    .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%);
+      }
+    }
+
+    @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 {
+        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,211 @@
+(function () {
+  "use strict";
+
+  if (!window.customElements || window.customElements.get("shoot-lightbox")) return;
+
+  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;
+        image.addEventListener("click", (event) => event.stopPropagation());
+
+        slide.appendChild(image);
+        this.track.appendChild(slide);
+      });
+
+      this.slides = Array.from(this.track.querySelectorAll(".slide"));
+    }
+
+    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;
+      image.addEventListener("click", (event) => event.stopPropagation());
+
+      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");
+
+      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");
+    };
+  }
+
+  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.7
 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