hexo-theme-gnix 1.1.0

package/layout/comment/giscus.jsx

@@ -0,0 +1,193 @@
+/**
+ * Giscus comment JSX component.
+ * @module view/comment/giscus
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Giscus comment JSX component.
+ *
+ * @see https://giscus.app/
+ * @example
+ * <Giscus
+ *     repo="usr/repo"
+ *     repoId="X_xxxxxxxxxx"
+ *     category="******"
+ *     categoryId="XXX_xxxxxxxxxxxxxxxx"
+ *     mapping="******"
+ *     strict={0}
+ *     reactionsEnabled={0}
+ *     emitMetadata={0}
+ *     inputPosition="******"
+ *     theme="******"
+ *     lang="******"
+ *     lazy="******" />
+ */
+class Giscus extends Component {
+  render() {
+    const {
+      repo,
+      repoId,
+      category,
+      categoryId,
+      mapping,
+      term,
+      strict,
+      reactionsEnabled,
+      emitMetadata,
+      inputPosition,
+      theme,
+      customThemeCss,
+      lang,
+      lazy,
+    } = this.props;
+    if (!repo || !repoId || !categoryId) {
+      return (
+        <div class="notification is-danger">
+          You forgot to set the <code>repo</code>, <code>repoId</code>, or{" "}
+          <code>categoryId</code> for Giscus. Please set it in{" "}
+          <code>_config.yml</code>.
+        </div>
+      );
+    }
+    if ((mapping === "specific" || mapping === "number") && !term) {
+      return (
+        <div class="notification is-danger">
+          You set <code>mapping</code> to <code>specific</code> or{" "}
+          <code>number</code>, but did not set <code>term</code> for Giscus.
+          Please set <code>term</code> in <code>_config.yml</code>.
+        </div>
+      );
+    }
+    const config = { repo };
+    config["data-repo"] = repo;
+    config["data-repo-id"] = repoId;
+    config["data-category-id"] = categoryId;
+    if (category) {
+      config["data-category"] = category;
+    } else {
+      config["data-category"] = "Announcements";
+    }
+    if (mapping) {
+      config["data-mapping"] = mapping;
+    } else {
+      config["data-mapping"] = "pathname";
+    }
+    if (strict) {
+      config["data-strict"] = 1;
+    } else {
+      config["data-strict"] = 0;
+    }
+    if (reactionsEnabled) {
+      config["data-reactions-enabled"] = 1;
+    } else {
+      config["data-reactions-enabled"] = 0;
+    }
+    if (emitMetadata) {
+      config["data-emit-metadata"] = 1;
+    } else {
+      config["data-emit-metadata"] = 0;
+    }
+    if (inputPosition) {
+      config["data-input-position"] = inputPosition;
+    } else {
+      config["data-input-position"] = "top";
+    }
+    if (theme) {
+      if (theme === "custom") {
+        if (customThemeCss) {
+          config["data-theme"] = customThemeCss;
+        } else {
+          return (
+            <div class="notification is-danger">
+              You set <code>theme</code> to <code>custom</code>, but did not
+              apply a <code>customThemeCss</code> for Giscus. Please set it in{" "}
+              <code>_config.yml</code>.
+            </div>
+          );
+        }
+      } else {
+        config["data-theme"] = theme;
+      }
+    } else {
+      config["data-theme"] = "noborder_light";
+    }
+    if (lang) {
+      config["data-lang"] = lang;
+    } else {
+      config["data-lang"] = "en";
+    }
+    if (lazy) {
+      config["data-loading"] = "lazy";
+    }
+    return (
+      <script
+        src="https://giscus.app/client.js"
+        {...config}
+        crossorigin="anonymous"
+        async={true}
+      ></script>
+    );
+  }
+}
+
+/**
+ * Cacheable Giscus 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
+ * <Giscus.Cacheable
+ *     comment={{
+ *         repo: "usr/repo"
+ *         repoId: "X_xxxxxxxxxx"
+ *         category: "******"
+ *         categoryId: "XXX_xxxxxxxxxxxxxxxx"
+ *         mapping: "******"
+ *         strict: {false}
+ *         reactionsEnabled: {false}
+ *         emitMetadata: {false}
+ *         inputPosition: "******"
+ *         theme: "******"
+ *         lang: "******"
+ *         lazy: "******"
+ *     }} />
+ */
+Giscus.Cacheable = cacheComponent(Giscus, "comment.giscus", (props) => {
+  const {
+    repo,
+    repoId,
+    category,
+    categoryId,
+    mapping,
+    term,
+    strict,
+    reactionsEnabled,
+    emitMetadata,
+    inputPosition,
+    theme,
+    customThemeCss,
+    lang,
+    lazy,
+  } = props.comment;
+
+  return {
+    repo,
+    repoId,
+    category,
+    categoryId,
+    mapping,
+    term,
+    strict,
+    reactionsEnabled,
+    emitMetadata,
+    inputPosition,
+    theme,
+    customThemeCss,
+    lang,
+    lazy,
+  };
+});
+
+module.exports = Giscus;

