hexo-theme-gnix 1.1.0

package/layout/misc/web_app.jsx

@@ -0,0 +1,106 @@
+/**
+ * Web app meta tags.
+ * @module view/misc/web_app
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Web app meta tags.
+ *
+ * @example
+ * <WebApp
+ *     name="******"
+ *     manifest="/path/to/manifest.json"
+ *     tileIcon="/path/to/image"
+ *     themeColor="#000000"
+ *     icons={[
+ *         { src: '/path/to/image', sizes: '128x128 256x256' },
+ *         { src: '/path/to/image', sizes: '512x512' },
+ *     ]} />
+ */
+class WebApp extends Component {
+  render() {
+    const { name, manifest, tileIcon, themeColor } = this.props;
+
+    let icons = [];
+    if (Array.isArray(this.props.icons)) {
+      icons = this.props.icons.map((icon) => {
+        const { sizes, src } = icon;
+        if (src && sizes) {
+          return icon.sizes.split(/\s+/).map((size) => ({ sizes: size, src }));
+        }
+        return null;
+      });
+      icons = icons.filter(Boolean);
+      icons = [].concat(...icons);
+    }
+
+    return (
+      <>
+        <link rel="manifest" href={manifest} />
+        {themeColor ? <meta name="theme-color" content={themeColor} /> : null}
+        {/* Windows Pinned Site */}
+        <meta name="application-name" content={name} />
+        {tileIcon ? (
+          <meta name="msapplication-TileImage" content={tileIcon} />
+        ) : null}
+        {themeColor ? (
+          <meta name="msapplication-TileColor" content={themeColor} />
+        ) : null}
+        {/* iOS home screen launcher */}
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-title" content={name} />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        {icons.map((icon) => (
+          <link rel="apple-touch-icon" sizes={icon.sizes} href={icon.src} />
+        ))}
+      </>
+    );
+  }
+}
+
+/**
+ * Cacheable web app meta tags.
+ * <p>
+ * This class is supposed to be used in combination with the <code>locals</code> hexo filter
+ * ({@link module:hexo/filter/locals}) and manifest generator ({@link module:hexo/generator/manifest}).
+ *
+ * @see module:util/cache.cacheComponent
+ * @example
+ * <WebApp.Cacheable
+ *     name="******"
+ *     themeColor="#000000"
+ *     favicon="/path/to/image"
+ *     icons={[
+ *         { src: '/path/to/image', sizes: '128x128 256x256' },
+ *         { src: '/path/to/image', sizes: '512x512' },
+ *     ]}
+ *     helper={{ url_for: function() {...} }} />
+ */
+WebApp.Cacheable = cacheComponent(WebApp, "misc.webapp", (props) => {
+  const { name, themeColor, favicon, icons, helper } = props;
+
+  let tileIcon = null;
+  if (Array.isArray(icons)) {
+    tileIcon = icons.find(
+      (icon) => icon.sizes.toLowerCase().indexOf("144x144") > -1,
+    );
+    if (tileIcon) {
+      tileIcon = tileIcon.src;
+    } else if (icons.length) {
+      tileIcon = icons[0].src;
+    }
+  }
+  if (!tileIcon) {
+    tileIcon = favicon;
+  }
+
+  return {
+    name,
+    icons,
+    tileIcon,
+    themeColor,
+    manifest: helper.url_for("/manifest.json"),
+  };
+});
+
+module.exports = WebApp;

package/layout/page.jsx

@@ -0,0 +1,12 @@
+const { Component } = require("../include/util/common");
+const Article = require("./common/article");
+
+module.exports = class extends Component {
+  render() {
+    const { config, page, helper } = this.props;
+
+    return (
+      <Article config={config} page={page} helper={helper} index={false} />
+    );
+  }
+};

package/layout/plugin/bing_webmaster.jsx

