hexo-theme-gnix 9.0.0 → 10.0.0

package/source/js/components/text-image-section.js

@@ -13,7 +13,7 @@
  *
  * Attributes:
  * - image: Image URL (required)
- * - alt: Image alt text
+ * - alt: Image alt text (also used as figcaption)
  * - width: Image width (default: 300px)
  * - left: Put image on left (default: image on right)
  * - font-family: Text font family
@@ -37,7 +37,7 @@ class TextImageSection extends HTMLElement {
 
   initZoom() {
     if (typeof mediumZoom !== "function") return;
-    const img = this.querySelector(".ti-image img");
+    const img = this.querySelector(".ti-figure img");
     if (img) {
       mediumZoom(img, { background: "hsla(from var(--mantle) / 0.9)" });
     }
@@ -48,71 +48,66 @@ class TextImageSection extends HTMLElement {
 
     const style = `
       text-image-section {
-        display: block;
+        /* flow-root establishes a BFC so floats are contained
+           and parent block formatting (e.g. blockquote borders)
+           don't visually bleed into the image area */
+        display: flow-root;
         margin: 1em 0;
-      }
-
-      .ti-container {
-        overflow: hidden;
-
-        &::after {
-          content: "";
-          display: table;
-          clear: both;
-        }
-      }
-
-      .ti-text {
-        line-height: 1.8;
         font-family: var(--ti-font-family, inherit);
-        font-size: var(--ti-font-size, 1rem);
+        font-size: var(--ti-font-size);
         color: var(--ti-color, inherit);
+        line-height: 1.8;
       }
 
-      .ti-image {
-        position: relative;
-        z-index: 1;
+      text-image-section > .ti-figure {
+        float: right;
         width: var(--ti-image-width, 300px);
-        margin-bottom: 12px;
-
-        .ti-container > & {
-          float: right;
-          margin-left: 24px;
-        }
+        margin: 0 0 12px 24px;
+      }
 
-        .image-left > & {
-          float: left;
-          margin-left: 0;
-          margin-right: 24px;
-        }
+      text-image-section[left] > .ti-figure {
+        float: left;
+        margin: 0 24px 12px 0;
+      }
 
-        img {
-          width: 100%;
-          height: auto;
-          border-radius: 8px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        }
+      text-image-section .ti-figure img {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
 
-        figure {
-          margin: 0;
-        }
+      text-image-section .ti-figure figcaption {
+        font-family: var(--font-serif);
+        font-size: 0.875em;
+        color: var(--subtext0);
+        text-align: center;
+        margin-top: 8px;
+        font-style: italic;
+      }
 
-        figcaption {
-          font-family: var(--font-serif);
-          font-size: 0.875em;
-          color: var(--subtext0);
-          text-align: center;
-          margin-top: 8px;
-          font-style: italic;
-        }
+      /* Tame nested blockquotes inside the text area so they
+         don't fight the image's float/stacked layout. */
+      text-image-section > blockquote {
+        margin: 0;
       }
 
       @media (max-width: 640px) {
-        .ti-image {
+        text-image-section > .ti-figure,
+        text-image-section[left] > .ti-figure {
           float: none;
-          width: 100%;
-          margin: 0 0 16px 0;
-          --ti-image-width: 100%;
+          width: auto;
+          /* Bottom margin separates the figure from any following
+             blockquote so its left border doesn't visually align
+             with the image edge */
+          margin: 0 0 20px 0;
+        }
+
+        /* When a blockquote follows the figure on mobile, give it
+           a touch more breathing room from the image above */
+        text-image-section > .ti-figure + blockquote {
+          margin-top: 4px;
         }
       }
     `;
@@ -130,48 +125,41 @@ class TextImageSection extends HTMLElement {
     const image = this.getAttribute("image");
     const alt = this.getAttribute("alt") || "";
     const imageWidth = this.getAttribute("width") || "300px";
-    const imageLeft = this.hasAttribute("left");
     const fontFamily = this.getAttribute("font-family");
     const fontSize = this.getAttribute("font-size");
     const color = this.getAttribute("color");
-    const contentNodes = Array.from(this.childNodes).filter((node) => {
-      return node.nodeType !== Node.ELEMENT_NODE || node.tagName.toLowerCase() !== "text-image-section";
-    });
-
-    const content = contentNodes
-      .map((node) => {
-        return node.nodeType === Node.TEXT_NODE ? node.textContent : node.outerHTML;
-      })
-      .join("")
-      .trim();
-
-    if (!image) {
-      this.innerHTML = `<div class="ti-container"><div class="ti-text">${content}</div></div>`;
-      return;
+
+    // Apply CSS variables directly to the host element so we no
+    // longer need a wrapping <div> just to hold inline styles.
+    this.style.setProperty("--ti-image-width", imageWidth);
+    if (fontFamily) this.style.setProperty("--ti-font-family", fontFamily);
+    if (fontSize) this.style.setProperty("--ti-font-size", fontSize);
+    if (color) this.style.setProperty("--ti-color", color);
+
+    // Without an image we have nothing extra to inject — leave the
+    // user's original markdown/HTML content in place.
+    if (!image) return;
+
+    const figure = document.createElement("figure");
+    figure.className = "ti-figure";
+
+    const img = document.createElement("img");
+    img.src = image;
+    img.alt = alt;
+    img.loading = "lazy";
+    figure.appendChild(img);
+
+    if (alt) {
+      const figcaption = document.createElement("figcaption");
+      figcaption.textContent = alt;
+      figure.appendChild(figcaption);
     }
 
-    const containerClass = imageLeft ? "ti-container image-left" : "ti-container";
-
-    const figureHtml = alt
-      ? `<figure>
-          <img src="${image}" alt="${alt}" loading="lazy">
-          <figcaption>${alt}</figcaption>
-        </figure>`
-      : `<img src="${image}" alt="${alt}" loading="lazy">`;
-
-    const styleAttrs = [];
-    styleAttrs.push(`--ti-image-width: ${imageWidth};`);
-    if (fontFamily) styleAttrs.push(`--ti-font-family: ${fontFamily};`);
-    if (fontSize) styleAttrs.push(`--ti-font-size: ${fontSize};`);
-    if (color) styleAttrs.push(`--ti-color: ${color};`);
-    this.innerHTML = `
-      <div class="${containerClass}" style="${styleAttrs.join(" ")}">
-        <div class="ti-image">
-          ${figureHtml}
-        </div>
-        <div class="ti-text">${content}</div>
-      </div>
-    `;
+    // Prepend the <figure> so the existing user content (text,
+    // blockquotes, paragraphs, etc.) stays as direct children of
+    // the host element. This preserves semantic structure and
+    // avoids re-parsing innerHTML.
+    this.insertBefore(figure, this.firstChild);
   }
 }
 

package/source/js/components/theme-stacked.js

@@ -29,14 +29,23 @@ const PREVIEW_COLORS = [
   "surface0",
 ];
 
-const THEMES = [
-  { id: "latte", name: "Catppuccin Latte" },
-  { id: "nord", name: "Nord Light" },
-  { id: "nord_night", name: "Nord Night" },
-  { id: "rose_pine", name: "Rosé Pine" },
-  { id: "mocha", name: "Catppuccin Mocha" },
-  { id: "tokyo_night", name: "Tokyo Night" },
-];
+const THEME_DATA_CACHE_PREFIX = "themeDataCache";
+
+function getThemeOptions() {
+  const config = window.__GNIX_THEME_CONFIG__;
+
+  if (!Array.isArray(config?.themes)) return [];
+
+  return config.themes.filter((theme) => theme.value !== config.defaultTheme).map((theme) => ({ id: theme.value, name: theme.name || theme.label }));
+}
+
+function getThemeDataCacheKey(themes) {
+  return `${THEME_DATA_CACHE_PREFIX}:${themes.map((theme) => theme.id).join(",")}`;
+}
+
+function hasThemeDataForThemes(themeData, themes) {
+  return Boolean(themeData) && themes.every((theme) => themeData[theme.id]);
+}
 
 class ThemeStackedElement extends HTMLElement {
   constructor() {
@@ -45,10 +54,14 @@ class ThemeStackedElement extends HTMLElement {
     this._cards = [];
     this._isVisible = false;
     this._themeData = {};
+    this._themes = [];
     this.attachShadow({ mode: "open" });
   }
 
   async connectedCallback() {
+    this._themes = getThemeOptions();
+    if (this._themes.length === 0) return;
+
     this._observer = new IntersectionObserver((e) => {
       this._isVisible = e[0].isIntersecting;
     });
@@ -65,15 +78,21 @@ class ThemeStackedElement extends HTMLElement {
   }
 
   async loadThemeData() {
-    if (window.__cachedThemeData) {
+    if (hasThemeDataForThemes(window.__cachedThemeData, this._themes)) {
       this._themeData = window.__cachedThemeData;
       return;
     }
+
+    const cacheKey = getThemeDataCacheKey(this._themes);
+
     try {
-      const cached = localStorage.getItem("themeDataCache");
+      const cached = localStorage.getItem(cacheKey);
       if (cached) {
-        this._themeData = window.__cachedThemeData = JSON.parse(cached);
-        return;
+        const cachedThemeData = JSON.parse(cached);
+        if (hasThemeDataForThemes(cachedThemeData, this._themes)) {
+          this._themeData = window.__cachedThemeData = cachedThemeData;
+          return;
+        }
       }
     } catch (_e) {}
 
@@ -81,7 +100,7 @@ class ThemeStackedElement extends HTMLElement {
     temp.style.cssText = "position:absolute;left:-9999px;width:0;height:0;overflow:hidden;";
     document.body.appendChild(temp);
 
-    for (const theme of THEMES) {
+    for (const theme of this._themes) {
       temp.setAttribute("data-theme", theme.id);
       const computed = window.getComputedStyle(temp);
       this._themeData[theme.id] = Object.fromEntries(PREVIEW_COLORS.map((c) => [c, computed.getPropertyValue(`--${c}`).trim()]).filter(([, v]) => v));
@@ -90,7 +109,7 @@ class ThemeStackedElement extends HTMLElement {
     temp.remove();
     window.__cachedThemeData = this._themeData;
     try {
-      localStorage.setItem("themeDataCache", JSON.stringify(this._themeData));
+      localStorage.setItem(cacheKey, JSON.stringify(this._themeData));
     } catch (_e) {}
   }
 
@@ -371,23 +390,24 @@ class ThemeStackedElement extends HTMLElement {
     this.renderDots();
     this.attachEvents();
 
-    const idx = THEMES.findIndex((t) => t.id === this.getCurrentTheme());
+    const idx = this._themes.findIndex((t) => t.id === this.getCurrentTheme());
     this.goTo(idx !== -1 ? idx : 0, false);
   }
 
   renderCards() {
     const current = this.getCurrentTheme();
-    this._cardStack.innerHTML = THEMES.map((theme, i) => {
-      const colors = this._themeData[theme.id] || {};
-      const themeVars = Object.entries(colors)
-        .map(([k, v]) => `--${k}: ${v}`)
-        .join(";");
-      const swatches = PREVIEW_COLORS.map((c) => {
-        const v = colors[c] || "transparent";
-        return `<div class="color-swatch" data-color="${c}" data-value="${v}" style="--color:${v}"></div>`;
-      }).join("");
-      const active = current === theme.id;
-      return `<div class="theme-card" data-index="${i}" data-theme="${theme.id}" style="${themeVars}">
+    this._cardStack.innerHTML = this._themes
+      .map((theme, i) => {
+        const colors = this._themeData[theme.id] || {};
+        const themeVars = Object.entries(colors)
+          .map(([k, v]) => `--${k}: ${v}`)
+          .join(";");
+        const swatches = PREVIEW_COLORS.map((c) => {
+          const v = colors[c] || "transparent";
+          return `<div class="color-swatch" data-color="${c}" data-value="${v}" style="--color:${v}"></div>`;
+        }).join("");
+        const active = current === theme.id;
+        return `<div class="theme-card" data-index="${i}" data-theme="${theme.id}" style="${themeVars}">
         <h4 class="card-title">${theme.name}</h4>
         <div class="color-grid">${swatches}</div>
         <div class="card-footer">
@@ -396,12 +416,13 @@ class ThemeStackedElement extends HTMLElement {
           </button>
         </div>
       </div>`;
-    }).join("");
+      })
+      .join("");
     this._cards = [...this._cardStack.querySelectorAll(".theme-card")];
   }
 
   renderDots() {
-    this._dotsContainer.innerHTML = THEMES.map((_, i) => `<button class="dot" data-index="${i}" aria-label="Go to theme ${i + 1}"></button>`).join("");
+    this._dotsContainer.innerHTML = this._themes.map((_, i) => `<button class="dot" data-index="${i}" aria-label="Go to theme ${i + 1}"></button>`).join("");
     this._dotsContainer.querySelectorAll(".dot").forEach((dot, i) => dot.addEventListener("click", () => this.goTo(i)));
   }
 
@@ -421,12 +442,14 @@ class ThemeStackedElement extends HTMLElement {
   }
 
   goTo(index, animate = true) {
-    this._currentIndex = ((index % THEMES.length) + THEMES.length) % THEMES.length;
+    if (this._themes.length === 0) return;
+
+    this._currentIndex = ((index % this._themes.length) + this._themes.length) % this._themes.length;
     this.updateStack();
     if (animate)
       this.dispatchEvent(
         new CustomEvent("themeChange", {
-          detail: { index: this._currentIndex, theme: THEMES[this._currentIndex] },
+          detail: { index: this._currentIndex, theme: this._themes[this._currentIndex] },
         }),
       );
   }
@@ -468,7 +491,7 @@ class ThemeStackedElement extends HTMLElement {
       } else if (e.key === "ArrowRight" || e.key === " ") {
         e.preventDefault();
         this.next();
-      } else if (e.key === "Enter") this.applyTheme(THEMES[this._currentIndex].id);
+      } else if (e.key === "Enter") this.applyTheme(this._themes[this._currentIndex].id);
     };
     document.addEventListener("keydown", this._keyHandler);
 
@@ -501,7 +524,16 @@ class ThemeStackedElement extends HTMLElement {
   }
 
   getCurrentTheme() {
-    return localStorage.getItem("themePreference") || document.documentElement.getAttribute("data-theme") || "mocha";
+    const config = window.__GNIX_THEME_CONFIG__;
+    let storedTheme = null;
+
+    try {
+      storedTheme = config?.storageKey ? localStorage.getItem(config.storageKey) : null;
+    } catch (_e) {}
+
+    if (storedTheme && storedTheme !== config?.defaultTheme) return storedTheme;
+
+    return document.documentElement.getAttribute("data-theme") || config?.systemTheme?.dark || this._themes[0]?.id;
   }
 
   applyTheme(themeId) {
@@ -509,7 +541,7 @@ class ThemeStackedElement extends HTMLElement {
     window.applyTheme(themeId, true);
     this._cards.forEach((card, i) => {
       const btn = card.querySelector(".apply-btn");
-      const match = THEMES[i].id === themeId;
+      const match = this._themes[i].id === themeId;
       btn.classList.toggle("applied", match);
       btn.textContent = match ? "Applied ✓" : "Apply Theme";
     });

package/source/js/components/tree.js

@@ -10,7 +10,7 @@
  *   - components
  *     - accordion.js
  *     - tree.js
- *   - styles
+ *   - styles/
  *     - main.css
  * - package.json
  * - README.md
@@ -285,11 +285,7 @@ class XTree extends HTMLElement {
       const childUL = li.querySelector(":scope > ul");
       const children = childUL ? this.parseUL(childUL) : [];
 
-      result.push({
-        label: text,
-        children,
-        hasChildren: children.length > 0,
-      });
+      result.push(this.createNode(text, children));
     });
 
     return result;
@@ -313,7 +309,7 @@ class XTree extends HTMLElement {
     `;
 
     this.shadowRoot.querySelectorAll(".tree-children").forEach((el) => {
-      el.style.maxHeight = el.scrollHeight + "px";
+      el.style.maxHeight = `${el.scrollHeight}px`;
     });
 
     this.shadowRoot.querySelectorAll(".tree-toggle:not(.collapsed)").forEach((btn) => {
@@ -333,23 +329,40 @@ class XTree extends HTMLElement {
     return ICON_FILE;
   }
 
+  createNode(label, children = []) {
+    const normalizedLabel = label.trim();
+    const isExplicitFolder = /\/+$/.test(normalizedLabel);
+    const displayLabel = isExplicitFolder ? normalizedLabel.replace(/\/+$/, "") : normalizedLabel;
+    const hasChildren = children.length > 0;
+
+    return {
+      label: normalizedLabel,
+      displayLabel: displayLabel || normalizedLabel,
+      children,
+      hasChildren,
+      isFolder: isExplicitFolder || hasChildren,
+    };
+  }
+
   renderTreeItems(items) {
     return items
       .map((item) => {
-        const isFolder = item.hasChildren;
-        const icon = this.getIcon(item.label, isFolder);
-        const extClass = isFolder ? "folder" : this.getExtClass(item.label);
+        const isFolder = item.isFolder || item.hasChildren;
+        const canToggle = item.hasChildren;
+        const label = item.displayLabel || item.label;
+        const icon = this.getIcon(label, isFolder);
+        const extClass = isFolder ? "folder" : this.getExtClass(label);
 
-        const toggleHTML = isFolder ? `<button class="tree-toggle" aria-expanded="true">${ICON_CHEVRON}</button>` : `<span class="tree-toggle-placeholder"></span>`;
+        const toggleHTML = canToggle ? `<button class="tree-toggle" aria-expanded="true">${ICON_CHEVRON}</button>` : `<span class="tree-toggle-placeholder"></span>`;
 
-        const childrenHTML = isFolder ? `<ul class="tree-children">${this.renderTreeItems(item.children)}</ul>` : "";
+        const childrenHTML = canToggle ? `<ul class="tree-children">${this.renderTreeItems(item.children)}</ul>` : "";
 
         return `
           <li class="tree-item">
             <div class="tree-row">
               ${toggleHTML}
               <span class="tree-icon ${extClass}">${icon}</span>
-              <span class="tree-label">${this.escapeHTML(item.label)}</span>
+              <span class="tree-label">${this.escapeHTML(label)}</span>
             </div>
             ${childrenHTML}
           </li>
@@ -374,11 +387,11 @@ class XTree extends HTMLElement {
       btn.classList.remove("collapsed");
       btn.setAttribute("aria-expanded", "true");
       children.classList.remove("collapsed");
-      children.style.maxHeight = children.scrollHeight + "px";
+      children.style.maxHeight = `${children.scrollHeight}px`;
     } else {
       btn.classList.add("collapsed");
       btn.setAttribute("aria-expanded", "false");
-      children.style.maxHeight = children.scrollHeight + "px";
+      children.style.maxHeight = `${children.scrollHeight}px`;
       children.offsetHeight;
       children.classList.add("collapsed");
     }
@@ -413,7 +426,7 @@ class XTree extends HTMLElement {
       const indent = match[1].length;
       const label = match[2].trim();
 
-      const node = { label, children: [], hasChildren: false };
+      const node = this.createNode(label);
 
       while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {
         stack.pop();
@@ -422,6 +435,7 @@ class XTree extends HTMLElement {
       const parent = stack[stack.length - 1].node;
       parent.children.push(node);
       parent.hasChildren = true;
+      parent.isFolder = true;
 
       stack.push({ indent, node });
     }

package/source/js/decrypt.js

@@ -107,6 +107,11 @@ function init() {
 
 init();
 
-if (typeof swup !== "undefined") {
-  swup.hooks.on("page:view", init);
+function bindSwupDecryptHook(swupInstance) {
+  if (!swupInstance || swupInstance.gnixDecryptPageHookBound) return;
+  swupInstance.gnixDecryptPageHookBound = true;
+  swupInstance.hooks.on("page:view", init);
 }
+
+bindSwupDecryptHook(window.swup);
+document.addEventListener("gnix:swup-ready", (event) => bindSwupDecryptHook(event.detail?.swup), { once: true });