hexo-component-inferno 4.0.0 → 4.2.0

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,8 +1,25 @@
 /**
- * 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
  */
 
+/**
+ * Convert a value to JavaScript code that can be put in an inline <code>&lt;script&gt;</code>.
+ * <p>
+ * Unlike <code>JSON.stringify</code> alone, it escapes <code>&lt;</code>, so that a value containing
+ * <code>&lt;/script&gt;</code>, such as a page title, cannot end the inline script, and the line
+ * separators U+2028 and U+2029, which older browsers do not allow in JavaScript strings.
+ *
+ * @param {any} value A value that can be converted to JSON.
+ * @returns {string} The JavaScript code.
+ *
+ * @example
+ * toJs('</script>'); // '"\\u003c/script>"'
+ */
+function toJs(value) {
+  return JSON.stringify(value).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+}
+
 /**
  * Build an inline script that loads external scripts asynchronously and in order, and then runs the
  * given code.
@@ -20,10 +37,10 @@
  * @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)};
+    var urls = ${toJs([].concat(urls))};
+    var attrs = ${toJs(attrs)};
     function run() {
       ${code}
     }
@@ -54,6 +71,11 @@ module.exports = function (urls, code, attrs = {}) {
         script.addEventListener('load', function () {
           this.setAttribute('data-loaded', 'true');
         });
+        // Remove a script that fails to load, so that the next run, e.g., after a PJAX page switch,
+        // adds it again instead of waiting for it
+        script.addEventListener('error', function () {
+          this.remove();
+        });
         document.head.appendChild(script);
       }
       script.addEventListener('load', function () {
@@ -62,4 +84,50 @@ 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[${toJs(name)}] = ${dynamicAttrs[name]};`).join('\n    ');
+  return `(function () {
+    var element = document.querySelector(${toJs(selector)});
+    if (!element) {
+      return;
+    }
+    var attrs = ${toJs(attrs)};
+    ${dynamic}
+    var script = document.createElement('script');
+    for (var name in attrs) {
+      script.setAttribute(name, attrs[name]);
+    }
+    script.src = ${toJs(url)};
+    script.async = true;
+    setTimeout(function () {
+      element.appendChild(script);
+    });
+  })();`;
+}
+module.exports = loadScripts;
+module.exports.appendScript = appendScript;
+module.exports.toJs = toJs;

package/lib/view/comment/artalk.js

@@ -0,0 +1,119 @@
+"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 toJs = loadScripts.toJs;
+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()) : toJs(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(toJs(server), ",\n            ").concat(site ? "site: ".concat(toJs(site), ",") : '', "\n            ").concat(pageKey ? "pageKey: ".concat(toJs(pageKey), ",") : '', "\n            ").concat(pageTitle ? "pageTitle: ".concat(toJs(pageTitle), ",") : '', "\n            ").concat(locale ? "locale: ".concat(toJs(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;

package/lib/view/comment/beaudar.js

@@ -0,0 +1,134 @@
+"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); }
+/**
+ * Beaudar comment JSX component.
+ * @module view/comment/beaudar
+ */
+var _require = require('inferno'),
+  Component = _require.Component;
+var _require2 = require('../../util/cache'),
+  cacheComponent = _require2.cacheComponent;
+var _require3 = require('../../util/script'),
+  appendScript = _require3.appendScript,
+  toJs = _require3.toJs;
+var _require4 = require('../../util/appearance'),
+  isDark = _require4.isDark;
+
+/**
+ * Beaudar comment JSX component.
+ * <p>
+ * Beaudar is a Chinese fork of Utterances that keeps comments in GitHub issues.
+ *
+ * @see https://github.com/beaudar/beaudar
+ * @example
+ * <Beaudar
+ *     repo="******"
+ *     branch="main"
+ *     issueTerm="******"
+ *     issueNumber={123}
+ *     label="******"
+ *     theme="******"
+ *     darkTheme="******" />
+ */
+var Beaudar = /*#__PURE__*/function (_Component) {
+  function Beaudar() {
+    _classCallCheck(this, Beaudar);
+    return _callSuper(this, Beaudar, arguments);
+  }
+  _inherits(Beaudar, _Component);
+  return _createClass(Beaudar, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        repo = _this$props.repo,
+        branch = _this$props.branch,
+        issueTerm = _this$props.issueTerm,
+        issueNumber = _this$props.issueNumber,
+        label = _this$props.label,
+        theme = _this$props.theme,
+        darkTheme = _this$props.darkTheme;
+      if (!repo || !issueTerm && !issueNumber) {
+        return (0, _inferno.createVNode)(1, "div", "notification is-danger", [(0, _inferno.createTextVNode)("You forgot to set the "), (0, _inferno.createVNode)(1, "code", null, "repo", 16), (0, _inferno.createTextVNode)(", "), (0, _inferno.createVNode)(1, "code", null, "issue_term", 16), (0, _inferno.createTextVNode)(", or"), (0, _inferno.createTextVNode)(' '), (0, _inferno.createVNode)(1, "code", null, "issue_number", 16), (0, _inferno.createTextVNode)(" for Beaudar. Please set it in "), (0, _inferno.createVNode)(1, "code", null, "_config.yml", 16), (0, _inferno.createTextVNode)(".")], 0);
+      }
+      var config = {
+        repo: repo
+      };
+      if (branch) {
+        config.branch = branch;
+      }
+      if (issueTerm) {
+        config['issue-term'] = issueTerm;
+      } else {
+        config['issue-number'] = issueNumber;
+      }
+      if (label) {
+        config.label = label;
+      }
+      config.crossorigin = 'anonymous';
+      // Use the dark theme when the page looks dark
+      var js = appendScript('#beaudar-thread', 'https://beaudar.lipk.org/client.js', config, {
+        theme: "".concat(isDark(), " ? ").concat(toJs(darkTheme || 'github-dark'), " : ").concat(toJs(theme || 'github-light'))
+      });
+      return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", null, null, 1, {
+        "id": "beaudar-thread"
+      }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
+        "dangerouslySetInnerHTML": {
+          __html: js
+        }
+      })], 4);
+    }
+  }]);
+}(Component);
+/**
+ * Cacheable Beaudar 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
+ * <Beaudar.Cacheable
+ *     comment={{
+ *         repo: "******",
+ *         branch: "main",
+ *         issue_term: "******",
+ *         issue_number: {123},
+ *         label: "******",
+ *         theme: "******",
+ *         dark_theme: "******"
+ *     }} />
+ */
+Beaudar.Cacheable = cacheComponent(Beaudar, 'comment.beaudar', function (props) {
+  var _props$comment = props.comment,
+    repo = _props$comment.repo,
+    branch = _props$comment.branch,
+    issue_term = _props$comment.issue_term,
+    issue_number = _props$comment.issue_number,
+    label = _props$comment.label,
+    theme = _props$comment.theme,
+    dark_theme = _props$comment.dark_theme;
+  return {
+    repo: repo,
+    branch: branch,
+    issueTerm: issue_term,
+    issueNumber: issue_number,
+    label: label,
+    theme: theme,
+    darkTheme: dark_theme
+  };
+});
+module.exports = Beaudar;

