hexo-component-inferno 4.2.1 → 5.0.0

package/README.md

@@ -13,8 +13,7 @@ for building [Hexo](https://hexo.io/) themes in JSX. It is the component library
   plugins, and SEO metadata, each with a JSON schema for its configuration.
 - **Hexo extensions**: generators, helpers, tag plugins, and a filter that merges the theme config into
   the template locals.
-- **Configuration tools**: a JSON schema loader that validates the theme config and generates its default
-  values, and a framework for migrating configs between theme versions.
+- **Configuration tools**: a JSON schema loader that validates the theme config and generates commented defaults.
 
 ## Requirements
 
@@ -104,9 +103,7 @@ const result = schema.validate(themeConfig); // true, or a list of errors
 const defaults = schema.getDefaultValue().toYaml(); // a commented default config
 ```
 
-For example, `{ "$ref": "/comment/giscus.json" }` in your schema refers to the Giscus schema of this
-library. `lib/core/migrate` upgrades existing configs between theme versions with a chain of `Migration`
-classes.
+For example, `{ "$ref": "/comment/giscus.json" }` in your schema refers to the Giscus schema of this library.
 
 ### Utilities
 
@@ -124,25 +121,15 @@ classes.
 
 | Category  | Components                                                                                                                                                                                                                             |
 | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `comment` | Artalk, Beaudar, Changyan, Cusdis, Disqus, DisqusJS, Facebook, Giscus, Gitalk, Gitment, Isso, LiveRe, Twikoo, Utterances, Valine, Waline                                                                                               |
+| `comment` | Artalk, Beaudar, Changyan, Cusdis, Disqus, DisqusJS, Facebook, Giscus, Gitalk 2 (preview), Gitment (deprecated), Isso, LiveRe, Twikoo, Utterances, Valine (deprecated), Waline                                                         |
 | `search`  | Algolia, Baidu, Google CSE, Insight                                                                                                                                                                                                    |
-| `share`   | AddThis, AddToAny, Baidu Share, Share.js, ShareThis                                                                                                                                                                                    |
+| `share`   | AddThis (deprecated), AddToAny, Baidu Share (deprecated), Web Share, ShareThis                                                                                                                                                         |
 | `donate`  | Afdian, Alipay, Buy Me a Coffee, Patreon, PayPal, WeChat                                                                                                                                                                               |
-| `widget`  | AdSense, archives, categories, follow.it, links, recent posts, email subscription, tags, table of contents                                                                                                                             |
+| `widget`  | AdSense, archives, categories, follow.it, GitHub contribution calendar, links, profile, recent posts, FeedBurner email (deprecated), tags, table of contents                                                                           |
 | `plugin`  | Baidu Analytics, Bing Webmaster, Busuanzi, CNZZ, cookie consent, gallery, Google Analytics, Hotjar, KaTeX, MathJax, Matomo, outdated browser warning, progress bar, StatCounter, Twitter conversion tracking, Umami, Waline page views |
 | `misc`    | Article licensing, meta tags, Open Graph, paginator, structured data, web app                                                                                                                                                          |
 | `common`  | Article media (a thumbnail with a title and date)                                                                                                                                                                                      |
 
-The components below are deprecated because their services have shut down or are shutting down. They print
-a warning when they are rendered, and will be removed in the next major version.
-
-| Component                | Reason                                                                         | Alternatives               |
-| ------------------------ | ------------------------------------------------------------------------------ | -------------------------- |
-| `share/addthis`          | AddThis shut down on May 31, 2023.                                             | AddToAny, ShareThis        |
-| `comment/gitment`        | Gitment is no longer maintained, and its GitHub sign-in proxy no longer works. | Giscus, Utterances, Gitalk |
-| `comment/valine`         | LeanCloud, where Valine stores the comments, shuts down on January 12, 2027.   | Waline, Twikoo             |
-| `widget/subscribe_email` | Google FeedBurner stopped email subscriptions in July 2021.                    | follow.it                  |
-
 The [API documentation](https://ppoffice.github.io/hexo-component-inferno/) lists the props of every
 component and the options of every module.
 

package/asset/css/github-calendar.css

@@ -0,0 +1,41 @@
+.github-calendar-chart {
+  --github-calendar-color: var(--github-calendar-default-color, #40c463);
+  --github-calendar-empty: color-mix(in srgb, currentColor 12%, transparent);
+  min-height: 116px;
+}
+
+.github-calendar-chart .github-calendar-link {
+  display: block;
+  color: inherit;
+}
+
+.github-calendar-chart svg {
+  display: block;
+  max-width: 100%;
+}
+
+.github-calendar-chart text {
+  fill: currentColor;
+  font-family: inherit;
+  font-size: 10px;
+}
+
+.github-calendar-chart rect {
+  fill: var(--github-calendar-empty);
+}
+
+.github-calendar-chart .github-calendar-level-1 {
+  fill: color-mix(in srgb, var(--github-calendar-color) 25%, var(--github-calendar-empty));
+}
+
+.github-calendar-chart .github-calendar-level-2 {
+  fill: color-mix(in srgb, var(--github-calendar-color) 50%, var(--github-calendar-empty));
+}
+
+.github-calendar-chart .github-calendar-level-3 {
+  fill: color-mix(in srgb, var(--github-calendar-color) 75%, var(--github-calendar-empty));
+}
+
+.github-calendar-chart .github-calendar-level-4 {
+  fill: var(--github-calendar-color);
+}

package/asset/js/algolia.js

@@ -1,6 +1,14 @@
-/* global instantsearch, algoliasearch */
+/* global instantsearch */
 // eslint-disable-next-line no-unused-vars
 function loadAlgolia(config, translation) {
+  const $main = $('.searchbox');
+  let search = null;
+  const controller = window.loadSearchbox($main, {
+    onDestroy: () => {
+      // Widget initialization can fail before start completes. Dispose only initialized indices.
+      if (search && search.mainIndex.getHelper()) search.dispose();
+    },
+  });
   function escapeHTML(text) {
     return String(text).replace(/[&<>"']/g, (char) => {
       return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char];
@@ -23,20 +31,23 @@ function loadAlgolia(config, translation) {
       .replace(/\[\/algolia-highlight\]/g, '</em>');
   }
 
-  const search = instantsearch({
+  search = instantsearch({
     indexName: config.indexName,
-    searchClient: algoliasearch(config.applicationId, config.apiKey),
+    searchClient: window['algoliasearch/lite'].liteClient(config.applicationId, config.apiKey),
+    // Preserve search-only behavior; do not enable automatic Insights tracking after upgrading.
+    insights: false,
   });
 
   search.addWidgets([
     instantsearch.widgets.configure({
       attributesToSnippet: [config.excerpt],
     }),
-  ]);
-
-  search.addWidget(
     instantsearch.widgets.searchBox({
       container: '#algolia-input',
+      // Disposing removes the widget DOM, but callers may still hold its old input node.
+      queryHook: (query, refine) => {
+        if (controller.isCurrent()) refine(query);
+      },
       placeholder: translation.hint,
       showReset: false,
       showSubmit: false,
@@ -47,15 +58,9 @@ function loadAlgolia(config, translation) {
         input: 'searchbox-input',
       },
     }),
-  );
-
-  search.addWidget(
     instantsearch.widgets.poweredBy({
       container: '#algolia-poweredby',
     }),
-  );
-
-  search.addWidget(
     instantsearch.widgets.hits({
       container: '.searchbox-body',
       escapeHTML: false,
@@ -84,9 +89,6 @@ function loadAlgolia(config, translation) {
         },
       },
     }),
-  );
-
-  search.addWidget(
     instantsearch.widgets.pagination({
       container: '.searchbox-footer',
       cssClasses: {
@@ -97,64 +99,11 @@ function loadAlgolia(config, translation) {
         disabledItem: 'disabled',
       },
     }),
-  );
+  ]);
 
   search.start();
 
   if (location.hash.trim() === '#algolia-search') {
     $('.searchbox').addClass('show');
   }
-
-  const $main = $('.searchbox');
-  let opener = null;
-
-  function open() {
-    if (!$main.hasClass('show')) {
-      opener = document.activeElement;
-      $main.addClass('show');
-    }
-    $main.find('.searchbox-input').focus();
-  }
-
-  // Return the focus to the element that opened the search box, unless it moved elsewhere
-  function close(restoreFocus = true) {
-    $main.removeClass('show');
-    if (restoreFocus && opener && document.contains(opener)) {
-      opener.focus();
-    }
-    opener = null;
-  }
-
-  // Open the search box with "/" (unless typing in a field) or Ctrl/Cmd+K
-  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 is "/" whatever keys type it on the keyboard layout, so do not check e.shiftKey
-    const target = e.target;
-    const typing = target.isContentEditable || /^(input|textarea|select)$/i.test(target.tagName);
-    return e.key === '/' && !typing;
-  }
-
-  $(document)
-    .on('click', '.navbar-main .search', open)
-    .on('click', '.searchbox .searchbox-mask', () => close())
-    .on('click', '.searchbox-close', () => close())
-    .on('focusin', (e) => {
-      // Close the search box when the focus moves to the rest of the page, e.g., by Tab
-      if ($main.hasClass('show') && !$main[0].contains(e.target)) {
-        close(false);
-      }
-    })
-    .on('keydown', (e) => {
-      if (isSearchShortcut(e)) {
-        e.preventDefault();
-        open();
-      } else if (e.keyCode === 27 && $main.hasClass('show')) {
-        close();
-      }
-    });
 }

package/asset/js/github-calendar.js

@@ -0,0 +1,185 @@
+(function () {
+  const DAY = 86400000;
+  const CELL = 11;
+  const GAP = 3;
+  const NS = 'http://www.w3.org/2000/svg';
+  const requests = new Map();
+  let destroy = () => {};
+
+  function load(username) {
+    const cached = requests.get(username);
+    if (cached && cached.expires > Date.now()) {
+      return cached.promise;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 15000);
+    const promise = fetch(
+      'https://github-contributions-api.jogruber.de/v4/' + encodeURIComponent(username) + '?y=last',
+      {
+        signal: controller.signal,
+        credentials: 'omit',
+        referrerPolicy: 'no-referrer',
+      },
+    )
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Calendar request failed');
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (!Array.isArray(data.contributions) || !data.contributions.length) {
+          throw new Error('Missing contribution data');
+        }
+        return data.contributions
+          .map((day) => {
+            const time = Date.parse(day.date + 'T00:00:00Z');
+            if (
+              !/^\d{4}-\d{2}-\d{2}$/.test(day.date) ||
+              !Number.isFinite(time) ||
+              !Number.isInteger(day.count) ||
+              day.count < 0 ||
+              !Number.isInteger(day.level) ||
+              day.level < 0 ||
+              day.level > 4
+            ) {
+              throw new Error('Invalid contribution data');
+            }
+            return { ...day, time };
+          })
+          .sort((a, b) => a.time - b.time);
+      })
+      .catch((error) => {
+        requests.delete(username);
+        throw error;
+      })
+      .finally(() => clearTimeout(timer));
+    requests.set(username, { promise, expires: Date.now() + 3600000 });
+    return promise;
+  }
+
+  function element(tag, attributes = {}, text) {
+    const node = document.createElementNS(NS, tag);
+    Object.keys(attributes).forEach((key) => node.setAttribute(key, attributes[key]));
+    if (text !== undefined) {
+      node.textContent = text;
+    }
+    return node;
+  }
+
+  function draw(chart, days) {
+    const width = chart.clientWidth;
+    if (!width) {
+      return;
+    }
+    const last = days[days.length - 1];
+    const lastSunday = last.time - new Date(last.time).getUTCDay() * DAY;
+    const firstSunday = days[0].time - new Date(days[0].time).getUTCDay() * DAY;
+    const totalWeeks = Math.round((lastSunday - firstSunday) / (7 * DAY)) + 1;
+    const weeks = Math.min(totalWeeks, Math.max(1, Math.floor((width + GAP) / (CELL + GAP))));
+    const start = lastSunday - (weeks - 1) * 7 * DAY;
+    const visible = days.filter((day) => day.time >= start);
+    const locale = (document.documentElement.lang || 'en').replace(/^vn$/, 'vi');
+    let monthFormat, dateFormat;
+    try {
+      monthFormat = new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' });
+      dateFormat = new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' });
+    } catch (e) {
+      monthFormat = new Intl.DateTimeFormat('en', { month: 'short', timeZone: 'UTC' });
+      dateFormat = new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeZone: 'UTC' });
+    }
+    const svg = element('svg', { width: weeks * (CELL + GAP) - GAP, height: 116, role: 'img' });
+    const range = dateFormat.format(visible[0].time) + ' – ' + dateFormat.format(last.time);
+    svg.setAttribute(
+      'aria-label',
+      chart.closest('.widget').querySelector('.menu-label').textContent + ': ' + range,
+    );
+    const monthLabels = [];
+    let month = -1;
+    visible.forEach((day) => {
+      const week = Math.floor((day.time - start) / (7 * DAY));
+      const x = week * (CELL + GAP);
+      const date = new Date(day.time);
+      if (date.getUTCMonth() !== month) {
+        month = date.getUTCMonth();
+        const label = element('text', { x, y: 10 }, monthFormat.format(date));
+        svg.appendChild(label);
+        monthLabels.push({
+          label,
+          x,
+          partial: monthLabels.length === 0 && date.getUTCDate() !== 1,
+        });
+      }
+      const rect = element('rect', {
+        x,
+        y: 18 + date.getUTCDay() * (CELL + GAP),
+        width: CELL,
+        height: CELL,
+        rx: 2,
+        'data-date': day.date,
+        'data-level': day.level,
+        class: 'github-calendar-level-' + day.level,
+      });
+      rect.appendChild(element('title', {}, dateFormat.format(date) + ': ' + day.count));
+      svg.appendChild(rect);
+    });
+    chart.querySelector('.github-calendar-grid').replaceChildren(svg);
+    // Measure in the document so labels use the actual theme font and locale. A partial
+    // opening month must not suppress the next full month when both start in nearby weeks.
+    let lastLabelEnd = -8;
+    monthLabels.forEach(({ label, x, partial }, index) => {
+      const end = x + label.getComputedTextLength();
+      const next = monthLabels[index + 1];
+      if (
+        (partial && next && next.x < end + 8) ||
+        x < lastLabelEnd + 8 ||
+        end > Number(svg.getAttribute('width'))
+      ) {
+        label.remove();
+      } else {
+        lastLabelEnd = end;
+      }
+    });
+  }
+
+  window.HexoGithubCalendar = {
+    init() {
+      destroy();
+      let active = true;
+      const cleanups = [];
+      destroy = () => {
+        active = false;
+        cleanups.forEach((cleanup) => cleanup());
+      };
+      document.querySelectorAll('.github-calendar-chart[data-username]').forEach((chart) => {
+        const status = chart.querySelector('.github-calendar-status');
+        load(chart.dataset.username)
+          .then((days) => {
+            if (!active || !chart.isConnected) {
+              return;
+            }
+            status.hidden = true;
+            draw(chart, days);
+            if (typeof ResizeObserver !== 'undefined') {
+              const observer = new ResizeObserver(() => draw(chart, days));
+              observer.observe(chart);
+              cleanups.push(() => observer.disconnect());
+            } else {
+              const resize = () => draw(chart, days);
+              window.addEventListener('resize', resize);
+              cleanups.push(() => window.removeEventListener('resize', resize));
+            }
+          })
+          .catch(() => {
+            if (active && chart.isConnected) {
+              status.hidden = false;
+              status.textContent = chart.dataset.error;
+              chart.querySelector('.github-calendar-grid').textContent = chart
+                .closest('.widget')
+                .querySelector('.menu-label').textContent;
+            }
+          });
+      });
+    },
+  };
+})();

package/asset/js/google_cse.js

@@ -1,5 +1,8 @@
 /* global google */
 (function (document, $) {
+  const controller = window.loadSearchbox($('.searchbox'), {
+    onDestroy: () => $(document).off('.googleSearch'),
+  });
   function debounce(func, wait, immediate) {
     let timeout;
     return function () {
@@ -16,72 +19,20 @@
     };
   }
 
-  let opener = null;
-
-  function open() {
-    const $main = $('.searchbox');
-    if (!$main.hasClass('show')) {
-      opener = document.activeElement;
-      $main.addClass('show');
-    }
-    $main.find('.searchbox-input').focus();
-  }
-
-  // Return the focus to the element that opened the search box, unless it moved elsewhere
-  function close(restoreFocus = true) {
-    $('.searchbox').removeClass('show');
-    if (restoreFocus && opener && document.contains(opener)) {
-      opener.focus();
-    }
-    opener = null;
-  }
-
-  // Open the search box with "/" (unless typing in a field) or Ctrl/Cmd+K
-  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 is "/" whatever keys type it on the keyboard layout, so do not check e.shiftKey
-    const target = e.target;
-    const typing = target.isContentEditable || /^(input|textarea|select)$/i.test(target.tagName);
-    return e.key === '/' && !typing;
-  }
-
-  $(document)
-    .on('click', '.navbar-main .search', open)
-    .on('click', '.searchbox .searchbox-mask', () => close())
-    .on('click', '.searchbox-close', () => close())
-    .on('focusin', (e) => {
-      // Close the search box when the focus moves to the rest of the page, e.g., by Tab
-      const main = $('.searchbox')[0];
-      if (main && $(main).hasClass('show') && !main.contains(e.target)) {
-        close(false);
-      }
-    })
-    .on('keydown', (e) => {
-      if (isSearchShortcut(e)) {
-        e.preventDefault();
-        open();
-      } else if (e.keyCode === 27 && $('.searchbox').hasClass('show')) {
-        close();
-      }
-    })
-    .on(
-      'keydown',
-      '.searchbox-input',
-      debounce(function () {
-        const value = $(this).val();
-        try {
-          const element = google.search.cse.element.getElement('searchresults-only0');
-          if (value.trim() === '') {
-            element.clearAllResults();
-          } else {
-            element.execute(value);
-          }
-        } catch (e) {}
-      }, 300),
-    );
+  $(document).on(
+    'input.googleSearch',
+    '.searchbox-input',
+    debounce(function () {
+      if (!controller.isCurrent()) return;
+      const value = $(this).val();
+      try {
+        const element = google.search.cse.element.getElement('searchresults-only0');
+        if (value.trim() === '') {
+          element.clearAllResults();
+        } else {
+          element.execute(value);
+        }
+      } catch (e) {}
+    }, 300),
+  );
 })(document, jQuery);