hexo-theme-gnix 9.0.0 → 10.0.0

package/layout/tags.jsx

@@ -1,104 +1,112 @@
-const { Component, cacheComponent } = require("../include/util/common");
+const { Component, Fragment, cacheComponent } = require("../include/util/common");
+const { filterByLanguage } = require("../include/util/i18n");
+
+function getTagSize(count, maxCount) {
+  const ratio = maxCount ? count / maxCount : 0;
+  return `${(0.95 + ratio * 0.35).toFixed(3)}rem`;
+}
 
 class Tags extends Component {
   render() {
-    const { tags, showCount } = this.props;
-
-    const inlineCSS = `
-    .tags {
-      font-family: var(--font-mono);
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      padding: 0.5rem 0.5rem;
-      display: inline-flex;
-      align-items: center;
-      transition: all 0.3s ease;
-    }
-
-    .tags:hover {
-      transform: translateY(-2px);
-    }
-
-    .tag {
-      color: var(--text);
-      border-color: var(--surface0);
-      padding: 0 0.75em;
-      transition: all 0.3s ease;
-      border-style: solid;
-      align-items: center;
-      border-radius: 5px;
-      display: inline-flex;
-      font-size: 0.75rem;
-      height: 2em;
-      white-space: nowrap;
-    }
-
-    .tag:first-child {
-      border-width: 1px 0 1px 1px;
-      border-radius: 5px 0 0 5px;
-      background: var(--base);
-    }
-
-    .tag:first-child::before {
-      content: "#";
-      opacity: 0.7;
-      margin-right: 0.25em;
-    }
-
-    .tag:last-child {
-      background: var(--mantle);
-      border-width: 1px 1px 1px 0;
-      border-radius: 0 5px 5px 0;
-    }
-    `;
+    const { cssUrl, tags, title, showCount, totalPosts, topTag } = this.props;
 
     return (
-      <div class="card widget" data-type="tags">
-        <style>{inlineCSS}</style>
-        <div class="card-content">
-          <div class="menu">
+      <Fragment>
+        <link rel="stylesheet" href={cssUrl} data-page-head />
+        <main class="tags-page">
+          <header class="tags-hero">
+            <div>
+              <p class="tags-eyebrow">Topic Index</p>
+              <h1>{title}</h1>
+              <p class="tags-hero__summary">
+                {tags.length ? `Browse ${tags.length} topics across ${totalPosts} tagged ${totalPosts === 1 ? "post" : "posts"}.` : "No tagged posts are available yet."}
+              </p>
+            </div>
+            <dl class="tags-stats" aria-label="Tags summary">
+              <div>
+                <dt>Tags</dt>
+                <dd>{tags.length}</dd>
+              </div>
+              <div>
+                <dt>Posts</dt>
+                <dd>{totalPosts}</dd>
+              </div>
+              <div>
+                <dt>Largest</dt>
+                <dd>{topTag ? topTag.name : "None"}</dd>
+              </div>
+            </dl>
+          </header>
+
+          <nav class="tags-index" aria-label={title}>
             {tags.map((tag) => (
-              <a class="tags" href={tag.url}>
-                <span class="tag">{tag.name}</span>
-                {showCount ? <span class="tag">{tag.count}</span> : null}
+              <a key={tag.url} class="tags-index__item" href={tag.url} style={`--tag-size:${tag.size};`}>
+                <span class="tags-index__name">{tag.name}</span>
+                {showCount ? <span class="tags-index__count">{tag.count}</span> : null}
               </a>
             ))}
-          </div>
-        </div>
-      </div>
+          </nav>
+        </main>
+      </Fragment>
     );
   }
 }
 