package/layout/comment/gitalk.jsx

@@ -0,0 +1,141 @@
+/**
+ * Gitalk comment JSX component.
+ * @module view/comment/gitalk
+ */
+const crypto = require("node:crypto");
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Gitalk comment JSX component.
+ *
+ * @see https://github.com/gitalk/gitalk
+ * @example
+ * <Gitalk
+ *     id="******",
+ *     repo="******",
+ *     owner="******",
+ *     admin={["******"]},
+ *     clientId="******",
+ *     clientSecret="******",
+ *     createIssueManually={false},
+ *     distractionFreeMode={false},
+ *     pagerDirection="last",
+ *     perPage={10},
+ *     proxy="******",
+ *     flipMoveOptions={...},
+ *     enableHotKey={true},
+ *     language="zh-CN",
+ *     jsUrl="/path/to/gitalk.js",
+ *     cssUrl="/path/to/gitalk.css" />
+ */
+class Gitalk extends Component {
+  render() {
+    const {
+      id,
+      repo,
+      owner,
+      admin,
+      clientId,
+      clientSecret,
+      createIssueManually = false,
+      distractionFreeMode = false,
+      pagerDirection = "last",
+      perPage = 10,
+      proxy,
+      flipMoveOptions,
+      enableHotKey,
+      language,
+      jsUrl,
+      cssUrl,
+    } = this.props;
+
+    if (!id || !repo || !owner || !admin || !clientId || !clientSecret) {
+      return (
+        <div class="notification is-danger">
+          You forgot to set the <code>owner</code>, <code>admin</code>,{" "}
+          <code>repo</code>,<code>client_id</code>, or{" "}
+          <code>client_secret</code> for Gitalk. Please set it in{" "}
+          <code>_config.yml</code>.
+        </div>
+      );
+    }
+    const js = `var gitalk = new Gitalk({
+            id: ${JSON.stringify(id)},
+            repo: ${JSON.stringify(repo)},
+            owner: ${JSON.stringify(owner)},
+            clientID: ${JSON.stringify(clientId)},
+            clientSecret: ${JSON.stringify(clientSecret)},
+            admin: ${JSON.stringify(admin)},
+            createIssueManually: ${!!createIssueManually},
+            distractionFreeMode: ${!!distractionFreeMode},
+            perPage: ${JSON.stringify(perPage)},
+            pagerDirection: ${JSON.stringify(pagerDirection)},
+            ${proxy ? `proxy: ${JSON.stringify(proxy)},` : ""}
+            ${flipMoveOptions ? `flipMoveOptions: ${JSON.stringify(flipMoveOptions)},` : ""}
+            enableHotKey: ${enableHotKey ? !!enableHotKey : true},
+            ${language ? `language: ${JSON.stringify(language)},` : ""}
+        })
+        gitalk.render('comment-container')`;
+    return (
+      <>
+        <div id="comment-container"></div>
+        <link rel="stylesheet" href={cssUrl} />
+        <script src={jsUrl}></script>
+        <script dangerouslySetInnerHTML={{ __html: js }}></script>
+      </>
+    );
+  }
+}
+
+/**
+ * Cacheable Gitalk 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
+ * <Gitalk.Cacheable
+ *     comment={{
+ *         repo: '******',
+ *         owner: '******',
+ *         admin: ['******'],
+ *         client_id: '******',
+ *         client_secret: '******',
+ *         create_issue_manually: false,
+ *         distraction_free_mode: false,
+ *         pager_direction: 'last',
+ *         per_page: 10,
+ *         proxy: '******',
+ *         flip_move_options: {...},
+ *         enable_hotkey: true,
+ *         language: 'zh-CN'
+ *     }}
+ *     page={{ path: '/path/to/page' }}
+ *     helper={{ cdn: function() {...} }} />
+ */
+Gitalk.Cacheable = cacheComponent(Gitalk, "comment.gitalk", (props) => {
+  const { helper, comment } = props;
+
+  // FIXME: config name change
+  const id = crypto.createHash("md5").update(props.page.path).digest("hex");
+  return {
+    id,
+    repo: comment.repo,
+    owner: comment.owner,
+    admin: comment.admin,
+    clientId: comment.client_id,
+    clientSecret: comment.client_secret,
+    createIssueManually: comment.create_issue_manually,
+    distractionFreeMode: comment.distraction_free_mode,
+    pagerDirection: comment.pager_direction,
+    perPage: comment.per_page,
+    proxy: comment.proxy,
+    flipMoveOptions: comment.flip_move_options,
+    enableHotKey: comment.enable_hotkey,
+    language: comment.language,
+    cssUrl: helper.cdn("gitalk", "1.7.2", "dist/gitalk.css"),
+    jsUrl: helper.cdn("gitalk", "1.7.2", "dist/gitalk.min.js"),
+  };
+});
+
+module.exports = Gitalk;

