hexo-theme-gnix 1.1.0

package/layout/comment/waline.jsx

@@ -0,0 +1,156 @@
+/**
+ * Waline comment JSX component.
+ * @module view/comment/waline
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Waline comment JSX component.
+ *
+ * @see https://waline.js.org/guide/get-started.html
+ * @example
+ * <Waline
+ *     serverURL="https://path/to/waline/server"
+ *     path="window.location.pathname"
+ *     lang="zh-CN"
+ *     locale={{placeholder: "", ...}}
+ *     emoji={["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"]}
+ *     dark="auto"
+ *     meta={["nick", "mail", "link"]}
+ *     requiredMeta={[]}
+ *     login="enable"
+ *     wordLimit={0},
+ *     pageSize={10}
+ *     imageUploader={true}
+ *     highlighter={true}
+ *     texRenderer={false}
+ *     search={true}
+ *     visitor={false}
+ *     pageview={false}
+ *     comment={false}
+ *     copyright={true}
+ *     jsUrl="/path/to/Waline.js" />
+ */
+class Waline extends Component {
+  render() {
+    const {
+      serverURL,
+      path = "window.location.pathname",
+      lang = "zh-CN",
+      locale,
+      emoji = ["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"],
+      dark = "",
+      meta = ["nick", "mail", "link"],
+      requiredMeta = [],
+      login = "enable",
+      wordLimit = 0,
+      pageSize = 10,
+      imageUploader = false,
+      highlighter = false,
+      texRenderer = false,
+      search = false,
+      pageview = false,
+      comment = false,
+      copyright = true,
+      jsUrl,
+      cssUrl,
+    } = this.props;
+    if (!serverURL) {
+      return (
+        <div class="notification is-danger">
+          You forgot to set the <code>server_url</code> for Waline. Please set
+          it in <code>_config.yml</code>.
+        </div>
+      );
+    }
+    const js = `import { init } from "${jsUrl}";
+        init({
+            el: '#waline-thread',
+            serverURL: ${JSON.stringify(serverURL)},
+            path: ${path},
+            ${lang ? `lang: ${JSON.stringify(lang)},` : ""}
+            ${locale ? `locale: ${JSON.stringify(locale)},` : ""}
+            ${emoji ? `emoji: ${JSON.stringify(emoji)},` : ""}
+            ${dark ? `dark: ${JSON.stringify(dark)},` : ""}
+            ${meta ? `meta: ${JSON.stringify(meta)},` : ""}
+            ${Array.isArray(requiredMeta) ? `requiredMeta: ${JSON.stringify(requiredMeta)},` : ""}
+            ${login ? `login: ${JSON.stringify(login)},` : ""}
+            ${wordLimit ? `wordLimit: ${JSON.stringify(wordLimit)},` : ""}
+            ${pageSize ? `pageSize: ${JSON.stringify(pageSize)},` : ""}
+            ${imageUploader === false ? `imageUploader: false,` : ""}
+            ${highlighter === false ? `highlighter: false,` : ""}
+            ${texRenderer === false ? `texRenderer: false,` : ""}
+            ${search === false ? `search: false,` : ""}
+            ${typeof pageview !== "undefined" ? `pageview: ${JSON.stringify(pageview)},` : ""}
+            ${typeof comment !== "undefined" ? `comment: ${JSON.stringify(comment)},` : ""}
+            ${`copyright: ${JSON.stringify(copyright)},`}
+        });`;
+    return (
+      <>
+        <div id="waline-thread" class="content"></div>
+        <link rel="stylesheet" href={cssUrl} />
+        <script type="module" dangerouslySetInnerHTML={{ __html: js }} />
+      </>
+    );
+  }
+}
+
+/**
+ * Cacheable Waline comment JSX component.
+ * <p>
+ * This class is supposed to be used in combination with the <code>locals</code> hexo filter
+ * ({@link module:hexo/filter/locals}).
+ *
+ * @see module:util/cache.cacheComponent
+ * @example
+ * <Waline.Cacheable
+ *     comment={{
+ *         server_url: "https://path/to/waline/server",
+ *         path: "window.location.pathname",
+ *         lang: "zh-CN",
+ *         locale: {placeholder: "", ...},
+ *         emoji: "https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo",
+ *         dark: "",
+ *         meta: ["nick", "mail", "link"],
+ *         required_meta: [],
+ *         login: false,
+ *         word_limit: 0,
+ *         page_size: 10,
+ *         image_uploader: true,
+ *         highlighter: true,
+ *         tex_renderer: false,
+ *         search: true,
+ *         pageview: false,
+ *         comment: false,
+ *         copyright: true,
+ *     }}
+ *     helper={{ cdn: function() {...} }} />
+ */
+Waline.Cacheable = cacheComponent(Waline, "comment.waline", (props) => {
+  const { comment, helper, page, config } = props;
+
+  return {
+    serverURL: comment.server_url,
+    path: comment.path,
+    lang:
+      comment.lang || page.lang || page.language || config.language || "zh-CN",
+    locale: comment.locale,
+    emoji: comment.emoji,
+    dark: comment.dark,
+    meta: comment.meta,
+    requiredMeta: comment.required_meta,
+    login: comment.login,
+    wordLimit: comment.word_limit,
+    pageSize: comment.page_size,
+    imageUploader: comment.image_uploader,
+    highlighter: comment.highlighter,
+    texRenderer: comment.tex_renderer,
+    search: comment.search,
+    pageview: comment.pageview,
+    comment: comment.comment,
+    copyright: comment.copyright,
+    jsUrl: helper.cdn("@waline/client", "3.3.0", "dist/waline.js"),
+    cssUrl: helper.cdn("@waline/client", "3.3.0", "dist/waline.css"),
+  };
+});
+
+module.exports = Waline;

