hexo-theme-gnix 11.0.0 → 12.0.0

package/include/hexo/renderer.js

@@ -1,5 +1,4 @@
 const path = require("node:path");
-const { tab } = require("@mdit/plugin-tab");
 const { createMarkdownExit } = require("markdown-exit");
 const mermaidDiagram = require("markdown-exit-mermaid");
 const ratex = require("markdown-exit-ratex");
@@ -17,6 +16,199 @@ function resolveDefault(module) {
   return module && typeof module === "object" && "default" in module ? module.default : module;
 }
 
+function wrapMarkdownItTable(md, options = {}) {
+  const { figureClass = "table-wrapper", tableClass = "" } = options;
+
+  const defaultTableOpen = md.renderer.rules.table_open || ((tokens, idx, opts, _env, self) => self.renderToken(tokens, idx, opts));
+
+  const defaultTableClose = md.renderer.rules.table_close || ((tokens, idx, opts, _env, self) => self.renderToken(tokens, idx, opts));
+
+  md.renderer.rules.table_open = (tokens, idx, opts, env, self) => {
+    if (tableClass) {
+      tokens[idx].attrJoin("class", tableClass);
+    }
+
+    return `<figure class="${figureClass}">\n${defaultTableOpen(tokens, idx, opts, env, self)}`;
+  };
+
+  md.renderer.rules.table_close = (tokens, idx, opts, env, self) => {
+    return `${defaultTableClose(tokens, idx, opts, env, self)}\n</figure>`;
+  };
+
+  return md;
+}
+
+function parseTabsMarker(state, line, name) {
+  let pos = state.bMarks[line] + state.tShift[line];
+  const max = state.eMarks[line];
+
+  if (state.src.charCodeAt(pos) !== 0x3a /* : */) return false;
+
+  let markerCount = 0;
+  while (pos + markerCount < max && state.src.charCodeAt(pos + markerCount) === 0x3a) markerCount++;
+  if (markerCount < 3) return false;
+
+  pos = state.skipSpaces(pos + markerCount);
+  if (state.src.slice(pos, pos + name.length) !== name) return false;
+
+  pos += name.length;
+  if (pos < max && !state.md.utils.isSpace(state.src.charCodeAt(pos))) return false;
+
+  pos = state.skipSpaces(pos);
+  const id = pos < max && state.src.charCodeAt(pos) === 0x23 /* # */ ? state.src.slice(state.skipSpaces(pos + 1), max).trim() : "";
+
+  return { marker: ":".repeat(markerCount), id };
+}
+
+function parseTabMarker(state, line) {
+  let pos = state.bMarks[line] + state.tShift[line];
+  const max = state.eMarks[line];
+  const marker = "@tab";
+  const activeMarker = "@tab:active";
+
+  if (state.src.charCodeAt(pos) !== 0x40 /* @ */) return false;
+
+  let active = false;
+  if (state.src.slice(pos, pos + activeMarker.length) === activeMarker) {
+    active = true;
+    pos += activeMarker.length;
+  } else if (state.src.slice(pos, pos + marker.length) === marker) {
+    pos += marker.length;
+  } else {
+    return false;
+  }
+
+  const titleStart = state.skipSpaces(pos);
+  if (titleStart === pos || titleStart >= max) return false;
+
+  const rawTitle = state.src.slice(titleStart, max).trim();
+  const match = /^(.*?)(?:\s+#([A-Za-z0-9_-]+))?$/.exec(rawTitle);
+  const title = (match?.[1] || rawTitle).trim();
+  const id = match?.[2] || "";
+
+  return { active, title, id };
+}
+
+function customTabs(md, options = {}) {
+  const name = options.name || "tabs";
+
+  md.block.ruler.before(
+    "fence",
+    `${name}_container`,
+    (state, startLine, endLine, silent) => {
+      const marker = parseTabsMarker(state, startLine, name);
+      if (!marker) return false;
+      if (silent) return true;
+
+      const startIndent = state.sCount[startLine];
+      let nextLine = startLine + 1;
+      let autoClosed = false;
+
+      for (; nextLine < endLine; nextLine++) {
+        const pos = state.bMarks[nextLine] + state.tShift[nextLine];
+        const max = state.eMarks[nextLine];
+
+        if (state.sCount[nextLine] < startIndent) break;
+        if (state.sCount[nextLine] === startIndent && state.src.charCodeAt(pos) === 0x3a /* : */) {
+          let closePos = pos;
+          while (closePos < max && state.src.charCodeAt(closePos) === 0x3a) closePos++;
+          if (closePos - pos >= marker.marker.length && state.skipSpaces(closePos) >= max) {
+            autoClosed = true;
+            break;
+          }
+        }
+      }
+
+      const oldParent = state.parentType;
+      const oldLineMax = state.lineMax;
+      const oldBlkIndent = state.blkIndent;
+      const oldInTabs = state.env.__gnixInTabs;
+
+      const open = state.push("gnix_tabs_open", "", 1);
+      open.block = true;
+      open.markup = marker.marker;
+      open.meta = { id: marker.id };
+      open.map = [startLine, nextLine];
+
+      state.parentType = `${name}_container`;
+      state.lineMax = nextLine;
+      state.blkIndent = startIndent;
+      state.env.__gnixInTabs = true;
+      state.md.block.tokenize(state, startLine + 1, nextLine);
+      state.env.__gnixInTabs = oldInTabs;
+      state.parentType = oldParent;
+      state.lineMax = oldLineMax;
+      state.blkIndent = oldBlkIndent;
+
+      const close = state.push("gnix_tabs_close", "", -1);
+      close.block = true;
+      close.markup = marker.marker;
+
+      state.line = nextLine + (autoClosed ? 1 : 0);
+      return true;
+    },
+    { alt: ["paragraph", "reference", "blockquote", "list"] },
+  );
+
+  md.block.ruler.before(
+    "paragraph",
+    `${name}_tab`,
+    (state, startLine, endLine, silent) => {
+      if (!state.env.__gnixInTabs) return false;
+
+      const marker = parseTabMarker(state, startLine);
+      if (!marker) return false;
+      if (silent) return true;
+
+      const startIndent = state.sCount[startLine];
+      let nextLine = startLine + 1;
+
+      for (; nextLine < endLine; nextLine++) {
+        const pos = state.bMarks[nextLine] + state.tShift[nextLine];
+        if (state.sCount[nextLine] === startIndent && state.src.charCodeAt(pos) === 0x40 /* @ */ && parseTabMarker(state, nextLine)) break;
+      }
+
+      const oldParent = state.parentType;
+      const oldLineMax = state.lineMax;
+      const oldBlkIndent = state.blkIndent;
+
+      const open = state.push("gnix_tab_open", "", 1);
+      open.block = true;
+      open.markup = "@tab";
+      open.meta = marker;
+      open.map = [startLine, nextLine];
+
+      state.parentType = "tab";
+      state.lineMax = nextLine;
+      state.blkIndent = startIndent;
+      state.md.block.tokenize(state, startLine + 1, nextLine);
+      state.parentType = oldParent;
+      state.lineMax = oldLineMax;
+      state.blkIndent = oldBlkIndent;
+
+      const close = state.push("gnix_tab_close", "", -1);
+      close.block = true;
+
+      state.line = nextLine;
+      return true;
+    },
+    { alt: ["paragraph", "reference", "blockquote", "list"] },
+  );
+
+  md.renderer.rules.gnix_tabs_open = (tokens, idx) => {
+    const { id } = tokens[idx].meta || {};
+    return `<x-tabs${id ? ` group-id="${md.utils.escapeHtml(id)}"` : ""}>\n`;
+  };
+  md.renderer.rules.gnix_tabs_close = () => "</x-tabs>\n";
+  md.renderer.rules.gnix_tab_open = (tokens, idx) => {
+    const { title = "Tab", id = "", active = false } = tokens[idx].meta || {};
+    return `<x-tab title="${md.utils.escapeHtml(title)}"${id ? ` sync-id="${md.utils.escapeHtml(id)}"` : ""}${active ? " active" : ""}>\n`;
+  };
+  md.renderer.rules.gnix_tab_close = () => "</x-tab>\n";
+
+  return md;
+}
+
 class MarkdownRenderer {
   constructor(hexo) {
     this.hexo = hexo;
@@ -59,7 +251,8 @@ class MarkdownRenderer {
         .use(resolveDefault(code), this.config.code_options)
         .use(resolveDefault(mermaidDiagram), this.config.mermaid_options)
         .use(resolveDefault(ratex), this.config.ratex_options)
-        .use(tab)
+        .use(customTabs)
+        .use(wrapMarkdownItTable)
         .use(resolveDefault(anchor), {
           permalink: resolveDefault(anchor).permalink.headerLink(),
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "author": "Efterklang <gaojiaxing0220@gmail.com> (https://vluv.space)",
   "license": "MIT",
   "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",
@@ -34,7 +34,6 @@
     "README.md"
   ],
   "dependencies": {
-    "@mdit/plugin-tab": "^0.24.2",
     "@swup/head-plugin": "^2.3.1",
     "@swup/scripts-plugin": "^2.1.0",
     "esbuild": "^0.28.0",

package/source/css/default.css

@@ -688,56 +688,6 @@ html {
 
 /* #endregion Pagination */
 
-/* #region Tabs */
-
-.tabs-tabs-wrapper {
-  overflow: hidden;
-  margin: 10px auto;
-}
-
-.tabs-tabs-header {
-  padding: 0 0.5rem;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.tabs-tab-button {
-  padding: 0.5em 1rem;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: 0 0;
-  font-size: 1em;
-  cursor: pointer;
-  position: relative;
-  transition: color 0.3s ease;
-  outline: 0;
-  color: var(--subtext0);
-  flex: 0 0 auto;
-  white-space: nowrap;
-
-  &:hover,
-  &.active {
-    color: var(--text);
-    border-color: var(--text);
-  }
-}
-
-.tabs-tabs-container {
-  padding: 0.8em 0 10px 0;
-}
-
-.tabs-tab-content {
-  display: none;
-}
-
-.tabs-tab-content.active,
-.tabs-tab-content[data-active] {
-  display: block;
-}
-
-/* #endregion Tabs */
-
 .section {
   padding: 3rem 1.5rem;
   flex-grow: 1;
@@ -940,8 +890,7 @@ html {
     margin-bottom: 0.5rem;
   }
 
-  p:last-child,
-  .tabs-tabs-wrapper:last-child {
+  p:last-child {
     margin-bottom: 0;
   }
 
@@ -1157,13 +1106,19 @@ article.card-content .content :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
   font-size: 0.9em;
 }
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow: auto;
-  margin: 1rem 0;
-  font-size: 1rem;
+.table-wrapper {
+  max-width: 100%;
+  margin: 1.5em 0;
+  overflow-x: auto;
+
+  table {
+    min-width: max-content;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    overflow: auto;
+    margin: 1rem 0;
+  }
 }
 
 td,

package/source/js/components/tab.js

@@ -0,0 +1,242 @@
+/**
+ * Tabs Custom Element
+ *
+ * Usage:
+ * <x-tabs>
+ *   <x-tab title="JavaScript" sync-id="js" active>
+ *     Content here...
+ *   </x-tab>
+ *   <x-tab title="CSS" sync-id="css">
+ *     More content...
+ *   </x-tab>
+ * </x-tabs>
+ */
+
+let styleSheetInjected = false;
+let tabsCounter = 0;
+
+function escapeHtml(value) {
+  const span = document.createElement("span");
+  span.textContent = value;
+  return span.innerHTML;
+}
+
+class Tabs extends HTMLElement {
+  connectedCallback() {
+    this.injectStyles();
+    this.render();
+    if (!this.hasAttribute("data-initialized")) {
+      this.setupListeners();
+      this.setAttribute("data-initialized", "true");
+    }
+  }
+
+  injectStyles() {
+    if (styleSheetInjected) return;
+
+    const style = `
+      x-tabs {
+        display: block;
+        overflow: hidden;
+        margin: var(--tabs-margin, 10px auto);
+      }
+
+      .x-tabs-header {
+        display: flex;
+        gap: var(--tabs-header-gap, 0);
+        padding: var(--tabs-header-padding, 0 0.5rem);
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      .x-tabs-tab {
+        flex: 0 0 auto;
+        padding: var(--tabs-tab-padding, 0.5em 1rem);
+        border: none;
+        border-bottom: var(--tabs-tab-border-width, 2px) solid transparent;
+        background: transparent;
+        color: var(--tabs-tab-color, var(--subtext0));
+        font: inherit;
+        cursor: pointer;
+        position: relative;
+        transition:
+          color 0.3s ease,
+          border-color 0.3s ease;
+        outline: 0;
+        white-space: nowrap;
+      }
+
+      .x-tabs-tab:hover,
+      .x-tabs-tab[aria-selected="true"] {
+        color: var(--tabs-tab-active-color, var(--text));
+        border-color: var(--tabs-tab-active-border-color, var(--text));
+      }
+
+      .x-tabs-tab:focus-visible {
+        outline: 2px solid var(--tabs-focus-color, var(--text));
+        outline-offset: 2px;
+      }
+
+      .x-tabs-panels {
+        padding: var(--tabs-panel-padding, 0.8em 0 10px 0);
+      }
+
+      .x-tabs-panel[hidden] {
+        display: none;
+      }
+    `;
+
+    const styleEl = document.createElement("style");
+    styleEl.textContent = style;
+    document.head.appendChild(styleEl);
+    styleSheetInjected = true;
+  }
+
+  render() {
+    const tabs = Array.from(this.children).filter((child) => child.tagName.toLowerCase() === "x-tab");
+    if (tabs.length === 0) return;
+
+    const instanceId = tabsCounter++;
+    const activeIndex = Math.max(
+      0,
+      tabs.findIndex((tab) => tab.hasAttribute("active")),
+    );
+
+    const headers = tabs
+      .map((tab, index) => {
+        const title = tab.getAttribute("title") || `Tab ${index + 1}`;
+        const syncId = tab.getAttribute("sync-id") || "";
+        const selected = index === activeIndex;
+
+        return `
+          <button
+            class="x-tabs-tab"
+            type="button"
+            role="tab"
+            id="x-tabs-${instanceId}-tab-${index}"
+            aria-controls="x-tabs-${instanceId}-panel-${index}"
+            aria-selected="${selected}"
+            tabindex="${selected ? "0" : "-1"}"
+            data-index="${index}"
+            ${syncId ? `data-sync-id="${escapeHtml(syncId)}"` : ""}
+          >${escapeHtml(title)}</button>
+        `;
+      })
+      .join("");
+
+    const panels = tabs
+      .map((tab, index) => {
+        const content = Array.from(tab.childNodes)
+          .map((node) => (node.nodeType === Node.TEXT_NODE ? node.textContent : node.outerHTML))
+          .join("");
+        const selected = index === activeIndex;
+
+        return `
+          <div
+            class="x-tabs-panel content"
+            role="tabpanel"
+            id="x-tabs-${instanceId}-panel-${index}"
+            aria-labelledby="x-tabs-${instanceId}-tab-${index}"
+            data-index="${index}"
+            ${selected ? "" : "hidden"}
+          >${content}</div>
+        `;
+      })
+      .join("");
+
+    this.innerHTML = `
+      <div class="x-tabs-header" role="tablist">
+        ${headers}
+      </div>
+      <div class="x-tabs-panels">
+        ${panels}
+      </div>
+    `;
+  }
+
+  setupListeners() {
+    this.addEventListener("click", (event) => {
+      const target = event.target instanceof Element ? event.target : event.target.parentElement;
+      const button = target?.closest(".x-tabs-tab");
+      if (!button || !this.contains(button)) return;
+
+      this.activateTab(Number(button.dataset.index));
+      this.syncRelatedTabs(button.dataset.syncId);
+    });
+
+    this.addEventListener("keydown", (event) => {
+      const target = event.target instanceof Element ? event.target : event.target.parentElement;
+      const button = target?.closest(".x-tabs-tab");
+      if (!button || !this.contains(button)) return;
+
+      const buttons = this.tabButtons;
+      const currentIndex = buttons.indexOf(button);
+      let nextIndex = currentIndex;
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          nextIndex = (currentIndex + 1) % buttons.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = buttons.length - 1;
+          break;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      buttons[nextIndex]?.focus();
+      this.activateTab(nextIndex);
+      this.syncRelatedTabs(buttons[nextIndex]?.dataset.syncId);
+    });
+  }
+
+  get tabButtons() {
+    return Array.from(this.querySelectorAll(".x-tabs-tab"));
+  }
+
+  activateTab(index) {
+    if (!Number.isInteger(index)) return;
+
+    const buttons = this.tabButtons;
+    const panels = Array.from(this.querySelectorAll(".x-tabs-panel"));
+
+    buttons.forEach((button, buttonIndex) => {
+      const selected = buttonIndex === index;
+      button.setAttribute("aria-selected", String(selected));
+      button.tabIndex = selected ? 0 : -1;
+    });
+
+    panels.forEach((panel, panelIndex) => {
+      panel.hidden = panelIndex !== index;
+    });
+  }
+
+  syncRelatedTabs(syncId) {
+    if (!syncId) return;
+
+    document.querySelectorAll(".x-tabs-tab[data-sync-id]").forEach((button) => {
+      if (button.dataset.syncId !== syncId) return;
+
+      const tabs = button.closest("x-tabs");
+      if (!tabs || tabs === this) return;
+      tabs.activateTab(Number(button.dataset.index));
+    });
+  }
+}
+
+class Tab extends HTMLElement {}
+
+if (!customElements.get("x-tabs")) customElements.define("x-tabs", Tabs);
+if (!customElements.get("x-tab")) customElements.define("x-tab", Tab);
+
+export { Tab, Tabs };

package/source/js/main.js

@@ -1,19 +1,3 @@
-function tableWrapFix() {
-  document.querySelectorAll(".content table").forEach((table) => {
-    if (table.hasAttribute("data-nowrap") || table.parentElement.classList.contains("table-wrapper")) {
-      return;
-    }
-    // if width exceeds container, wrap it
-    const wrapper = document.createElement("div");
-    Object.assign(wrapper.style, {
-      width: "100%",
-      overflowX: "auto",
-    });
-    table.parentNode.insertBefore(wrapper, table);
-    wrapper.appendChild(table);
-  });
-}
-
 function twikoo_handler() {
   const el = document.getElementById("tko");
   if (!el) return;
@@ -42,87 +26,6 @@ function twikoo_handler() {
     delete el.dataset.initializing;
   });
 }
-// #region mdit@tab-plugin
-/**
- * 初始化页面上所有的 Tab 组件
- */
-
-function initializeTabs() {
-  document.querySelectorAll(".tabs-tabs-wrapper").forEach((container) => {
-    const buttons = container.querySelectorAll(".tabs-tab-button");
-    buttons.forEach((button) => {
-      button.removeEventListener("click", handleTabClick);
-      button.addEventListener("click", handleTabClick);
-    });
-  });
-}
-
-function handleTabClick() {
-  const tabContainer = this.closest(".tabs-tabs-wrapper");
-  const targetIndex = this.getAttribute("data-tab");
-  const syncId = this.getAttribute("data-id");
-  activateTab(tabContainer, targetIndex);
-  if (syncId) {
-    syncRelatedTabs(syncId);
-  }
-}
-
-/**
- * 激活指定容器中的特定 Tab
- * @param {HTMLElement} container - Tab 容器元素
- * @param {string} targetIndex - 要激活的 Tab 的 data-tab 值
- */
-function activateTab(container, targetIndex) {
-  // 先重置该容器内所有 Tab 的状态
-  resetTabsState(container);
-
-  const buttonToActivate = container.querySelector(`.tabs-tab-button[data-tab="${targetIndex}"]`);
-  const contentToActivate = container.querySelector(`.tabs-tab-content[data-index="${targetIndex}"]`);
-
-  if (buttonToActivate) {
-    buttonToActivate.classList.add("active");
-    buttonToActivate.setAttribute("data-active", "");
-  }
-  if (contentToActivate) {
-    contentToActivate.classList.add("active");
-    contentToActivate.setAttribute("data-active", "");
-  }
-}
-
-/**
- * 重置指定容器内所有 Tab 按钮和内容面板的状态
- * @param {HTMLElement} container - Tab 容器元素
- */
-function resetTabsState(container) {
-  const buttons = container.querySelectorAll(".tabs-tab-button");
-  const contents = container.querySelectorAll(".tabs-tab-content");
-
-  buttons.forEach((btn) => {
-    btn.classList.remove("active");
-    btn.removeAttribute("data-active");
-  });
-  contents.forEach((content) => {
-    content.classList.remove("active");
-    content.removeAttribute("data-active");
-  });
-}
-
-/**
- * 同步所有具有相同 data-id 的关联 Tab
- * @param {string} syncId - 用于同步的 data-id
- */
-function syncRelatedTabs(syncId) {
-  const relatedButtons = document.querySelectorAll(`.tabs-tab-button[data-id="${syncId}"]`);
-
-  relatedButtons.forEach((button) => {
-    const container = button.closest(".tabs-tabs-wrapper");
-    const targetIndex = button.getAttribute("data-tab");
-    activateTab(container, targetIndex);
-  });
-}
-
-// #endregion
-
 // #region markdown-exit shiki
 const SELECTORS = {
   figure: "figure.shiki",
@@ -649,7 +552,7 @@ function initArticleCommentPopover() {
 
   // Preload twikoo JS during idle time so comments render faster on click
   const tko = document.getElementById("tko");
-  if (tko && tko.dataset.jsUrl) {
+  if (tko?.dataset.jsUrl) {
     const preload = () => loadScriptOnce(tko.dataset.jsUrl, () => {});
     if (typeof requestIdleCallback === "function") {
       requestIdleCallback(preload, { timeout: 3000 });
@@ -703,8 +606,6 @@ function refreshNavbarIcons() {
 }
 
 function initPage() {
-  tableWrapFix();
-  initializeTabs();
   handleMermaid();
   addHighlightTool();
   initArticleSettings();