@@ -0,0 +1,47 @@
+/**
+ * Bing Webmaster Tools plugin JSX component.
+ * @module view/plugin/bing_webmaster
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Bing Webmaster Tools plugin JSX component.
+ *
+ * @see https://www.bing.com/toolbox/webmaster/
+ * @example
+ * <BingWebmaster trackingId="******" />
+ */
+class BingWebmaster extends Component {
+  render() {
+    const { trackingId } = this.props;
+
+    return <meta name="msvalidate.01" content={trackingId} />;
+  }
+}
+
+/**
+ * Cacheable Bing Webmaster Tools plugin 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
+ * <BingWebmaster.Cacheable
+ *     head={true}
+ *     plugin={{ tracking_id: '*******' }} />
+ */
+BingWebmaster.Cacheable = cacheComponent(
+  BingWebmaster,
+  "plugin.bingwebmaster",
+  (props) => {
+    const { head, plugin } = props;
+    if (!head || !plugin.tracking_id) {
+      return null;
+    }
+    return {
+      trackingId: plugin.tracking_id,
+    };
+  },
+);
+
+module.exports = BingWebmaster;

package/layout/plugin/busuanzi.jsx

@@ -0,0 +1,40 @@
+/**
+ * Busuanzi visitor counter plugin JSX component.
+ * @module view/plugin/baidu_analytics
+ */
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Busuanzi visitor counter plugin JSX component.
+ *
+ * @see https://busuanzi.ibruce.info/
+ * @example
+ * <Busuanzi />
+ */
+class Busuanzi extends Component {
+  render() {
+    return (
+      // busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
+      <script defer src="/js/busuanzi.js"></script>
+      // <script src="https://vercount.one/js" defer={true}></script>
+    );
+  }
+}
+
+/**
+ * Cacheable Busuanzi visitor counter plugin 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
+ * <Busuanzi.Cacheable head={true} />
+ */
+Busuanzi.Cacheable = cacheComponent(Busuanzi, "plugin.busuanzi", (props) => {
+  if (!props.head) {
+    return null;
+  }
+  return {};
+});
+
+module.exports = Busuanzi;

package/layout/plugin/clarity.jsx

@@ -0,0 +1,22 @@
+const { Component, cacheComponent } = require("../../include/util/common");
+
+class Clarity extends Component {
+  render() {
+    const { trackingId } = this.props;
+
+    const js = `(function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "${trackingId}");`;
+    return <script dangerouslySetInnerHTML={{ __html: js }}></script>;
+  }
+}
+
+Clarity.Cacheable = cacheComponent(Clarity, "plugin.clarity", (props) => {
+  const { head, plugin } = props;
+  if (!head || !plugin.tracking_id) {
+    return null;
+  }
+  return {
+    trackingId: plugin.tracking_id,
+  };
+});
+
+module.exports = Clarity;

package/layout/plugin/cookie_consent.jsx

@@ -0,0 +1,136 @@
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * A JSX component for alerting users about the use of cookies.
+ *
+ * @see https://www.osano.com/cookieconsent/
+ * @example
+ * <CookieConsent
+ *     head={true}
+ *     type="info"
+ *     theme="classic"
+ *     static={false}
+ *     position="bottom-left"
+ *     policyLink="/path/to/cookie/policy"
+ *     text={{
+ *         message: 'This website uses cookies to improve your experience.',
+ *         dismiss: 'Got it!',
+ *         allow: 'Allow cookies',
+ *         deny: 'Decline',
+ *         link: 'Learn more',
+ *         policy: 'Cookie Policy',
+ *     }}
+ *     cssUrl="/path/to/cookieconsent.css"
+ *     jsUrl="/path/to/cookieconsent.js" />
+ */
+class CookieConsent extends Component {
+  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> */}
+      </>
+    );
+  }
+}
+
+/**
+ * Cacheable JSX component for alerting users about the use of cookies.
+ * <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
+ * <CookieConsent.Cacheable
+ *     head={true}
+ *     plugin={{
+ *         info: "info",
+ *         theme: "classic",
+ *         static: false,
+ *         position: "bottom-left",
+ *         policyLink: "/path/to/cookie/policy"
+ *     }}
+ *     helper={{
+ *         __: function() {...},
+ *         cdn: function() {...}
+ *     }} />
+ */
+CookieConsent.Cacheable = cacheComponent(
+  CookieConsent,
+  "plugin.cookieconsent",
+  (props) => {
+    const { head, plugin, helper } = props;
+    const {
+      type = "info",
+      theme = "edgeless",
+      position = "bottom-left",
+      policyLink = "https://www.cookiesandyou.com/",
+    } = plugin;
+
+    return {
+      head,
+      type,
+      theme,
+      position,
+      policyLink,
+      static: plugin.static || false,
+      text: {
+        message: helper.__("plugin.cookie_consent.message"),
+        dismiss: helper.__("plugin.cookie_consent.dismiss"),
+        allow: helper.__("plugin.cookie_consent.allow"),
+        deny: helper.__("plugin.cookie_consent.deny"),
+        link: helper.__("plugin.cookie_consent.link"),
+        policy: helper.__("plugin.cookie_consent.policy"),
+      },
+      cssUrl: helper.cdn(
+        "cookieconsent",
+        "3.1.1",
+        "build/cookieconsent.min.css",
+      ),
+      jsUrl: helper.cdn("cookieconsent", "3.1.1", "build/cookieconsent.min.js"),
+    };
+  },
+);
+
+module.exports = CookieConsent;

