hexo-component-inferno 4.0.0 → 4.1.0

package/lib/hexo/helper/cdn.js

@@ -59,6 +59,11 @@ const UNPKG_FIXTURES = {
  * cdn('jquery', '3.3.1', 'dist/jquery.min.js');
  * // -> https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js
  *
+ * // Set providers.cdn_overrides, e.g., { jquery: 'unpkg' }, to use a different CDN provider or URL
+ * // template for some packages
+ * cdn('jquery', '3.3.1', 'dist/jquery.min.js');
+ * // -> https://unpkg.com/jquery@3.3.1/dist/jquery.min.js
+ *
  * // Use the function below to resolve the CDN URL web font files
  * fontcdn('Ubuntu:400,600|Source+Code+Pro', 'css');
  * // -> https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro
@@ -80,9 +85,12 @@ module.exports = function (hexo) {
     return [_package, version, filename];
   }
   hexo.extend.helper.register('cdn', function (_package, version, filename) {
+    const providers = typeof this.config.providers === 'object' ? this.config.providers : {};
     const {
-      cdn = 'jsdelivr'
-    } = typeof this.config.providers === 'object' ? this.config.providers : {};
+      cdn_overrides: overrides
+    } = providers;
+    // A package can use a different provider or URL than the rest in providers.cdn_overrides
+    const cdn = typeof overrides === 'object' && overrides !== null && overrides[_package] ? overrides[_package] : providers.cdn || 'jsdelivr';
     let _cdn = cdn;
     if (_cdn in PROVIDERS.LIBRARY) {
       _cdn = PROVIDERS.LIBRARY[_cdn];

package/lib/schema/comment/artalk.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "/comment/artalk.json",
+  "description": "Artalk comment plugin configurations\nhttps://artalk.js.org/guide/frontend/config.html",
+  "type": "object",
+  "properties": {
+    "type": {
+      "type": "string",
+      "const": "artalk"
+    },
+    "server": {
+      "type": "string",
+      "description": "URL of your Artalk server"
+    },
+    "site": {
+      "type": "string",
+      "description": "Name of the site on the Artalk server",
+      "nullable": true
+    },
+    "page_key": {
+      "type": "string",
+      "description": "Unique identifier of the page. Uses the path of the page if not set",
+      "nullable": true
+    },
+    "locale": {
+      "type": "string",
+      "description": "Language of Artalk, e.g., en, zh-CN, or auto",
+      "nullable": true
+    },
+    "dark_mode": {
+      "type": ["boolean", "string"],
+      "description": "Dark mode: true, false, or 'auto' to follow the system color scheme. Follows the appearance of the theme (the data-appearance attribute of <html>) if not set",
+      "nullable": true
+    }
+  },
+  "required": ["type", "server"]
+}

package/lib/schema/comment/beaudar.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "/comment/beaudar.json",
+  "description": "Beaudar comment plugin configurations\nhttps://github.com/beaudar/beaudar",
+  "type": "object",
+  "properties": {
+    "type": {
+      "type": "string",
+      "const": "beaudar"
+    },
+    "repo": {
+      "type": "string",
+      "description": "Name of the GitHub repository for the comments, e.g., user/repo"
+    },
+    "branch": {
+      "type": "string",
+      "description": "Branch of the repository that has beaudar.json",
+      "nullable": true
+    },
+    "label": {
+      "type": "string",
+      "description": "Label of the issues created by Beaudar",
+      "nullable": true
+    },
+    "theme": {
+      "type": "string",
+      "description": "Beaudar look and feel when the page looks light, e.g., github-light, github-dark, or preferred-color-scheme",
+      "default": "github-light",
+      "nullable": true
+    },
+    "dark_theme": {
+      "type": "string",
+      "description": "Beaudar look and feel when the page looks dark, e.g., with the dark or auto appearance of the theme. For example github-dark, github-dark-orange, classic-dark, dark-blue, icy-dark, or photon-dark",
+      "default": "github-dark",
+      "nullable": true
+    }
+  },
+  "required": ["type", "repo"],
+  "oneOf": [
+    {
+      "type": "object",
+      "properties": {
+        "issue_term": {
+          "type": "string",
+          "description": "The mapping between blog posts and GitHub issues, e.g., pathname, url, or title",
+          "default": "pathname"
+        }
+      },
+      "required": ["issue_term"]
+    },
+    {
+      "type": "object",
+      "properties": {
+        "issue_number": {
+          "type": "integer",
+          "description": "Configure Beaudar to load a specific issue by number"
+        }
+      },
+      "required": ["issue_number"]
+    }
+  ]
+}

package/lib/schema/comment/cusdis.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "/comment/cusdis.json",
+  "description": "Cusdis comment plugin configurations\nhttps://cusdis.com/doc",
+  "type": "object",
+  "properties": {
+    "type": {
+      "type": "string",
+      "const": "cusdis"
+    },
+    "app_id": {
+      "type": "string",
+      "description": "App ID of the website in the embed code from the Cusdis dashboard"
+    },
+    "host": {
+      "type": "string",
+      "description": "URL of your Cusdis server if you host it yourself",
+      "default": "https://cusdis.com",
+      "nullable": true
+    },
+    "theme": {
+      "type": "string",
+      "description": "Theme of Cusdis: light, dark, or auto to follow the system color scheme. Follows the appearance of the theme (the data-appearance attribute of <html>) if not set",
+      "enum": ["light", "dark", "auto"],
+      "nullable": true
+    },
+    "lang": {
+      "type": "string",
+      "description": "Language of Cusdis, e.g., zh-cn, zh-tw, es, or fi. Uses English if not set",
+      "nullable": true
+    }
+  },
+  "required": ["type", "app_id"]
+}

