hexo-component-inferno 4.2.2 → 5.0.0

package/lib/util/gallery.js

@@ -0,0 +1,227 @@
+/**
+ * Inline Gallery installer shared by the standalone component and consuming themes.
+ * Installing it does not enable or download either SDK. Keep it self-contained after Babel so it
+ * can also be used without the Hexo asset generator.
+ * @module util/gallery
+ */
+function installGallery(window) {
+  if (window.HexoGallery) return;
+  const document = window.document;
+  const requests = new Map();
+  const layouts = new Map();
+  const lightboxes = new Map();
+  function destroyLightbox(container) {
+    const state = lightboxes.get(container);
+    if (!state) return;
+    container.removeEventListener('click', state.click);
+    // The SDK removes its container through parentNode, even after a host replaced the body.
+    const dialog = state.instance.$container && state.instance.$container.get();
+    if (dialog && !dialog.parentNode) {
+      dialog.style.display = 'none';
+      document.body.appendChild(dialog);
+    }
+    if (state.instance.lgOpened) {
+      state.instance.settings.startAnimationDuration = 0;
+      state.instance.settings.backdropDuration = 0;
+    }
+    state.instance.destroy();
+    lightboxes.delete(container);
+  }
+  function lightbox(container, enabled) {
+    if (!enabled) {
+      destroyLightbox(container);
+      return;
+    }
+    if (typeof window.lightGallery !== 'function') return;
+    const plugins = (window.HexoGallery.lightGalleryPlugins || []).map(name => window[name]);
+    if (plugins.some(plugin => typeof plugin !== 'function')) return;
+    const items = Array.from(container.querySelectorAll('a.gallery-item[href]'));
+    if (!items.length) {
+      destroyLightbox(container);
+      return;
+    }
+    const elements = items.map(link => {
+      const image = link.querySelector('img');
+      const caption = document.createElement('span');
+      caption.textContent = image ? image.alt : '';
+      return {
+        src: link.href,
+        thumb: image ? image.currentSrc || image.src : link.href,
+        subHtml: caption.innerHTML,
+        alt: caption.innerHTML.replace(/"/g, '"')
+      };
+    });
+    const signature = JSON.stringify(elements);
+    let state = lightboxes.get(container);
+    if (state) {
+      if (!sameItems(state.items, items) || state.signature !== signature) {
+        if (state.instance.lgOpened) {
+          state.instance.updateSlides(elements, Math.min(state.instance.index, elements.length - 1));
+        } else {
+          state.instance.refresh(elements);
+        }
+        state.items = items;
+        state.signature = signature;
+      }
+      return;
+    }
+    const instance = window.lightGallery(container, {
+      dynamic: true,
+      dynamicEl: elements,
+      plugins
+    });
+    state = {
+      instance,
+      items,
+      signature,
+      click: null
+    };
+    state.click = event => {
+      if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+      const link = event.target.closest('a.gallery-item');
+      const index = state.items.indexOf(link);
+      if (index < 0) return;
+      event.preventDefault();
+      instance.openGallery(index, link);
+    };
+    container.addEventListener('click', state.click);
+    lightboxes.set(container, state);
+  }
+  function sameItems(items, current) {
+    return items.length === current.length && Array.from(items).every((item, i) => item === current[i]);
+  }
+  function enhance(container) {
+    container.querySelectorAll('img:not(.not-gallery-item)').forEach(image => {
+      // Third-party SDK icons are controls, not article images. Script-load retries also
+      // scan icons inserted after the article's initial enhancement.
+      if (image.closest('a, .sharethis-inline-share-buttons, .a2a_kit, [data-share-provider]')) return;
+      const link = document.createElement('a');
+      link.className = 'gallery-item';
+      const src = image.getAttribute('src');
+      if (src !== null) link.setAttribute('href', src);
+      image.parentNode.insertBefore(link, image);
+      link.appendChild(image);
+      if (image.alt) {
+        const caption = document.createElement('p');
+        caption.className = 'has-text-centered is-size-6 caption';
+        caption.textContent = image.alt;
+        link.appendChild(caption);
+      }
+    });
+  }
+  function apply(root, options) {
+    const containers = root === document ? root.querySelectorAll('.article') : [root];
+    containers.forEach(enhance);
+    // Do not capture an incomplete article while HTML is still being parsed.
+    if (document.readyState === 'loading') return;
+    containers.forEach(container => lightbox(container, options.lightGallery));
+    if (options.justifiedGallery && typeof window.JustifiedGallery === 'function') {
+      const galleries = Array.from(root.querySelectorAll('.justified-gallery'));
+      if (root !== document && root.matches('.justified-gallery')) galleries.unshift(root);
+      galleries.forEach(gallery => {
+        const paragraphs = new Set(Array.from(gallery.querySelectorAll(':scope > p > .gallery-item'), link => link.parentNode));
+        paragraphs.forEach(paragraph => {
+          paragraph.replaceWith(...paragraph.childNodes);
+        });
+        gallery.querySelectorAll(':scope > .gallery-item > .caption').forEach(caption => {
+          caption.classList.add('jg-caption');
+        });
+        let state = layouts.get(gallery);
+        const items = () => Array.from(gallery.children).filter(item => !item.classList.contains('jg-spinner') && (item.matches(state.instance.settings.selector) || item.matches('div')));
+        if (state) {
+          if (sameItems(state.items, items())) return;
+          // init refreshes entries but starts another width watcher; stop and rewind first.
+          state.instance.widthWatcher.stop();
+          state.instance.stopImgAnalyzerStarter();
+          state.instance.rewind();
+        } else {
+          // The SDK reuses .jg-caption and safely creates captions for pre-existing links.
+          state = {
+            instance: new window.JustifiedGallery(gallery)
+          };
+          layouts.set(gallery, state);
+        }
+        state.instance.init();
+        state.items = items();
+      });
+    }
+  }
+  function prune() {
+    layouts.forEach((state, gallery) => {
+      if (!gallery.isConnected) destroyLayout(gallery);
+    });
+    lightboxes.forEach((state, container) => {
+      if (!container.isConnected) destroyLightbox(container);
+    });
+    requests.forEach((options, root) => {
+      if (root !== document && !root.isConnected) requests.delete(root);
+    });
+  }
+  function destroyLayout(gallery) {
+    const {
+      instance
+    } = layouts.get(gallery);
+    // The SDK's destroy does not stop an active loading spinner.
+    instance.stopLoadingSpinnerAnimation();
+    instance.destroy();
+    layouts.delete(gallery);
+  }
+  function retry() {
+    prune();
+    requests.forEach((options, root) => apply(root, options));
+  }
+  window.HexoGallery = {
+    /**
+     * Enhance images in a content container, optionally initializing the two Gallery SDKs.
+     * Repeated calls reuse existing wrappers, captions and plugin instances. Missing SDKs can be
+     * retried by calling init again; DOM ready, window load and subsequent script loads also retry
+     * connected containers with their latest options. SDK initialization waits for DOM readiness.
+     * Changed item collections refresh their existing SDK instance. Disabling the lightbox destroys
+     * it; the independently managed layout plugin is unchanged.
+     * @param {Document|Element} [root=document] Content container; document targets .article images
+     *     and lightboxes, and all .justified-gallery elements.
+     * @param {Object} [options={}] SDK opt-ins; omitted flags disable plugin initialization.
+     * @param {boolean} [options.lightGallery=false] Initialize lightGallery when available.
+     * @param {boolean} [options.justifiedGallery=false] Initialize justifiedGallery when available.
+     */
+    init: function (root, options) {
+      root = root || document;
+      options = options || {};
+      const enabled = {
+        lightGallery: options.lightGallery === true,
+        justifiedGallery: options.justifiedGallery === true
+      };
+      prune();
+      requests.set(root, enabled);
+      apply(root, enabled);
+    },
+    /** Destroy lightboxes, layouts and pending retries before content is replaced (e.g. PJAX). */
+    destroy: function (root) {
+      root = root || document;
+      lightboxes.forEach((state, container) => {
+        if (root === document || root === container || root.contains(container)) destroyLightbox(container);
+      });
+      layouts.forEach((state, gallery) => {
+        if (root === document || root === gallery || root.contains(gallery)) destroyLayout(gallery);
+      });
+      requests.forEach((options, target) => {
+        if (root === document || root === target || root.contains(target)) requests.delete(target);
+      });
+    }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', retry, {
+      once: true
+    });
+  }
+  if (document.readyState !== 'complete') window.addEventListener('load', retry, {
+    once: true
+  });
+  document.addEventListener('hexo:gallery:ready', retry);
+  // Deferred scripts may arrive after init, including on the first enabled page reached by PJAX.
+  // Retry the latest requests, rather than capturing a previous page's enabled configuration.
+  document.addEventListener('load', event => {
+    if (event.target.tagName === 'SCRIPT') retry();
+  }, true);
+}
+module.exports = '(' + installGallery.toString() + ')(window);';