package/layout/common/article.jsx

@@ -0,0 +1,131 @@
+const { Component, Fragment } = require("../../include/util/common");
+const Comment = require("./comment");
+const ArticleLicensing = require("../misc/article_licensing");
+const ArticleCover = require("./article_cover");
+
+/**
+ * Get the word count of text.
+ */
+function getWordCount(content) {
+  if (typeof content === "undefined") {
+    return 0;
+  }
+  content = content.replace(/<\/?[a-z][^>]*>/gi, "");
+  content = content.trim();
+  return content
+    ? (content.match(/[\u00ff-\uffff]|[a-zA-Z]+/g) || []).length
+    : 0;
+}
+
+module.exports = class extends Component {
+  render() {
+    // index: true if in article list, false if in article page
+    const { config, helper, page, index } = this.props;
+
+    const { article } = config;
+    const { url_for, date, _p } = helper;
+
+    const cover = page.cover ? url_for(page.cover) : null;
+
+    return (
+      <Fragment>
+        {/* Main content */}
+        <div class="card">
+          {/* Cover image */}
+          {cover ? (
+            <ArticleCover
+              page={page}
+              cover={cover}
+              index={index}
+              helper={helper}
+            />
+          ) : null}
+          <article
+            class={`card-content article${"direction" in page ? ` ${page.direction}` : ""}`}
+          >
+            {/* Metadata */}
+            {page.layout !== "page" ? (
+              <div class="article-meta">
+                <p>
+                  {page.date && <span>{date(page.date)}</span>}
+                  {page.categories?.length ? (
+                    <span>
+                      {page.categories.map((category) => (
+                        <a href={url_for(category.path)}>/{category.name}</a>
+                      ))}
+                    </span>
+                  ) : null}
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: _p(
+                        "article.word_count",
+                        getWordCount(page._content),
+                      ),
+                    }}
+                  ></span>
+                  {/* Visitor counter */}
+                  {!index ? (
+                    <span
+                      id={url_for(page.link || page.path)}
+                      data-flag-title={page.title}
+                      dangerouslySetInnerHTML={{
+                        __html: _p(
+                          "plugin.visit_count",
+                          '<span id="busuanzi_page_pv" style="padding-right: 0"></span>',
+                        ),
+                      }}
+                    ></span>
+                  ) : null}
+                </p>
+              </div>
+            ) : null}
+            {/* Title */}
+            {page.title !== "" && index ? (
+              <p class="title">
+                <a href={url_for(page.link || page.path)}>{page.title}</a>
+              </p>
+            ) : null}
+            {page.title !== "" && !index ? (
+              <h1 class="title">{page.title}</h1>
+            ) : null}
+            {/* Content/Excerpt */}
+            <div
+              class="content"
+              dangerouslySetInnerHTML={{
+                __html: index && page.excerpt ? page.excerpt : page.content,
+              }}
+            ></div>
+            {/* Tags */}
+            {!index && page.tags && page.tags.length ? (
+              <div class="article-tags">
+                {page.tags.map((tag) => {
+                  return (
+                    <a class="tags" rel="tag" href={url_for(tag.path)}>
+                      <span class="tag">{tag.name}</span>
+                      <span class="tag">{tag.length}</span>
+                    </a>
+                  );
+                })}
+              </div>
+            ) : null}
+            {/* Licensing block */}
+            {!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}
+      </Fragment>
+    );
+  }
+};