package/lib/schema/comment/giscus.json

@@ -60,7 +60,7 @@
     },
     "theme": {
       "type": "string",
-      "description": "Giscus look and feel",
+      "description": "Giscus look and feel when the page looks light",
       "enum": [
         "light",
         "light_high_contrast",
@@ -83,6 +83,12 @@
       "default": "noborder_light",
       "nullable": true
     },
+    "darkTheme": {
+      "type": "string",
+      "description": "Giscus look and feel when the page looks dark, e.g., with the dark or auto appearance of the theme. Not used when theme is custom",
+      "default": "noborder_dark",
+      "nullable": true
+    },
     "customThemeCss": {
       "type": "string",
       "description": "The url of custom Giscus theme css, only affect when theme is set to custom",

package/lib/schema/comment/utterances.json

@@ -19,7 +19,7 @@
     },
     "theme": {
       "type": "string",
-      "description": "Utterances look and feel",
+      "description": "Utterances look and feel when the page looks light",
       "enum": [
         "github-light",
         "github-dark",
@@ -30,6 +30,20 @@
       ],
       "default": "github-light",
       "nullable": true
+    },
+    "dark_theme": {
+      "type": "string",
+      "description": "Utterances look and feel when the page looks dark, e.g., with the dark or auto appearance of the theme",
+      "enum": [
+        "github-light",
+        "github-dark",
+        "github-dark-orange",
+        "icy-dark",
+        "dark-blue",
+        "photon-dark"
+      ],
+      "default": "github-dark",
+      "nullable": true
     }
   },
   "required": ["type", "repo"],

package/lib/schema/comment/waline.json