package/lib/util/insight-search.js

@@ -0,0 +1,98 @@
+/**
+ * Create the DOM-independent Insight query engine.
+ * Keep the factory self-contained: the search view serializes it into an inline script, including
+ * when used without the Hexo asset generator or with a CDN-hosted insight.js.
+ * @module util/insight-search
+ * @returns {Function} Search (index, query), returning parsed keywords and ranked result sections.
+ */
+function createInsightSearch() {
+  const content = {
+    fields: ['title', 'text'],
+    weights: [3, 1]
+  };
+  const taxonomy = {
+    fields: ['name', 'slug'],
+    weights: [1, 1]
+  };
+  const sections = {
+    posts: content,
+    pages: content,
+    categories: taxonomy,
+    tags: taxonomy
+  };
+  function parseKeywords(query) {
+    return query.split(' ').filter(keyword => {
+      return !!keyword;
+    }).map(keyword => {
+      return keyword.toLowerCase();
+    });
+  }
+
+  // Every keyword must occur in at least one own field; keywords may span different fields.
+  function filter(keywords, obj, fields) {
+    const containKeywords = keywords.filter(keyword => {
+      const containFields = fields.filter(field => {
+        if (!Object.prototype.hasOwnProperty.call(obj, field)) {
+          return false;
+        }
+        if (obj[field].toLowerCase().indexOf(keyword) > -1) {
+          return true;
+        }
+        return false;
+      });
+      if (containFields.length > 0) {
+        return true;
+      }
+      return false;
+    });
+    return containKeywords.length === keywords.length;
+  }
+
+  // Count non-overlapping occurrences of a literal lowercase keyword, not a regular expression.
+  function countMatches(text, keyword) {
+    let count = 0;
+    for (let i = text.indexOf(keyword); i !== -1; i = text.indexOf(keyword, i + keyword.length)) {
+      count++;
+    }
+    return count;
+  }
+  function weight(keywords, obj, fields, weights) {
+    let value = 0;
+    keywords.forEach(keyword => {
+      fields.forEach((field, index) => {
+        if (Object.prototype.hasOwnProperty.call(obj, field)) {
+          value += countMatches(obj[field].toLowerCase(), keyword) * weights[index];
+        }
+      });
+    });
+    return value;
+  }
+
+  // Weigh each matching item once. Equal weights retain the input order, including an empty query.
+  function topItems(items, keywords, config) {
+    return items.filter(item => {
+      return filter(keywords, item, config.fields);
+    }).map(item => {
+      return {
+        item,
+        weight: weight(keywords, item, config.fields, config.weights)
+      };
+    }).sort((a, b) => {
+      return b.weight - a.weight;
+    }).slice(0, 5).map(result => {
+      return result.item;
+    });
+  }
+  return function search(json, query) {
+    const keywords = parseKeywords(query);
+    const results = {};
+    Object.keys(sections).forEach(section => {
+      results[section] = topItems(json[section], keywords, sections[section]);
+    });
+    return {
+      keywords,
+      results
+    };
+  };
+}
+module.exports = createInsightSearch;