package/lib/view/comment/changyan.js

@@ -23,6 +23,7 @@ var _require = require('inferno'),
 var _require2 = require('../../util/cache'),
   cacheComponent = _require2.cacheComponent;
 var loadScripts = require('../../util/script');
+var toJs = loadScripts.toJs;
 
 /**
  * ChangYan comment JSX component.
@@ -50,7 +51,7 @@ var ChangYan = /*#__PURE__*/function (_Component) {
       if (!appId || !conf) {
         return (0, _inferno.createVNode)(1, "div", "notification is-danger", [(0, _inferno.createTextVNode)("You forgot to set the "), (0, _inferno.createVNode)(1, "code", null, "app_id", 16), (0, _inferno.createTextVNode)(" or "), (0, _inferno.createVNode)(1, "code", null, "conf", 16), (0, _inferno.createTextVNode)(" for Changyan. Please set it in "), (0, _inferno.createVNode)(1, "code", null, "_config.yml", 16), (0, _inferno.createTextVNode)(".")], 4);
       }
-      var js = "window.changyan.api.config({appid: '".concat(appId, "',conf: '").concat(conf, "'});");
+      var js = "window.changyan.api.config({appid: ".concat(toJs(appId), ",conf: ").concat(toJs(conf), "});");
       /* eslint-disable react/no-unknown-property */
       return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", null, null, 1, {
         "id": "SOHUCS",

package/lib/view/comment/cusdis.js

@@ -0,0 +1,120 @@
+"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); }
+/**
+ * Cusdis comment JSX component.
+ * @module view/comment/cusdis
+ */
+var _require = require('inferno'),
+  Component = _require.Component;
+var _require2 = require('../../util/cache'),
+  cacheComponent = _require2.cacheComponent;
+var loadScripts = require('../../util/script');
+var toJs = loadScripts.toJs;
+var _require3 = require('../../util/appearance'),
+  getAppearance = _require3.getAppearance;
+
+/**
+ * Cusdis comment JSX component.
+ *
+ * @see https://cusdis.com/doc
+ * @example
+ * <Cusdis
+ *     host="https://cusdis.com"
+ *     appId="******"
+ *     pageId="/path/to/page/"
+ *     pageUrl="https://example.com/path/to/page/"
+ *     pageTitle="******"
+ *     theme="auto"
+ *     lang="zh-cn" />
+ */
+var Cusdis = /*#__PURE__*/function (_Component) {
+  function Cusdis() {
+    _classCallCheck(this, Cusdis);
+    return _callSuper(this, Cusdis, arguments);
+  }
+  _inherits(Cusdis, _Component);
+  return _createClass(Cusdis, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        _this$props$host = _this$props.host,
+        host = _this$props$host === void 0 ? 'https://cusdis.com' : _this$props$host,
+        appId = _this$props.appId,
+        pageId = _this$props.pageId,
+        pageUrl = _this$props.pageUrl,
+        pageTitle = _this$props.pageTitle,
+        theme = _this$props.theme,
+        lang = _this$props.lang;
+      if (!appId) {
+        return (0, _inferno.createVNode)(1, "div", "notification is-danger", [(0, _inferno.createTextVNode)("You forgot to set the "), (0, _inferno.createVNode)(1, "code", null, "app_id", 16), (0, _inferno.createTextVNode)(" for Cusdis. Please set it in"), (0, _inferno.createTextVNode)(' '), (0, _inferno.createVNode)(1, "code", null, "_config.yml", 16), (0, _inferno.createTextVNode)(".")], 0);
+      }
+      var urls = ["".concat(host, "/js/cusdis.es.js")];
+      if (lang) {
+        urls.unshift("".concat(host, "/js/widget/lang/").concat(lang, ".js"));
+      }
+      // Without the theme option, follow the appearance of the page (light, dark, or auto, the same values
+      // as the themes of Cusdis). The Cusdis script renders #cusdis_thread when it loads, so render it
+      // directly only when the script is already loaded, e.g., when PJAX runs this code again.
+      var js = "(function () {\n        var element = document.getElementById('cusdis_thread');\n        if (!element) {\n          return;\n        }\n        element.setAttribute('data-theme', ".concat(theme ? toJs(theme) : getAppearance(), ");\n        if (window.renderCusdis) {\n          window.renderCusdis(element);\n          return;\n        }\n        ").concat(loadScripts(urls, ''), "\n      })();");
+      return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", null, null, 1, {
+        "id": "cusdis_thread",
+        "data-host": host,
+        "data-app-id": appId,
+        "data-page-id": pageId,
+        "data-page-url": pageUrl,
+        "data-page-title": pageTitle
+      }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
+        "dangerouslySetInnerHTML": {
+          __html: js
+        }
+      })], 4);
+    }
+  }]);
+}(Component);
+/**
+ * Cacheable Cusdis 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
+ * <Cusdis.Cacheable
+ *     comment={{
+ *         host: "https://cusdis.com",
+ *         app_id: "******",
+ *         theme: "auto",
+ *         lang: "zh-cn"
+ *     }}
+ *     page={{ path: "/path/to/page/", permalink: "******", title: "******" }}
+ *     helper={{ url_for: function() {...} }} />
+ */
+Cusdis.Cacheable = cacheComponent(Cusdis, 'comment.cusdis', function (props) {
+  var comment = props.comment,
+    helper = props.helper,
+    page = props.page;
+  return {
+    host: comment.host ? comment.host.replace(/\/+$/, '') : undefined,
+    appId: comment.app_id,
+    pageId: helper.url_for(page.path),
+    pageUrl: page.permalink,
+    pageTitle: page.title,
+    theme: comment.theme,
+    lang: comment.lang
+  };
+});
+module.exports = Cusdis;

