hexo-theme-gnix 4.0.2 → 4.0.4

package/layout/archive.jsx

@@ -63,7 +63,11 @@ module.exports = class extends Component {
         <div class="card">
           <div class="card-content">
             <span class="year">
-              {month === null ? year : isValid(time) ? format(time, "LLLL yyyy") : year}
+              {month === null
+                ? year
+                : isValid(time)
+                  ? format(time, "LLLL yyyy")
+                  : year}
             </span>
             <div class="timeline">
               {posts.map((post) => {
@@ -91,7 +95,9 @@ module.exports = class extends Component {
       articleList = Object.keys(years)
         .sort((a, b) => b - a)
         .map((year) => {
-          const posts = page.posts.filter((p) => p.date.year() === parseInt(year, 10));
+          const posts = page.posts.filter(
+            (p) => p.date.year() === parseInt(year, 10),
+          );
           return renderArticleList(posts, year, null);
         });
     } else {

package/layout/common/article.jsx

@@ -14,7 +14,9 @@ function getWordCount(content) {
   }
   content = content.replace(/<\/?[a-z][^>]*>/gi, "");
   content = content.trim();
-  return content ? (content.match(/[\u00ff-\uffff]|[a-zA-Z]+/g) || []).length : 0;
+  return content
+    ? (content.match(/[\u00ff-\uffff]|[a-zA-Z]+/g) || []).length
+    : 0;
 }
 
 module.exports = class extends Component {
@@ -34,27 +36,45 @@ module.exports = class extends Component {
         {/* Main content */}
         <div class="card article-wrapper">
           {/* Cover image */}
-          {cover ? <ArticleCover page={page} cover={cover} index={index} helper={helper} /> : null}
-          <article class={`card-content article${"direction" in page ? ` ${page.direction}` : ""}`}>
+          {cover ? (
+            <ArticleCover
+              page={page}
+              cover={cover}
+              index={index}
+              helper={helper}
+            />
+          ) : null}
+          <article
+            class={`card-content article${"direction" in page ? ` ${page.direction}` : ""}`}
+          >
             {/* Title */}
             {page.title !== "" && index ? (
               <h2 class="article-title">
                 <a href={url_for(page.link || page.path)}>{page.title}</a>
               </h2>
             ) : null}
-            {page.title !== "" && !index ? <h1 class="article-title">{page.title}</h1> : null}
+            {page.title !== "" && !index ? (
+              <h1 class="article-title">{page.title}</h1>
+            ) : null}
 
             {/* Metadata - Medium style */}
             {page.layout !== "page" ? (
               <div class="article-header-meta">
                 <div class="article-meta-info">
                   {page.date && (
-                    <time class="article-date" datetime={page.date.toISOString()}>
+                    <time
+                      class="article-date"
+                      datetime={page.date.toISOString()}
+                    >
                       {format(page.date, "LLL dd")}
                     </time>
                   )}
-                  {page.date && (wordCount > 0 || !index) && <span class="meta-separator">·</span>}
-                  {wordCount > 0 && <span class="article-reading-time">{readTime} min</span>}
+                  {page.date && (wordCount > 0 || !index) && (
+                    <span class="meta-separator">·</span>
+                  )}
+                  {wordCount > 0 && (
+                    <span class="article-reading-time">{readTime} min</span>
+                  )}
                   {!index && (
                     <Fragment>
                       <span class="meta-separator">·</span>
@@ -73,7 +93,11 @@ module.exports = class extends Component {
                     {page.tags.map((tag, idx) => (
                       <Fragment>
                         {idx > 0 && <span class="meta-separator">,</span>}
-                        <a class="article-tag" rel="tag" href={url_for(tag.path)}>
+                        <a
+                          class="article-tag"
+                          rel="tag"
+                          href={url_for(tag.path)}
+                        >
                           {tag.name}
                         </a>
                       </Fragment>
@@ -91,13 +115,22 @@ module.exports = class extends Component {
               }}
             ></div>
             {/* Licensing block */}
-            {!index && article && article.licenses && Object.keys(article.licenses) ? (
-              <ArticleLicensing.Cacheable page={page} config={config} helper={helper} />
+            {!index &&
+            article &&
+            article.licenses &&
+            Object.keys(article.licenses) ? (
+              <ArticleLicensing.Cacheable
+                page={page}
+                config={config}
+                helper={helper}
+              />
             ) : null}
           </article>
         </div>
         {/* Comment */}
-        {!index ? <Comment config={config} page={page} helper={helper} /> : null}
+        {!index ? (
+          <Comment config={config} page={page} helper={helper} />
+        ) : null}
       </Fragment>
     );
   }

package/layout/common/head.jsx

@@ -90,7 +90,8 @@ module.exports = class extends Component {
     if (
       typeof structured_data === "object" &&
       structured_data !== null &&
-      ((Array.isArray(structured_data.image) && structured_data.image.length > 0) ||
+      ((Array.isArray(structured_data.image) &&
+        structured_data.image.length > 0) ||
         typeof structured_data.image === "string")
     ) {
       structuredImages = structured_data.image;
@@ -144,7 +145,9 @@ module.exports = class extends Component {
               page.content ||
               config.description
             }
-            keywords={(page.tags?.length ? page.tags : undefined) || config.keywords}
+            keywords={
+              (page.tags?.length ? page.tags : undefined) || config.keywords
+            }
             url={open_graph.url || page.permalink || url}
             images={openGraphImages}
             siteName={open_graph.site_name || config.title}
@@ -221,7 +224,13 @@ module.exports = class extends Component {
           onload="this.onload=null;this.rel='stylesheet'"
         />
         <link rel="stylesheet" href="/css/shiki/shiki.css" />
-        <Plugins site={site} config={config} helper={helper} page={page} head={true} />
+        <Plugins
+          site={site}
+          config={config}
+          helper={helper}
+          page={page}
+          head={true}
+        />
         {adsenseClientId ? (
           <script
             data-ad-client={adsenseClientId}

package/layout/common/scripts.jsx

@@ -7,24 +7,45 @@ module.exports = class extends Component {
 
     return (
       <Fragment>
-        {config.comment?.js_url && <script defer src={config.comment.js_url}></script>}
-        <Plugins site={site} config={config} page={page} helper={helper} head={false} />
+        {config.comment?.js_url && (
+          <script defer src={config.comment.js_url}></script>
+        )}
+        <Plugins
+          site={site}
+          config={config}
+          page={page}
+          helper={helper}
+          head={false}
+        />
         <script defer data-pjax src="/js/main.js"></script>
-        <script async src="/js/host/iconify-icon/3.0.2/iconify-icon.min.js"></script>
+        <script
+          async
+          src="/js/host/iconify-icon/3.0.2/iconify-icon.min.js"
+        ></script>
         <script async src="/js/theme-selector.js"></script>
-        <script defer src="/js/host/medium-zoom/dist/medium-zoom.min.js"></script>
+        <script
+          defer
+          src="/js/host/medium-zoom/dist/medium-zoom.min.js"
+        ></script>
         <script async src="/js/shiki/shiki.js"></script>
         <script async src="/js/instant-page.min.js" type="module"></script>
         {config?.plugins?.live2d_Asoul && (
           <>
             <script defer src="/js/live2d_Asoul/TweenLite.min.js"></script>
-            <script defer src="/js/live2d_Asoul/live2dcubismcore.min.js"></script>
+            <script
+              defer
+              src="/js/live2d_Asoul/live2dcubismcore.min.js"
+            ></script>
             <script defer src="/js/live2d_Asoul/pixi.min.js"></script>
             <script defer src="/js/live2d_Asoul/cubism4.min.js"></script>
             <script defer src="/js/live2d_Asoul/pio.js"></script>
             <script defer src="/js/live2d_Asoul/pio_sdk4.js"></script>
             <script defer src="/js/live2d_Asoul/load.js"></script>
-            <link href="/js/live2d_Asoul/pio.css" rel="stylesheet" type="text/css" />
+            <link
+              href="/js/live2d_Asoul/pio.css"
+              rel="stylesheet"
+              type="text/css"
+            />
           </>
         )}
       </Fragment>

package/layout/misc/article_licensing.jsx

@@ -67,7 +67,12 @@ class ArticleLicensing extends Component {
                   <p>{licensedTitle}</p>
                   <p>
                     {Object.keys(licenses).map((name) => (
-                      <a rel="noopener" target="_blank" title={name} href={licenses[name].url}>
+                      <a
+                        rel="noopener"
+                        target="_blank"
+                        title={name}
+                        href={licenses[name].url}
+                      >
                         <iconify-icon icon={licenses[name].icon} />
                       </a>
                     ))}
@@ -82,33 +87,39 @@ class ArticleLicensing extends Component {
   }
 }
 
-ArticleLicensing.Cacheable = cacheComponent(ArticleLicensing, "misc.articlelicensing", (props) => {
-  const { config, page, helper } = props;
-  const { licenses } = config.article || {};
+ArticleLicensing.Cacheable = cacheComponent(
+  ArticleLicensing,
+  "misc.articlelicensing",
+  (props) => {
+    const { config, page, helper } = props;
+    const { licenses } = config.article || {};
 
-  const links = {};
-  if (licenses) {
-    Object.keys(licenses).forEach((name) => {
-      const license = licenses[name];
-      links[name] = {
-        url: helper.url_for(typeof license === "string" ? license : license.url),
-        icon: license.icon,
-      };
-    });
-  }
+    const links = {};
+    if (licenses) {
+      Object.keys(licenses).forEach((name) => {
+        const license = licenses[name];
+        links[name] = {
+          url: helper.url_for(
+            typeof license === "string" ? license : license.url,
+          ),
+          icon: license.icon,
+        };
+      });
+    }
 
-  return {
-    title: page.title,
-    link: decodeURI(page.permalink),
-    author: page.author || config.author,
-    authorTitle: helper.__("article.licensing.author"),
-    createdAt: page.date ? helper.date(page.date) : null,
-    createdTitle: helper.__("article.licensing.created_at"),
-    updatedAt: page.updated ? helper.date(page.updated) : null,
-    updatedTitle: helper.__("article.licensing.updated_at"),
-    licenses: links,
-    licensedTitle: helper.__("article.licensing.licensed_under"),
-  };
-});
+    return {
+      title: page.title,
+      link: decodeURI(page.permalink),
+      author: page.author || config.author,
+      authorTitle: helper.__("article.licensing.author"),
+      createdAt: page.date ? helper.date(page.date) : null,
+      createdTitle: helper.__("article.licensing.created_at"),
+      updatedAt: page.updated ? helper.date(page.updated) : null,
+      updatedTitle: helper.__("article.licensing.updated_at"),
+      licenses: links,
+      licensedTitle: helper.__("article.licensing.licensed_under"),
+    };
+  },
+);
 
 module.exports = ArticleLicensing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "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/callout_blocks.css

@@ -116,4 +116,4 @@ details[open].callout > .callout-title > .callout-fold {
 .callout[data-callout="cite"] {
   --callout-icon: quote-glyph;
   --callout-color: var(--lavender);
-}
+}

package/source/css/default.css

@@ -1,15 +1,16 @@
 @charset "UTF-8";
 
 :root {
-  --font-serif: Georgia, "Times New Roman", Times, "Songti SC", "STSong", serif;
+  --font-serif:
+    "PT Serif", Georgia, "Times New Roman", Times, "Songti SC", "STSong", serif;
   --font-sans-serif:
     Avenir, Futura, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --font-monospace:
-    "Maple Mono NF CN", "Maple Mono NF", "SF Mono", "SF Pro", Menlo, Monaco,
+    "Maple Mono NF CN Local", "Maple Mono NF CN", "SF Mono", "SF Pro", Monaco,
     Consolas, "Liberation Mono", "Courier New", monospace;
   --font-article:
-    system-ui, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC",
+    "SF Pro", system-ui, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC",
     "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
     "Source Han Sans CN", sans-serif;
 }
@@ -203,24 +204,53 @@ a:hover {
   color: var(--blue);
 }
 
-h2 {
+a.header-anchor {
+  font-family: var(--font-sans-serif);
+}
+
+a.header-anchor:hover::after {
+  margin-left: 0.2em;
+  color: var(--surface0);
+}
+
+h2 a.header-anchor {
   color: var(--peach);
+
+  &:hover::after {
+    content: "##";
+  }
 }
 
-h3 {
+h3 a.header-anchor {
   color: var(--yellow);
+
+  &:hover::after {
+    content: "###";
+  }
 }
 
-h4 {
+h4 a.header-anchor {
   color: var(--green);
+
+  &:hover::after {
+    content: "####";
+  }
 }
 
-h5 {
+h5 a.header-anchor {
   color: var(--blue);
+
+  &:hover::after {
+    content: "#####";
+  }
 }
 
-h6 {
+h6 a.header-anchor {
   color: var(--mauve);
+
+  &:hover::after {
+    content: "######";
+  }
 }
 
 mark {
@@ -342,6 +372,13 @@ input:-webkit-autofill {
 /* #endregion Color */
 
 /* #region Font */
+
+@font-face {
+  font-family: "Maple Mono NF CN Local";
+  font-weight: 100 900;
+  src: local("MapleMono-NF-CN-Regular"),;
+}
+
 @font-face {
   font-family: doto;
   font-style: normal;
@@ -920,7 +957,7 @@ video {
   }
 
   h2 {
-    font-size: 2em;
+    font-size: 2.25em;
     font-weight: 700;
     line-height: 1.25;
     letter-spacing: -0.02em;
@@ -928,7 +965,7 @@ video {
   }
 
   h3 {
-    font-size: 1.875em;
+    font-size: 2em;
     font-weight: 700;
     line-height: 1.25;
     letter-spacing: -0.015em;
@@ -936,7 +973,7 @@ video {
   }
 
   h4 {
-    font-size: 1.5em;
+    font-size: 1.75em;
     font-weight: 600;
     line-height: 1.25;
     letter-spacing: -0.01em;
@@ -944,7 +981,7 @@ video {
   }
 
   h5 {
-    font-size: 1.25em;
+    font-size: 1.5em;
     font-weight: 600;
     line-height: 1.25;
     letter-spacing: -0.005em;
@@ -952,7 +989,7 @@ video {
   }
 
   h6 {
-    font-size: 1.2em;
+    font-size: 1.25em;
     font-weight: 600;
     line-height: 1.25;
     margin: 1.2rem 0 1rem;
@@ -967,7 +1004,6 @@ video {
   ul,
   ol,
   dl,
-  table,
   pre,
   details {
     margin-top: 0;
@@ -1064,6 +1100,18 @@ video {
     line-height: 1.45;
   }
 
+  code {
+    font-size: 0.85em;
+    font-weight: 400;
+    font-family: var(--font-monospace);
+    padding: 0 0.15em;
+    margin: 0 0.1em;
+    background-color: var(--base);
+    color: var(--subtext1);
+    border: 1px solid var(--surface0);
+    border-radius: 6px;
+  }
+
   sub,
   sup {
     font-size: 75%;
@@ -1156,7 +1204,7 @@ blockquote {
 }
 
 blockquote:before {
-  content: '”';
+  content: "”";
   position: absolute;
   left: 0.5rem;
   top: 0.2rem;
@@ -1219,18 +1267,6 @@ input.task-list-item-checkbox:checked::before {
   color: var(--base);
 }
 
-code {
-  font-size: 0.85em;
-  font-weight: 400;
-  font-family: var(--font-monospace);
-  padding: 0 0.15em;
-  margin: 0 0.1em;
-  background-color: var(--base);
-  color: var(--subtext1);
-  border: 1px solid var(--surface0);
-  border-radius: 6px;
-}
-
 strong {
   font-weight: bolder;
   padding: 0 0.1em;
@@ -1320,7 +1356,7 @@ section {
 .article-title {
   font-family: var(--font-article);
   font-size: 3em;
-  font-weight: 800;
+  font-weight: bold;
   line-height: 1.2;
   letter-spacing: -0.02em;
   margin-bottom: 0.4em;
@@ -1333,7 +1369,7 @@ section {
 }
 
 .article-header-meta {
-  font-family: var(--font-monospace);
+  font-family: Menlo, var(--font-monospace);
   font-style: italic;
   overflow: auto;
   margin-bottom: 1rem;
@@ -1526,4 +1562,4 @@ input.searchbox-input {
   margin-top: 0.25em;
 }
 
-/* #endregion Search */
+/* #endregion Search */

package/source/css/responsive/desktop.css

@@ -161,4 +161,4 @@
   padding: 0;
   margin: 0;
   display: contents;
-}
+}

package/source/css/responsive/mobile.css

@@ -46,4 +46,4 @@ table td {
 .pagination-list li {
   flex-grow: 1;
   flex-shrink: 1;
-}
+}

package/source/css/responsive/tablet.css

@@ -40,4 +40,4 @@
 
 .pagination-next {
   order: 3;
-}
+}

package/source/css/responsive/touch.css

@@ -184,7 +184,7 @@
 }
 
 #icarus-toc-container .toc-item {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 #icarus-toc-container .toc-text {
@@ -249,4 +249,4 @@
   width: 90%;
 }
 
-/* #endregion TOC  */
+/* #endregion TOC  */

package/source/css/shiki/shiki.css

@@ -135,7 +135,6 @@ figure.shiki {
 }
 
 @keyframes code-expand-pulse {
-
   0%,
   to {
     opacity: 0.6;
@@ -168,7 +167,6 @@ figure.shiki {
   }
 }
 
-
 pre.shiki {
   background: var(--mantle);
   padding: 0.6em;
@@ -221,10 +219,12 @@ figure.shiki[data-collapsible="true"]:not(.expanded) > pre.shiki:after {
   height: 80px;
   pointer-events: none;
   z-index: 1;
-  background: linear-gradient(transparent 0%,
-      hsl(from var(--mantle) h s l / 0.8),
-      30%,
-      var(--mantle) 100%);
+  background: linear-gradient(
+    transparent 0%,
+    hsl(from var(--mantle) h s l / 0.8),
+    30%,
+    var(--mantle) 100%
+  );
   opacity: 1;
 }
 
@@ -1651,4 +1651,4 @@ pre.shiki.has-focused > code {
   --shiki-nord-font-weight: inherit;
   --shiki-tokyo: #89ddff;
   --shiki-tokyo-font-weight: bold;
-}
+}

package/source/css/twikoo.css

@@ -24,7 +24,7 @@
 
 .tk-avatar .tk-avatar-img {
   height: 2.5rem;
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .tk-comment .tk-submit .tk-avatar .tk-avatar-img,
@@ -547,7 +547,7 @@
   height: 32px;
   width: 50px;
   margin: 0 0.5em;
-  padding-left: .5em;
+  padding-left: 0.5em;
   font-size: 1em;
   color: var(--text);
   background: var(--surface0);
@@ -672,16 +672,11 @@
 
 .tk-admin {
   position: absolute;
-  top: 0;
-  left: 100%;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   pointer-events: all;
-  color: var(--text);
-  background-color: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(5px);
-  transition: all 0.5s ease;
+  background-color: var(--mantle);
   visibility: hidden;
 }
 
@@ -726,7 +721,6 @@
 }
 
 .tk-login-title {
-  color: var(--base);
   font-size: 1.25rem;
   text-align: center;
   margin-top: 10rem;
@@ -734,7 +728,6 @@
 
 .tk-password,
 .tk-login-msg {
-  color: var(--base);
   width: 80%;
   text-align: center;
   margin-top: 1rem;
@@ -755,7 +748,6 @@
 }
 
 .tk-panel {
-  /* color: var(--text); */
   padding: 2rem;
 }
 
@@ -775,11 +767,11 @@
 .tk-panel .tk-tabs {
   display: flex;
   margin-bottom: 1em;
-  border-bottom: 2px solid #c0c4cc;
+  border-bottom: 1px solid var(--surface0);
 }
 
 .tk-panel .tk-tab {
-  color: #c0c4cc;
+  color: var(--subtext0);
   cursor: pointer;
   line-height: 2em;
   margin-right: 2em;
@@ -1134,7 +1126,7 @@
 .el-button.is-disabled.is-plain:hover {
   background-color: var(--base);
   border-color: #ebeef5;
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-button.is-loading {
@@ -1660,23 +1652,23 @@
 }
 
 .el-textarea__inner::-webkit-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea__inner:-ms-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea__inner::-ms-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea__inner::placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea__inner:hover {
-  border-color: #c0c4cc;
+  border-color: var(--subtext0);
 }
 
 .el-textarea__inner:focus {
@@ -1696,24 +1688,24 @@
 .el-textarea.is-disabled .el-textarea__inner {
   background-color: #f5f7fa;
   border-color: #e4e7ed;
-  color: #c0c4cc;
+  color: var(--subtext0);
   cursor: not-allowed;
 }
 
 .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea.is-disabled .el-textarea__inner::placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-textarea.is-exceed .el-textarea__inner {
@@ -1760,7 +1752,7 @@
 }
 
 .el-input .el-input__clear {
-  color: #c0c4cc;
+  color: var(--subtext0);
   font-size: 14px;
   cursor: pointer;
   -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -1819,7 +1811,7 @@
   transition: all 0.3s;
   text-align: center;
   height: 100%;
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-input__inner::-ms-reveal {
@@ -1827,19 +1819,19 @@
 }
 
 .el-input__inner::-webkit-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-input__inner:-ms-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-input__inner::-ms-input-placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-input__inner::placeholder {
-  color: #c0c4cc;
+  color: var(--subtext0);
 }
 
 .el-input.is-active .el-input__inner {
@@ -1886,7 +1878,7 @@
 .el-input.is-disabled .el-input__inner {
   background-color: #f5f7fa;
   border-color: #e4e7ed;
-  color: #c0c4cc;
+  color: var(--subtext0);
   cursor: not-allowed;
 }
 
@@ -2132,4 +2124,4 @@
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -120px;
   }
-}
+}