package/layout/comment/twikoo.jsx

@@ -0,0 +1,63 @@
+const {
+  Component,
+  Fragment,
+  cacheComponent,
+  lazy_load_css,
+} = require("../../include/util/common");
+
+/**
+ * Twikoo comment JSX component.
+ *
+ * @see https://twikoo.js.org/quick-start.html
+ * @example
+ * <Twikoo
+ *     envId="env_id"
+ *     region="ap-guangzhou"
+ *     lang="zh-CN"
+ *     jsUrl="/path/to/Twikoo.js" />
+ */
+class Twikoo extends Component {
+  render() {
+    const { envId, region, lang, jsUrl } = this.props;
+    const js = `twikoo.init({ envId: '${envId}', ${region ? `region: ${JSON.stringify(region)},` : ""} ${lang ? `lang: ${JSON.stringify(lang)},` : ""} });`;
+    const lazy_load_css_script = lazy_load_css("/css/twikoo.css");
+    return (
+      <Fragment>
+        <div id="twikoo" class="content twikoo"></div>
+        <script
+          dangerouslySetInnerHTML={{ __html: lazy_load_css_script }}
+        ></script>
+        <script async data-pjax src={jsUrl} onload={`${js};`}></script>
+      </Fragment>
+    );
+  }
+}
+
+/**
+ * Cacheable Twikoo 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
+ * <Twikoo.Cacheable
+ *     comment={{
+ *         env_id: "env_id",
+ *         region: "ap-guangzhou",
+ *         lang: "zh-CN",
+ *     }} />
+ */
+Twikoo.Cacheable = cacheComponent(Twikoo, "comment.twikoo", (props) => {
+  const { comment, helper, page, config } = props;
+
+  return {
+    envId: comment.env_id,
+    region: comment.region,
+    lang:
+      comment.lang || page.lang || page.language || config.language || "zh-CN",
+    jsUrl: helper.cdn("twikoo", "1.6.41", "dist/twikoo.all.min.js"),
+  };
+});
+
+module.exports = Twikoo;

package/layout/comment/utterances.jsx

@@ -0,0 +1,86 @@
+/**
+ * Utterances comment JSX component.
+ * @module view/comment/utterances
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Utterances comment JSX component.
+ *
+ * @see https://utteranc.es/
+ * @example
+ * <Utterances
+ *     repo="******"
+ *     issueTerm="******"
+ *     issueNumber={123}
+ *     label="******"
+ *     theme="******" />
+ */
+class Utterances extends Component {
+  render() {
+    const { repo, issueTerm, issueNumber, label, theme } = this.props;
+    if (!repo || (!issueTerm && !issueNumber)) {
+      return (
+        <div class="notification is-danger">
+          You forgot to set the <code>repo</code>, <code>issue_term</code>, or{" "}
+          <code>issue_number</code> for Utterances. Please set it in{" "}
+          <code>_config.yml</code>.
+        </div>
+      );
+    }
+    const config = { repo };
+    if (issueTerm) {
+      config["issue-term"] = issueTerm;
+    } else {
+      config["issue-number"] = issueNumber;
+    }
+    if (label) {
+      config.label = label;
+    }
+    if (theme) {
+      config.theme = theme;
+    }
+    return (
+      <script
+        src="https://utteranc.es/client.js"
+        {...config}
+        crossorigin="anonymous"
+        async={true}
+      ></script>
+    );
+  }
+}
+
+/**
+ * Cacheable Utterances 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
+ * <Utterances.Cacheable
+ *     comment={{
+ *         repo: "******",
+ *         issue_term: "******"
+ *         issue_number: {123}
+ *         label: "******"
+ *         theme: "******"
+ *     }} />
+ */
+Utterances.Cacheable = cacheComponent(
+  Utterances,
+  "comment.utterances",
+  (props) => {
+    const { repo, issue_term, issue_number, label, theme } = props.comment;
+
+    return {
+      repo,
+      issueTerm: issue_term,
+      issueNumber: issue_number,
+      label,
+      theme,
+    };
+  },
+);
+
+module.exports = Utterances;

package/layout/comment/valine.jsx