package/lib/util/searchbox.js

@@ -0,0 +1,88 @@
+/**
+ * Inline installer shared by the search components. Keep it self-contained: components can be used
+ * without the Hexo asset generator, and PJAX may execute this script more than once.
+ * @module util/searchbox
+ */
+function installSearchbox(window) {
+  if (window.loadSearchbox) return;
+  const document = window.document;
+  let current;
+  window.loadSearchbox = function ($main, options) {
+    const $ = window.jQuery;
+    options = options || {};
+    // Preserve focus state only when replacing the controller for the same open DOM element.
+    let opener = current ? current.destroy($main[0]) : null;
+    let touch = false;
+    const $document = $(document);
+    const namespace = '.hexoSearchbox';
+    const controller = {
+      isCurrent: function () {
+        return current === controller && document.contains($main[0]);
+      },
+      destroy: function (nextMain) {
+        if (current !== controller) return null;
+        const nextOpener = nextMain === $main[0] && $main.hasClass('show') ? opener : null;
+        $document.off(namespace);
+        opener = null;
+        current = null;
+        if (options.onDestroy) options.onDestroy();
+        return nextOpener;
+      }
+    };
+    current = controller;
+    function open() {
+      if (!controller.isCurrent()) return;
+      if (!$main.hasClass('show')) {
+        opener = document.activeElement;
+        $main.addClass('show');
+      }
+      $main.find('.searchbox-input').focus();
+    }
+    function close(restoreFocus) {
+      $main.removeClass('show');
+      if (restoreFocus !== false && opener && document.contains(opener)) opener.focus();
+      opener = null;
+    }
+    function isSearchShortcut(e) {
+      if (e.altKey) return false;
+      if (e.ctrlKey || e.metaKey) {
+        return !e.shiftKey && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+      }
+      // e.key already accounts for the keyboard layout (including Shift).
+      const target = e.target;
+      const typing = target.isContentEditable || /^(input|textarea|select)$/i.test(target.tagName);
+      return e.key === '/' && !typing;
+    }
+    $document.on('click' + namespace, '.navbar-main .search', open).on('click' + namespace + (options.touch ? ' touchend' + namespace : ''), '.searchbox-close, .searchbox .searchbox-mask', e => {
+      if (!controller.isCurrent()) return;
+      if (e.type !== 'click' && !touch) return;
+      if (options.touch) {
+        $('.navbar-main').css('pointer-events', 'none');
+        setTimeout(() => {
+          $('.navbar-main').css('pointer-events', 'auto');
+        }, 400);
+      }
+      close();
+      touch = false;
+    }).on('focusin' + namespace, e => {
+      if (controller.isCurrent() && $main.hasClass('show') && !$main[0].contains(e.target)) {
+        close(false);
+      }
+    }).on('keydown' + namespace, e => {
+      if (!controller.isCurrent()) return;
+      if (isSearchShortcut(e)) {
+        e.preventDefault();
+        open();
+        return;
+      }
+      if (!$main.hasClass('show')) return;
+      if (e.keyCode === 27) close();else if (options.onKeyDown) options.onKeyDown(e);
+    }).on('touchstart' + namespace, () => {
+      touch = true;
+    }).on('touchmove' + namespace, () => {
+      touch = false;
+    });
+    return controller;
+  };
+}
+module.exports = '(' + installSearchbox.toString() + ')(window);';