package/layout/plugin/google_analytics.jsx

@@ -0,0 +1,66 @@
+/**
+ * Google Analytics plugin JSX component.
+ * @module view/plugin/google_analytics
+ */
+const {
+  Component,
+  Fragment,
+  cacheComponent,
+} = require("../../include/util/common");
+
+/**
+ * Google Analytics plugin JSX component.
+ *
+ * @see https://analytics.google.com/analytics/web
+ * @example
+ * <GoogleAnalytics trackingId="******" />
+ */
+class GoogleAnalytics extends Component {
+  render() {
+    const { trackingId } = this.props;
+
+    const js = `window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', '${trackingId}');`;
+
+    return (
+      <Fragment>
+        <script
+          async={true}
+          src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}
+        ></script>
+        <script dangerouslySetInnerHTML={{ __html: js }}></script>
+      </Fragment>
+    );
+  }
+}
+
+/**
+ * Cacheable Google Analytics plugin 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
+ * <GoogleAnalytics.Cacheable
+ *     head={true}
+ *     plugin={{ tracking_id: '*******' }} />
+ */
+GoogleAnalytics.Cacheable = cacheComponent(
+  GoogleAnalytics,
+  "plugin.googleanalytics",
+  (props) => {
+    const { head, plugin } = props;
+    if (!head || !plugin.tracking_id) {
+      return null;
+    }
+    return {
+      trackingId: plugin.tracking_id,
+    };
+  },
+);
+
+module.exports = GoogleAnalytics;

package/layout/plugin/google_tag_mamager.jsx

@@ -0,0 +1,41 @@
+const { Component, cacheComponent } = require("../../include/util/common");
+
+class GoogleAnalytics extends Component {
+  render() {
+    const { trackingId, head } = this.props;
+
+    if (head) {
+      const js = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${trackingId}');`;
+      return <script dangerouslySetInnerHTML={{ __html: js }}></script>;
+    }
+
+    return (
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${trackingId}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+        }}
+      ></noscript>
+    );
+  }
+}
+
+GoogleAnalytics.Cacheable = cacheComponent(
+  GoogleAnalytics,
+  "plugin.google_tag_manager",
+  (props) => {
+    const { head, plugin } = props;
+    if (!plugin || !plugin.tracking_id) {
+      return null;
+    }
+    return {
+      trackingId: plugin.tracking_id,
+      head: Boolean(head),
+    };
+  },
+);
+
+module.exports = GoogleAnalytics;

package/layout/plugin/netlify.jsx

@@ -0,0 +1,39 @@
+const {
+  Component,
+  Fragment,
+  cacheComponent,
+} = require("../../include/util/common");
+
+const netlifyJs = `if (window.netlifyIdentity) {
+  window.netlifyIdentity.on("init", function(user) {
+    if (!user) {
+      window.netlifyIdentity.on("login", function() {
+        document.location.href = "/admin/";
+      });
+    }
+  });
+}`;
+
+class Netlify extends Component {
+  render() {
+    if (this.props.head) {
+      return null;
+    }
+    return (
+      <Fragment>
+        <script
+          defer
+          src="https://identity.netlify.com/v1/netlify-identity-widget.js"
+        ></script>
+        <script defer dangerouslySetInnerHTML={{ __html: netlifyJs }}></script>
+      </Fragment>
+    );
+  }
+}
+
+Netlify.Cacheable = cacheComponent(Netlify, "plugin.netlify", (props) => {
+  const { head } = props;
+  return { head };
+});
+
+module.exports = Netlify;

