hexo-theme-gnix 4.0.5 → 4.2.0

package/include/util/common.js

@@ -3,7 +3,28 @@
  */
 const { Component, Fragment } = require("inferno");
 const view = require("../hexo/view");
-const { cacheComponent } = require("../../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");
+}
+
+function 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];
+  };
+}
 
 function lazy_load_css(href) {
   script_str = `var link = document.createElement('link');

package/layout/archive.jsx

@@ -1,25 +1,38 @@
 const { format, isValid, parseISO } = require("date-fns");
 const { Component, Fragment } = require("../include/util/common");
-const Paginator = require("./misc/paginator");
 const ArticleMedia = require("./common/article_media");
 
 module.exports = class extends Component {
   render() {
-    const { config, page, helper } = this.props;
-    const { url_for, __, date_xml, date } = helper;
+    const { page, helper } = this.props;
+    const { url_for, date_xml, date } = helper;
 
     const inlineCSS = `
+            .winter {
+              --accent: var(--blue);
+            }
+            .autumn {
+              --accent: var(--red);
+            }
+            .summer {
+              --accent: var(--green);
+            }
+            .spring {
+              --accent: var(--peach);
+            }
+
             .article-meta {
               font-size: 0.8rem;
               color: var(--subtext1);
-              margin-bottom: 0.1rem;
+              font-family: var(--font-handwriting);
             }
-
             a.archive-title {
+              font-family: var(--font-sans-serif);
+              font-weight: 400;
               color: var(--text);
 
               &:hover {
-                color: var(--peach);
+                color: var(--accent);
               }
             }
 
@@ -28,46 +41,57 @@ module.exports = class extends Component {
                 top: 1.5rem;
                 right: 1.5rem;
                 z-index: 0;
-                font-size: 7.5rem;
                 font-weight: bolder;
-                font-family: Paris2024;
-                color: hsl(from var(--lavender) h s l / 0.15);
+                font-family: var(--font-handwriting);
+                font-size: 4em;
+                font-style: italic;
+                color: hsl(from var(--accent) h s l / 0.3);
                 line-height: 1;
                 user-select: none;
             }
-            .timeline .archive-item {
+
+            .archive-item {
                 display: flex;
                 text-align: left;
                 align-items: flex-start;
             }
-            .timeline .archive-item a {
-                color: var(--text);
-                transition: color 0.2s;
-            }
-            .timeline .archive-item a:hover {
-                color: var(--peach);
+            .archive-item > div {
+                display: flex;
+                align-items: baseline; /* 时间和标题的文字基线对齐 */
+                gap: 0.75rem;
             }
             .archive-item + .archive-item {
                 border: none;
                 margin-top: 0;
-                padding-top: .5rem;
+                padding-top: 1em;
             }
         `;
-    function renderArticleList(posts, year, month = null) {
+    function getSeason(month) {
+      if (month >= 2 && month <= 4) return "Spring";
+      if (month >= 5 && month <= 7) return "Summer";
+      if (month >= 8 && month <= 10) return "Autumn";
+      return "Winter";
+    }
+
+    function renderArticleList(posts, year, month = null, sectionTitle = null, season = null) {
       let time = null;
       if (page.year) {
         const mm = page.month ? String(page.month).padStart(2, "0") : "01";
         time = parseISO(`${page.year}-${mm}-01T00:00:00.000Z`);
       }
+
+      let title = `'${String(year).slice(-2)}`;
+      if (sectionTitle) {
+        title = sectionTitle;
+      } else if (month !== null && isValid(time)) {
+        title = format(time, "LLLL 'yy");
+      }
+
       return (
         <div class="card">
-          <div class="card-content">
+          <div class={["card-content", season ? season.toLowerCase() : null].filter(Boolean).join(" ")}>
             <span class="year">
-              {month === null
-                ? year
-                : isValid(time)
-                  ? format(time, "LLLL yyyy")
-                  : year}
+              {title}
             </span>
             <div class="timeline">
               {posts.map((post) => {
@@ -88,37 +112,37 @@ module.exports = class extends Component {
 
     let articleList;
     if (!page.year) {
-      const years = {};
+      const groups = [];
       page.posts.each((p) => {
-        years[p.date.year()] = null;
+        const year = p.date.year();
+        const month = p.date.month(); // 0-11
+        const season = getSeason(month);
+
+        const lastGroup = groups[groups.length - 1];
+        if (lastGroup && lastGroup.year === year && lastGroup.season === season) {
+          lastGroup.posts.push(p);
+        } else {
+          groups.push({
+            year,
+            season,
+            posts: [p]
+          });
+        }
+      });
+
+      articleList = groups.map((group) => {
+        const title = `'${String(group.year).slice(-2)} ${group.season}`;
+        return renderArticleList(group.posts, group.year, null, title, group.season);
       });
-      articleList = Object.keys(years)
-        .sort((a, b) => b - a)
-        .map((year) => {
-          const posts = page.posts.filter(
-            (p) => p.date.year() === parseInt(year, 10),
-          );
-          return renderArticleList(posts, year, null);
-        });
     } else {
-      articleList = renderArticleList(page.posts, page.year, page.month);
+      const season = page.month ? getSeason(page.month - 1) : null;
+      articleList = renderArticleList(page.posts, page.year, page.month, null, season);
     }
 
     return (
       <Fragment>
         <style dangerouslySetInnerHTML={{ __html: inlineCSS }}></style>
         {articleList}
-        {page.total > 1 ? (
-          <Paginator
-            current={page.current}
-            total={page.total}
-            baseUrl={page.base}
-            path={config.pagination_dir}
-            urlFor={url_for}
-            prevTitle={__("common.prev")}
-            nextTitle={__("common.next")}
-          />
-        ) : null}
       </Fragment>
     );
   }

package/layout/common/article_cover.jsx

@@ -2,28 +2,29 @@ const { Component } = require("inferno");
 
 module.exports = class extends Component {
   render() {
-    const { page, cover, helper } = this.props;
+    const { page, cover, helper, index } = this.props;
     const { url_for } = helper;
 
     const imageSrcset = `${cover}?w=800 800w, ${cover}?w=1500 1500w, ${cover}?w=2000 2000w, ${cover} 6144w`;
-    const CoverImage = (
-      <img
-        class="fill"
-        src={cover}
-        alt={page.title || cover}
-        onLoad={"this.classList.add('loaded')"}
-        srcset={imageSrcset}
-        referrerpolicy="no-referrer"
-        decoding="async"
-        loading="lazy"
-      />
-    );
+    const lqip_src = `${cover}?q=80&blur=80`;
+
     return (
-      <div class="card-image">
-        <a href={url_for(page.link || page.path)} class="image is-7by3">
-          {CoverImage}
-        </a>
-      </div>
+      <a href={url_for(page.link || page.path)} class="cover-image">
+        <img
+          class="cover-image-placeholder"
+          src={lqip_src}
+          alt="placeholder"
+        />
+        <img
+          class="fill"
+          src={cover}
+          alt={page.title || cover}
+          srcset={imageSrcset}
+          referrerpolicy="no-referrer"
+          decoding="async"
+          loading={index ? "lazy" : "eager"}
+        />
+      </a>
     );
   }
 };

package/layout/common/head.jsx

@@ -113,7 +113,7 @@ module.exports = class extends Component {
     latte: "light"
   };
   var stored = localStorage.getItem("themePreference");
-  var theme = stored ? stored : "system";
+  var theme = stored && stored in THEME_MAP ? stored : "system";
   var html = document.documentElement;
   var resolvedTheme = theme === "system"
     ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "mocha" : "nord"

package/layout/common/navbar.jsx

@@ -1,5 +1,4 @@
-const { Component, Fragment } = require("../../include/util/common");
-const { cacheComponent } = require("../../util/cache");
+const { Component, Fragment, cacheComponent } = require("../../include/util/common");
 
 function isSameLink(a, b) {
   function santize(url) {

package/layout/common/scripts.jsx

@@ -29,25 +29,6 @@ module.exports = class extends Component {
         ></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/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"
-            />
-          </>
-        )}
       </Fragment>
     );
   }

package/layout/tags.jsx

@@ -20,6 +20,8 @@ class Tags extends Component {
     }
 
     .tag {
+      color: var(--text);
+      border-color: var(--surface0);
       padding: 0 0.75em;
       transition: all 0.3s ease;
       border-style: solid;
@@ -34,6 +36,7 @@ class Tags extends Component {
     .tag:first-child {
       border-width: 1px 0 1px 1px;
       border-radius: 5px 0 0 5px;
+      background: var(--base);
     }
 
     .tag:first-child::before {
@@ -43,6 +46,7 @@ class Tags extends Component {
     }
 
     .tag:last-child {
+      background: var(--mantle);
       border-width: 1px 1px 1px 0;
       border-radius: 0 5px 5px 0;
     }

package/package.json

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

@@ -13,6 +13,7 @@
     Avenir, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC",
     "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
     "Source Han Sans CN", sans-serif;
+  --font-handwriting: "Bradley Hand", "Segoe Script", "Dancing Script", cursive;
 }
 
 /* #region Color */
@@ -204,10 +205,6 @@ a:hover {
   color: var(--blue);
 }
 
-a.header-anchor {
-  font-family: var(--font-sans-serif);
-}
-
 a.header-anchor:hover::after {
   margin-left: 0.2em;
   color: var(--surface0);
@@ -289,27 +286,13 @@ blockquote::before {
   color: var(--lavender);
 }
 
-.tag {
-  color: var(--text);
-  border-color: var(--surface0);
-}
-
-.tag:first-child {
-  background: var(--base);
-}
-
-.tag:last-child {
-  background: var(--mantle);
-}
-
 body {
   background: var(--mantle);
   color: var(--text);
 }
 
 .card {
-  background: var(--mantle);
-  border: 0.1px dashed var(--surface0);
+  border: .5px dashed var(--surface0);
 }
 
 input.task-list-item-checkbox:checked {
@@ -419,16 +402,11 @@ li,
 ol,
 p,
 pre,
-textarea,
-ul {
+textarea {
   margin: 0;
   padding: 0;
 }
 
-ul {
-  list-style: none;
-}
-
 button,
 input,
 select,
@@ -454,12 +432,6 @@ body {
   flex-direction: column;
 }
 
-img,
-video {
-  height: auto;
-  max-width: 100%;
-}
-
 .breadcrumb,
 .pagination-ellipsis,
 .pagination-link,
@@ -531,23 +503,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.card-image {
-  user-select: none;
-  display: block;
-  position: relative;
-  border-radius: 24px;
-  overflow: hidden;
-}
-
-.card-image .fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .card-content {
   padding: 1.25rem;
   border-radius: 0;
@@ -993,7 +948,6 @@ video {
 
   p,
   blockquote,
-  ul,
   ol,
   dl,
   pre,
@@ -1016,7 +970,8 @@ video {
   img,
   video {
     display: block;
-    margin: 0 auto;
+    margin: 1em auto;
+    max-width: 100%;
 
     &:hover {
       cursor: pointer;
@@ -1033,8 +988,7 @@ video {
   ul {
     list-style: disc outside;
     padding-left: 2em;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 1em 0;
 
     ul {
       margin-top: 0.5em;
@@ -1279,11 +1233,6 @@ a strong {
   color: currentColor;
 }
 
-img {
-  height: auto;
-  max-width: 100%;
-}
-
 input[type="checkbox"],
 input[type="radio"] {
   vertical-align: baseline;
@@ -1295,35 +1244,6 @@ small {
 
 /* #endregion Content */
 
-.image {
-  display: block;
-  position: relative;
-}
-
-.image img {
-  display: block;
-  height: auto;
-  width: 100%;
-}
-
-.image.is-7by3 {
-  padding-top: 42.8%;
-}
-
-.image.is-7by3 img {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.image .fill {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
 :target {
   scroll-margin-top: 20vh;
 }
@@ -1362,6 +1282,7 @@ section {
 .article-header-meta {
   font-family: var(--font-monospace);
   overflow: auto;
+  padding-bottom: 0.5em;
   margin-bottom: 1rem;
   border-bottom: 1px dashed var(--surface0);
   color: var(--subtext0);
@@ -1496,7 +1417,7 @@ input.searchbox-input {
   z-index: 101;
   display: flex;
   overflow: hidden;
-  border-radius: 24px;
+  border-radius: 20px;
   width: 640px;
   top: 100px;
 }
@@ -1551,4 +1472,36 @@ input.searchbox-input {
   margin-top: 0.25em;
 }
 
-/* #endregion Search */
+/* #endregion Search */
+
+/* #region Article Cover */
+
+.cover-image {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 24px 24px 0 0;
+  height: 380px;
+
+  .cover-image-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    filter: blur(10px);
+  }
+
+  .fill {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.cover-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* #endregion Article Cover */

package/source/css/responsive/mobile.css

@@ -25,7 +25,8 @@ table td {
   margin: 0 0 1.5rem 0;
 }
 
-.card-image {
+.cover-image {
+  max-height: 20vh;
   border-radius: 0;
 }
 
@@ -46,4 +47,4 @@ table td {
 .pagination-list li {
   flex-grow: 1;
   flex-shrink: 1;
-}
+}