hexo-theme-gnix 6.2.0 → 8.0.0

package/source/js/insight.js

@@ -1,6 +1,6 @@
 // biome-ignore lint/correctness/noUnusedVariables: Called in other files
 function loadInsight(config, translation) {
-  const main = document.querySelector(".searchbox");
+  const main = document.querySelector("#searchbox");
   if (!main) return;
 
   const input = main.querySelector(".searchbox-input");
@@ -10,6 +10,7 @@ function loadInsight(config, translation) {
   let dataset = null; // 缓存 JSON 数据
   let isLoading = false; // 加载锁
   let searchTimer = null; // 防抖定时器
+  const keywordRegexCache = new Map();
 
   // 辅助：创建 DOM
   function createElement(tag, className, text) {
@@ -29,17 +30,15 @@ function loadInsight(config, translation) {
   // --- 核心逻辑优化区 ---
 
   // HTML 转义函数，防止 XSS 攻击和标签渲染异常
+  const _escapeMap = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
+  const _escapeRe = /[&<>"']/g;
   function escapeHTML(str) {
-    const map = {
-      "&": "&amp;",
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#039;",
-    };
-    return str.replace(/[&<>"']/g, (m) => map[m]);
+    return str.replace(_escapeRe, (m) => _escapeMap[m]);
   }
 
+  // 字段名 → 预计算小写字段名的映射
+  const _lowerFields = { title: "_lowerTitle", text: "_lowerText", name: "_lowerName", slug: "_lowerSlug" };
+
   // 优化点：合并 ranges 的逻辑保持不变，这是高亮的核心算法
   function merge(ranges) {
     let last;
@@ -74,7 +73,7 @@ function loadInsight(config, translation) {
 
     if (!indices.length) return maxlen ? escapeHTML(text.slice(0, maxlen)) : escapeHTML(text);
 
-    let result = "";
+    const parts = [];
     let last = 0;
     const ranges = merge(indices);
     const sumRange = [ranges[0][0], ranges[ranges.length - 1][1]];
@@ -85,21 +84,21 @@ function loadInsight(config, translation) {
 
     for (let i = 0; i < ranges.length; i++) {
       const range = ranges[i];
-      result += escapeHTML(text.slice(last, Math.min(range[0], sumRange[0] + maxlen)));
+      parts.push(escapeHTML(text.slice(last, Math.min(range[0], sumRange[0] + maxlen))));
       if (maxlen && range[0] >= sumRange[0] + maxlen) break;
 
-      result += `<span style="color: var(--mauve)">${escapeHTML(text.slice(range[0], range[1]))}</span>`;
+      parts.push(`<span style="color: var(--mauve)">${escapeHTML(text.slice(range[0], range[1]))}</span>`);
       last = range[1];
 
       if (i === ranges.length - 1) {
         if (maxlen) {
-          result += escapeHTML(text.slice(range[1], Math.min(text.length, sumRange[0] + maxlen + 1)));
+          parts.push(escapeHTML(text.slice(range[1], Math.min(text.length, sumRange[0] + maxlen + 1))));
         } else {
-          result += escapeHTML(text.slice(range[1]));
+          parts.push(escapeHTML(text.slice(range[1])));
         }
       }
     }
-    return result;
+    return parts.join("");
   }
 
   function searchItem(title, preview, url) {
@@ -156,9 +155,14 @@ function loadInsight(config, translation) {
     const keywords = parseKeywords(keywordsStr);
     if (keywords.length === 0) return {};
 
-    // 把keywords中的特殊字符转义, 将转移后的关键词编译为正则表达式(忽略大小写，全局，多行)
-    // 后续在文章内容匹配时使用
-    const keywordRegexes = keywords.map((k) => new RegExp(k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "img"));
+    const keywordRegexes = keywords.map((k) => {
+      let regex = keywordRegexCache.get(k);
+      if (!regex) {
+        regex = new RegExp(k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "img");
+        keywordRegexCache.set(k, regex);
+      }
+      return regex;
+    });
 
     const calculateWeight = (obj, fields, weights) => {
       let value = 0;
@@ -174,7 +178,8 @@ function loadInsight(config, translation) {
           if (!obj[field]) continue;
 
           // 1. 快速检查：如果都不包含这个词，直接跳过正则
-          if (obj[field].toLowerCase().indexOf(keyword) === -1) continue;
+          const lowerVal = obj[_lowerFields[field]] ?? obj[field].toLowerCase();
+          if (lowerVal.indexOf(keyword) === -1) continue;
 
           // 2. 权重计算
           const matches = obj[field].match(regex);
@@ -221,6 +226,18 @@ function loadInsight(config, translation) {
       }
     }
     container.appendChild(fragment);
+
+    // 为动态生成的结果项补充 ARIA 属性
+    const items = container.querySelectorAll(".searchbox-result-item");
+    items.forEach((item, i) => {
+      item.id = `searchbox-result-${i}`;
+      item.role = "option";
+      item.setAttribute("aria-selected", "false");
+      item.tabIndex = -1;
+    });
+
+    input.removeAttribute("aria-activedescendant");
+    input.setAttribute("aria-expanded", items.length > 0 ? "true" : "false");
   }
 
   function scrollTo(item) {
@@ -252,10 +269,15 @@ function loadInsight(config, translation) {
     const nextPosition = (items.length + prevPosition + value) % items.length;
     const finalPosition = nextPosition < 0 ? nextPosition + items.length : nextPosition;
 
-    if (prevPosition !== -1) items[prevPosition].classList.remove("active");
+    if (prevPosition !== -1) {
+      items[prevPosition].classList.remove("active");
+      items[prevPosition].setAttribute("aria-selected", "false");
+    }
 
     const nextItem = items[finalPosition];
     nextItem.classList.add("active");
+    nextItem.setAttribute("aria-selected", "true");
+    input.setAttribute("aria-activedescendant", nextItem.id);
     scrollTo(nextItem);
   }
 
@@ -269,6 +291,14 @@ function loadInsight(config, translation) {
     fetch(config.contentUrl)
       .then((response) => response.json())
       .then((json) => {
+        for (const post of json.posts) {
+          post._lowerTitle = post.title ? post.title.toLowerCase() : "";
+          post._lowerText = post.text ? post.text.toLowerCase() : "";
+        }
+        for (const tag of json.tags) {
+          tag._lowerName = tag.name ? tag.name.toLowerCase() : "";
+          tag._lowerSlug = tag.slug ? tag.slug.toLowerCase() : "";
+        }
         dataset = json;
         isLoading = false;
         // 如果加载完之后输入框里有字，立即触发一次搜索
@@ -294,64 +324,44 @@ function loadInsight(config, translation) {
       return;
     }
 
-    // 优化点：防抖 (Debounce) 300ms
     searchTimer = setTimeout(() => {
       searchResultToDOM(keywords, search(dataset, keywords));
-    }, 200);
+    }, 150);
   });
 
-  main.addEventListener("focusout", (e) => {
-    if (main.contains(e.relatedTarget)) {
-      return;
+  // 键盘导航
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      selectItemByDiff(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      selectItemByDiff(-1);
+    } else if (e.key === "Enter") {
+      const active = container.querySelector(".searchbox-result-item.active");
+      if (active) {
+        active.click();
+      }
     }
-    main.classList.remove("show");
   });
 
   main.addEventListener("click", (e) => {
-    const resultItem = e.target.closest(".searchbox-result-item");
-    if (resultItem) {
-      main.classList.remove("show");
+    if (e.target === main || e.target.closest(".searchbox-result-item")) {
+      main.hidePopover();
     }
   });
 
-  document.addEventListener("click", (e) => {
-    if (e.target.closest(".navbar-main .search")) {
-      main.classList.add("show");
-      const inp = main.querySelector(".searchbox-input");
-      inp.focus();
+  if (location.hash.trim() === "#insight-search") {
+    main.showPopover();
+  }
 
-      // Lazy Load - 打开时再请求数据
+  // Popover 打开时 focus input 并预加载数据
+  main.addEventListener("toggle", (e) => {
+    if (e.newState === "open") {
       fetchData();
+      input.focus();
+    } else {
+      input.setAttribute("aria-expanded", "false");
     }
   });
-
-  document.addEventListener("keydown", (e) => {
-    if (!main.classList.contains("show")) return;
-    switch (e.key) {
-      case "ArrowUp":
-        selectItemByDiff(-1);
-        break;
-      case "ArrowDown":
-        selectItemByDiff(1);
-        break;
-      case "Enter": {
-        const activeItem = container.querySelector(".searchbox-result-item.active");
-        if (activeItem) location.href = activeItem.getAttribute("href");
-        break;
-      }
-    }
-  });
-
-  document.addEventListener("touchstart", () => {
-    touch = true;
-  });
-  document.addEventListener("touchmove", () => {
-    touch = false;
-  });
-
-  // 处理 location.hash 自动打开的情况
-  if (location.hash.trim() === "#insight-search") {
-    main.classList.add("show");
-    fetchData();
-  }
 }

package/source/js/main.js

@@ -1,23 +1,51 @@
+function tableWrapFix() {
+  document.querySelectorAll(".content table").forEach((table) => {
+    if (table.hasAttribute("data-nowrap") || table.parentElement.classList.contains("table-wrapper")) {
+      return;
+    }
+    // if width exceeds container, wrap it
+    const wrapper = document.createElement("div");
+    Object.assign(wrapper.style, {
+      width: "100%",
+      overflowX: "auto",
+    });
+    table.parentNode.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+  });
+}
+
+function twikoo_handler() {
+  const el = document.getElementById("tko");
+  if (!el) return;
+
+  const { envId, region, lang, jsUrl, cssUrl } = el.dataset;
+
+  if (cssUrl) loadCSSOnce(cssUrl);
+
+  const config = { envId, region, lang, el: "#tko" };
+
+  if (typeof window.twikoo?.init === "function") {
+    window.twikoo.init(config);
+    return;
+  }
+
+  loadScriptOnce(jsUrl, () => window.twikoo.init(config));
+}
 // #region mdit@tab-plugin
 /**
  * 初始化页面上所有的 Tab 组件
  */
-function initializeTabs() {
-  // 选取页面上所有的 Tab 容器
-  const tabContainers = document.querySelectorAll(".tabs-tabs-wrapper");
 
-  tabContainers.forEach((container) => {
-    // 先移除已有事件（防止PJAX重复绑定）
+function initializeTabs() {
+  document.querySelectorAll(".tabs-tabs-wrapper").forEach((container) => {
     const buttons = container.querySelectorAll(".tabs-tab-button");
     buttons.forEach((button) => {
-      // 移除旧事件，避免叠加
       button.removeEventListener("click", handleTabClick);
       button.addEventListener("click", handleTabClick);
     });
   });
 }
 
-// 抽离Tab点击处理函数，方便移除事件
 function handleTabClick() {
   const tabContainer = this.closest(".tabs-tabs-wrapper");
   const targetIndex = this.getAttribute("data-tab");
@@ -84,6 +112,98 @@ function syncRelatedTabs(syncId) {
 
 // #endregion
 
+// #region markdown-exit shiki
+const SELECTORS = {
+  figure: "figure.shiki",
+  pre: "pre.shiki",
+  code: "pre.shiki code",
+  expandBtn: ".code-expand-btn",
+};
+
+const CLS = {
+  copy: "copy-true",
+  wrap: "wrap-active",
+  expanded: "expanded",
+  expandDone: "expand-done",
+};
+
+function addHighlightTool() {
+  const figures = document.querySelectorAll(SELECTORS.figure);
+  if (!figures.length) return;
+
+  figures.forEach((figure) => {
+    if (figure.hasAttribute("data-initialized")) return;
+    figure.setAttribute("data-initialized", "true");
+
+    const pre = figure.querySelector(SELECTORS.pre);
+    const toolbar = figure.querySelector(".shiki-tools");
+    const expandBtn = figure.querySelector(SELECTORS.expandBtn);
+
+    // Copy button handler
+    if (toolbar) {
+      toolbar.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.closest(".copy-button")) {
+          const btn = target.closest(".copy-button");
+          const notice = btn.previousElementSibling;
+          const code = figure.querySelector(SELECTORS.code);
+
+          navigator.clipboard.writeText(code.innerText);
+          notice.textContent = "Copied";
+          notice.classList.add("show");
+          setTimeout(() => notice.classList.remove("show"), 800);
+        } else if (target.closest(".toggle-wrap")) {
+          // Toggle wrap
+          const code = figure.querySelector(SELECTORS.code);
+          const enabled = code.style.whiteSpace !== "pre-wrap";
+          code.style.whiteSpace = enabled ? "pre-wrap" : "pre";
+          code.style.wordBreak = enabled ? "break-all" : "normal";
+          target.closest(".toggle-wrap").classList.toggle(CLS.wrap, enabled);
+        }
+      });
+    }
+
+    // Expand button handler
+    if (expandBtn) {
+      expandBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const showLines = parseInt(figure.dataset.maxLines || "10", 10);
+        const isExpanded = figure.classList.contains(CLS.expanded);
+
+        if (isExpanded) {
+          const computed = getComputedStyle(pre);
+          const lineHeight = parseFloat(computed.lineHeight) || 20;
+          const padding = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.paddingBottom) || 0);
+          figure.classList.remove(CLS.expanded);
+          pre.style.maxHeight = `${showLines * lineHeight + padding}px`;
+          expandBtn.classList.remove(CLS.expandDone);
+        } else {
+          figure.classList.add(CLS.expanded);
+          pre.style.maxHeight = `${pre.scrollHeight}px`;
+          expandBtn.classList.add(CLS.expandDone);
+
+          setTimeout(() => {
+            pre.style.maxHeight = "none";
+          }, 300);
+        }
+      });
+    }
+
+    // Initialize collapsed state
+    if (figure.dataset.collapsible === "true" && pre) {
+      requestAnimationFrame(() => {
+        const lineHeight = parseFloat(getComputedStyle(pre).lineHeight) || 20;
+        const showLines = parseInt(figure.dataset.maxLines || "10", 10);
+        pre.style.maxHeight = `${showLines * lineHeight}px`;
+        pre.style.overflow = "hidden";
+      });
+    }
+  });
+}
+// #endregion
+
 // #region Keyboard Shortcuts
 
 function handleKeyDown(e) {
@@ -91,17 +211,47 @@ function handleKeyDown(e) {
   if (!isModifier) return;
 
   const tag = e.target.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || e.target.isContentEditable) {
-    return;
+  if (["INPUT", "TEXTAREA"].includes(tag) || e.target.isContentEditable) return;
+
+  switch (e.code) {
+    case "KeyT":
+      e.preventDefault();
+      document.getElementById("toc-body")?.togglePopover();
+      break;
+    case "KeyK":
+      e.preventDefault();
+      document.querySelector("#searchbox")?.showPopover();
+      break;
+    case "KeyP":
+      if (!e.shiftKey) {
+        e.preventDefault();
+        document.querySelector("#theme-selector-popover")?.showPopover();
+      }
+      break;
+  }
+}
+
+function loadCSSOnce(url) {
+  if (!document.querySelector(`link[href="${url}"]`)) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    document.head.appendChild(link);
   }
+}
 
-  if (e.code === "KeyK") {
-    e.preventDefault();
-    const searchBtn = document.querySelector(".navbar-main .search");
-    if (searchBtn) searchBtn.click();
-  } else if ((e.shiftKey && e.code === "KeyP") || e.code === "KeyP") {
-    e.preventDefault();
-    window.openThemeModal?.();
+/**
+ * 加载脚本一次，如果已存在则监听 load 事件
+ */
+function loadScriptOnce(url, onLoad) {
+  const existingScript = document.querySelector(`script[src="${url}"]`);
+  if (existingScript) {
+    existingScript.addEventListener("load", onLoad);
+  } else {
+    const script = document.createElement("script");
+    script.src = url;
+    script.onload = onLoad;
+    document.head.appendChild(script);
   }
 }
 
@@ -112,12 +262,7 @@ function handleMermaid() {
   const cssUrl = "/css/optional/mermaid.css";
   const adapterUrl = "/js/mdit/mermaid.js";
 
-  if (!document.querySelector(`link[href="${cssUrl}"]`)) {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = cssUrl;
-    document.head.appendChild(link);
-  }
+  loadCSSOnce(cssUrl);
 
   const runInit = () => {
     const isNight = document.documentElement.classList.contains("night");
@@ -137,99 +282,47 @@ function handleMermaid() {
   if (window.initMermaidDiagram) {
     runInit();
   } else {
-    const existingScript = document.querySelector(`script[src="${adapterUrl}"]`);
-    if (existingScript) {
-      existingScript.addEventListener("load", runInit);
-    } else {
-      const script = document.createElement("script");
-      script.src = adapterUrl;
-      script.onload = runInit;
-      document.head.appendChild(script);
-    }
+    loadScriptOnce(adapterUrl, runInit);
   }
 }
 
 // #endregion
 
-function initLogic() {
+function initPage() {
+  tableWrapFix();
   initializeTabs();
   handleMermaid();
-  mediumZoom(".article img", {
-    background: "hsla(from var(--mantle) / 0.9)",
-  });
-  if (document.getElementById("twikoo")) {
-    const initTwikoo = () => {
-      if (window.twikoo && window.twikooConfig) {
-        window.twikoo.init(window.twikooConfig);
-      }
-    };
-
-    if (typeof twikoo !== "undefined") {
-      initTwikoo();
-    } else {
-      const script = document.querySelector('script[src*="twikoo.all.min.js"]');
-      if (script) {
-        script.addEventListener("load", initTwikoo);
-      }
-    }
-  }
+  addHighlightTool();
+  const zoomOpts = { background: "hsla(from var(--mantle) / 0.9)" };
+  const zoomImgs = new Set();
+  document.querySelectorAll(".content img").forEach((img) => zoomImgs.add(img));
+  mediumZoom([...zoomImgs], zoomOpts);
+  twikoo_handler();
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  initLogic();
-});
+document.addEventListener("DOMContentLoaded", initPage, { once: true });
 
 // Re-initialize on page changes when using swup
 if (typeof swup !== "undefined") {
-  swup.hooks.on("page:view", (visit) => {
-    console.log("New page loaded:", visit.to.url);
-    initLogic();
-  });
+  swup.hooks.on("page:view", initPage);
 }
 
-// Global functions
-// biome-ignore lint/correctness/noUnusedVariables: used in <nav click="handleNavbarClick(event)">
-function handleNavbarClick(e) {
-  const target = e.target;
-  const navbarBurger = document.querySelector(".navbar-burger");
-  const navbarMenu = document.querySelector(".navbar-menu");
+document.addEventListener("keydown", handleKeyDown, {
+  capture: true, // 捕获阶段监听，优先于浏览器默认处理
+  passive: false, // 允许调用 preventDefault
+});
 
-  if (!navbarBurger || !navbarMenu) return;
+function toggleNav(event) {
+  const container = event.currentTarget;
+  const burger = container.querySelector(".navbar-burger");
+  const menu = container.querySelector(".navbar-menu");
+  const target = event.target;
 
-  // 处理 burger 点击
   if (target.closest(".navbar-burger")) {
-    navbarBurger.classList.toggle("is-active");
-    navbarMenu.classList.toggle("is-active");
-    return;
+    burger.classList.toggle("is-active");
+    menu.classList.toggle("is-active");
+  } else if (target.closest(".navbar-item")) {
+    burger.classList.remove("is-active");
+    menu.classList.remove("is-active");
   }
-
-  // 处理 item 点击
-  if (target.closest(".navbar-item")) {
-    if (navbarBurger.classList.contains("is-active")) {
-      navbarBurger.classList.remove("is-active");
-      navbarMenu.classList.remove("is-active");
-    }
-  }
-}
-
-function tableWrapFix() {
-  document.querySelectorAll(".content table").forEach((table) => {
-    if (table.hasAttribute("data-nowrap") || table.parentElement.classList.contains("table-wrapper")) {
-      return;
-    }
-    // if width exceeds container, wrap it
-    const wrapper = document.createElement("div");
-    Object.assign(wrapper.style, {
-      width: "100%",
-      overflowX: "auto",
-    });
-    table.parentNode.insertBefore(wrapper, table);
-    wrapper.appendChild(table);
-  });
 }
-
-tableWrapFix();
-document.addEventListener("keydown", handleKeyDown, {
-  capture: true, // 捕获阶段监听，优先于浏览器默认处理
-  passive: false, // 允许调用 preventDefault
-});

package/source/js/mdit/mermaid.js

@@ -1,6 +1,8 @@
 (() => {
   const instances = new Map();
   let mermaidPromise = null;
+  let renderSeq = 0;
+
   const loadMermaid = (jsUrl) => {
     if (mermaidPromise) return mermaidPromise;
     if (window.mermaid) {
@@ -21,11 +23,15 @@
     const mermaid = await mermaidPromise;
     if (!content || !mermaid) return;
 
-    // Initialize with current theme
+    const instance = instances.get(id);
+    if (!instance) return;
+    const version = (instance.renderVersion = ++renderSeq);
+
+    const isNight = document.documentElement.classList.contains("night");
     mermaid.initialize({
       startOnLoad: false,
-      theme: document.documentElement.classList.contains("night") ? "dark" : "default",
-      darkMode: document.documentElement.classList.contains("night"),
+      theme: isNight ? "dark" : "default",
+      darkMode: isNight,
       themeVariables,
       securityLevel: "strict",
       fontSize: 16,
@@ -33,9 +39,11 @@
 
     try {
       content.innerHTML = "";
-      const { svg } = await mermaid.render(`${id}-svg`, code);
+      const { svg } = await mermaid.render(`${id}-svg-${version}`, code);
+      if (instance.renderVersion !== version) return;
       content.insertAdjacentHTML("beforeend", svg);
     } catch (error) {
+      if (instance.renderVersion !== version) return;
       console.error("Mermaid rendering error:", error);
       content.innerHTML = `<p style="color: red;">Failed to render diagram: ${error.message}</p>`;
     }