hexo-theme-stellar 1.44.0 → 2.0.0-rc.2

package/source/js/runtime/extensions/card-hover.js

@@ -0,0 +1,5 @@
+export async function mount(root, context) {
+  await context.assets.script(context.extension.config.assets.js);
+  window.stellar?.cardHover?.mountAll?.(root);
+  return () => window.stellar?.cardHover?.unmountAll?.(root);
+}

package/source/js/runtime/extensions/color-scheme-switch.js

@@ -0,0 +1,101 @@
+const COLOR_SCHEMES = new Set(['light', 'dark', 'auto']);
+const STORAGE_KEY = 'Stellar.colorScheme';
+
+function selectedColorScheme(documentRef) {
+  return documentRef.documentElement.getAttribute('data-theme') || 'auto';
+}
+
+export function resolvedColorScheme(documentRef, mediaQuery) {
+  const selected = selectedColorScheme(documentRef);
+  if (selected === 'light' || selected === 'dark') return selected;
+  return mediaQuery.matches ? 'dark' : 'light';
+}
+
+function readStoredColorScheme(storage) {
+  try {
+    const value = storage?.getItem(STORAGE_KEY);
+    return COLOR_SCHEMES.has(value) ? value : null;
+  } catch (error) {
+    return null;
+  }
+}
+
+function persistColorScheme(storage, value) {
+  try {
+    storage?.setItem(STORAGE_KEY, value);
+  } catch (error) {
+    void error;
+  }
+}
+
+export function mount(root, context) {
+  if (root?.nodeType !== 9 || !root.defaultView) {
+    throw new TypeError('[stellar color-scheme-switch] document root is required');
+  }
+  const documentRef = root;
+  const windowRef = root.defaultView;
+  const mediaQuery = windowRef.matchMedia('(prefers-color-scheme: dark)');
+  let storage = null;
+  try {
+    storage = windowRef.localStorage;
+  } catch (error) {
+    void error;
+  }
+  const messages = context.extension.config.messages || {};
+  const previousSetter = windowRef.setColorScheme;
+
+  function dispatch(mode) {
+    documentRef.dispatchEvent(new windowRef.CustomEvent('stellar:color-scheme-change', {
+      detail: Object.freeze({
+        mode,
+        resolvedMode: resolvedColorScheme(documentRef, mediaQuery)
+      })
+    }));
+  }
+
+  function apply(mode, options = {}) {
+    if (!COLOR_SCHEMES.has(mode)) {
+      throw new TypeError(`[stellar color-scheme-switch] unsupported mode ${String(mode)}`);
+    }
+    if (mode === 'auto') {
+      documentRef.documentElement.removeAttribute('data-theme');
+    } else {
+      documentRef.documentElement.setAttribute('data-theme', mode);
+    }
+    if (options.persist !== false) persistColorScheme(storage, mode);
+    dispatch(mode);
+    if (options.notify !== false) context.legacy.stellar?.toast?.(messages[mode]);
+    return mode;
+  }
+
+  const setter = mode => apply(mode);
+  windowRef.setColorScheme = setter;
+
+  const stored = readStoredColorScheme(storage);
+  if (stored) {
+    apply(stored, { persist: false, notify: false });
+  } else {
+    dispatch(selectedColorScheme(documentRef));
+  }
+
+  const handleSystemChange = () => {
+    if (selectedColorScheme(documentRef) === 'auto') dispatch('auto');
+  };
+  if (typeof mediaQuery.addEventListener === 'function') {
+    mediaQuery.addEventListener('change', handleSystemChange);
+  } else if (typeof mediaQuery.addListener === 'function') {
+    mediaQuery.addListener(handleSystemChange);
+  }
+
+  return () => {
+    if (typeof mediaQuery.removeEventListener === 'function') {
+      mediaQuery.removeEventListener('change', handleSystemChange);
+    } else if (typeof mediaQuery.removeListener === 'function') {
+      mediaQuery.removeListener(handleSystemChange);
+    }
+    if (windowRef.setColorScheme === setter) {
+      if (previousSetter === undefined) delete windowRef.setColorScheme;
+      else windowRef.setColorScheme = previousSetter;
+    }
+  };
+}