package/layout/common/article_cover.jsx

@@ -0,0 +1,33 @@
+const { Component } = require("inferno");
+
+module.exports = class extends Component {
+  render() {
+    const { page, cover, helper } = this.props;
+    const { url_for } = helper;
+
+    const imageSrcset = `${cover}?w=256 256w, ${cover}?w=800 800w, ${cover}?w=1500 1500w, ${cover}?w=2000 2000w, ${cover} 6144w`;
+    const coverLQIP = (
+      <img class="cover-lqip" alt="lqip" src={`${cover}?q=10&blur=25`} />
+    );
+    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"
+      />
+    );
+    return (
+      <div class="card-image">
+        <a href={url_for(page.link || page.path)} class="image is-7by3">
+          {CoverImage}
+          {coverLQIP}
+        </a>
+      </div>
+    );
+  }
+};

package/layout/common/article_media.jsx

@@ -0,0 +1,34 @@
+/**
+ * Article media component, used in article lists such as archive page and recent posts widget
+ */
+const { Component } = require("inferno");
+const moment = require("moment");
+
+module.exports = class extends Component {
+  render() {
+    const { url, title, date, categories } = this.props;
+    // Formatted like May.15
+    const formattedDate = moment(date).format("MMM.DD");
+    const categoryTags = [];
+    categories.forEach((category, i) => {
+      categoryTags.push(<a href={category.url}>{category.name}</a>);
+      if (i < categories.length - 1) {
+        categoryTags.push("/");
+      }
+    });
+
+    return (
+      <article class="archive-item">
+        <div>
+          <p class="article-meta">
+            <span>{formattedDate}</span>
+            {categoryTags.length ? <span>{categoryTags}</span> : null}
+          </p>
+          <p class="title" style="font-size: 1em;">
+            <a href={url}>{title}</a>
+          </p>
+        </div>
+      </article>
+    );
+  }
+};

package/layout/common/comment.jsx

@@ -0,0 +1,38 @@
+const {
+  Component,
+  loadComponent,
+  handleWidgetError,
+} = require("../../include/util/common");
+
+module.exports = class extends Component {
+  render() {
+    const { config, page, helper } = this.props;
+    const { __ } = helper;
+    const { comment } = config;
+    if (!comment || typeof comment.type !== "string") {
+      return null;
+    }
+
+    return (
+      <div class="card" id="comments">
+        <div class="card-content">
+          {(() => {
+            const Comment = loadComponent(`comment/${comment.type}`);
+            if (!Comment) {
+              handleWidgetError(`comment "${comment.type}"`);
+              return null;
+            }
+            return (
+              <Comment
+                config={config}
+                page={page}
+                helper={helper}
+                comment={comment}
+              />
+            );
+          })()}
+        </div>
+      </div>
+    );
+  }
+};

package/layout/common/footer.jsx