@@ -0,0 +1,143 @@
+/**
+ * Valine comment JSX component.
+ * @module view/comment/valine
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Valine comment JSX component.
+ *
+ * @see https://valine.js.org/quickstart.html
+ * @example
+ * <Valine
+ *     appId="******"
+ *     appKey="******"
+ *     placeholder="******"
+ *     avatar="mm"
+ *     avatarForce={false}
+ *     meta={['nick', 'mail', 'link']}
+ *     pageSize={10}
+ *     lang="zh-CN"
+ *     visitor={false}
+ *     highlight={true}
+ *     recordIP={false}
+ *     serverURLs="http[s]://[tab/us].avoscloud.com"
+ *     emojiCDN=""
+ *     emojiMaps={null}
+ *     enableQQ={false}
+ *     requiredFields={[]}
+ *     jsUrl="/path/to/Valine.js" />
+ */
+class Valine extends Component {
+  render() {
+    const {
+      appId,
+      appKey,
+      placeholder,
+      avatar = "mm",
+      avatarForce = false,
+      meta = ["nick", "mail", "link"],
+      pageSize = 10,
+      lang = "zh-CN",
+      visitor = false,
+      highlight = true,
+      recordIP = false,
+      serverURLs = "",
+      emojiCDN = "",
+      emojiMaps = null,
+      enableQQ = false,
+      requiredFields: fields = [],
+      jsUrl,
+    } = this.props;
+    if (!appId || !appKey) {
+      return (
+        <div class="notification is-danger">
+          You forgot to set the <code>app_id</code> or <code>app_key</code> for
+          Valine. Please set it in <code>_config.yml</code>.
+        </div>
+      );
+    }
+    const js = `new Valine({
+            el: '#valine-thread',
+            appId: ${JSON.stringify(appId)},
+            appKey: ${JSON.stringify(appKey)},
+            ${placeholder ? `placeholder: ${JSON.stringify(placeholder)},` : ""}
+            ${avatar ? `avatar: ${JSON.stringify(avatar)},` : ""}
+            ${`avatarForce: ${JSON.stringify(avatarForce)},`}
+            ${meta ? `meta: ${JSON.stringify(meta)},` : ""}
+            ${pageSize ? `pageSize: ${JSON.stringify(pageSize)},` : ""}
+            ${lang ? `lang: ${JSON.stringify(lang)},` : ""}
+            ${`visitor: ${JSON.stringify(visitor)},`}
+            ${`highlight: ${JSON.stringify(highlight)},`}
+            ${`recordIP: ${JSON.stringify(recordIP)},`}
+            ${serverURLs ? `serverURLs: ${JSON.stringify(serverURLs)},` : ""}
+            ${emojiCDN ? `emojiCDN: ${JSON.stringify(emojiCDN)},` : ""}
+            ${emojiMaps ? `emojiMaps: ${JSON.stringify(emojiMaps)},` : ""}
+            ${`enableQQ: ${JSON.stringify(enableQQ)},`}
+            ${Array.isArray(fields) ? `requiredFields: ${JSON.stringify(fields)},` : ""}
+        });`;
+    return (
+      <>
+        <div id="valine-thread" class="content"></div>
+        <script src="//cdn.jsdelivr.net/npm/leancloud-storage@3/dist/av-min.js"></script>
+        <script src={jsUrl}></script>
+        <script dangerouslySetInnerHTML={{ __html: js }}></script>
+      </>
+    );
+  }
+}
+
+/**
+ * Cacheable Valine 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
+ * <Valine.Cacheable
+ *     comment={{
+ *         app_id: "******"
+ *         app_key: "******"
+ *         placeholder: "******"
+ *         avatar: "mm"
+ *         avatar_force: false
+ *         meta: ["nick", "mail", "link"]
+ *         page_size: 10
+ *         lang: "zh-CN"
+ *         visitor: false
+ *         highlight: true
+ *         record_ip: false
+ *         server_urls: "http[s]://[tab/us].avoscloud.com"
+ *         emoji_cdn: ""
+ *         emoji_maps: null
+ *         enable_qq: false
+ *         required_fields: []
+ *     }}
+ *     helper={{ cdn: function() {...} }} />
+ */
+Valine.Cacheable = cacheComponent(Valine, "comment.valine", (props) => {
+  const { comment, helper, page, config } = props;
+
+  return {
+    appId: comment.app_id,
+    appKey: comment.app_key,
+    placeholder: comment.placeholder,
+    avatar: comment.avatar,
+    avatarForce: comment.avatar_force,
+    meta: comment.meta,
+    pageSize: comment.page_size,
+    lang:
+      comment.lang || page.lang || page.language || config.language || "zh-CN",
+    visitor: comment.visitor,
+    highlight: comment.highlight,
+    recordIP: comment.record_ip,
+    serverURLs: comment.server_urls,
+    emojiCDN: comment.emoji_cdn,
+    emojiMaps: comment.emoji_maps,
+    enableQQ: comment.enable_qq,
+    requiredFields: comment.required_fields,
+    jsUrl: helper.cdn("valine", "1.4.16", "dist/Valine.min.js"),
+  };
+});
+
+module.exports = Valine;