hexo-theme-gnix 6.0.1 → 6.0.3

package/languages/en.yml

@@ -41,7 +41,7 @@ plugin:
     policy: Cookie Policy
 search:
   search: "Search"
-  hint: "Search(Ctrl/󰘳 + K)"
+  hint: "Search(󰘳 + K)"
   no_result: "No results for"
   untitled: "(Untitled)"
   empty_preview: "(No preview)"

package/languages/zh-CN.yml

@@ -41,7 +41,7 @@ plugin:
     policy: Cookie政策
 search:
   search: "搜索"
-  hint: "想要查找什么...(Ctrl/󰘳 + K)"
+  hint: "想要查找什么...(󰘳 + K)"
   no_result: "未找到搜索结果"
   untitled: "(无标题)"
   empty_preview: "(无内容预览)"

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/common/toc.jsx

@@ -41,7 +41,7 @@ class FloatingToc extends Component {
         </button>
         <div
           class="toc-body"
-          onclick="if(event.target === this || event.target.closest('.toc-link')) { document.getElementById('icarus-toc-container').classList.remove('is-open'); }"
+          onclick="if(event.target === this || event.target.matches('.toc-link')) { document.getElementById('icarus-toc-container').classList.remove('is-open'); }"
         >
           <div dangerouslySetInnerHTML={{ __html: tocContent }} />
         </div>

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.1",
+  "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

@@ -769,10 +769,8 @@ body {
     margin: 1rem 0 1rem;
     border-bottom: 0.8px solid var(--surface0);
 
-    > a.header-anchor {
-      &:hover::after {
-        content: "##";
-      }
+    > a.header-anchor:hover::after {
+      content: "##";
     }
   }
 
@@ -783,10 +781,8 @@ body {
     letter-spacing: -0.015em;
     margin: 1.2rem 0 1rem;
 
-    > a.header-anchor {
-      &:hover::after {
-        content: "###";
-      }
+    > a.header-anchor:hover::after {
+      content: "###";
     }
   }
 
@@ -797,10 +793,8 @@ body {
     letter-spacing: -0.01em;
     margin: 1.2rem 0 1rem;
 
-    > a.header-anchor {
-      &:hover::after {
-        content: "####";
-      }
+    > a.header-anchor:hover::after {
+      content: "####";
     }
   }
 
@@ -811,10 +805,8 @@ body {
     letter-spacing: -0.005em;
     margin: 1.2rem 0 1rem;
 
-    > a.header-anchor {
-      &:hover::after {
-        content: "#####";
-      }
+    > a.header-anchor:hover::after {
+      content: "#####";
     }
   }
 
@@ -824,10 +816,8 @@ body {
     line-height: 1.25;
     margin: 1.2rem 0 1rem;
 
-    > a.header-anchor {
-      &:hover::after {
-        content: "######";
-      }
+    > a.header-anchor:hover::after {
+      content: "######";
     }
   }
 
@@ -1254,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 */
@@ -1284,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 {
@@ -1369,6 +1361,7 @@ input.searchbox-input {
 
 .searchbox-result-preview {
   color: var(--subtext0);
+  margin-top: 0.25em;
 }
 
 .searchbox-result-preview,
@@ -1379,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;
@@ -1394,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;
@@ -1402,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;
+}
+
+::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;
 }
 
-/* #endregion Article Cover */
+@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/css/responsive/desktop.css

@@ -45,16 +45,16 @@
   transform: translateY(-50%);
 }
 
-#icarus-toc-container .toc-button {
+.toc-button {
   display: none;
 }
 
-#icarus-toc-container .toc-body {
+.toc-body {
   display: block;
   background: transparent;
 }
 
-#icarus-toc-container .toc {
+.toc {
   padding: 0;
   margin: 0;
   list-style: none;
@@ -63,7 +63,7 @@
   align-items: flex-end;
 }
 
-#icarus-toc-container .toc-item {
+.toc-item {
   list-style: none;
   margin-bottom: 8px;
   position: relative;
@@ -73,91 +73,82 @@
   align-items: flex-end;
 }
 
-#icarus-toc-container .toc-link {
+/* Text Label */
+.toc-text {
+  opacity: 0;
+  transform: translateX(10px);
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+  color: var(--text);
+  white-space: nowrap;
+  position: absolute;
+  right: 100%;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+/* Hover on Container -> Show all text */
+#icarus-toc-container:hover .toc-text {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toc-link {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   text-decoration: none;
-  height: 20px;
+  height: 23px;
   position: relative;
+  &:hover {
+    &::after {
+      background-color: var(--rosewater);
+      box-shadow: 0 0 8px var(--lavender);
+    }
+    .toc-text {
+      color: var(--mauve);
+    }
+  }
 }
 
 /* The Abstract Bar */
-#icarus-toc-container .toc-link::after {
+.toc-link::after {
   content: "";
   display: block;
   height: 4px;
   border-radius: 2px;
-  background-color: var(--text);
-  opacity: 0.3;
+  background-color: var(--surface0);
   transition: all 0.3s ease;
   margin-left: 15px;
 }
 
 /* Level variations - Width */
-#icarus-toc-container .toc-level-1 > .toc-link::after {
+.toc-level-1 > .toc-link::after {
   width: 30px;
 }
 
-#icarus-toc-container .toc-level-2 > .toc-link::after {
+.toc-level-2 > .toc-link::after {
+  width: 30px;
+}
+
+.toc-level-3 > .toc-link::after {
   width: 24px;
 }
 
-#icarus-toc-container .toc-level-3 > .toc-link::after {
+.toc-level-4 > .toc-link::after {
   width: 18px;
 }
 
-#icarus-toc-container .toc-level-4 > .toc-link::after {
+.toc-level-5 > .toc-link::after {
   width: 14px;
 }
 
-#icarus-toc-container .toc-level-5 > .toc-link::after {
+.toc-level-6 > .toc-link::after {
   width: 10px;
 }
 
-#icarus-toc-container .toc-level-6 > .toc-link::after {
-  width: 6px;
-}
-
-/* Text Label */
-#icarus-toc-container .toc-text {
-  opacity: 0;
-  transform: translateX(10px);
-  transition: all 0.3s ease;
-  font-size: 0.85rem;
-  color: var(--text);
-  white-space: nowrap;
-  position: absolute;
-  right: 100%;
-  /* Position to the left of the link/bar */
-  margin-right: 10px;
-  pointer-events: none;
-}
-
-/* Hover on Container -> Show all text */
-#icarus-toc-container:hover .toc-text {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-/* Active State */
-#icarus-toc-container .toc-item.is-active > .toc-link::after {
-  background-color: var(--lavender);
-  opacity: 1;
-  width: 40px;
-  /* Highlighted length */
-  box-shadow: 0 0 8px var(--lavender);
-}
-
-#icarus-toc-container .toc-item.is-active > .toc-link .toc-text {
-  opacity: 1;
-  transform: translateX(0);
-  font-weight: bold;
-  color: var(--lavender);
-}
-
 /* Hide children lists container styling if any */
-#icarus-toc-container .toc-child {
+.toc-child {
   padding: 0;
   margin: 0;
   display: contents;

package/source/css/responsive/touch.css

@@ -26,10 +26,10 @@
   justify-content: center;
   display: inline-flex;
   flex-direction: row;
-  padding: 1rem 0;
   width: 100%;
-  .navbar-item {
+  > .navbar-item {
     font-size: 1.25em;
+    padding: 1em;
   }
 }
 
@@ -136,23 +136,10 @@
 /* #endregion Navbar */
 
 .theme-selector-content {
-  width: 95%;
+  width: 80%;
   padding: 1.5rem;
 }
 
-.theme-selector-title {
-  font-size: 1.5rem;
-}
-
-.theme-option {
-  padding: 0.875rem 1rem;
-  gap: 0.75rem;
-}
-
-.theme-option .theme-name {
-  font-size: 1rem;
-}
-
 /* #region TOC  */
 #icarus-toc-container .toc-button:hover {
   transform: scale(1.1);