package/lib/util/tab-options.js

@@ -0,0 +1,109 @@
+/**
+ * Pure option splitting for the Hexo tabs tag and its individual tab comments.
+ * @module util/tab-options
+ */
+
+/**
+ * Split a tabs option at its first colon, without trimming or interpreting the value.
+ * @param {string} option An option such as <code>title:Step 1: Install</code>.
+ * @returns {string[]} The key and value, or only the key when there is no colon.
+ */
+function splitOption(option) {
+  const index = option.indexOf(':');
+  return index === -1 ? [option] : [option.slice(0, index), option.slice(index + 1)];
+}
+
+/**
+ * Split individual tab comment options on ASCII spaces, respecting leading single or double quotes.
+ * Quotes within bare tokens are literal. Backslashes inside quotes protect the next character from
+ * closing the token, but remain in the result; they do not escape spaces in bare tokens.
+ * @param {string} source The option text inside a <code>&lt;!-- tab ... --&gt;</code> comment.
+ * @returns {string[]} Options with enclosing quotes removed and all other characters preserved.
+ * @throws {Error} For an unclosed quoted option or a non-space character after its closing quote.
+ */
+function splitTabOptions(source) {
+  const options = [];
+  const EOL = -1;
+  let i = 0;
+  let state = 1;
+  let begin = 0;
+  while (i <= source.length) {
+    const c = i < source.length ? source.charAt(i) : '';
+    switch (state) {
+      case 1:
+        // Start of an option
+        if (c === ' ') {
+          state = 1;
+          begin = i + 1;
+        } else if (c === '"') {
+          state = 2;
+          begin = i + 1;
+        } else if (c === "'") {
+          state = 4;
+          begin = i + 1;
+        } else if (c === '') {
+          state = EOL;
+        } else {
+          state = 7;
+        }
+        break;
+      case 2:
+        // Double-quoted option
+        if (c === '\\') {
+          state = 3;
+        } else if (c === '"') {
+          state = 6;
+        }
+        break;
+      case 3:
+        // Escaped character in a double-quoted option
+        state = 2;
+        break;
+      case 4:
+        // Single-quoted option
+        if (c === '\\') {
+          state = 5;
+        } else if (c === "'") {
+          state = 6;
+        }
+        break;
+      case 5:
+        // Escaped character in a single-quoted option
+        state = 4;
+        break;
+      case 6:
+        // The preceding character closed the quote
+        options.push(source.substring(begin, i - 1));
+        begin = i + 1;
+        if (c === ' ') {
+          state = 1;
+        } else if (c === '') {
+          state = EOL;
+        } else {
+          throw new Error(`malformatted tab options: ${source}`);
+        }
+        break;
+      case 7:
+        // Bare option
+        if (c === ' ') {
+          options.push(source.substring(begin, i));
+          begin = i + 1;
+          state = 1;
+        } else if (c === '') {
+          options.push(source.substring(begin, i));
+          begin = i + 1;
+          state = EOL;
+        }
+        break;
+    }
+    i++;
+  }
+  if (state !== EOL) {
+    throw new Error(`malformatted tab options: ${source}`);
+  }
+  return options;
+}
+module.exports = {
+  splitOption,
+  splitTabOptions
+};