package/lib/view/comment/disqus.js

@@ -22,6 +22,8 @@ var _require = require('inferno'),
   Component = _require.Component;
 var _require2 = require('../../util/cache'),
   cacheComponent = _require2.cacheComponent;
+var _require3 = require('../../util/script'),
+  toJs = _require3.toJs;
 
 /**
  * Disqus comment JSX component.
@@ -51,7 +53,7 @@ var Disqus = /*#__PURE__*/function (_Component) {
       if (!shortname) {
         return (0, _inferno.createVNode)(1, "div", "notification is-danger", [(0, _inferno.createTextVNode)("You forgot to set the "), (0, _inferno.createVNode)(1, "code", null, "shortname", 16), (0, _inferno.createTextVNode)(" for Disqus. Please set it in"), (0, _inferno.createTextVNode)(' '), (0, _inferno.createVNode)(1, "code", null, "_config.yml", 16), (0, _inferno.createTextVNode)(".")], 0);
       }
-      var js = "var disqus_config = function () {\n            this.page.url = '".concat(permalink, "';\n            this.page.identifier = '").concat(disqusId || path, "';\n        };\n        (function() {\n            var d = document, s = d.createElement('script');  \n            s.src = '//' + '").concat(shortname, "' + '.disqus.com/embed.js';\n            s.setAttribute('data-timestamp', +new Date());\n            (d.head || d.body).appendChild(s);\n        })();");
+      var js = "var disqus_config = function () {\n            this.page.url = ".concat(toJs(permalink), ";\n            this.page.identifier = ").concat(toJs(disqusId || path), ";\n        };\n        (function() {\n            var d = document, s = d.createElement('script');  \n            s.src = ").concat(toJs("//".concat(shortname, ".disqus.com/embed.js")), ";\n            s.setAttribute('data-timestamp', +new Date());\n            (d.head || d.body).appendChild(s);\n        })();");
       return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", null, (0, _inferno.createVNode)(1, "noscript", null, [(0, _inferno.createTextVNode)("Please enable JavaScript to view the"), (0, _inferno.createTextVNode)(' '), (0, _inferno.createVNode)(1, "a", null, "comments powered by Disqus.", 16, {
         "href": "//disqus.com/?ref_noscript"
       })], 0), 2, {

package/lib/view/comment/disqusjs.js

@@ -23,6 +23,7 @@ var _require = require('inferno'),
 var _require2 = require('../../util/cache'),
   cacheComponent = _require2.cacheComponent;
 var loadScripts = require('../../util/script');
+var toJs = loadScripts.toJs;
 
 /**
  * DisqusJS comment JSX component.
@@ -67,12 +68,12 @@ var DisqusJs = /*#__PURE__*/function (_Component) {
         siteTitle = _this$props.siteTitle,
         jsUrl = _this$props.jsUrl,
         cssUrl = _this$props.cssUrl;
-      if (!shortname) {
+      if (!shortname || !apiKey) {
         return (0, _inferno.createVNode)(1, "div", "notification is-danger", [(0, _inferno.createTextVNode)("You forgot to set the "), (0, _inferno.createVNode)(1, "code", null, "shortname", 16), (0, _inferno.createTextVNode)(" or "), (0, _inferno.createVNode)(1, "code", null, "api_key", 16), (0, _inferno.createTextVNode)(" for Disqus. Please set it in "), (0, _inferno.createVNode)(1, "code", null, "_config.yml", 16), (0, _inferno.createTextVNode)(".")], 4);
       }
       var url = permalink || path;
       var identifier = disqusId || path;
-      var js = "new DisqusJS({\n            shortname: '".concat(shortname, "',\n            apikey: ").concat(JSON.stringify(apiKey), ",\n            ").concat(siteTitle ? "siteName: ".concat(JSON.stringify(siteTitle), ",") : '', "\n            ").concat(identifier ? "identifier: ".concat(JSON.stringify(identifier), ",") : '', "\n            ").concat(url ? "url: ".concat(JSON.stringify(url), ",") : '', "\n            ").concat(pageTitle ? "title: ".concat(JSON.stringify(pageTitle), ",") : '', "\n            ").concat(api ? "api: ".concat(JSON.stringify(api), ",") : '', "\n            ").concat(admin ? "admin: ".concat(JSON.stringify(admin), ",") : '', "\n            ").concat(adminLabel ? "adminLabel: ".concat(JSON.stringify(adminLabel), ",") : '', "\n            ").concat(nesting ? "nesting: ".concat(JSON.stringify(nesting), ",") : '', "\n        });");
+      var js = "new DisqusJS({\n            shortname: ".concat(toJs(shortname), ",\n            apikey: ").concat(toJs(apiKey), ",\n            ").concat(siteTitle ? "siteName: ".concat(toJs(siteTitle), ",") : '', "\n            ").concat(identifier ? "identifier: ".concat(toJs(identifier), ",") : '', "\n            ").concat(url ? "url: ".concat(toJs(url), ",") : '', "\n            ").concat(pageTitle ? "title: ".concat(toJs(pageTitle), ",") : '', "\n            ").concat(api ? "api: ".concat(toJs(api), ",") : '', "\n            ").concat(admin ? "admin: ".concat(toJs(admin), ",") : '', "\n            ").concat(adminLabel ? "adminLabel: ".concat(toJs(adminLabel), ",") : '', "\n            ").concat(nesting ? "nesting: ".concat(toJs(nesting), ",") : '', "\n        });");
       return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "link", null, null, 1, {
         "rel": "stylesheet",
         "href": cssUrl,

package/lib/view/comment/facebook.js

@@ -22,6 +22,8 @@ var _require = require('inferno'),
   Component = _require.Component;
 var _require2 = require('../../util/cache'),
   cacheComponent = _require2.cacheComponent;
+var _require3 = require('../../util/script'),
+  toJs = _require3.toJs;
 
 /**
  * Facebook comment JSX component.
@@ -45,7 +47,7 @@ var Facebook = /*#__PURE__*/function (_Component) {
         language = _this$props.language,
         permalink = _this$props.permalink;
       var fbLanguage = language.split('-').join('_');
-      var js = "(function(d, s, id) {\n            var js, fjs = d.getElementsByTagName(s)[0];\n            if (d.getElementById(id)) return;\n            js = d.createElement(s); js.id = id;\n            js.src = \"//connect.facebook.net/".concat(fbLanguage, "/sdk.js#xfbml=1&version=v12.0\";\n            fjs.parentNode.insertBefore(js, fjs);\n        }(document, 'script', 'facebook-jssdk'));");
+      var js = "(function(d, s, id) {\n            var js, fjs = d.getElementsByTagName(s)[0];\n            // After a PJAX page switch, the SDK is loaded, so render the new comments box with it\n            if (d.getElementById(id)) {\n                if (window.FB) FB.XFBML.parse();\n                return;\n            }\n            js = d.createElement(s); js.id = id;\n            js.src = ".concat(toJs("//connect.facebook.net/".concat(fbLanguage, "/sdk.js#xfbml=1&version=v12.0")), ";\n            fjs.parentNode.insertBefore(js, fjs);\n        }(document, 'script', 'facebook-jssdk'));");
       return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", "fb-comments", null, 1, {
         "data-width": "100%",
         "data-href": permalink,