package/source/js/runtime/extensions/comments.js

@@ -0,0 +1,200 @@
+function viewportLoad(element, callback, enabled = true, onError = () => {}) {
+  let active = true;
+  const run = () => Promise.resolve()
+    .then(() => callback(() => active))
+    .catch(error => {
+      if (active) onError(error);
+    });
+  if (!enabled || !('IntersectionObserver' in window)) {
+    run();
+    return () => { active = false; };
+  }
+  const observer = new IntersectionObserver(entries => {
+    if (entries.some(entry => entry.isIntersecting)) {
+      observer.disconnect();
+      run();
+    }
+  });
+  observer.observe(element);
+  return () => {
+    active = false;
+    observer.disconnect();
+  };
+}
+
+function copyAttributes(source, target) {
+  Array.from(source.attributes).forEach(attribute => {
+    if (!['class', 'id'].includes(attribute.name)) target.setAttribute(attribute.name, attribute.value);
+  });
+}
+
+function commentPath(element) {
+  return element.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
+}
+
+function uploadImage(options, tokenHeader, tokenValue, fieldName, responseField) {
+  if (!options?.api) return null;
+  return file => {
+    const headers = new Headers({ Accept: 'application/json' });
+    if (tokenValue) headers.set(tokenHeader || 'Authorization', tokenValue);
+    const body = new FormData();
+    body.append(fieldName || 'file', file);
+    return fetch(options.api, { method: 'POST', body, headers })
+      .then(response => response.json())
+      .then(response => response[responseField]);
+  };
+}
+
+async function mountArtalk(root, context, config) {
+  const element = root.querySelector('#artalk_container');
+  if (!element) return;
+  const targeted = /[?&]atk_comment=\d+/.test(window.location.search) || /#atk-comment-\d+/.test(window.location.hash);
+  let instance = null;
+  let historyTimer = null;
+  const cleanupViewport = viewportLoad(element, async isActive => {
+    await Promise.all([
+      context.assets.style(config.assets.localCss),
+      context.assets.style(config.assets.css),
+      context.assets.script(config.assets.js)
+    ]);
+    if (!isActive()) return;
+    const match = window.location.search.match(/[?&]atk_comment=(\d+)/);
+    if (match && !/#atk-comment-\d+/.test(window.location.hash)) {
+      const params = new URLSearchParams(window.location.search);
+      const notifyKey = params.get('atk_notify_key');
+      const query = notifyKey ? `?atk_notify_key=${encodeURIComponent(notifyKey)}` : '';
+      history.replaceState(null, '', `${window.location.pathname}${query}#atk-comment-${match[1]}`);
+    }
+    const options = Object.assign({}, config.options, {
+      el: '#artalk_container',
+      pageKey: commentPath(element),
+      pageTitle: config.pageTitle
+    });
+    const uploader = uploadImage(config.options.imageUploader, 'Authorization', config.options.imageUploader?.token, 'file', config.options.imageUploader?.resp);
+    if (uploader) options.imgUploader = uploader;
+    instance = window.Artalk.init(options);
+    if (targeted && window.location.search.includes('atk_')) {
+      instance.on('list-loaded', () => {
+        if (historyTimer !== null) clearTimeout(historyTimer);
+        historyTimer = setTimeout(() => {
+          historyTimer = null;
+          history.replaceState(null, '', window.location.pathname + window.location.hash);
+        }, 0);
+      });
+    }
+  }, !targeted, error => context.reportError(error));
+  return () => {
+    cleanupViewport();
+    if (historyTimer !== null) clearTimeout(historyTimer);
+    historyTimer = null;
+    instance?.destroy?.();
+  };
+}
+
+function mountEmbed(root, provider, src, context) {
+  const element = root.querySelector(`#comments #${provider}`);
+  if (!element) return;
+  let script = null;
+  let cancelLoad = null;
+  const cleanupViewport = viewportLoad(element, isActive => new Promise((resolve, reject) => {
+    element.replaceChildren();
+    script = element.ownerDocument.createElement('script');
+    script.src = src;
+    script.async = true;
+    copyAttributes(element, script);
+    let settled = false;
+    const finish = callback => {
+      if (settled) return;
+      settled = true;
+      script?.removeEventListener('load', onLoad);
+      script?.removeEventListener('error', onError);
+      cancelLoad = null;
+      callback();
+    };
+    const onLoad = () => finish(resolve);
+    const onError = () => finish(() => reject(new Error(`${provider} comment embed failed to load`)));
+    cancelLoad = () => finish(resolve);
+    script.addEventListener('load', onLoad, { once: true });
+    script.addEventListener('error', onError, { once: true });
+    if (!isActive()) {
+      cancelLoad();
+      return;
+    }
+    element.appendChild(script);
+  }), true, error => context.reportError(error));
+  return () => {
+    cleanupViewport();
+    cancelLoad?.();
+    script?.remove();
+  };
+}
+
+function mountTwikoo(root, context, config) {
+  const element = root.querySelector('#twikoo_container');
+  if (!element) return;
+  let instance = null;
+  const cleanupViewport = viewportLoad(element, async isActive => {
+    await context.assets.style(config.assets.localCss);
+    await context.assets.script(config.assets.js);
+    if (!isActive()) return;
+    const created = await window.twikoo.init(Object.assign({}, config.options, {
+      el: '#twikoo_container',
+      path: commentPath(element)
+    }));
+    if (!isActive()) created?.destroy?.();
+    else instance = created;
+  }, true, error => context.reportError(error));
+  return () => {
+    cleanupViewport();
+    instance?.destroy?.();
+  };
+}
+
+function mountWaline(root, context, config) {
+  const element = root.querySelector('#waline_container');
+  if (!element) return;
+  let instance = null;
+  const cleanupViewport = viewportLoad(element, async isActive => {
+    await Promise.all([
+      context.assets.style(config.assets.localCss),
+      context.assets.style(config.assets.css),
+      context.assets.style(config.assets.metaCss)
+    ]);
+    const module = await import(config.assets.js);
+    if (!isActive()) return;
+    const options = Object.assign({}, config.options, {
+      el: '#waline_container',
+      path: commentPath(element)
+    });
+    const uploader = uploadImage(
+      config.options.imageUploader,
+      config.options.imageUploader?.tokenName,
+      config.options.imageUploader?.token,
+      config.options.imageUploader?.fileName,
+      config.options.imageUploader?.resp
+    );
+    if (uploader) options.imageUploader = uploader;
+    instance = module.init(options);
+  }, true, error => context.reportError(error));
+  return () => {
+    cleanupViewport();
+    instance?.destroy?.();
+  };
+}
+
+export async function mount(root, context) {
+  const config = context.extension.config;
+  switch (config.provider) {
+    case 'artalk': return mountArtalk(root, context, config);
+    case 'beaudar':
+      await context.assets.style(config.assets.localCss);
+      return mountEmbed(root, 'beaudar', config.assets.js, context);
+    case 'giscus': return mountEmbed(root, 'giscus', config.assets.js, context);
+    case 'utterances':
+      await context.assets.style(config.assets.localCss);
+      return mountEmbed(root, 'utterances', config.assets.js, context);
+    case 'twikoo': return mountTwikoo(root, context, config);
+    case 'waline': return mountWaline(root, context, config);
+    default: throw new TypeError(`unknown comment provider ${config.provider}`);
+  }
+}