@@ -0,0 +1,228 @@
+const { Component, cacheComponent } = require("../../include/util/common");
+
+class Footer extends Component {
+  render() {
+    const {
+      siteTitle,
+      siteYear,
+      author,
+      links,
+      subdomains,
+      archives,
+      copyright,
+      showVisitorCounter,
+      visitorCounterTitle,
+      ICPRecord,
+    } = this.props;
+
+    const svg_line = (
+      <svg
+        aria-hidden="true"
+        width="100%"
+        height="8"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
+          <g clip-path="url(#clip0_2426_11367)">
+            <path
+              d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
+              stroke="var(--lavender)"
+              stroke-linecap="square"
+            ></path>
+          </g>
+        </pattern>
+        <rect width="100%" height="100%" fill="url(#a)"></rect>
+      </svg>
+    );
+
+    const footer_brand = (
+      <div class="footer-column footer-brand">
+        <p class="footer-title">{author || siteTitle}</p>
+        <p class="footer-meta">
+          <span
+            dangerouslySetInnerHTML={{
+              __html: `&copy; ${siteYear} ${author || siteTitle}`,
+            }}
+          ></span>
+          &nbsp;Powered by Hexo&nbsp;& Icarus
+          {showVisitorCounter ? (
+            <>
+              <br />
+              <span
+                id="busuanzi_container_site_uv"
+                dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}
+              ></span>
+            </>
+          ) : null}
+          {ICPRecord ? (
+            <>
+              <br />
+              <a
+                href="https://beian.miit.gov.cn/"
+                style={"color: inherit"}
+                target="_blank"
+                rel="noopener"
+                dangerouslySetInnerHTML={{ __html: ICPRecord }}
+              ></a>
+            </>
+          ) : null}
+        </p>
+        {copyright ? (
+          <p
+            class="footer-meta"
+            dangerouslySetInnerHTML={{ __html: copyright }}
+          ></p>
+        ) : null}
+      </div>
+    );
+
+    const footer_social = (
+      <div class="footer-column footer-social">
+        <p class="footer-heading">Social Media</p>
+        <div class="footer-links">
+          {Object.keys(links).length
+            ? Object.keys(links).map((name) => {
+              const link = links[name];
+              return (
+                <a
+                  class="footer-link"
+                  target="_blank"
+                  rel="noopener"
+                  title={name}
+                  href={link.url}
+                >
+                  {link.icon ? (
+                    <iconify-icon icon={link.icon}></iconify-icon>
+                  ) : (
+                    name
+                  )}
+                </a>
+              );
+            })
+            : null}
+        </div>
+      </div>
+    );
+
+    const footer_subdomains = (
+      <div class="footer-column footer-subdomains">
+        <p class="footer-heading">Sub Domains</p>
+        <div class="footer-links">
+          {Object.keys(subdomains).length
+            ? Object.keys(subdomains).map((name) => {
+              const link = subdomains[name];
+              return (
+                <a
+                  class="footer-link"
+                  target="_blank"
+                  rel="noopener"
+                  title={name}
+                  href={link.url}
+                >
+                  {name}
+                </a>
+              );
+            })
+            : null}
+        </div>
+      </div>
+    );
+
+    const footer_archives = (
+      <div class="footer-column footer-archives">
+        <p class="footer-heading">Archives</p>
+        <div class="footer-links">
+          {archives?.length
+            ? archives.map((item) => (
+              <a class="footer-link" href={item.url}>
+                {item.year}
+              </a>
+            ))
+            : null}
+        </div>
+      </div>
+    );
+
+    return (
+      <>
+        {" "}
+        {svg_line}
+        <footer class="footer">
+          <div class="footer-grid">
+            {footer_brand}
+            {footer_subdomains}
+            {footer_archives}
+            {footer_social}
+          </div>
+        </footer>
+      </>
+    );
+  }
+}
+
+module.exports = cacheComponent(Footer, "common.footer", (props) => {
+  const { config, helper, site } = props;
+  const { url_for, _p, date } = helper;
+  const { title, author, footer, plugins } = config;
+
+  const links = {};
+  if (footer?.links) {
+    Object.keys(footer.links).forEach((name) => {
+      const link = footer.links[name];
+      links[name] = {
+        url: url_for(typeof link === "string" ? link : link.url),
+        icon: link.icon,
+      };
+    });
+  }
+
+  const subdomains = {};
+  if (footer?.subdomains) {
+    Object.keys(footer.subdomains).forEach((name) => {
+      const link = footer.subdomains[name];
+      const targetUrl = typeof link === "string" ? link : link.url;
+      subdomains[name] = {
+        url: url_for(targetUrl),
+      };
+    });
+  }
+
+  // Build archives grouped by year from site posts
+  let archives = [];
+  if (site?.posts?.length) {
+    const archiveDir = config.archive_dir || "archives";
+    const byYear = {};
+    const posts = site.posts.sort("date", -1);
+
+    posts.forEach((post) => {
+      let d = post.date.clone();
+      if (config.timezone) {
+        d = d.tz(config.timezone);
+      }
+      const year = d.year();
+      byYear[year] = (byYear[year] || 0) + 1;
+    });
+
+    archives = Object.keys(byYear)
+      .sort((a, b) => Number(b) - Number(a))
+      .map((year) => ({ year, url: url_for(`${archiveDir}/${year}/`) }));
+  }
+
+  return {
+    siteUrl: url_for("/"),
+    siteTitle: title,
+    siteYear: date(new Date(), "YYYY"),
+    author,
+    links,
+    subdomains,
+    archives,
+    copyright: footer?.copyright ?? "",
+    showVisitorCounter: plugins && plugins.busuanzi === true,
+    visitorCounterTitle: _p(
+      "plugin.visitor_count",
+      '<span id="busuanzi_value_site_uv">0</span>',
+    ),
+    ICPRecord: footer?.ICPRecord || "",
+  };
+});