package/lib/view/comment/artalk.js

@@ -59,15 +59,22 @@ var Artalk = /*#__PURE__*/function (_Component) {
         pageTitle = _this$props.pageTitle,
         locale = _this$props.locale,
         darkMode = _this$props.darkMode,
+        preferRemoteConf = _this$props.preferRemoteConf,
         jsUrl = _this$props.jsUrl,
-        cssUrl = _this$props.cssUrl;
+        cssUrl = _this$props.cssUrl,
+        _this$props$localeUrl = _this$props.localeUrls,
+        localeUrls = _this$props$localeUrl === void 0 ? [] : _this$props$localeUrl;
       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);
+      var followAppearance = darkMode === null || typeof darkMode === 'undefined';
+      var darkModeOption = followAppearance ? "".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        });");
+      var js = "if (!container || !container.isConnected) return;\n        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            ").concat(typeof preferRemoteConf === 'boolean' ? "preferRemoteConf: ".concat(preferRemoteConf, ",") : '', "\n            darkMode: ").concat(darkModeOption, ",\n        });");
+      if (followAppearance) {
+        js += "\n        var instance = window.__artalkInstance;\n        var observer = new MutationObserver(function () {\n            instance.update({ darkMode: ".concat(darkModeOption, " });\n        });\n        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-appearance'] });\n        instance.on('unmounted', function () { observer.disconnect(); });");
+      }
       return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "div", null, null, 1, {
         "id": "artalk-thread"
       }), (0, _inferno.createVNode)(1, "link", null, null, 1, {
@@ -77,7 +84,7 @@ var Artalk = /*#__PURE__*/function (_Component) {
         "onload": "this.media='all'"
       }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
         "dangerouslySetInnerHTML": {
-          __html: loadScripts(jsUrl, js)
+          __html: "(function () {\n          var container = document.getElementById('artalk-thread');\n          ".concat(loadScripts([jsUrl].concat(localeUrls), js), "\n        })();")
         }
       })], 4);
     }