package/layout/plugin/pjax.jsx

@@ -0,0 +1,20 @@
+const { Component, Fragment } = require("../../include/util/common");
+
+class Pjax extends Component {
+  render() {
+    if (this.props.head) {
+      return null;
+    }
+    const { helper } = this.props;
+    const { url_for, cdn } = helper;
+
+    return (
+      <Fragment>
+        <script defer src={cdn("pjax", "0.2.8", "pjax.min.js")}></script>
+        <script defer src={url_for("/js/pjax.js")}></script>
+      </Fragment>
+    );
+  }
+}
+
+module.exports = Pjax;

package/layout/plugin/statcounter.jsx

@@ -0,0 +1,69 @@
+const { Component, cacheComponent } = require("../../include/util/common");
+
+/**
+ * Statcounter statistics plugin JSX component.
+ *
+ * @see https://statcounter.com/
+ * @example
+ * <Statcounter project="******" security="******" />
+ */
+class Statcounter extends Component {
+  render() {
+    const { project, security } = this.props;
+
+    const js = `
+      var sc_project=${JSON.stringify(project)};
+      var sc_invisible=1;
+      var sc_security=${JSON.stringify(security)};
+      var sc_https=1;
+      var sc_remove_link=1;`;
+    return (
+      <>
+        <script dangerouslySetInnerHTML={{ __html: js }}></script>
+        <script
+          src="https://www.statcounter.com/counter/counter.js"
+          async
+        ></script>
+        <noscript>
+          <div class="statcounter">
+            <img
+              class="statcounter"
+              src={`https://c.statcounter.com/${project}/0/${security}/1/`}
+              alt="real time web analytics"
+            />
+          </div>
+        </noscript>
+      </>
+    );
+  }
+}
+
+/**
+ * Cacheable Statcounter statistics plugin 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
+ * <Statcounter.Cacheable
+ *     head={false}
+ *     plugin={{ project: '******', security: '******' }} />
+ */
+Statcounter.Cacheable = cacheComponent(
+  Statcounter,
+  "plugin.statcounter",
+  (props) => {
+    const { head, plugin } = props;
+    const { project, security } = plugin;
+    if (head || !project || !security) {
+      return null;
+    }
+    return {
+      project,
+      security,
+    };
+  },
+);
+
+module.exports = Statcounter.Cacheable;

package/layout/plugin/twitter_conversion_tracking.jsx

@@ -0,0 +1,51 @@
+const { Component, cacheComponent } = require("../../include/util/common");
+/**
+ * Twitter conversion tracking plugin JSX component.
+ *
+ * @see https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
+ * @example
+ * <TwiterCT pixelId="******" />
+ */
+class TwiterCT extends Component {
+  render() {
+    const { pixelId } = this.props;
+
+    const js = `
+    !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
+    },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js',
+    a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
+    twq('init', ${JSON.stringify(pixelId)});
+    twq('track', 'PageView');
+    `;
+
+    return <script dangerouslySetInnerHTML={{ __html: js }}></script>;
+  }
+}
+
+/**
+ * Cacheable Twitter conversion tracking plugin 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
+ * <TwiterCT.Cacheable
+ *     head={false}
+ *     plugin={{ pixel_id: '******' }} />
+ */
+TwiterCT.Cacheable = cacheComponent(
+  TwiterCT,
+  "plugin.twitterconversiontracking",
+  (props) => {
+    const { head, plugin } = props;
+    if (head || !plugin.pixel_id) {
+      return null;
+    }
+    return {
+      pixelId: plugin.pixel_id,
+    };
+  },
+);
+
+module.exports = TwiterCT;

package/layout/post.jsx

@@ -0,0 +1,16 @@
+const { Component } = require("../include/util/common");
+const Article = require("./common/article");
+const Widgets = require("./common/toc");
+
+module.exports = class extends Component {
+  render() {
+    const { config, page, helper } = this.props;
+
+    return (
+      <>
+        <Article config={config} page={page} helper={helper} index={false} />
+        <Widgets {...this.props} />
+      </>
+    );
+  }
+};