-Tags.Cacheable = cacheComponent(Tags, "widget.tags", (props) => {
-  const { helper, widget = {} } = props;
+Tags.Cacheable = cacheComponent(Tags, "page.tags", (props) => {
+  const { helper, page, widget = {} } = props;
   const { order_by = "name", amount, show_count = true } = widget;
-  let tags = props.tags || props.site.tags;
-  const { url_for, _p } = helper;
+  let tags = props.tags || page?.tags || props.site.tags;
+  const { _p } = helper;
 
-  if (!tags || !tags.length) {
+  if (!tags?.length) {
     return null;
   }
 
-  tags = tags.sort(order_by).filter((tag) => tag.length);
+  if (Array.isArray(tags)) {
+    tags = tags
+      .filter((tag) => tag.length)
+      .sort((a, b) => {
+        const aValue = a[order_by] || a.name || "";
+        const bValue = b[order_by] || b.name || "";
+        return String(aValue).localeCompare(String(bValue));
+      });
+  } else {
+    tags = tags.sort(order_by).filter((tag) => tag.length);
+  }
   if (amount) {
-    tags = tags.limit(amount);
+    tags = typeof tags.limit === "function" ? tags.limit(amount) : tags.slice(0, amount);
   }
 
+  const langKey = helper.language_key(page);
+  const mappedTags = tags.map((tag) => {
+    const posts = helper.is_i18n_enabled() ? filterByLanguage(tag.posts, langKey, props.config || {}, helper) : tag.posts;
+    return {
+      name: tag.name,
+      count: posts.length,
+      url: helper.localized_tag_url(tag, langKey),
+    };
+  });
+  const maxCount = mappedTags.reduce((max, tag) => Math.max(max, tag.count), 0);
+  const totalPosts = mappedTags.reduce((total, tag) => total + tag.count, 0);
+  const topTag = mappedTags.reduce((top, tag) => (tag.count > top.count ? tag : top), mappedTags[0]);
+
   return {
+    cssUrl: helper.url_for("/css/tags.css"),
     showCount: show_count,
     title: _p("common.tag", Infinity),
-    tags: tags.map((tag) => ({
-      name: tag.name,
-      count: tag.length,
-      url: url_for(tag.path),
+    totalPosts,
+    topTag,
+    tags: mappedTags.map((tag) => ({
+      ...tag,
+      size: getTagSize(tag.count, maxCount),
     })),
   };
 });
+
 module.exports = class extends Component {
   render() {
-    const { site, helper } = this.props;
+    const { config, page, site, helper } = this.props;
 
-    return <Tags.Cacheable site={site} helper={helper} />;
+    return <Tags.Cacheable config={config} page={page} site={site} helper={helper} />;
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "9.0.0",
-  "author": "Efterklang <gaojiaxing0220@gmail.com>",
+  "version": "10.0.0",
+  "author": "Efterklang <gaojiaxing0220@gmail.com> (https://vluv.space)",
   "license": "MIT",
   "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",
   "keywords": [
@@ -21,8 +21,8 @@
     "lint": "biome check --write .",
     "format": "biome format .",
     "check": "biome check",
-    "test": "echo \"No tests configured\" && exit 0",
-    "build:swup": "bun build src/swup.js --outfile source/js/swup.bundle.js --minify"
+    "test": "node test/md_generator.test.js",
+    "build:swup": "cp src/swup.js source/js/swup.js"
   },
   "files": [
     "include",
@@ -37,7 +37,7 @@
     "@swup/head-plugin": "^2.3.1",
     "@swup/scripts-plugin": "^2.1.0",
     "esbuild": "^0.28.0",
-    "feedsmith": "^2.9.1",
+    "feedsmith": "^2.9.4",
     "hexo-pagination": "^4.0.0",
     "inferno": "^9.1.0",
     "inferno-create-element": "^9.1.0",

package/scripts/index.js

@@ -1,3 +1,4 @@
+require("../include/hexo/i18n")(hexo);
 require("../include/hexo/filter")(hexo);
 require("../include/hexo/generator")(hexo);
 require("../include/hexo/feed")(hexo);