@@ -105,6 +112,13 @@ Artalk.Cacheable = cacheComponent(Artalk, 'comment.artalk', function (props) {
   var comment = props.comment,
     helper = props.helper,
     page = props.page;
+  // The full bundle includes en and zh-CN only. Other published dictionaries register themselves
+  // on window.ArtalkI18n before initialization. For auto, make every supported dictionary available.
+  var externalLocales = ['zh-TW', 'ja', 'ko', 'fr', 'ru', 'tr'];
+  var language = String(comment.locale || '').toLowerCase();
+  var localeNames = externalLocales.filter(function (name) {
+    return language === 'auto' || language === name.toLowerCase() || language.startsWith(name.toLowerCase() + '-');
+  });
   return {
     server: comment.server,
     site: comment.site,
@@ -112,8 +126,12 @@ Artalk.Cacheable = cacheComponent(Artalk, 'comment.artalk', function (props) {
     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')
+    preferRemoteConf: comment.prefer_remote_conf,
+    jsUrl: helper.cdn('artalk', '2.10.0', 'dist/Artalk.js'),
+    cssUrl: helper.cdn('artalk', '2.10.0', 'dist/Artalk.css'),
+    localeUrls: localeNames.map(function (name) {
+      return helper.cdn('artalk', '2.10.0', "dist/i18n/".concat(name, ".js"));
+    })
   };
 });
 module.exports = Artalk;

package/lib/view/comment/disqus.js

@@ -53,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(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        })();");
+      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            // Disqus parses computed link/background colors with a legacy RGB-only parser.\n            // Serialize the current theme colors to sRGB without changing the rest of the page.\n            var thread = d.getElementById('disqus_thread');\n            var canvas = d.createElement('canvas');\n            canvas.width = canvas.height = 1;\n            var context = canvas.getContext('2d');\n            function rgb(color) {\n                context.clearRect(0, 0, 1, 1);\n                context.fillStyle = color;\n                context.fillRect(0, 0, 1, 1);\n                var pixel = context.getImageData(0, 0, 1, 1).data;\n                return 'rgba(' + pixel[0] + ',' + pixel[1] + ',' + pixel[2] + ',' + pixel[3] / 255 + ')';\n            }\n            var link = d.createElement('a');\n            link.href = '#';\n            thread.appendChild(link);\n            var linkColor = rgb(getComputedStyle(link).color);\n            thread.removeChild(link);\n            var style = d.createElement('style');\n            style.textContent = '#disqus_thread a { color: ' + linkColor + '; }';\n            thread.parentNode.insertBefore(style, thread);\n            for (var node = thread; node; node = node.parentElement) {\n                var background = rgb(getComputedStyle(node).backgroundColor);\n                if (background !== 'rgba(0,0,0,0)') {\n                    thread.style.backgroundColor = background;\n                    break;\n                }\n            }\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

@@ -42,7 +42,7 @@ var toJs = loadScripts.toJs;
  *     permalink="/page/permanent/path"
  *     pageTitle="******"
  *     siteTitle="******"
- *     jsUrl="/path/to/disqus.js"
+ *     jsUrl="/path/to/disqusjs.es2015.umd.min.js"
  *     cssUrl="/path/to/disqusjs.css" />
  */
 var DisqusJs = /*#__PURE__*/function (_Component) {
@@ -73,7 +73,8 @@ var DisqusJs = /*#__PURE__*/function (_Component) {
       }
       var url = permalink || path;
       var identifier = disqusId || path;
-      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        });");
+      var js = "if (!container.isConnected) return;\n        instance = 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        });\n        instance.render(container);");
+      var script = "(function () {\n        var container = document.getElementById('disqusjs');\n        var instance;\n        function destroy() {\n            document.removeEventListener('hexo:page:before-replace', destroy);\n            if (instance) instance.destroy();\n        }\n        document.addEventListener('hexo:page:before-replace', destroy);\n        ".concat(loadScripts(jsUrl, js), "\n    })();");
       return (0, _inferno.createFragment)([(0, _inferno.createVNode)(1, "link", null, null, 1, {
         "rel": "stylesheet",
         "href": cssUrl,
@@ -82,10 +83,10 @@ var DisqusJs = /*#__PURE__*/function (_Component) {
       }), (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, {
-        "id": "disqus_thread"
+        "id": "disqusjs"
       }), (0, _inferno.createVNode)(1, "script", null, null, 1, {
         "dangerouslySetInnerHTML": {
-          __html: loadScripts(jsUrl, js)
+          __html: script
         }
       })], 4);
     }
@@ -134,8 +135,8 @@ DisqusJs.Cacheable = cacheComponent(DisqusJs, 'comment.disqusjs', function (prop
     permalink: page.permalink,
     pageTitle: page.title,
     siteTitle: config.title,
-    jsUrl: helper.cdn('disqusjs', '1.3.0', 'dist/disqus.js'),
-    cssUrl: helper.cdn('disqusjs', '1.3.0', 'dist/disqusjs.css')
+    jsUrl: helper.cdn('disqusjs', '3.2.2', 'dist/browser/disqusjs.es2015.umd.min.js'),
+    cssUrl: helper.cdn('disqusjs', '3.2.2', 'dist/browser/styles/disqusjs.css')
   };
 });
 module.exports = DisqusJs;