hexo-theme-gnix 9.0.0 → 10.0.0

package/source/js/components/image-carousel.js

@@ -11,12 +11,17 @@
  * Attributes:
  * - autoplay: Enable automatic slide advancement
  * - interval: Autoplay interval in ms (default: 3000)
- * - ratio: Aspect ratio as CSS value (default: 3/2)
+ * - ratio: Aspect ratio as CSS value (default: derived from first image,
+ *   falls back to 3/2 while loading or if dimensions are unknown)
  */
 
 // Shared stylesheet — parsed once, reused across all carousel instances
 let _sheet;
 
+const DEFAULT_INTERVAL = 3000;
+const FALLBACK_RATIO = "3 / 2";
+const SWIPE_THRESHOLD_PX = 40;
+
 const STYLES = `
   :host {
     display: block;
@@ -43,7 +48,7 @@ const STYLES = `
   .slides {
     position: relative;
     width: 100%;
-    aspect-ratio: var(--carousel-ratio, 3/2);
+    aspect-ratio: var(--carousel-ratio, 3 / 2);
   }
 
   .slide {
@@ -174,6 +179,9 @@ const STYLES = `
   }
 `;
 
+const CHEVRON_LEFT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>`;
+const CHEVRON_RIGHT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>`;
+
 class ImageCarousel extends HTMLElement {
   constructor() {
     super();
@@ -188,19 +196,21 @@ class ImageCarousel extends HTMLElement {
     this._isVisible = true;
     this._handleVisibility = () => {
       if (document.hidden) this._stopAutoplay();
-      else if (this._isVisible && this.hasAttribute("autoplay")) this._startAutoplay();
+      else if (this._isVisible) this._maybeStartAutoplay();
     };
   }
 
   connectedCallback() {
     this._images = this._collectImages();
-    this.render();
+    if (!this._images.length) return;
+
+    this._resolveRatio();
+    this._render();
+
     if (this._images.length > 1) {
       this._setupListeners();
       this._observeVisibility();
-    }
-    if (this.hasAttribute("autoplay") && this._images.length > 1) {
-      this._startAutoplay();
+      this._maybeStartAutoplay();
     }
   }
 
@@ -210,6 +220,23 @@ class ImageCarousel extends HTMLElement {
     document.removeEventListener("visibilitychange", this._handleVisibility);
   }
 
+  static get observedAttributes() {
+    return ["autoplay", "interval", "ratio"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this._images.length) return;
+    if (name === "autoplay") {
+      newValue !== null ? this._startAutoplay() : this._stopAutoplay();
+    } else if (name === "interval" && this._timer) {
+      this._startAutoplay();
+    } else if (name === "ratio") {
+      this._resolveRatio();
+    }
+  }
+
+  // ─── content & layout ──────────────────────────────────────────────
+
   _collectImages() {
     return Array.from(this.querySelectorAll("img")).map((img) => ({
       src: img.src || img.getAttribute("src"),
@@ -218,57 +245,53 @@ class ImageCarousel extends HTMLElement {
     }));
   }
 
-  _getInterval() {
-    return parseInt(this.getAttribute("interval") || "3000", 10);
-  }
-
-  _startAutoplay() {
-    this._stopAutoplay();
-    this._timer = setInterval(() => {
-      this._goTo((this._currentIndex + 1) % this._images.length);
-    }, this._getInterval());
-  }
-
-  _stopAutoplay() {
-    if (this._timer) {
-      clearInterval(this._timer);
-      this._timer = null;
+  /**
+   * Resolve the carousel aspect ratio.
+   * Priority: explicit `ratio` attribute → first image's natural
+   * dimensions → fallback constant. The first image is probed via a
+   * detached Image() if the light-DOM <img> hasn't loaded yet.
+   */
+  _resolveRatio() {
+    const explicit = this.getAttribute("ratio");
+    if (explicit) {
+      this.style.setProperty("--carousel-ratio", explicit);
+      return;
     }
-  }
 
-  _goTo(index) {
-    const prev = this._currentIndex;
-    this._currentIndex = index;
-    this._toggleSlide(prev, false);
-    this._toggleSlide(index, true);
-  }
+    // Set fallback first so the stage has dimensions while we wait.
+    this.style.setProperty("--carousel-ratio", FALLBACK_RATIO);
 
-  _toggleSlide(i, active) {
-    this._slides[i]?.classList.toggle("active", active);
-    const dot = this._dots[i];
-    if (dot) {
-      dot.classList.toggle("active", active);
-      dot.setAttribute("aria-selected", String(active));
-    }
-  }
+    const first = this._images[0];
+    if (!first?.src) return;
 
-  render() {
-    const images = this._images;
-    const ratio = this.getAttribute("ratio") || "3/2";
+    const apply = (w, h) => {
+      if (w && h) this.style.setProperty("--carousel-ratio", `${w} / ${h}`);
+    };
 
-    if (images.length === 0) {
-      this.shadowRoot.innerHTML = "";
+    // Reuse the light-DOM <img> if it's already decoded — avoids a
+    // second network request when the browser cached the image.
+    const lightImg = this.querySelector("img");
+    if (lightImg?.complete && lightImg.naturalWidth) {
+      apply(lightImg.naturalWidth, lightImg.naturalHeight);
       return;
     }
 
+    const probe = new Image();
+    probe.onload = () => apply(probe.naturalWidth, probe.naturalHeight);
+    if (first.srcset) probe.srcset = first.srcset;
+    probe.src = first.src;
+  }
+
+  _render() {
     if (!_sheet) {
       _sheet = new CSSStyleSheet();
       _sheet.replaceSync(STYLES);
     }
     this.shadowRoot.adoptedStyleSheets = [_sheet];
-    this.style.setProperty("--carousel-ratio", ratio);
 
-    const slidesHTML = images
+    const multiSlide = this._images.length > 1;
+
+    const slidesHTML = this._images
       .map(
         (img, i) => `
       <div class="slide${i === 0 ? " active" : ""}" role="tabpanel" aria-label="${img.alt || `Slide ${i + 1}`}">
@@ -281,18 +304,21 @@ class ImageCarousel extends HTMLElement {
       )
       .join("");
 
-    const navHTML =
-      images.length > 1
-        ? `<button class="nav prev" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg></button>
-           <button class="nav next" aria-label="Next slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg></button>`
-        : "";
-
-    const dotsHTML =
-      images.length > 1
-        ? `<div class="dots" role="tablist" aria-label="Slide navigation">
-        ${images.map((_img, i) => `<button class="dot${i === 0 ? " active" : ""}" data-index="${i}" role="tab" aria-label="Slide ${i + 1}" aria-selected="${i === 0}"></button>`).join("")}
-      </div>`
-        : "";
+    const navHTML = multiSlide
+      ? `<button class="nav prev" aria-label="Previous slide">${CHEVRON_LEFT}</button>
+         <button class="nav next" aria-label="Next slide">${CHEVRON_RIGHT}</button>`
+      : "";
+
+    const dotsHTML = multiSlide
+      ? `<div class="dots" role="tablist" aria-label="Slide navigation">
+          ${this._images
+            .map(
+              (_img, i) =>
+                `<button class="dot${i === 0 ? " active" : ""}" data-index="${i}" role="tab" aria-label="Slide ${i + 1}" aria-selected="${i === 0}"></button>`,
+            )
+            .join("")}
+        </div>`
+      : "";
 
     this.shadowRoot.innerHTML = `
       <div class="carousel" role="region" aria-label="Image carousel" tabindex="0">
@@ -309,46 +335,89 @@ class ImageCarousel extends HTMLElement {
     this._dots = Array.from(this.shadowRoot.querySelectorAll(".dot"));
   }
 
+  // ─── navigation ────────────────────────────────────────────────────
+
+  _next() {
+    this._goTo((this._currentIndex + 1) % this._images.length);
+  }
+
+  _prev() {
+    const n = this._images.length;
+    this._goTo((this._currentIndex - 1 + n) % n);
+  }
+
+  _goTo(index) {
+    const prev = this._currentIndex;
+    if (prev === index) return;
+    this._currentIndex = index;
+    this._toggleSlide(prev, false);
+    this._toggleSlide(index, true);
+  }
+
+  _toggleSlide(i, active) {
+    this._slides[i]?.classList.toggle("active", active);
+    const dot = this._dots[i];
+    if (dot) {
+      dot.classList.toggle("active", active);
+      dot.setAttribute("aria-selected", String(active));
+    }
+  }
+
+  /** User triggered a navigation — restart the autoplay clock so the
+   *  next auto-advance doesn't fire immediately after their action. */
+  _userNav(direction) {
+    direction === "next" ? this._next() : this._prev();
+    this._maybeStartAutoplay();
+  }
+
+  // ─── autoplay ──────────────────────────────────────────────────────
+
+  _maybeStartAutoplay() {
+    if (this.hasAttribute("autoplay") && this._images.length > 1) {
+      this._startAutoplay();
+    }
+  }
+
+  _startAutoplay() {
+    this._stopAutoplay();
+    const interval = parseInt(this.getAttribute("interval") || "", 10) || DEFAULT_INTERVAL;
+    this._timer = setInterval(() => this._next(), interval);
+  }
+
+  _stopAutoplay() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
+
+  // ─── listeners ─────────────────────────────────────────────────────
+
   _setupListeners() {
     const root = this.shadowRoot;
     const carousel = root.querySelector(".carousel");
-    const n = this._images.length;
-
-    root.querySelector(".prev")?.addEventListener("click", () => {
-      this._resetAutoplay();
-      this._goTo((this._currentIndex - 1 + n) % n);
-    });
 
-    root.querySelector(".next")?.addEventListener("click", () => {
-      this._resetAutoplay();
-      this._goTo((this._currentIndex + 1) % n);
-    });
+    root.querySelector(".prev")?.addEventListener("click", () => this._userNav("prev"));
+    root.querySelector(".next")?.addEventListener("click", () => this._userNav("next"));
 
     root.querySelector(".dots")?.addEventListener("click", (e) => {
       const dot = e.target.closest(".dot");
       if (!dot) return;
-      this._resetAutoplay();
       this._goTo(parseInt(dot.dataset.index, 10));
+      this._maybeStartAutoplay();
     });
 
-    // Pause autoplay on hover
+    // Pause autoplay while the cursor sits on the carousel
     carousel.addEventListener("mouseenter", () => this._stopAutoplay());
-    carousel.addEventListener("mouseleave", () => {
-      if (this.hasAttribute("autoplay")) this._startAutoplay();
-    });
+    carousel.addEventListener("mouseleave", () => this._maybeStartAutoplay());
 
     // Keyboard navigation
     carousel.addEventListener("keydown", (e) => {
-      if (e.key === "ArrowLeft") {
-        this._resetAutoplay();
-        this._goTo((this._currentIndex - 1 + n) % n);
-      } else if (e.key === "ArrowRight") {
-        this._resetAutoplay();
-        this._goTo((this._currentIndex + 1) % n);
-      }
+      if (e.key === "ArrowLeft") this._userNav("prev");
+      else if (e.key === "ArrowRight") this._userNav("next");
     });
 
-    // Touch/swipe support
+    // Touch / swipe
     carousel.addEventListener(
       "touchstart",
       (e) => {
@@ -361,9 +430,8 @@ class ImageCarousel extends HTMLElement {
       "touchend",
       (e) => {
         const dx = e.changedTouches[0].clientX - this._touchStartX;
-        if (Math.abs(dx) > 40) {
-          this._resetAutoplay();
-          this._goTo(dx < 0 ? (this._currentIndex + 1) % n : (this._currentIndex - 1 + n) % n);
+        if (Math.abs(dx) > SWIPE_THRESHOLD_PX) {
+          this._userNav(dx < 0 ? "next" : "prev");
         }
       },
       { passive: true },
@@ -373,36 +441,12 @@ class ImageCarousel extends HTMLElement {
   _observeVisibility() {
     this._observer = new IntersectionObserver(([entry]) => {
       this._isVisible = entry.isIntersecting;
-      if (!entry.isIntersecting) {
-        this._stopAutoplay();
-      } else if (this.hasAttribute("autoplay")) {
-        this._startAutoplay();
-      }
+      if (entry.isIntersecting) this._maybeStartAutoplay();
+      else this._stopAutoplay();
     });
     this._observer.observe(this);
     document.addEventListener("visibilitychange", this._handleVisibility);
   }
-
-  _resetAutoplay() {
-    if (this.hasAttribute("autoplay")) {
-      this._stopAutoplay();
-      this._startAutoplay();
-    }
-  }
-
-  static get observedAttributes() {
-    return ["autoplay", "interval"];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue || !this._images.length) return;
-    if (name === "autoplay") {
-      newValue !== null ? this._startAutoplay() : this._stopAutoplay();
-    }
-    if (name === "interval" && this._timer) {
-      this._startAutoplay();
-    }
-  }
 }
 
 customElements.define("image-carousel", ImageCarousel);

package/source/js/components/sidenote.js

@@ -0,0 +1,210 @@
+/**
+ * Side Note Custom Element
+ *
+ * Usage:
+ * <side-note>
+ *   Extra context that should sit in the article margin on wide screens.
+ * </side-note>
+ */
+
+let styleSheetInjected = false;
+let layoutFrame = null;
+let layoutEventsBound = false;
+
+const boundImages = new WeakSet();
+const SIDE_NOTE_MEDIA = "(min-width: 1280px)";
+
+const STYLES = `
+  side-note {
+    display: block;
+    margin: 1.5rem 0;
+    padding: 0.4rem 0 0.4rem 1rem;
+    color: var(--subtext0);
+    font-size: 0.875em;
+    line-height: 1.55;
+    border-left: 2px solid var(--surface1);
+  }
+
+  side-note > :first-child {
+    margin-top: 0;
+  }
+
+  side-note > :last-child {
+    margin-bottom: 0;
+  }
+
+  @media screen and (min-width: 1280px) {
+    .card-content.article > .content {
+      overflow: visible;
+      display: flow-root;
+    }
+
+    .card-content.article > .content > side-note {
+      float: right;
+      clear: right;
+      box-sizing: border-box;
+      width: 11rem;
+      margin: 0 -12.5rem 1rem 1.5rem;
+      padding: 0 0 0 0.875rem;
+      font-size: 0.8em;
+    }
+
+    .card-content.article > .content.is-side-note-layout {
+      position: relative;
+    }
+
+    .card-content.article > .content.is-side-note-layout > side-note {
+      float: none;
+      clear: none;
+      position: absolute;
+      top: var(--side-note-top, 0);
+      right: -12.5rem;
+      margin: 0;
+    }
+  }
+`;
+
+function injectStyles() {
+  if (styleSheetInjected) return;
+
+  const styleEl = document.createElement("style");
+  styleEl.textContent = STYLES;
+  document.head.appendChild(styleEl);
+  styleSheetInjected = true;
+}
+
+function getArticleContentBlocks() {
+  return document.querySelectorAll(".card-content.article > .content");
+}
+
+function getSideNotes(content) {
+  return Array.from(content.children).filter((child) => child.tagName === "SIDE-NOTE");
+}
+
+function resetSideNoteLayout(content, sideNotes = getSideNotes(content)) {
+  content.classList.remove("is-side-note-layout");
+  content.style.removeProperty("min-height");
+  sideNotes.forEach((sideNote) => {
+    sideNote.style.removeProperty("--side-note-top");
+  });
+}
+
+function getSideNoteAnchor(sideNote) {
+  let anchor = sideNote.previousElementSibling;
+
+  while (anchor && anchor.tagName === "SIDE-NOTE") {
+    anchor = anchor.previousElementSibling;
+  }
+
+  return anchor || sideNote;
+}
+
+function getContentFlowBottom(content, sideNotes) {
+  const sideNoteSet = new Set(sideNotes);
+  let bottom = 0;
+
+  Array.from(content.children).forEach((child) => {
+    if (sideNoteSet.has(child)) return;
+    bottom = Math.max(bottom, child.offsetTop + child.offsetHeight);
+  });
+
+  return bottom;
+}
+
+function layoutSideNotes() {
+  const isWide = window.matchMedia(SIDE_NOTE_MEDIA).matches;
+
+  getArticleContentBlocks().forEach((content) => {
+    const sideNotes = getSideNotes(content);
+    if (sideNotes.length === 0) return;
+
+    if (!isWide) {
+      resetSideNoteLayout(content, sideNotes);
+      return;
+    }
+
+    content.style.removeProperty("min-height");
+    sideNotes.forEach((sideNote) => {
+      sideNote.style.removeProperty("--side-note-top");
+    });
+    content.classList.add("is-side-note-layout");
+
+    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const gap = rootFontSize;
+    let nextTop = 0;
+
+    sideNotes.forEach((sideNote) => {
+      const anchor = getSideNoteAnchor(sideNote);
+      const targetTop = anchor.offsetTop;
+      const top = Math.max(targetTop, nextTop);
+
+      sideNote.style.setProperty("--side-note-top", `${Math.round(top)}px`);
+      nextTop = top + sideNote.offsetHeight + gap;
+    });
+
+    const flowBottom = getContentFlowBottom(content, sideNotes);
+    const sideNoteBottom = Math.max(0, nextTop - gap);
+    content.style.minHeight = `${Math.ceil(Math.max(flowBottom, sideNoteBottom))}px`;
+  });
+}
+
+function scheduleSideNoteLayout() {
+  if (layoutFrame !== null) return;
+
+  layoutFrame = window.requestAnimationFrame(() => {
+    layoutFrame = null;
+    layoutSideNotes();
+  });
+}
+
+function bindImages(content) {
+  if (!content) return;
+
+  content.querySelectorAll("img").forEach((img) => {
+    if (boundImages.has(img)) return;
+    boundImages.add(img);
+    img.addEventListener("load", scheduleSideNoteLayout);
+    img.addEventListener("error", scheduleSideNoteLayout);
+  });
+}
+
+function bindLayoutEvents() {
+  if (layoutEventsBound) return;
+  layoutEventsBound = true;
+
+  window.addEventListener("resize", scheduleSideNoteLayout, { passive: true });
+  window.addEventListener("gnix:article-font-settings-change", scheduleSideNoteLayout);
+
+  if (document.fonts?.ready) {
+    document.fonts.ready.then(scheduleSideNoteLayout).catch(() => {});
+  }
+}
+
+class SideNote extends HTMLElement {
+  connectedCallback() {
+    injectStyles();
+    this.unwrapMarkdownParagraph();
+    bindLayoutEvents();
+    bindImages(this.closest(".content"));
+    scheduleSideNoteLayout();
+  }
+
+  unwrapMarkdownParagraph() {
+    const parent = this.parentElement;
+    if (!parent || parent.tagName !== "P") return;
+
+    const onlyContainsThisSideNote = Array.from(parent.childNodes).every((node) => {
+      return node === this || (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === "");
+    });
+    if (!onlyContainsThisSideNote) return;
+
+    parent.parentNode.insertBefore(this, parent);
+    parent.remove();
+  }
+}
+
+if (!customElements.get("side-note")) {
+  customElements.define("side-note", SideNote);
+}
+
+export { SideNote };