hexo-theme-gnix 6.0.2 → 6.0.3

package/layout/comment/twikoo.jsx

@@ -8,10 +8,9 @@ const {
 class Twikoo extends Component {
   render() {
     const { envId, region, lang, jsUrl } = this.props;
-    const js = `
-window.twikooConfig = { envId: '${envId}', ${region ? `region: ${JSON.stringify(region)},` : ""} ${lang ? `lang: ${JSON.stringify(lang)},` : ""} };
-twikoo.init(window.twikooConfig);
-    `;
+    const configJs = `window.twikooConfig = { envId: '${envId}', ${
+      region ? `region: ${JSON.stringify(region)},` : ""
+    } ${lang ? `lang: ${JSON.stringify(lang)},` : ""} };`;
     const lazy_load_css_script = lazy_load_css("/css/twikoo.css");
     return (
       <Fragment>
@@ -19,7 +18,8 @@ twikoo.init(window.twikooConfig);
         <script
           dangerouslySetInnerHTML={{ __html: lazy_load_css_script }}
         ></script>
-        <script defer src={jsUrl} onload={`${js}`}></script>
+        <script dangerouslySetInnerHTML={{ __html: configJs }}></script>
+        <script defer src={jsUrl}></script>
       </Fragment>
     );
   }

package/layout/common/article_cover.jsx

@@ -10,13 +10,9 @@ module.exports = class extends Component {
 
     return (
       <a href={url_for(page.link || page.path)} class="cover-image">
+        <img class="cover-lqip" src={lqip_src} alt="placeholder" />
         <img
-          class="cover-image-placeholder"
-          src={lqip_src}
-          alt="placeholder"
-        />
-        <img
-          class="fill"
+          class="cover-origin"
           src={cover}
           alt={page.title || cover}
           srcset={imageSrcset}

package/layout/common/plugins.jsx

@@ -12,8 +12,8 @@ module.exports = class extends Component {
     return (
       <Fragment>
         {Object.keys(plugins).map((name) => {
-          // plugin is not enabled
-          if (!plugins[name]) {
+          // plugin is not enabled or is 'swup' (which is now built-in)
+          if (!plugins[name] || name === "swup") {
             return null;
           }
           const Plugin = loadComponent(`plugin/${name}`);

package/layout/common/scripts.jsx

@@ -1,5 +1,6 @@
 const { Component, Fragment } = require("../../include/util/common");
 const Plugins = require("./plugins");
+const Swup = require("../plugin/swup");
 
 module.exports = class extends Component {
   render() {
@@ -14,6 +15,7 @@ module.exports = class extends Component {
           helper={helper}
           head={false}
         />
+        <Swup head={false} />
         <script
           defer
           src="/js/host/iconify-icon/3.0.2/iconify-icon.min.js"
@@ -23,7 +25,7 @@ module.exports = class extends Component {
           defer
           src="/js/host/medium-zoom/dist/medium-zoom.min.js"
         ></script>
-        <script defer src="/js/shiki/shiki.js"></script>
+        <script defer src="/js/mdit/shiki.js"></script>
         <script defer src="/js/main.js"></script>
         <script async src="/js/instant-page.min.js" type="module"></script>
       </Fragment>

package/layout/layout.jsx

@@ -19,7 +19,11 @@ module.exports = class extends Component {
           <Navbar config={config} helper={helper} page={page} />
           <ThemeSelector />
           <section class="section">
-            <div class="main-content" id="swup" dangerouslySetInnerHTML={{ __html: body }} ></div>
+            <div
+              class="main-content transition-fade"
+              id="swup"
+              dangerouslySetInnerHTML={{ __html: body }}
+            ></div>
           </section>
           <Footer site={site} config={config} helper={helper} />
           <Scripts site={site} config={config} helper={helper} page={page} />

package/layout/plugin/swup.jsx

@@ -10,6 +10,7 @@ class Swup extends Component {
 const swup = new Swup({
   containers: ["#swup"],
   cache: true,
+  native: true,
   plugins: [
     new SwupHeadPlugin({
       persistTags: true

package/layout/search/insight.jsx

@@ -26,7 +26,7 @@ class Insight extends Component {
             <div class="searchbox-body"></div>
           </div>
         </div>
-        <script src={jsUrl} defer={true}></script>
+        <script defer src={jsUrl}></script>
         <script dangerouslySetInnerHTML={{ __html: js }}></script>
       </>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "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

@@ -1244,18 +1244,20 @@ section {
   margin-bottom: 0.25rem;
 }
 
-.licensing-meta .level-item {
-  margin-right: 1.5rem;
-  font-size: 0.75rem;
-}
+.licensing-meta {
+  .level-item {
+    margin-right: 1.5rem;
+    font-size: 0.75rem;
+  }
 
-.licensing-meta iconify-icon {
-  font-size: 1.5em;
-  vertical-align: bottom;
-}
+  iconify-icon {
+    font-size: 1.5em;
+    vertical-align: bottom;
+  }
 
-.licensing-meta a {
-  color: inherit;
+  a {
+    color: inherit;
+  }
 }
 
 /* #endregion Licensing */
@@ -1274,12 +1276,12 @@ section {
   opacity: 0;
   visibility: hidden;
   display: flex;
-}
 
-.searchbox.show {
-  opacity: 1;
-  visibility: visible;
-  backdrop-filter: blur(5px);
+  &.show {
+    opacity: 1;
+    visibility: visible;
+    backdrop-filter: blur(5px);
+  }
 }
 
 input.searchbox-input {
@@ -1359,6 +1361,7 @@ input.searchbox-input {
 
 .searchbox-result-preview {
   color: var(--subtext0);
+  margin-top: 0.25em;
 }
 
 .searchbox-result-preview,
@@ -1369,14 +1372,8 @@ input.searchbox-input {
   text-overflow: ellipsis;
 }
 
-.searchbox-result-preview {
-  margin-top: 0.25em;
-}
-
 /* #endregion Search */
 
-/* #region Article Cover */
-
 .cover-image {
   position: relative;
   display: block;
@@ -1384,7 +1381,14 @@ input.searchbox-input {
   border-radius: var(--radius) var(--radius) 0 0;
   height: 380px;
 
-  .cover-image-placeholder {
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .cover-lqip {
     position: absolute;
     top: 0;
     left: 0;
@@ -1392,17 +1396,29 @@ input.searchbox-input {
     filter: blur(10px);
   }
 
-  .fill {
+  .cover-origin {
     position: relative;
     z-index: 2;
   }
 }
 
-.cover-image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+/* html.is-changing .transition-fade {
+  view-transition-name: main;
 }
 
-/* #endregion Article Cover */
+::view-transition-old(main) {
+  animation: fade 0.5s ease-in-out both;
+}
+
+::view-transition-new(main) {
+  animation: fade 0.5s ease-in-out both reverse;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+} */

package/source/css/optional/mermaid.css

@@ -0,0 +1,123 @@
+.mermaid-container {
+  margin: 1em 0;
+  position: relative;
+}
+.mermaid-wrapper {
+  border: 1px solid var(--surface0);
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+  background: var(--mantle);
+}
+.mermaid-toolbar {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 20;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.mermaid-wrapper:hover .mermaid-toolbar {
+  opacity: 1;
+}
+.mermaid-view-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  overflow: hidden;
+  cursor: grab;
+  display: flex;
+  flex-direction: column;
+}
+.mermaid-view-container:active {
+  cursor: grabbing;
+}
+.mermaid-content {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+  transform-origin: center;
+  transition: transform 0.2s ease;
+}
+.mermaid-viewer-grid-panel {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  gap: 4px;
+}
+.mermaid-wrapper:hover .mermaid-viewer-grid-panel {
+  opacity: 1;
+}
+.mermaid-viewer-grid-panel .grid-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+}
+.mermaid-viewer-grid-panel .empty-cell {
+  width: 32px;
+  height: 32px;
+}
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--base);
+  border: 1px solid var(--surface0);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(4px);
+  color: var(--text);
+  padding: 0;
+}
+.btn:hover {
+  transform: scale(1.05);
+}
+.btn:active {
+  transform: scale(0.95);
+}
+.btn svg {
+  fill: currentColor;
+}
+.mermaid-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #586069;
+  font-style: italic;
+  background: rgba(255, 255, 255, 0.5);
+  z-index: 5;
+}
+
+@media (max-width: 768px) {
+  .mermaid-wrapper {
+    border-radius: 3px;
+  }
+  .mermaid-toolbar,
+  .mermaid-viewer-grid-panel {
+    opacity: 1;
+  }
+  .btn {
+    width: 28px;
+    height: 28px;
+  }
+}

package/source/js/main.js

@@ -111,17 +111,75 @@ function handleKeyDown(e) {
   }
 }
 
+function handleMermaid() {
+  const containers = document.querySelectorAll(".mermaid-container");
+  if (containers.length === 0) return;
+
+  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);
+  }
+
+  const runInit = () => {
+    const isNight = document.documentElement.classList.contains("night");
+    const theme = isNight ? "dark" : "default";
+    const libUrl = "/js/host/mermaid/mermaid.min.js";
+
+    containers.forEach((container, index) => {
+      if (!container.id) {
+        container.id = `mermaid-${Date.now()}-${index}`;
+      }
+      if (window.initMermaidDiagram) {
+        window.initMermaidDiagram(container.id, libUrl, theme, {});
+      }
+    });
+  };
+
+  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);
+    }
+  }
+}
+
 // #endregion
 
 function initLogic() {
   initializeTabs();
+  handleMermaid();
   mediumZoom(".article img", {
     background: "hsla(from var(--mantle) / 0.9)",
   });
   if (document.getElementById("twikoo")) {
-    setTimeout(() => {
-      twikoo?.init(window.twikooConfig);
-    }, 600);
+    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);
+      }
+    }
   }
 }
 
@@ -131,7 +189,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
 // Re-initialize on page changes when using swup
 if (typeof swup !== "undefined") {
-  swup.hooks.on("page:view", () => {
+  swup.hooks.on("page:view", (visit) => {
+    console.log("New page loaded:", visit.to.url);
     initLogic();
   });
 }

package/source/js/mdit/mermaid.js

@@ -0,0 +1,169 @@
+(() => {
+  const instances = new Map();
+  let mermaidPromise = null;
+  const loadMermaid = (jsUrl) => {
+    if (mermaidPromise) return mermaidPromise;
+    if (window.mermaid) {
+      mermaidPromise = Promise.resolve(window.mermaid);
+      return mermaidPromise;
+    }
+    return (mermaidPromise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = jsUrl;
+      script.onload = () => resolve(window.mermaid);
+      script.onerror = reject;
+      document.head.appendChild(script);
+    }));
+  };
+
+  const renderDiagram = async (id, code, container, themeVariables) => {
+    const content = container.querySelector(".mermaid-content");
+    const mermaid = await mermaidPromise;
+    if (!content || !mermaid) return;
+
+    // Initialize with current theme
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: document.documentElement.classList.contains("night")
+        ? "dark"
+        : "default",
+      darkMode: document.documentElement.classList.contains("night"),
+      themeVariables,
+      securityLevel: "strict",
+      fontSize: 16,
+    });
+
+    try {
+      content.innerHTML = "";
+      const { svg } = await mermaid.render(`${id}-svg`, code);
+      content.insertAdjacentHTML("beforeend", svg);
+    } catch (error) {
+      console.error("Mermaid rendering error:", error);
+      content.innerHTML = `<p style="color: red;">Failed to render diagram: ${error.message}</p>`;
+    }
+  };
+
+  class PanZoomHandler {
+    constructor(container) {
+      this.container = container;
+      this.content = container.querySelector(".mermaid-content");
+      this.viewContainer = container.querySelector(".mermaid-view-container");
+      this.scale = 1;
+      this.tx = 0;
+      this.ty = 0;
+      this.isDragging = false;
+      this.startX = 0;
+      this.startY = 0;
+      this.initEvents();
+    }
+
+    apply() {
+      if (this.content) {
+        this.content.style.transform = `scale(${this.scale}) translate(${this.tx}px, ${this.ty}px)`;
+      }
+    }
+
+    initEvents() {
+      // Toolbar & Grid Panel
+      this.container.addEventListener("click", (e) => {
+        const btn = e.target.closest("button");
+        if (!btn) return;
+        const cl = btn.classList;
+
+        if (cl.contains("zoom-in")) this.scale = Math.min(this.scale * 1.2, 5);
+        else if (cl.contains("zoom-out"))
+          this.scale = Math.max(this.scale / 1.2, 0.2);
+        else if (cl.contains("reset")) {
+          this.scale = 1;
+          this.tx = 0;
+          this.ty = 0;
+        } else if (cl.contains("up")) this.ty += 40;
+        else if (cl.contains("down")) this.ty -= 40;
+        else if (cl.contains("left")) this.tx += 40;
+        else if (cl.contains("right")) this.tx -= 40;
+        else if (cl.contains("copy-code")) this.copyCode(btn);
+
+        this.apply();
+      });
+
+      // Dragging
+      if (this.viewContainer) {
+        this.viewContainer.addEventListener("mousedown", (e) => {
+          this.isDragging = true;
+          this.startX = e.clientX - this.tx;
+          this.startY = e.clientY - this.ty;
+          this.viewContainer.style.cursor = "grabbing";
+        });
+      }
+
+      window.addEventListener("mousemove", (e) => {
+        if (!this.isDragging) return;
+        e.preventDefault();
+        this.tx = e.clientX - this.startX;
+        this.ty = e.clientY - this.startY;
+        this.apply();
+      });
+
+      window.addEventListener("mouseup", () => {
+        if (this.isDragging) {
+          this.isDragging = false;
+          if (this.viewContainer) this.viewContainer.style.cursor = "grab";
+        }
+      });
+    }
+
+    copyCode(btn) {
+      const codeEl = this.container.querySelector(".mermaid-code");
+      if (!codeEl) return;
+      navigator.clipboard.writeText(codeEl.textContent).then(() => {
+        const originalTitle = btn.getAttribute("title");
+        btn.setAttribute("title", "Copied!");
+        setTimeout(() => btn.setAttribute("title", originalTitle), 2000);
+      });
+    }
+  }
+
+  const pruneInstances = () => {
+    for (const [id, { container }] of instances) {
+      if (!document.body.contains(container)) {
+        instances.delete(id);
+      }
+    }
+  };
+
+  window.initMermaidDiagram = (id, jsUrl, _theme, themeVariables) => {
+    const container = document.getElementById(id);
+    if (!container) return;
+
+    pruneInstances();
+    if (instances.has(id)) return;
+
+    const codeEl = container.querySelector(".mermaid-code");
+    if (!codeEl) return;
+
+    new PanZoomHandler(container);
+    instances.set(id, { container, code: codeEl.textContent, themeVariables });
+
+    loadMermaid(jsUrl).then(() => {
+      renderDiagram(id, codeEl.textContent, container, themeVariables);
+    });
+  };
+
+  // Theme Observer
+  const observer = new MutationObserver((mutations) => {
+    const isThemeChange = mutations.some(
+      (m) => m.type === "attributes" && m.attributeName === "class",
+    );
+    if (isThemeChange) {
+      pruneInstances();
+      instances.forEach(({ container, code, themeVariables }, id) => {
+        renderDiagram(id, code, container, themeVariables);
+      });
+    }
+  });
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+})();