package/source/js/runtime/extensions/deferred-icons.js

@@ -0,0 +1,53 @@
+/** 非首屏图标异步加载。 */
+
+const RUNTIME_QUERY = new URL(import.meta.url).search;
+
+function queryNodes(root) {
+  const nodes = [];
+  if (typeof root?.matches === 'function' && root.matches('svg.icon[data-icon]')) nodes.push(root);
+  if (typeof root?.querySelectorAll === 'function') nodes.push(...root.querySelectorAll('svg.icon[data-icon]'));
+  return nodes;
+}
+
+export function mount(root, context) {
+  const groups = {};
+  const controller = new AbortController();
+  let active = true;
+  queryNodes(root).forEach(node => {
+    const key = node.getAttribute('data-icon');
+    const index = key.indexOf(':');
+    if (index < 1) return;
+    const namespace = key.slice(0, index);
+    if (!groups[namespace]) groups[namespace] = [];
+    groups[namespace].push(node);
+  });
+
+  Object.keys(groups).forEach(namespace => {
+    const path = `/js/icons/${namespace}.json`;
+    const url = `${context.assets.resolve(path)}${RUNTIME_QUERY}`;
+    fetch(url, { signal: controller.signal })
+      .then(response => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
+      .then(data => {
+        if (!active) return;
+        const icons = data?.[namespace];
+        groups[namespace].forEach(node => {
+          if (!active || !node.isConnected) return;
+          const key = node.getAttribute('data-icon');
+          const svg = icons?.[key];
+          if (typeof svg === 'string' && svg.length > 0) node.outerHTML = svg;
+          else console.warn(`[stellar] icon not found: ${key}`);
+        });
+      })
+      .catch(error => {
+        if (error?.name !== 'AbortError') console.warn(`[stellar] icons load failed: ${namespace}`, error);
+      });
+  });
+
+  return () => {
+    active = false;
+    controller.abort();
+  };
+}

package/source/js/{plugins → runtime/extensions}/dropdown.js

@@ -1,5 +1,4 @@
 // 通用 dropdown 浮层：把打开的菜单挂到 body 下，避免被任意祖先容器裁剪。
-(() => {
   const selector = 'details.dropdown'
   const gap = 8
   const viewportPadding = 8
@@ -7,6 +6,7 @@
   let active = null
   let frame = null
   let menuId = 0
+  let mounts = 0
 
   function getLayer() {
     if (layer && document.documentElement.contains(layer)) {
@@ -303,12 +303,18 @@
     })
   }
 
-  function bind(dropdown) {
+  function listen(state, target, type, handler, options) {
+    target.addEventListener(type, handler, options)
+    state.cleanups.push(() => target.removeEventListener(type, handler, options))
+  }
+
+  function bind(dropdown, state) {
     if (dropdown.__stellarDropdownBound) {
       return
     }
     dropdown.__stellarDropdownBound = true
-    dropdown.addEventListener('mouseenter', () => {
+    state.bound.add(dropdown)
+    listen(state, dropdown, 'mouseenter', () => {
       dropdown.__stellarDropdownHovering = true
       if (active && active.dropdown === dropdown) {
         active.hoverMode = true
@@ -319,13 +325,13 @@
     })
     const trigger = getDirectChild(dropdown, '.dropdown-trigger')
     if (trigger) {
-      trigger.addEventListener('click', event => {
+      listen(state, trigger, 'click', event => {
         event.preventDefault()
         if (!active || active.dropdown !== dropdown) {
           openDropdown(dropdown)
         }
       })
-      trigger.addEventListener('keydown', event => {
+      listen(state, trigger, 'keydown', event => {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault()
           if (active && active.dropdown === dropdown) {
@@ -336,10 +342,18 @@
         }
       })
     }
-    dropdown.addEventListener('mouseleave', () => {
+    const menu = getDirectChild(dropdown, '.dropdown-menu')
+    if (menu) {
+      listen(state, menu, 'click', event => {
+        if (event.target.closest('.dropdown-item') && active?.dropdown === dropdown) {
+          closeState(active, false)
+        }
+      })
+    }
+    listen(state, dropdown, 'mouseleave', () => {
       dropdown.__stellarDropdownHovering = false
     })
-    dropdown.addEventListener('toggle', () => {
+    listen(state, dropdown, 'toggle', () => {
       if (dropdown.open) {
         if (!active || active.dropdown !== dropdown) {
           hideMenuBeforeOpen(dropdown)
@@ -357,24 +371,27 @@
     dropdown.__stellarDropdownHovering = false
   }
 
-  function bindTree(root) {
+  function bindTree(root, state) {
     if (root.nodeType !== 1) {
       return
     }
     if (root.matches(selector)) {
-      bind(root)
+      bind(root, state)
     }
-    root.querySelectorAll(selector).forEach(bind)
+    root.querySelectorAll(selector).forEach(dropdown => bind(dropdown, state))
   }
 
-  function init() {
-    if (!document.body || !window.MutationObserver) {
-      return
-    }
-    bindTree(document.body)
+  export function mount(root) {
+    const scope = root && root.nodeType === 9 ? root.body : root
+    if (!scope || scope.nodeType !== 1 || !window.MutationObserver) {
+      return () => {}
+    }
+    const state = { bound: new Set(), cleanups: [], observer: null, cleaned: false }
+    mounts += 1
+    bindTree(scope, state)
     const observer = new MutationObserver(records => {
       records.forEach(record => {
-        record.addedNodes.forEach(bindTree)
+        record.addedNodes.forEach(node => bindTree(node, state))
         record.removedNodes.forEach(node => {
           if (active && node.nodeType === 1 && (node === active.dropdown || node.contains(active.dropdown))) {
             closeState(active, false)
@@ -382,9 +399,10 @@
         })
       })
     })
-    observer.observe(document.body, { childList: true, subtree: true })
+    observer.observe(scope, { childList: true, subtree: true })
+    state.observer = observer
 
-    document.addEventListener('click', event => {
+    listen(state, document, 'click', event => {
       if (!active) {
         return
       }
@@ -394,14 +412,14 @@
       closeState(active, false)
     }, true)
 
-    document.addEventListener('mousemove', event => {
+    listen(state, document, 'mousemove', event => {
       if (!active || !active.hoverMode || isPointerInsideState(active, event)) {
         return
       }
       closeState(active, false)
     }, true)
 
-    document.addEventListener('keydown', event => {
+    listen(state, document, 'keydown', event => {
       if (!active) {
         return
       }
@@ -419,17 +437,38 @@
       }
     })
 
-    window.addEventListener('resize', schedulePosition)
-    window.addEventListener('scroll', schedulePosition, true)
+    listen(state, window, 'resize', schedulePosition)
+    listen(state, window, 'scroll', schedulePosition, true)
     if (window.visualViewport) {
-      window.visualViewport.addEventListener('resize', schedulePosition)
-      window.visualViewport.addEventListener('scroll', schedulePosition)
+      listen(state, window.visualViewport, 'resize', schedulePosition)
+      listen(state, window.visualViewport, 'scroll', schedulePosition)
     }
-  }
 
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init, { once: true })
-  } else {
-    init()
+    return function cleanup() {
+      if (state.cleaned) {
+        return
+      }
+      state.cleaned = true
+      state.observer.disconnect()
+      if (active && state.bound.has(active.dropdown)) {
+        closeState(active, false)
+      }
+      if (frame !== null) {
+        window.cancelAnimationFrame(frame)
+        frame = null
+      }
+      for (let index = state.cleanups.length - 1; index >= 0; index -= 1) {
+        state.cleanups[index]()
+      }
+      state.bound.forEach(dropdown => {
+        delete dropdown.__stellarDropdownBound
+        delete dropdown.__stellarDropdownHovering
+      })
+      state.bound.clear()
+      mounts = Math.max(0, mounts - 1)
+      if (mounts === 0 && layer) {
+        layer.remove()
+        layer = null
+      }
+    }
   }
-})()