@@ -77,7 +77,7 @@
     },
     "dark": {
       "type": ["string", "boolean"],
-      "description": "Darkmode support.",
+      "description": "Darkmode support. Can be true, false, 'auto' to follow the system color scheme, or a CSS selector that enables the dark mode when it matches an ancestor of Waline. Follows the appearance of the theme (the data-appearance attribute of <html>) if not set",
       "nullable": true
     },
     "meta": {

package/lib/schema/plugin/waline_pageview.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "/plugin/waline_pageview.json",
+  "description": "Waline page view counter, true to use the server of the Waline comments, which can also store the views in LeanCloud. Do not also enable the pageview option of the Waline comments, which would count the views twice\nhttps://waline.js.org/en/guide/features/pageview.html",
+  "type": ["boolean", "object"],
+  "properties": {
+    "server_url": {
+      "type": "string",
+      "description": "URL of the Waline server. Uses the server of the Waline comments if not set",
+      "nullable": true
+    }
+  },
+  "default": false
+}

package/lib/schema/widget/archives.json

@@ -7,6 +7,11 @@
     "type": {
       "type": "string",
       "const": "archives"
+    },
+    "amount": {
+      "type": "integer",
+      "description": "Amount of archives to show, with a link to the archive page for the rest. Will show all if not set",
+      "nullable": true
     }
   },
   "required": ["type"]

package/lib/schema/widget/categories.json

@@ -7,6 +7,11 @@
     "type": {
       "type": "string",
       "const": "categories"
+    },
+    "amount": {
+      "type": "integer",
+      "description": "Amount of top-level categories to show, with a link to the category page for the rest. Will show all if not set",
+      "nullable": true
     }
   },
   "required": ["type"]

package/lib/schema/widget/tags.json

