hexo-theme-gnix 1.1.0

package/source/js/main.js

@@ -0,0 +1,218 @@
+// #region mdit@tab-plugin
+
+/**
+* 初始化页面上所有的 Tab 组件
+*/
+function initializeTabs() {
+    // 选取页面上所有的 Tab 容器
+    const tabContainers = document.querySelectorAll(".tabs-tabs-wrapper");
+
+    tabContainers.forEach(container => {
+        // 先移除已有事件（防止PJAX重复绑定）
+        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");
+    const syncId = this.getAttribute("data-id");
+    activateTab(tabContainer, targetIndex);
+    if (syncId) {
+        syncRelatedTabs(syncId);
+    }
+}
+
+/**
+* 激活指定容器中的特定 Tab
+* @param {HTMLElement} container - Tab 容器元素
+* @param {string} targetIndex - 要激活的 Tab 的 data-tab 值
+*/
+function activateTab(container, targetIndex) {
+    // 先重置该容器内所有 Tab 的状态
+    resetTabsState(container);
+
+    const buttonToActivate = container.querySelector(`.tabs-tab-button[data-tab="${targetIndex}"]`);
+    const contentToActivate = container.querySelector(`.tabs-tab-content[data-index="${targetIndex}"]`);
+
+    if (buttonToActivate) {
+        buttonToActivate.classList.add("active");
+        buttonToActivate.setAttribute("data-active", "");
+    }
+    if (contentToActivate) {
+        contentToActivate.classList.add("active");
+        contentToActivate.setAttribute("data-active", "");
+    }
+}
+
+/**
+* 重置指定容器内所有 Tab 按钮和内容面板的状态
+* @param {HTMLElement} container - Tab 容器元素
+*/
+function resetTabsState(container) {
+    const buttons = container.querySelectorAll(".tabs-tab-button");
+    const contents = container.querySelectorAll(".tabs-tab-content");
+
+    buttons.forEach(btn => {
+        btn.classList.remove("active");
+        btn.removeAttribute("data-active");
+    });
+    contents.forEach(content => {
+        content.classList.remove("active");
+        content.removeAttribute("data-active");
+    });
+}
+
+/**
+* 同步所有具有相同 data-id 的关联 Tab
+* @param {string} syncId - 用于同步的 data-id
+*/
+function syncRelatedTabs(syncId) {
+    const relatedButtons = document.querySelectorAll(`.tabs-tab-button[data-id="${syncId}"]`);
+
+    relatedButtons.forEach(button => {
+        const container = button.closest(".tabs-tabs-wrapper");
+        const targetIndex = button.getAttribute("data-tab");
+        activateTab(container, targetIndex);
+    });
+}
+
+// #endregion
+
+// #region Keyboard Shortcuts
+
+function initKeyboardShortcuts() {
+    // 移除旧事件（防止PJAX重复绑定）
+    document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+}
+
+// 抽离键盘事件处理函数
+function handleKeyDown(e) {
+    if (e.ctrlKey || e.metaKey) {
+        if (e.code === "KeyK") {
+            // ctrl/cmd + k for search
+            const searchBtn = document.querySelector(".navbar-main .search");
+            if (searchBtn) searchBtn.click();
+        } else if ((e.shiftKey && e.code === "KeyP") || e.code === "KeyP") {
+            // ctrl/cmd + shift + p for theme selector
+             e.preventDefault();
+            const themeBtn = document.querySelector(
+                "button.navbar-item.theme-selector-trigger",
+            );
+            if (themeBtn) themeBtn.click();
+        }
+    }
+}
+
+// #endregion
+
+// #region TOC
+function initializeTableOfContents() {
+    const tocContainer = document.getElementById("icarus-toc-container");
+    if (!tocContainer) return;
+
+    const tocLinks = tocContainer.querySelectorAll(".toc-link");
+
+    // Scroll Spy
+    const headers = [];
+    tocLinks.forEach((link) => {
+        const href = link.getAttribute("href") || "";
+        // 解码并移除 #
+        const id = decodeURIComponent(href.replace(/^#/, ""));
+        // 避免无效 ID 导致报错
+        if (id) {
+            const header = document.getElementById(id);
+            if (header) {
+                headers.push({ header, link });
+            }
+        }
+    });
+
+    if (headers.length > 0) {
+        // 先移除旧的滚动事件（防止PJAX重复绑定）
+        window.removeEventListener("scroll", handleTocScroll, { passive: true });
+
+        function handleTocScroll() {
+            const viewportHeight = window.innerHeight;
+            let currentHeader = null;
+
+            // 查找当前视口中最后一个位于屏幕中线上方的标题
+            for (const h of headers) {
+                const rect = h.header.getBoundingClientRect();
+                if (rect.top < viewportHeight / 2) {
+                    currentHeader = h;
+                } else {
+                    break;
+                }
+            }
+
+            // 如果在页面顶部，高亮第一个
+            if (!currentHeader && window.scrollY < 100) {
+                currentHeader = headers[0];
+            }
+
+            // 清除旧的高亮
+            for (const l of tocLinks) {
+                l.closest(".toc-item").classList.remove("is-active");
+            }
+
+            // 设置新的高亮
+            if (currentHeader) {
+                currentHeader.link.closest(".toc-item").classList.add("is-active");
+            }
+        }
+
+        // 使用 passive: true 提高滚动性能
+        window.addEventListener("scroll", handleTocScroll, { passive: true });
+        handleTocScroll();
+    }
+}
+
+// #endregion
+
+function initLogic() {
+    initKeyboardShortcuts();
+    initializeTableOfContents();
+    initializeTabs();
+    if (typeof mediumZoom === "function") {
+        mediumZoom(".article img", {
+            background: "hsla(from var(--mantle) / 0.9)",
+        });
+    }
+}
+
+// 初始化时执行一次
+document.addEventListener("DOMContentLoaded", () => initLogic());
+// PJAX完成后执行（注意：这里的函数内已经做了事件去重）
+document.addEventListener("pjax:complete", () => initLogic());
+
+// Global functions
+function handleNavbarClick(e) {
+    const target = e.target;
+    const navbarBurger = document.querySelector(".navbar-burger");
+    const navbarMenu = document.querySelector(".navbar-menu");
+
+    if (!navbarBurger || !navbarMenu) return;
+
+    // 处理 burger 点击
+    if (target.closest(".navbar-burger")) {
+        navbarBurger.classList.toggle("is-active");
+        navbarMenu.classList.toggle("is-active");
+        return;
+    }
+
+    // 处理 item 点击
+    if (target.closest(".navbar-item")) {
+        if (navbarBurger.classList.contains("is-active")) {
+            navbarBurger.classList.remove("is-active");
+            navbarMenu.classList.remove("is-active");
+        }
+    }
+}

package/source/js/pjax.js

@@ -0,0 +1,29 @@
+(() => {
+  // biome-ignore lint/correctness/noUnusedVariables: will be used
+  let pjax;
+
+  function initPjax() {
+    try {
+      const Pjax = window.Pjax || (() => { });
+      pjax = new Pjax({
+        selectors: [
+          "[data-pjax]",
+          ".pjax-reload",
+          "head title",
+          ".main-content",
+          ".navbar-start",
+          ".navbar-end",
+          ".searchbox link",
+          ".searchbox script",
+          "#comments link",
+          "#comments script",
+        ],
+        cacheBust: false,
+      });
+    } catch (e) {
+      console.warn(`PJAX error: ${e}`);
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", () => initPjax());
+})();

package/source/js/shiki/shiki.js

@@ -0,0 +1,191 @@
+// Constants and Configuration
+const SELECTORS = {
+  figureHighlight: "figure.shiki",
+  preCode: "pre code",
+  preShiki: "pre.shiki",
+  expandBtn: ".code-expand-btn",
+};
+
+const CLASSES = {
+  copyTrue: "copy-true",
+  closed: "closed",
+  wrapActive: "wrap-active",
+  expandDone: "expand-done",
+};
+
+showAlert = (element, text, duration = 800) => {
+  element.textContent = text;
+  element.style.opacity = 1;
+  element.style.visibility = "visible";
+  setTimeout(() => {
+    element.style.opacity = 0;
+    element.style.visibility = "hidden";
+  }, duration);
+};
+
+// Feature Handlers
+const FeatureHandlers = {
+  async copy(parentElement, clickElement) {
+    const buttonParent = parentElement.parentNode;
+    buttonParent.classList.add(CLASSES.copyTrue);
+
+    const codeElement = buttonParent.querySelector(SELECTORS.preCode);
+    await navigator.clipboard.writeText(codeElement.innerText);
+    showAlert(clickElement.previousElementSibling, "Copied");
+
+    buttonParent.classList.remove(CLASSES.copyTrue);
+  },
+
+  toggleWrap(element) {
+    const code = element
+      .closest(SELECTORS.figureHighlight)
+      .querySelector("code");
+
+    function setWrap(enabled) {
+      Object.assign(code.style, {
+        whiteSpace: enabled ? "pre-wrap" : "pre",
+        wordBreak: enabled ? "break-all" : "normal",
+        overflowWrap: enabled ? "anywhere" : "normal",
+      });
+
+      element.classList.toggle(CLASSES.wrapActive, enabled);
+    }
+    setWrap(code.style.whiteSpace !== "pre-wrap");
+  },
+
+  expandCode(figure) {
+    const expandBtn = figure.querySelector(SELECTORS.expandBtn);
+    const pre = figure.querySelector(SELECTORS.preShiki);
+
+    const isExpanded = figure.classList.contains("expanded");
+    const showLines = parseInt(figure.dataset.showLines || "10");
+
+    if (isExpanded) {
+      // 记录折叠前的状态
+      const beforeCollapseHeight = pre.scrollHeight;
+
+      // 计算折叠后的目标高度
+      const computedStyle = getComputedStyle(pre);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+      const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+      const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+      const targetHeight = showLines * lineHeight + paddingTop + paddingBottom;
+
+      // 首先设置当前完整高度作为起点
+      pre.style.maxHeight = `${beforeCollapseHeight}px`;
+      pre.offsetHeight; // 强制重排
+
+      // 应用折叠状态
+      requestAnimationFrame(() => {
+        figure.classList.remove("expanded");
+        pre.style.maxHeight = `${targetHeight}px`;
+
+        // 延迟箭头旋转，等待折叠动画完成
+        setTimeout(() => {
+          expandBtn.classList.remove(CLASSES.expandDone);
+        }, 300); // 与CSS transition时间同步
+      });
+    } else {
+      // 展开代码
+      const currentHeight = pre.offsetHeight;
+      const fullHeight = pre.scrollHeight;
+
+      // 先设置当前高度作为起点
+      pre.style.maxHeight = `${currentHeight}px`;
+      pre.offsetHeight; // 强制重排
+
+      // 应用展开状态
+      figure.classList.add("expanded");
+
+      requestAnimationFrame(() => {
+        pre.style.maxHeight = `${fullHeight}px`;
+
+        // 立即开始箭头旋转动画
+        expandBtn.classList.add(CLASSES.expandDone);
+
+        // 动画结束后清除max-height限制，允许内容自然增长
+        setTimeout(() => {
+          if (figure.classList.contains("expanded")) {
+            pre.style.maxHeight = "none";
+          }
+        }, 300);
+      });
+    }
+  },
+};
+
+function handleToolbarClick(event) {
+  const target = event.target;
+  const classList = target.classList;
+
+  const handlers = {
+    expand: () => FeatureHandlers.shrink(this),
+    "copy-button": () => FeatureHandlers.copy(this, target),
+    "toggle-wrap": () => FeatureHandlers.toggleWrap(this),
+  };
+
+  for (const [className, handler] of Object.entries(handlers)) {
+    if (classList.contains(className)) {
+      handler();
+      break;
+    }
+  }
+}
+
+// Code expand button event handler
+function handleExpandBtnClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const expandBtn = event.currentTarget;
+  const figure = expandBtn.closest(SELECTORS.figureHighlight);
+
+  if (figure) {
+    FeatureHandlers.expandCode(figure);
+  }
+}
+
+// Main initialization function
+function addHighlightTool() {
+  const figures = document.querySelectorAll(SELECTORS.figureHighlight);
+  if (!figures.length) return;
+
+  figures.forEach((figure) => {
+    if (figure.hasAttribute("data-shiki-initialized")) return;
+    figure.setAttribute("data-shiki-initialized", "true");
+
+    // Add event listener to existing shiki-tools
+    const toolbar = figure.querySelector(".shiki-tools");
+    if (toolbar) {
+      toolbar.addEventListener("click", handleToolbarClick);
+    }
+
+    // Add event listener to code expand button
+    const expandBtn = figure.querySelector(SELECTORS.expandBtn);
+    if (expandBtn) {
+      expandBtn.addEventListener("click", handleExpandBtnClick);
+    }
+
+    // Initialize collapsed state for collapsible code blocks
+    if (figure.dataset.collapsible === "true") {
+      const pre = figure.querySelector(SELECTORS.preShiki);
+      const showLines = parseInt(figure.dataset.showLines || "10");
+
+      if (pre) {
+        // 确保元素已经渲染完成后再设置高度
+        requestAnimationFrame(() => {
+          const lineHeight = parseFloat(getComputedStyle(pre).lineHeight) || 20;
+          const maxHeight = showLines * lineHeight;
+          pre.style.maxHeight = `${maxHeight}px`;
+          pre.style.overflow = "hidden";
+        });
+      }
+    }
+  });
+} // Event listeners
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", addHighlightTool);
+} else {
+  addHighlightTool();
+}

package/source/js/theme-selector.js

@@ -0,0 +1,206 @@
+((window, document, localStorage) => {
+  const STORAGE_KEY = "themePreference";
+  const THEME_SELECTOR_ID = "theme-selector";
+  const DEFAULT_THEME = "system";
+  const colorSchemeMediaQuery = window.matchMedia(
+    "(prefers-color-scheme: dark)",
+  );
+
+  const THEME_MAP = {
+    mocha: "night",
+    macchiato: "night",
+    nord: "light",
+    nord_night: "night",
+    tokyo_night: "night",
+    latte: "light",
+  };
+
+  let currentIndex = 0;
+  let previewTheme = null;
+  let originalTheme = null;
+  let isModalOpen = false;
+
+  function getThemePreference() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored && stored in THEME_MAP ? stored : DEFAULT_THEME;
+  }
+
+  function applyTheme(theme, persist = false) {
+    const html = document.documentElement;
+    const resolvedTheme =
+      theme === "system"
+        ? colorSchemeMediaQuery.matches
+          ? "mocha"
+          : "nord"
+        : theme;
+    html.setAttribute("data-theme", resolvedTheme);
+    html.classList.remove("night", "light");
+    html.classList.add(THEME_MAP[resolvedTheme]);
+
+    if (persist) {
+      localStorage.setItem(STORAGE_KEY, theme);
+    }
+  }
+
+  function openModal() {
+    const modal = document.getElementById("theme-selector-modal");
+    if (!modal || isModalOpen) return;
+
+    isModalOpen = true;
+    originalTheme = getThemePreference();
+
+    // Find current theme index
+    const themeOptions = modal.querySelectorAll(".theme-option");
+    themeOptions.forEach((option, index) => {
+      const theme = option.getAttribute("data-theme-option");
+      if (theme === originalTheme) {
+        currentIndex = index;
+      }
+      // Update active state
+      if (theme === originalTheme) {
+        option.classList.add("is-active");
+      } else {
+        option.classList.remove("is-active");
+      }
+    });
+
+    // Set initial focus
+    updateFocus(themeOptions);
+
+    modal.classList.add("is-active");
+    document.body.style.overflow = "hidden";
+  }
+
+  function closeModal(apply = false) {
+    const modal = document.getElementById("theme-selector-modal");
+    if (!modal || !isModalOpen) return;
+
+    isModalOpen = false;
+
+    if (apply && previewTheme) {
+      // Apply the selected theme
+      applyTheme(previewTheme, true);
+    } else if (previewTheme && previewTheme !== originalTheme) {
+      // Restore original theme if cancelled
+      applyTheme(originalTheme);
+    }
+
+    modal.classList.remove("is-active");
+    document.body.style.overflow = "";
+    previewTheme = null;
+    originalTheme = null;
+
+    // Clear all focus states
+    const themeOptions = modal.querySelectorAll(".theme-option");
+    for (const t of themeOptions) {
+      t.classList.remove("is-active");
+      t.classList.remove("is-focused");
+    }
+  }
+
+  function updateFocus(themeOptions) {
+    themeOptions.forEach((option, index) => {
+      if (index === currentIndex) {
+        option.classList.add("is-focused");
+        option.scrollIntoView({ block: "nearest", behavior: "smooth" });
+
+        // Preview theme on focus
+        const theme = option.getAttribute("data-theme-option");
+        if (theme !== previewTheme) {
+          previewTheme = theme;
+          applyTheme(theme);
+        }
+      } else {
+        option.classList.remove("is-focused");
+      }
+    });
+  }
+
+  function handleKeyboard(event) {
+    if (!isModalOpen) return;
+
+    const modal = document.getElementById("theme-selector-modal");
+    const themeOptions = modal.querySelectorAll(".theme-option");
+    const maxIndex = themeOptions.length - 1;
+
+    switch (event.key) {
+      case "ArrowDown":
+      case "Down":
+        event.preventDefault();
+        currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
+        updateFocus(themeOptions);
+        break;
+
+      case "ArrowUp":
+      case "Up":
+        event.preventDefault();
+        currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
+        updateFocus(themeOptions);
+        break;
+
+      case "Enter":
+        event.preventDefault();
+        closeModal(true);
+        break;
+
+      case "Escape":
+      case "Esc":
+        event.preventDefault();
+        closeModal(false);
+        break;
+    }
+  }
+
+  // 初始化主题
+  applyTheme(getThemePreference());
+
+  // 监听系统主题改变
+  colorSchemeMediaQuery.addEventListener("change", () => {
+    if (getThemePreference() === "system") {
+      applyTheme("system");
+    }
+  });
+
+  // 监听主题选择框变化 (legacy support)
+  document.addEventListener("change", (event) => {
+    if (event.target.id === THEME_SELECTOR_ID) {
+      applyTheme(event.target.value, true);
+    }
+  });
+
+  // 监听点击事件
+  document.addEventListener("click", (event) => {
+    // Open modal when theme selector is clicked
+    if (event.target.closest(".theme-selector-trigger")) {
+      event.preventDefault();
+      openModal();
+      return;
+    }
+
+    // Close modal when backdrop is clicked
+    if (event.target.classList.contains("theme-selector-backdrop")) {
+      event.preventDefault();
+      closeModal(false);
+      return;
+    }
+
+    // Handle theme option click in modal
+    const themeOption = event.target.closest(".theme-option");
+    if (themeOption && isModalOpen) {
+      event.preventDefault();
+      const modal = document.getElementById("theme-selector-modal");
+      const themeOptions = modal.querySelectorAll(".theme-option");
+      currentIndex = parseInt(themeOption.getAttribute("data-index"), 10);
+      updateFocus(themeOptions);
+      // Small delay before closing to show selection
+      setTimeout(() => closeModal(true), 150);
+      return;
+    }
+  });
+
+  // 监听键盘事件
+  document.addEventListener("keydown", handleKeyboard);
+
+  // Export for navbar to get current theme
+  window.getThemePreference = getThemePreference;
+})(window, document, window.localStorage);

package/util/cache.js

@@ -0,0 +1,47 @@
+/**
+ * View cache utility functions.
+ * @module util/cache
+ */
+const crypto = require("node:crypto");
+const { createElement } = require("inferno-create-element");
+
+const cache = {};
+
+function computeHash(props) {
+  return crypto.createHash("md5").update(JSON.stringify(props)).digest("hex");
+}
+
+module.exports = {
+  /**
+   * Create cached component from a given component class.
+   * The cache ID is caculated from the input props.
+   *
+   * @param {Component}   type        JSX component class
+   * @param {string}      prefix      Cache ID prefix
+   * @param {Function}    transform   Transform the input props to target props and
+   *                                  its result is used to compute cache ID
+   * @returns The new cachable functional component, which uses the <code>transform</code> function and the
+   *          component props to calculate the cache ID.
+   * <br>
+   *          The cache ID will be used to determine whether the same element with the exact same
+   *          props has been created and cached. If so, the cached element will be returned.
+   *          If the cache ID can be computed, a new element will be created use the
+   *          <code>createElement</code> function of the inferno.js, then it will be cached and returned.
+   *          If the <code>transform</code>ed props is empty (<code>!transform(props)</code>), the cachable
+   *          functional component will also return null element when <code>createElement</code> is called
+   *          on it.
+   */
+  cacheComponent(type, prefix, transform) {
+    return (props) => {
+      const targetProps = transform(props);
+      if (targetProps === null || typeof targetProps !== "object") {
+        return null;
+      }
+      const cacheId = `${prefix}-${computeHash(targetProps)}`;
+      if (!cache[cacheId]) {
+        cache[cacheId] = createElement(type, targetProps);
+      }
+      return cache[cacheId];
+    };
+  },
+};