hexo-theme-gnix 5.0.9 → 5.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "5.0.9",
+  "version": "5.0.11",
   "author": "Efterklang <gaojiaxing0220@gmail.com>",
   "license": "MIT",
   "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",

package/source/css/default.css

@@ -868,11 +868,33 @@ body {
     margin: 1em auto;
   }
 
+  button.physical-btn,
+  kbd {
+    display: inline-block;
+    padding: 0.1em 0.3em;
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+    color: var(--subtext0);
+    user-select: none;
+    background: linear-gradient(180deg, var(--base) 0%, var(--mantle) 100%);
+    border: 1px solid var(--surface0);
+    border-bottom-width: 3px;
+    border-bottom-color: var(--surface0);
+    border-radius: 6px;
+    position: relative;
+    top: -3px;
+    transition:
+      top 0.1s ease,
+      border-bottom-width 0.1s ease,
+      box-shadow 0.1s ease;
+
+    &:active {
+      top: 0px;
+    }
+  }
   ol {
     list-style-position: outside;
     padding-left: 2em;
-    margin-top: 0;
-    margin-bottom: 0;
   }
 
   ul {

package/source/js/shiki/shiki.js

@@ -57,7 +57,7 @@ const FeatureHandlers = {
     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", 10);
+    const showLines = parseInt(figure.dataset.maxLines || "10", 10);
 
     if (isExpanded) {
       const computedStyle = getComputedStyle(pre);
@@ -88,7 +88,7 @@ function handleToolbarClick(event) {
   const classList = target.classList;
 
   const handlers = {
-    "expand": () => FeatureHandlers.expandCode(this),
+    expand: () => FeatureHandlers.expandCode(this),
     "copy-button": () => FeatureHandlers.copy(this, target),
     "toggle-wrap": () => FeatureHandlers.toggleWrap(this),
   };
@@ -138,7 +138,7 @@ function addHighlightTool() {
     // 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", 10);
+      const showLines = parseInt(figure.dataset.maxLines || "10", 10);
 
       if (pre) {
         // 确保元素已经渲染完成后再设置高度

package/source/js/theme-selector.js

@@ -18,20 +18,25 @@
   let previewTheme = null;
   let originalTheme = null;
   let isModalOpen = false;
+  let modal = null;
+  let themeOptions = [];
 
   function getThemePreference() {
     const stored = localStorage.getItem(STORAGE_KEY);
     return stored && stored in THEME_MAP ? stored : DEFAULT_THEME;
   }
 
+  function resolveTheme(theme) {
+    return theme === "system"
+      ? colorSchemeMediaQuery.matches
+        ? "mocha"
+        : "nord"
+      : theme;
+  }
+
   function applyTheme(theme, persist = false) {
     const html = document.documentElement;
-    const resolvedTheme =
-      theme === "system"
-        ? colorSchemeMediaQuery.matches
-          ? "mocha"
-          : "nord"
-        : theme;
+    const resolvedTheme = resolveTheme(theme);
     html.setAttribute("data-theme", resolvedTheme);
     html.classList.remove("night", "light");
     html.classList.add(THEME_MAP[resolvedTheme]);
@@ -41,82 +46,73 @@
     }
   }
 
+  function previewThemeOnOption(option, index) {
+    if (index === currentIndex) {
+      option.classList.add("is-focused");
+      option.scrollIntoView({ block: "nearest", behavior: "smooth" });
+
+      const theme = option.getAttribute("data-theme-option");
+      if (theme !== previewTheme) {
+        previewTheme = theme;
+        applyTheme(theme);
+      }
+    } else {
+      option.classList.remove("is-focused");
+    }
+  }
+
+  function updateFocus() {
+    themeOptions.forEach(previewThemeOnOption);
+  }
+
   function openModal() {
-    const modal = document.getElementById("theme-selector-modal");
+    modal = document.getElementById("theme-selector-modal");
     if (!modal || isModalOpen) return;
 
     isModalOpen = true;
     originalTheme = getThemePreference();
+    themeOptions = modal.querySelectorAll(".theme-option");
 
-    // 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);
+    updateFocus();
     modal.classList.add("is-active");
   }
 
   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");
+    themeOptions.forEach((option) => {
+      option.classList.remove("is-active");
+      option.classList.remove("is-focused");
+    });
+
     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");
-      }
-    });
+    modal = null;
+    themeOptions = [];
   }
 
   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) {
@@ -125,7 +121,7 @@
       case "Down":
         event.preventDefault();
         currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
-        updateFocus(themeOptions);
+        updateFocus();
         break;
 
       case "k":
@@ -133,7 +129,7 @@
       case "Up":
         event.preventDefault();
         currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
-        updateFocus(themeOptions);
+        updateFocus();
         break;
 
       case "Enter":
@@ -150,8 +146,10 @@
   }
 
   // 监听系统主题改变
-  colorSchemeMediaQuery.addEventListener("change", (event) => {
-    applyTheme(event.target.value, true);
+  colorSchemeMediaQuery.addEventListener("change", () => {
+    if (getThemePreference() === "system") {
+      applyTheme("system", true);
+    }
   });
 
   // 处理 modal 点击事件（关闭背景）
@@ -168,11 +166,8 @@
     event.preventDefault();
     event.stopPropagation();
 
-    const modal = document.getElementById("theme-selector-modal");
-    const themeOptions = modal.querySelectorAll(".theme-option");
     currentIndex = index;
-    updateFocus(themeOptions);
-    // Small delay before closing to show selection
+    updateFocus();
     setTimeout(() => closeModal(true), 150);
   };