@@ -16,7 +16,7 @@
     },
     "amount": {
       "type": "integer",
-      "description": "Amount of tags to show. Will show all if not set.",
+      "description": "Amount of tags to show, with a link to the tag page for the rest. Will show all if not set.",
       "nullable": true
     },
     "show_count": {

package/lib/util/appearance.js

@@ -0,0 +1,40 @@
+/**
+ * Utility functions for inline scripts that follow the appearance of the page.
+ * @module util/appearance
+ */
+
+/**
+ * Get a JavaScript expression that is true when the page looks dark.
+ * <p>
+ * A theme can set the appearance of a page with the <code>data-appearance</code> attribute of
+ * <code>&lt;html&gt;</code>: <code>dark</code> always looks dark, <code>auto</code> looks dark when
+ * the system prefers a dark color scheme, and any other value, or no attribute, looks light.
+ *
+ * @returns {string} The JavaScript expression.
+ *
+ * @example
+ * const js = `var theme = ${isDark()} ? 'dark' : 'light';`;
+ */
+function isDark() {
+  return `(function (appearance) {
+    return appearance === 'dark' || (appearance === 'auto' && !!window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+  })(document.documentElement.getAttribute('data-appearance'))`;
+}
+
+/**
+ * Get a JavaScript expression for the appearance of the page: <code>'dark'</code>,
+ * <code>'auto'</code>, or <code>'light'</code>.
+ *
+ * @returns {string} The JavaScript expression.
+ * @see module:util/appearance.isDark
+ */
+function getAppearance() {
+  return `(function (appearance) {
+    return appearance === 'dark' || appearance === 'auto' ? appearance : 'light';
+  })(document.documentElement.getAttribute('data-appearance'))`;
+}
+module.exports = {
+  isDark,
+  getAppearance
+};

package/lib/util/i18n.js

@@ -0,0 +1,24 @@
+/**
+ * Utility functions for translations.
+ * @module util/i18n
+ */
+
+/**
+ * Translate a key with the <code>__</code> helper of Hexo, or use the fallback text when the theme has
+ * no translation for the key, in which case Hexo returns the key itself.
+ *
+ * @param {Function} __ The <code>__</code> helper function of Hexo.
+ * @param {string} key The translation key.
+ * @param {string} fallback The text to use without a translation.
+ * @returns {string} The translated text.
+ *
+ * @example
+ * translate(helper.__, 'widget.more', 'More');
+ */
+function translate(__, key, fallback) {
+  const text = typeof __ === 'function' ? __(key) : null;
+  return text && text !== key ? text : fallback;
+}
+module.exports = {
+  translate
+};

package/lib/util/script.js

@@ -1,5 +1,5 @@
 /**
- * A utility function for building inline scripts that load external scripts without blocking the page.
+ * Utility functions for building inline scripts that load external scripts without blocking the page.
  * @module util/script
  */
 
@@ -20,7 +20,7 @@
  * @example
  * <script dangerouslySetInnerHTML={{ __html: loadScripts('/path/to/lib.js', 'lib.init();') }} />
  */
-module.exports = function (urls, code, attrs = {}) {
+function loadScripts(urls, code, attrs = {}) {
   return `(function () {
     var urls = ${JSON.stringify([].concat(urls))};
     var attrs = ${JSON.stringify(attrs)};
@@ -62,4 +62,49 @@ module.exports = function (urls, code, attrs = {}) {
     }
     load(0);
   })();`;
-};
+}
+
+/**
+ * Build an inline script that adds an external script to an element, for example the client script of
+ * a comment system that reads its options from the attributes of its own <code>&lt;script&gt;</code>
+ * tag.
+ * <p>
+ * The external script is added every time the inline script runs. Unlike a <code>&lt;script&gt;</code>
+ * tag in the page, which PJAX runs again without its attributes and outside of its element, it keeps
+ * its attributes and stays in the element. It is added after the inline script has finished, so that
+ * PJAX, which runs the scripts of the new page right after switching to it, does not run it again.
+ *
+ * @param {string} selector CSS selector of the element to add the external script to.
+ * @param {string} url URL of the external script.
+ * @param {Object} attrs Attributes to set on the external script element.
+ * @param {Object} [dynamicAttrs] More attributes, whose values are JavaScript expressions evaluated by
+ * the inline script, for example to choose a theme in the browser.
+ * @returns {string} The inline JavaScript code.
+ *
+ * @example
+ * appendScript('#comments-thread', 'https://comments.example.com/client.js', { repo: 'user/repo' }, {
+ *   theme: "window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'",
+ * });
+ */
+function appendScript(selector, url, attrs, dynamicAttrs = {}) {
+  const dynamic = Object.keys(dynamicAttrs).map(name => `attrs[${JSON.stringify(name)}] = ${dynamicAttrs[name]};`).join('\n    ');
+  return `(function () {
+    var element = document.querySelector(${JSON.stringify(selector)});
+    if (!element) {
+      return;
+    }
+    var attrs = ${JSON.stringify(attrs)};
+    ${dynamic}
+    var script = document.createElement('script');
+    for (var name in attrs) {
+      script.setAttribute(name, attrs[name]);
+    }
+    script.src = ${JSON.stringify(url)};
+    script.async = true;
+    setTimeout(function () {
+      element.appendChild(script);
+    });
+  })();`;
+}
+module.exports = loadScripts;
+module.exports.appendScript = appendScript;

package/lib/view/comment/artalk.js

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _inferno = require("inferno");
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, e) { if ("object" != _typeof(t) || !t) return t; var r; if ("undefined" != typeof Symbol && void 0 !== (r = t[Symbol.toPrimitive])) { var i = r.call(t, e || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === e ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+/**
+ * Artalk comment JSX component.
+ * @module view/comment/artalk
+ */
+var _require = require('inferno'),
+  Component = _require.Component;
+var _require2 = require('../../util/cache'),
+  cacheComponent = _require2.cacheComponent;
+var loadScripts = require('../../util/script');
+var _require3 = require('../../util/appearance'),
+  getAppearance = _require3.getAppearance,
+  isDark = _require3.isDark;
+
+/**
+ * Artalk comment JSX component.
+ *
+ * @see https://artalk.js.org/guide/frontend/config.html
+ * @example
+ * <Artalk
+ *     server="https://artalk.example.com"
+ *     site="******"
+ *     pageKey="/path/to/page/"
+ *     pageTitle="******"
+ *     locale="en"
+ *     darkMode={false}
+ *     jsUrl="/path/to/Artalk.js"
+ *     cssUrl="/path/to/Artalk.css" />
+ */
+var Artalk = /*#__PURE__*/function (_Component) {
+  function Artalk() {
+    _classCallCheck(this, Artalk);
+    return _callSuper(this, Artalk, arguments);
+  }
+  _inherits(Artalk, _Component);
+  return _createClass(Artalk, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        server = _this$props.server,
+        site = _this$props.site,
+        pageKey = _this$props.pageKey,
+        pageTitle = _this$props.pageTitle,
+        locale = _this$props.locale,
+        darkMode = _this$props.darkMode,
+        jsUrl = _this$props.jsUrl,
+        cssUrl = _this$props.cssUrl;
+      if (!server) {
+        return (0, _inferno.createVNode)(1, "div", "notification is-danger", [(0, _inferno.createTextVNode)("You forgot to set the "), (0, _inferno.createVNode)(1, "code", null, "server", 16), (0, _inferno.createTextVNode)(" for Artalk. Please set it in"), (0, _inferno.createTextVNode)(' '), (0, _inferno.createVNode)(1, "code", null, "_config.yml", 16), (0, _inferno.createTextVNode)(".")], 0);
+      }
+      // Without the dark_mode option, follow the appearance of the page
+      var darkModeOption = darkMode === null || typeof darkMode === 'undefined' ? "".concat(getAppearance(), " === 'auto' ? 'auto' : ").concat(isDark()) : JSON.stringify(darkMode);
+      // PJAX replaces the element of the previous instance, so destroy it before initializing again
+      var js = "if (window.__artalkInstance) {\n            window.__artalkInstance.destroy();\n        }\n        window.__artalkInstance = Artalk.init({\n            el: '#artalk-thread',\n            server: ".concat(JSON.stringify(server), ",\n            ").concat(site ? "site: ".concat(JSON.stringify(site), ",") : '', "\n            ").concat(pageKey ? "pageKey: ".concat(JSON.stringify(pageKey), ",") : '', "\n            ").concat(pageTitle ? "pageTitle: ".concat(JSON.stringify(pageTitle), ",") : '', "\n            ").concat(locale ? "locale: ".concat(JSON.stringify(locale), ",") : '', "\n            darkMode: ").concat(darkModeOption, ",\n        });");
+      return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", null, null, 1, {
+        "id": "artalk-thread"
+      }), (0, _inferno.createVNode)(1, "link", null, null, 1, {
+        "rel": "stylesheet",
+        "href": cssUrl,
+        "media": "print",
+        "onload": "this.media='all'"
+      }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
+        "dangerouslySetInnerHTML": {
+          __html: loadScripts(jsUrl, js)
+        }
+      })], 4);
+    }
+  }]);
+}(Component);
+/**
+ * Cacheable Artalk 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
+ * <Artalk.Cacheable
+ *     comment={{
+ *         server: "https://artalk.example.com",
+ *         site: "******",
+ *         locale: "en",
+ *         dark_mode: false
+ *     }}
+ *     page={{ title: "******" }}
+ *     helper={{ cdn: function() {...} }} />
+ */
+Artalk.Cacheable = cacheComponent(Artalk, 'comment.artalk', function (props) {
+  var comment = props.comment,
+    helper = props.helper,
+    page = props.page;
+  return {
+    server: comment.server,
+    site: comment.site,
+    pageKey: comment.page_key,
+    pageTitle: page.title,
+    locale: comment.locale,
+    darkMode: comment.dark_mode,
+    jsUrl: helper.cdn('artalk', '2.9.1', 'dist/Artalk.js'),
+    cssUrl: helper.cdn('artalk', '2.9.1', 'dist/Artalk.css')
+  };
+});
+module.exports = Artalk;