hexo-theme-gnix 7.0.0 → 9.0.0

package/layout/index.jsx

@@ -5,16 +5,14 @@ const Article = require("./common/article");
 module.exports = class extends Component {
   render() {
     const { config, page, helper } = this.props;
-    const { __, url_for } = helper;
+    const { url_for } = helper;
 
     return (
       <Fragment>
         {page.posts.map((post) => (
           <Article config={config} page={post} helper={helper} index={true} />
         ))}
-        {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}
+        {page.total > 1 ? <Paginator current={page.current} total={page.total} baseUrl={page.base} path={config.pagination_dir} urlFor={url_for} /> : null}
       </Fragment>
     );
   }

package/layout/misc/open_graph.jsx

@@ -1,6 +1,6 @@
-const { isDate, parseISO, isValid } = require("date-fns");
-const { Component } = require("inferno");
+const { Component, isValidDate, parseISO } = require("../../include/util/common");
 const { encodeURL, stripHTML, escapeHTML } = require("hexo-util");
+
 const localeMap = {
   en: "en_US",
   de: "de_DE",
@@ -63,14 +63,14 @@ module.exports = class extends Component {
 
     if (date) {
       const d = typeof date === "string" ? parseISO(date) : date;
-      if ((isDate(d) || d instanceof Date) && isValid(d)) {
+      if (isValidDate(d)) {
         htmlTags.push(<meta property="article:published_time" content={d.toISOString()} />);
       }
     }
 
     if (updated) {
       const u = typeof updated === "string" ? parseISO(updated) : updated;
-      if ((isDate(u) || u instanceof Date) && isValid(u)) {
+      if (isValidDate(u)) {
         htmlTags.push(<meta property="article:modified_time" content={u.toISOString()} />);
       }
     }

package/layout/misc/paginator.jsx

@@ -2,7 +2,7 @@ const { Component } = require("inferno");
 
 module.exports = class extends Component {
   render() {
-    const { current, total, baseUrl, path, urlFor, prevTitle, nextTitle } = this.props;
+    const { current, total, baseUrl, path, urlFor } = this.props;
 
     function getPageUrl(i) {
       return urlFor(i === 1 ? baseUrl : `${baseUrl + path}/${i}/`);
@@ -55,12 +55,18 @@ module.exports = class extends Component {
     }
 
     return (
-      <nav class="pagination is-centered" aria-label="pagination" style="padding-top: 1.5em;">
+      <nav class="pagination card" aria-label="pagination">
         <a href={getPageUrl(current - 1)} class={`pagination-previous`} style={current > 1 ? {} : { visibility: "hidden" }}>
-          {prevTitle}
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+            <title>go to previous page</title>
+            <path fill="currentColor" d="m4 10l9 9l1.4-1.5L7 10l7.4-7.5L13 1z" />
+          </svg>
         </a>
         <a href={getPageUrl(current + 1)} class={`pagination-next`} style={current < total ? {} : { visibility: "hidden" }}>
-          {nextTitle}
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+            <title>go to next page</title>
+            <path fill="currentColor" d="M7 1L5.6 2.5L13 10l-7.4 7.5L7 19l9-9z" />
+          </svg>
         </a>
         <ul class="pagination-list is-hidden-mobile">{pagination(current, total)}</ul>
       </nav>

package/layout/misc/structured_data.jsx

@@ -1,5 +1,4 @@
-const { isDate, parseISO, isValid } = require("date-fns");
-const { Component } = require("inferno");
+const { Component, isValidDate, parseISO } = require("../../include/util/common");
 const { stripHTML, escapeHTML } = require("hexo-util");
 
 module.exports = class extends Component {
@@ -28,14 +27,14 @@ module.exports = class extends Component {
 
     if (date) {
       const d = typeof date === "string" ? parseISO(date) : date;
-      if ((isDate(d) || d instanceof Date) && isValid(d)) {
+      if (isValidDate(d)) {
         date = d.toISOString();
       }
     }
 
     if (updated) {
       const u = typeof updated === "string" ? parseISO(updated) : updated;
-      if ((isDate(u) || u instanceof Date) && isValid(u)) {
+      if (isValidDate(u)) {
         updated = u.toISOString();
       }
     }

package/layout/plugin/busuanzi.jsx

@@ -4,7 +4,7 @@ class Busuanzi extends Component {
   render() {
     return (
       // busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
-      <script defer src="/js/busuanzi.js"></script>
+      <script data-swup-reload-script defer src="/js/busuanzi.js"></script>
       // <script src="https://vercount.one/js" defer={true}></script>
     );
   }

package/layout/plugin/cookie_consent.jsx

@@ -1,46 +1,55 @@
 const { Component, cacheComponent } = require("../../include/util/common");
 
 class CookieConsent extends Component {
+  // https://www.osano.com/cookieconsent/documentation/javascript-api/
   render() {
     const { head, text, jsUrl, cssUrl } = this.props;
     const { type, theme, position, policyLink } = this.props;
     const { message, dismiss, allow, deny, link, policy } = text;
 
-    const js = `window.addEventListener("load", () => {
-      window.cookieconsent.initialise({
-        type: ${JSON.stringify(type)},
-        theme: ${JSON.stringify(theme)},
-        static: ${JSON.stringify(this.props.static)},
-        position: ${JSON.stringify(position)},
-        content: {
-          message: ${JSON.stringify(message)},
-          dismiss: ${JSON.stringify(dismiss)},
-          allow: ${JSON.stringify(allow)},
-          deny: ${JSON.stringify(deny)},
-          link: ${JSON.stringify(link)},
-          policy: ${JSON.stringify(policy)},
-          href: ${JSON.stringify(policyLink)},
-        },
-        palette: {
-          popup: {
-            background: "var(--base)",
-            text: "var(--text)"
-          },
-          button: {
-            background: "var(--blue)"
-          },
-        },
-      });
-    });`;
-
     if (head) {
       return <link rel="preload" href={cssUrl} as="style" onload="this.onload=null;this.rel='stylesheet'" />;
     }
     return (
-      <>
-        <script src={jsUrl} defer={true} onLoad={js}></script>
-        {/* <script dangerouslySetInnerHTML={{ __html: js }}></script> */}
-      </>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+          (function() {
+            var s = document.createElement('script');
+            s.src = ${JSON.stringify(jsUrl)};
+            s.defer = true;
+            s.onload = function() {
+              window.cookieconsent.initialise(${JSON.stringify({
+                type,
+                theme,
+                static: this.props.static,
+                position,
+                content: {
+                  message,
+                  dismiss,
+                  allow,
+                  deny,
+                  link,
+                  policy,
+                  href: policyLink,
+                },
+                palette: {
+                  popup: {
+                    background: "var(--base)",
+                    text: "var(--text)",
+                  },
+                  button: {
+                    background: "var(--lavender)",
+                    text: "var(--base)",
+                  },
+                },
+              })});
+            };
+            document.body.appendChild(s);
+          })();
+        `,
+        }}
+      />
     );
   }
 }

package/layout/plugin/swup.jsx

@@ -1,4 +1,4 @@
-const { Component, Fragment } = require("../../include/util/common");
+const { Component } = require("../../include/util/common");
 
 class Swup extends Component {
   render() {
@@ -6,27 +6,7 @@ class Swup extends Component {
       return null;
     }
 
-    const swupScript = `
-const swup = new Swup({
-  containers: ["#swup"],
-  cache: true,
-  native: true,
-  plugins: [
-    new SwupHeadPlugin({
-      persistTags: true
-    }),
-    new SwupScriptsPlugin()
-  ]
-});
-`;
-    return (
-      <Fragment>
-        <script src="/js/host/swup/Swup.umd.min.js"></script>
-        <script src="/js/host/swup/head-plugin.umd.min.js"></script>
-        <script src="/js/host/swup/scripts-plugin.umd.min.js"></script>
-        <script data-swup-ignore-script dangerouslySetInnerHTML={{ __html: swupScript }}></script>
-      </Fragment>
-    );
+    return <script defer src="/js/swup.bundle.js"></script>;
   }
 }
 

package/layout/search/insight.jsx

@@ -13,12 +13,25 @@ class Insight extends Component {
 
     return (
       <>
-        <div class="searchbox">
+        <div class="searchbox" id="searchbox" popover="auto">
           <div class="searchbox-container">
             <div class="searchbox-input-container">
-              <input type="text" name="search-input" class="searchbox-input" placeholder={translation.hint} />
+              <input
+                type="text"
+                name="search-input"
+                class="searchbox-input"
+                placeholder={translation.hint}
+                autofocus
+                autocomplete="off"
+                role="combobox"
+                aria-haspopup="listbox"
+                aria-autocomplete="list"
+                aria-controls="searchbox-results"
+                aria-expanded="false"
+                aria-label={translation.hint}
+              />
             </div>
-            <div class="searchbox-body"></div>
+            <div class="searchbox-body" id="searchbox-results" role="listbox"></div>
           </div>
         </div>
         <script defer src={jsUrl}></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "7.0.0",
+  "version": "9.0.0",
   "author": "Efterklang <gaojiaxing0220@gmail.com>",
   "license": "MIT",
   "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",
@@ -21,7 +21,8 @@
     "lint": "biome check --write .",
     "format": "biome format .",
     "check": "biome check",
-    "test": "echo \"No tests configured\" && exit 0"
+    "test": "echo \"No tests configured\" && exit 0",
+    "build:swup": "bun build src/swup.js --outfile source/js/swup.bundle.js --minify"
   },
   "files": [
     "include",
@@ -33,13 +34,16 @@
     "README.md"
   ],
   "dependencies": {
-    "date-fns": "^4.1.0",
-    "esbuild": "^0.27.2",
+    "@swup/head-plugin": "^2.3.1",
+    "@swup/scripts-plugin": "^2.1.0",
+    "esbuild": "^0.28.0",
+    "feedsmith": "^2.9.1",
     "hexo-pagination": "^4.0.0",
-    "inferno": "^9.0.10",
-    "inferno-create-element": "^9.0.10",
-    "inferno-server": "^9.0.10",
-    "js-yaml": "^4.1.1"
+    "inferno": "^9.1.0",
+    "inferno-create-element": "^9.1.0",
+    "inferno-server": "^9.1.0",
+    "js-yaml": "^4.1.1",
+    "swup": "^4.8.3"
   },
   "peerDependencies": {
     "hexo": "^8.1.1",

package/scripts/hot-reload.js

@@ -0,0 +1,92 @@
+const LIVE_RELOAD_PATH = "/__hexo_live_reload";
+const clients = new Set();
+const reloadDebounceMs = 150;
+const reloadCooldownMs = 500;
+
+function isHexoServerCommand(ctx) {
+  const command = ctx.env?.cmd;
+  const aliases = ctx.extend?.console?.alias ?? {};
+
+  return command === "server" || aliases[command] === "server";
+}
+
+function broadcastReload() {
+  const payload = `data: ${JSON.stringify({ type: "reload", at: Date.now() })}\n\n`;
+
+  for (const client of clients) {
+    client.write(payload);
+  }
+}
+
+if (isHexoServerCommand(hexo)) {
+  let reloadTimer = null;
+  let lastBroadcastAt = 0;
+
+  function scheduleReload() {
+    if (reloadTimer) {
+      clearTimeout(reloadTimer);
+    }
+
+    reloadTimer = setTimeout(() => {
+      reloadTimer = null;
+
+      const now = Date.now();
+      if (now - lastBroadcastAt < reloadCooldownMs) {
+        return;
+      }
+
+      lastBroadcastAt = now;
+      broadcastReload();
+    }, reloadDebounceMs);
+  }
+
+  hexo.on("generateAfter", () => {
+    scheduleReload();
+  });
+
+  hexo.extend.filter.register("server_middleware", (app) => {
+    app.use((req, res, next) => {
+      if (req.url !== LIVE_RELOAD_PATH) {
+        next();
+        return;
+      }
+
+      res.writeHead(200, {
+        "Cache-Control": "no-cache, no-transform",
+        Connection: "keep-alive",
+        "Content-Type": "text/event-stream",
+        "X-Accel-Buffering": "no",
+      });
+
+      res.write("retry: 1000\n\n");
+      clients.add(res);
+
+      req.on("close", () => {
+        clients.delete(res);
+        res.end();
+      });
+    });
+  });
+
+  hexo.extend.injector.register(
+    "body_end",
+    `
+<script>
+(() => {
+  if (!window.EventSource) return;
+
+  const source = new EventSource('${LIVE_RELOAD_PATH}');
+  source.addEventListener('message', (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === 'reload') {
+        window.location.reload();
+      }
+    } catch (_) {
+      window.location.reload();
+    }
+  });
+})();
+</script>`,
+  );
+}

package/scripts/index.js

@@ -1,5 +1,7 @@
 require("../include/hexo/filter")(hexo);
 require("../include/hexo/generator")(hexo);
+require("../include/hexo/feed")(hexo);
+require("../include/hexo/encrypt")(hexo);
 require("../include/hexo/view").init(hexo);
 require("../include/hexo/helper")(hexo);
 require("../include/hexo/renderer")(hexo);

package/source/css/archive.css

@@ -0,0 +1,251 @@
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.article-meta {
+  font-size: 0.8rem;
+  color: var(--subtext1);
+  font-family: var(--font-handwriting);
+  white-space: nowrap;
+}
+
+a.archive-title {
+  font-family: var(--font-sans-serif);
+  font-weight: 400;
+  color: var(--text);
+}
+
+a.archive-title:hover {
+  color: var(--accent);
+}
+
+/* Breadcrumb navigation */
+.archive-breadcrumb {
+  color: var(--blue);
+  font-family: var(--font-mono);
+  margin: 0 0 1rem 0;
+  padding-left: 1em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+}
+
+.archive-breadcrumb .prompt {
+  color: var(--green);
+  user-select: none;
+  margin-right: 0.25em;
+}
+
+.archive-breadcrumb .cursor {
+  display: inline-block;
+  color: var(--mauve);
+  font-weight: bold;
+  margin-left: 2px;
+  animation: blink 1s step-end infinite;
+  user-select: none;
+}
+
+.archive-breadcrumb__cmd {
+  color: var(--yellow);
+  user-select: none;
+  padding-right: 0.5em;
+}
+
+.archive-breadcrumb__picker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.archive-breadcrumb__trigger {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: var(--yellow);
+  font-family: var(--font-mono);
+  padding: 0.05em 0.15em;
+  border-radius: 4px;
+  text-decoration: underline;
+  text-decoration-color: hsl(from var(--yellow) h s l / 0.6);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.22em;
+  cursor: pointer;
+  transition:
+    transform 120ms ease,
+    color 120ms ease,
+    background 120ms ease,
+    text-decoration-color 120ms ease;
+}
+
+.archive-breadcrumb__trigger:hover {
+  color: var(--mauve);
+  background: hsl(from var(--base) h s l / 0.35);
+  text-decoration-color: hsl(from var(--mauve) h s l / 0.75);
+}
+
+.archive-breadcrumb__trigger:focus-visible {
+  outline: 2px solid hsl(from var(--mauve) h s l / 0.7);
+  outline-offset: 2px;
+  background: hsl(from var(--base) h s l / 0.35);
+}
+
+.archive-breadcrumb__trigger[aria-expanded="true"] {
+  transform: translateY(-1px);
+  color: var(--mauve);
+  text-decoration-color: hsl(from var(--mauve) h s l / 0.9);
+}
+
+.archive-breadcrumb__trigger[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  text-decoration-color: hsl(from var(--subtext1) h s l / 0.4);
+}
+
+.archive-breadcrumb__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 12rem;
+  max-height: 15rem;
+  overflow: auto;
+  background: hsl(from var(--base) h s l / 0.9);
+  border: 1px solid hsl(from var(--surface1) h s l / 0.9);
+  border-radius: 10px;
+  padding: 0.35rem;
+  box-shadow: 0 18px 50px hsl(from var(--crust) h s l / 0.45);
+  opacity: 0;
+  transform: translateY(-6px);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    visibility 0s linear 160ms;
+  z-index: 20;
+}
+
+.archive-breadcrumb__trigger[aria-expanded="true"] + .archive-breadcrumb__menu {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    visibility 0s;
+}
+
+.archive-breadcrumb__option {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+  text-align: left;
+}
+
+.archive-breadcrumb__option:hover,
+.archive-breadcrumb__option:focus-visible {
+  background: hsl(from var(--surface1) h s l / 0.55);
+  color: var(--yellow);
+  outline: none;
+}
+
+.archive-breadcrumb__option[aria-selected="true"] {
+  background: hsl(from var(--surface1) h s l / 0.75);
+  color: var(--mauve);
+}
+
+/* Card with year overlay */
+.card-content {
+  position: relative;
+  overflow: hidden;
+}
+
+span.year {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  z-index: 0;
+  pointer-events: none;
+  font-weight: bolder;
+  font-family: var(--font-handwriting);
+  font-size: 4em;
+  font-style: italic;
+  color: hsl(from var(--accent, var(--lavender)) h s l / 0.3);
+  line-height: 1;
+  user-select: none;
+}
+
+/* Season colors */
+.winter {
+  --accent: var(--blue);
+}
+
+.autumn {
+  --accent: var(--red);
+}
+
+.summer {
+  --accent: var(--green);
+}
+
+.spring {
+  --accent: var(--peach);
+}
+
+/* Archive item */
+.archive-item {
+  position: relative;
+  display: flex;
+  text-align: left;
+  align-items: flex-start;
+}
+
+.archive-item > div {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.archive-item + .archive-item {
+  border: none;
+  margin-top: 0;
+  padding-top: 1em;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .archive-breadcrumb {
+    padding-left: 0.5em;
+  }
+
+  .archive-breadcrumb__menu {
+    min-width: 8rem;
+    max-width: calc(100vw - 2rem);
+  }
+
+  span.year {
+    font-size: 2.5em;
+    right: 0.5rem;
+  }
+}