hexo-theme-gnix 1.1.0

package/layout/search/insight.jsx

@@ -0,0 +1,53 @@
+/**
+ * Insight search plugin JSX component.
+ * @module view/search/insight
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+class Insight extends Component {
+  render() {
+    const { translation, contentUrl, jsUrl } = this.props;
+
+    const js = `document.addEventListener('DOMContentLoaded', function () {
+            loadInsight(${JSON.stringify({ contentUrl })}, ${JSON.stringify(translation)});
+        });`;
+
+    return (
+      <>
+        <div class="searchbox">
+          <div class="searchbox-container">
+            <div class="searchbox-input-container">
+              <input
+                type="text"
+                name="search-input"
+                class="searchbox-input"
+                placeholder={translation.hint}
+              />
+            </div>
+            <div class="searchbox-body"></div>
+          </div>
+        </div>
+        <script data-pjax src={jsUrl} defer={true}></script>
+        <script data-pjax dangerouslySetInnerHTML={{ __html: js }}></script>
+      </>
+    );
+  }
+}
+
+Insight.Cacheable = cacheComponent(Insight, "search.insight", (props) => {
+  const { helper } = props;
+
+  return {
+    translation: {
+      hint: helper.__("search.hint"),
+      untitled: helper.__("search.untitled"),
+      posts: helper._p("common.post", Infinity),
+      pages: helper._p("common.page", Infinity),
+      categories: helper._p("common.category", Infinity),
+      tags: helper._p("common.tag", Infinity),
+    },
+    contentUrl: helper.url_for("/content.json"),
+    jsUrl: helper.url_for("/js/insight.js"),
+  };
+});
+
+module.exports = Insight;

package/layout/tag.jsx

@@ -0,0 +1,29 @@
+const { Component, Fragment } = require("../include/util/common");
+const Index = require("./index");
+
+module.exports = class extends Component {
+  render() {
+    const { config, page, helper } = this.props;
+    const { url_for, _p } = helper;
+
+    return (
+      <Fragment>
+        <nav class="breadcrumb" aria-label="breadcrumbs">
+          <ul>
+            <li>
+              {" "}
+              <font style="color: var(--green)">$</font>&nbsp;ls&nbsp;
+              <a href={url_for("/tags/")}>{_p("common.tag", Infinity)}</a>
+            </li>
+            <li class="is-active">
+              <a href="#" aria-current="page">
+                {page.tag}
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <Index config={config} page={page} helper={helper} />
+      </Fragment>
+    );
+  }
+};

package/layout/tags.jsx

@@ -0,0 +1,55 @@
+const { Component, cacheComponent } = require("../include/util/common");
+
+class Tags extends Component {
+  render() {
+    const { tags, showCount } = this.props;
+
+    return (
+      <div class="card widget" data-type="tags">
+        <div class="card-content">
+          <div class="menu">
+            {tags.map((tag) => (
+              <a class="tags" href={tag.url}>
+                <span class="tag">{tag.name}</span>
+                {showCount ? <span class="tag">{tag.count}</span> : null}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Tags.Cacheable = cacheComponent(Tags, "widget.tags", (props) => {
+  const { helper, widget = {} } = props;
+  const { order_by = "name", amount, show_count = true } = widget;
+  let tags = props.tags || props.site.tags;
+  const { url_for, _p } = helper;
+
+  if (!tags || !tags.length) {
+    return null;
+  }
+
+  tags = tags.sort(order_by).filter((tag) => tag.length);
+  if (amount) {
+    tags = tags.limit(amount);
+  }
+
+  return {
+    showCount: show_count,
+    title: _p("common.tag", Infinity),
+    tags: tags.map((tag) => ({
+      name: tag.name,
+      count: tag.length,
+      url: url_for(tag.path),
+    })),
+  };
+});
+module.exports = class extends Component {
+  render() {
+    const { site, helper } = this.props;
+
+    return <Tags.Cacheable site={site} helper={helper} />;
+  }
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "hexo-theme-gnix",
+  "version": "1.1.0",
+  "author": "Efterklang <gaojiaxing0220@gmail.com>",
+  "license": "MIT",
+  "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",
+  "keywords": [
+    "hexo",
+    "theme",
+    "icarus",
+    "catppuccin"
+  ],
+  "homepage": "https://github.com/Efterklang/hexo-theme-icarus",
+  "repository": "https://github.com/Efterklang/hexo-theme-icarus.git",
+  "bugs": {
+    "url": "https://github.com/Efterklang/hexo-theme-icarus/issues"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "lint": "biome check --write ."
+  },
+  "files": [
+    "include",
+    "layout",
+    "scripts",
+    "source",
+    "util",
+    "languages",
+    "README.md"
+  ],
+  "dependencies": {
+    "hexo-renderer-inferno": "^1.0.2",
+    "moment": "^2.30.1"
+  },
+  "peerDependencies": {
+    "hexo": ">=7.0.0",
+    "hexo-util": ">=4.0.0",
+    "hexo-pagination": ">=3.0.0"
+  }
+}

package/scripts/index.js

@@ -0,0 +1 @@
+require("../include/register")(hexo);

package/source/css/callout_blocks.css

@@ -0,0 +1,204 @@
+:root {
+  --line-height-tight: 1.3;
+  --callout-border-width: 1.5px;
+  --callout-padding: 10px 12px 10px 15px;
+  --callout-radius: 8px;
+  --callout-title-color: inherit;
+  --callout-title-padding: 0;
+  --callout-title-size: inherit;
+  --callout-title-weight: 600;
+  --callout-content-padding: 0;
+  --callout-collapse-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTkgMThsNi02bC02LTYiLz48L3N2Zz4=);
+}
+.callout {
+  border-style: solid;
+  border-width: var(--callout-border-width);
+  border-radius: var(--callout-radius);
+  margin: 1em 0;
+  padding: var(--callout-padding);
+  --callout-icon: lucide-pencil;
+  border-color: hsl(from var(--blue) h s l / 0.5);
+  background-color: hsl(from var(--blue) h s l / 0.2);
+}
+.callout-title {
+  padding: var(--callout-title-padding);
+  display: flex;
+  gap: 7px;
+  font-size: var(--callout-title-size);
+  line-height: var(--line-height-tight);
+  align-items: center;
+  cursor: pointer;
+  color: var(--blue);
+  > .callout-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+  > .callout-title-inner {
+    --font-weight: var(--callout-title-weight);
+    font-weight: var(--font-weight);
+    color: var(--callout-title-color);
+  }
+  > .callout-fold {
+    mask-image: var(--callout-collapse-icon);
+    mask-size: 100%;
+    -webkit-mask-image: var(--callout-collapse-icon);
+    -webkit-mask-size: 100%;
+    height: 20px;
+    width: 20px;
+    transition: 0.1s ease-in-out;
+    background-color: var(--blue);
+  }
+}
+.callout-content {
+  padding: var(--callout-content-padding);
+}
+details[close].callout > .callout-title > .callout-fold {
+  transform: rotate(-90deg);
+}
+details[open].callout > .callout-title > .callout-fold {
+  transform: rotate(90deg);
+}
+.callout[data-callout="info"],
+.callout[data-callout="todo"] {
+  --callout-icon: lucide-check-circle-2;
+  border-color: hsl(from var(--sapphire) h s l / 0.5);
+  background-color: hsl(from var(--sapphire) h s l / 0.2);
+  svg {
+    color: var(--sapphire);
+  }
+  .callout-title {
+    --callout-title-color: var(--sapphire);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--sapphire);
+  }
+}
+.callout[data-callout="success"],
+.callout[data-callout="check"],
+.callout[data-callout="done"] {
+  --callout-icon: lucide-check;
+  border-color: hsl(from var(--green) h s l / 0.5);
+  background-color: hsl(from var(--green) h s l / 0.2);
+  svg {
+    color: var(--green);
+  }
+  .callout-title {
+    --callout-title-color: var(--green);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--green);
+  }
+}
+.callout[data-callout="warning"],
+.callout[data-callout="caution"],
+.callout[data-callout="attention"] {
+  --callout-icon: lucide-alert-triangle;
+  border-color: hsl(from var(--peach) h s l / 0.5);
+  background-color: hsl(from var(--peach) h s l / 0.2);
+  svg {
+    color: var(--peach);
+  }
+  .callout-title {
+    --callout-title-color: var(--peach);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--peach);
+  }
+}
+.callout[data-callout="question"],
+.callout[data-callout="help"],
+.callout[data-callout="faq"] {
+  --callout-icon: lucide-alert-mark;
+  border-color: hsl(from var(--yellow) h s l / 0.5);
+  background-color: hsl(from var(--yellow) h s l / 0.2);
+  svg {
+    color: var(--yellow);
+  }
+  .callout-title {
+    --callout-title-color: var(--yellow);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--yellow);
+  }
+}
+.callout[data-callout="danger"],
+.callout[data-callout="error"],
+.callout[data-callout="bug"],
+.callout[data-callout="failure"],
+.callout[data-callout="fail"],
+.callout[data-callout="missing"] {
+  --callout-icon: lucide-zap;
+  border-color: hsl(from var(--red) h s l / 0.5);
+  background-color: hsl(from var(--red) h s l / 0.2);
+  svg {
+    color: var(--red);
+  }
+  .callout-title {
+    --callout-title-color: var(--red);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--red);
+  }
+}
+.callout[data-callout="tip"],
+.callout[data-callout="hint"],
+.callout[data-callout="important"] {
+  --callout-icon: lucide-flame;
+  border-color: hsl(from var(--pink) h s l / 0.5);
+  background-color: hsl(from var(--pink) h s l / 0.2);
+  svg {
+    color: var(--pink);
+  }
+  .callout-title {
+    --callout-title-color: var(--pink);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--pink);
+  }
+}
+.callout[data-callout="example"] {
+  --callout-icon: lucide-list;
+  border-color: hsl(from var(--mauve) h s l / 0.5);
+  background-color: hsl(from var(--mauve) h s l / 0.2);
+  svg {
+    color: var(--mauve);
+  }
+  .callout-title {
+    --callout-title-color: var(--mauve);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--mauve);
+  }
+}
+.callout[data-callout="abstract"],
+.callout[data-callout="summary"],
+.callout[data-callout="tldr"] {
+  --callout-icon: lucide-clipboard-list;
+  border-color: hsl(from var(--teal) h s l / 0.5);
+  background-color: hsl(from var(--teal) h s l / 0.2);
+  svg {
+    color: var(--teal);
+  }
+  .callout-title {
+    --callout-title-color: var(--teal);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--teal);
+  }
+}
+.callout[data-callout="quote"],
+.callout[data-callout="cite"] {
+  --callout-icon: quote-glyph;
+  border-color: hsl(from var(--lavender) h s l / 0.5);
+  background-color: hsl(from var(--lavender) h s l / 0.2);
+  svg {
+    color: var(--lavender);
+  }
+  .callout-title {
+    --callout-title-color: var(--lavender);
+  }
+  .callout-title .callout-fold {
+    background-color: var(--lavender);
+  }
+}