hexo-theme-gnix 6.2.0 → 8.0.0

package/source/js/archive-breadcrumb.js

@@ -0,0 +1,132 @@
+(() => {
+  function parseArchiveLocation(pathname, archiveDir) {
+    const segments = String(pathname || "")
+      .replace(/\/+$/, "")
+      .split("/")
+      .filter(Boolean);
+
+    const index = segments.lastIndexOf(archiveDir);
+    if (index === -1) return { year: null, month: null };
+
+    const yearRaw = segments[index + 1] || null;
+    const monthRaw = segments[index + 2] || null;
+
+    const year = yearRaw && /^\d{4}$/.test(yearRaw) ? Number(yearRaw) : null;
+    const month = monthRaw && /^\d{1,2}$/.test(monthRaw) ? Number(monthRaw) : null;
+
+    if (month && (month < 1 || month > 12)) return { year, month: null };
+    return { year, month };
+  }
+
+  function getMenuForTrigger(trigger) {
+    const menu = trigger?.nextElementSibling;
+    if (!menu?.classList.contains("archive-breadcrumb__menu")) return null;
+    return menu;
+  }
+
+  function getOptions(menu) {
+    return Array.from(menu.querySelectorAll(".archive-breadcrumb__option"));
+  }
+
+  function setSelected(menu, isSelectedFn) {
+    const options = getOptions(menu);
+    for (const option of options) {
+      option.setAttribute("aria-selected", isSelectedFn(option) ? "true" : "false");
+    }
+  }
+
+  function syncFromLocation(root) {
+    const archiveDir = root.dataset.archiveDir || "archives";
+    const { year, month } = parseArchiveLocation(window.location.pathname, archiveDir);
+
+    const yearLabel = root.querySelector('[data-label="year"]');
+    const monthLabel = root.querySelector('[data-label="month"]');
+    if (yearLabel) yearLabel.textContent = year ? String(year) : "*";
+    if (monthLabel) monthLabel.textContent = month ? String(month).padStart(2, "0") : "*";
+
+    const yearTrigger = root.querySelector('.archive-breadcrumb__picker[data-picker="year"] .archive-breadcrumb__trigger');
+    const yearMenu = yearTrigger ? getMenuForTrigger(yearTrigger) : null;
+    if (yearMenu) {
+      setSelected(yearMenu, (opt) => {
+        const text = opt.textContent?.trim();
+        if (!year) return text === "*";
+        return text === String(year);
+      });
+    }
+
+    const monthTrigger = root.querySelector('.archive-breadcrumb__picker[data-picker="month"] .archive-breadcrumb__trigger');
+    const monthMenu = monthTrigger ? getMenuForTrigger(monthTrigger) : null;
+    if (monthTrigger) monthTrigger.disabled = !year;
+    if (monthMenu) {
+      setSelected(monthMenu, (opt) => {
+        const text = opt.textContent?.trim();
+        if (!year) return text === "*";
+        if (!month) return text === "*";
+        return text === String(month).padStart(2, "0");
+      });
+    }
+
+    closeAll(root);
+  }
+
+  function closeAll(root) {
+    const triggers = root.querySelectorAll(".archive-breadcrumb__trigger");
+    for (const trigger of triggers) {
+      trigger.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  function openMenu(trigger) {
+    if (trigger.disabled) return;
+    trigger.setAttribute("aria-expanded", "true");
+  }
+
+  function toggleMenu(trigger, root) {
+    if (trigger.disabled) return;
+    const expanded = trigger.getAttribute("aria-expanded") === "true";
+    closeAll(root);
+    if (!expanded) {
+      openMenu(trigger);
+    }
+  }
+
+  function navigateToOption(option) {
+    const href = option?.dataset?.href;
+    if (!href) return;
+    window.location.assign(href);
+  }
+
+  function init(root) {
+    root.addEventListener("click", (e) => {
+      const target = e.target.closest?.(".archive-breadcrumb__option, .archive-breadcrumb__trigger");
+      if (!target) {
+        closeAll(root);
+        return;
+      }
+
+      if (target.classList.contains("archive-breadcrumb__option")) {
+        e.preventDefault();
+        navigateToOption(target);
+        return;
+      }
+
+      if (target.classList.contains("archive-breadcrumb__trigger")) {
+        e.preventDefault();
+        toggleMenu(target, root);
+      }
+    });
+
+    syncFromLocation(root);
+  }
+
+  function initAll() {
+    const roots = document.querySelectorAll("[data-archive-breadcrumb]");
+    for (const root of roots) {
+      if (root._gnixArchiveBreadcrumbInited) continue;
+      root._gnixArchiveBreadcrumbInited = true;
+      init(root);
+    }
+  }
+
+  initAll();
+})();

package/source/js/busuanzi.js

@@ -1,13 +1,11 @@
 !(() => {
   const TYPES = ["site_pv", "site_uv", "page_pv", "page_uv"];
-  const script = document.currentScript;
-  const api = script.getAttribute("data-api") || "https://bsz.dusays.com:9001/api";
   const STORAGE_KEY = "bsz-id";
   const BASE = { site_pv: 12801, site_uv: 2450 };
 
   const update = () => {
     const xhr = new XMLHttpRequest();
-    xhr.open("POST", api, true);
+    xhr.open("POST", "https://bsz.dusays.com:9001/api", true);
 
     const token = localStorage.getItem(STORAGE_KEY);
     token && xhr.setRequestHeader("Authorization", `Bearer ${token}`);
@@ -33,13 +31,4 @@
   };
 
   update();
-
-  if (script.hasAttribute("pjax")) {
-    const pushState = history.pushState;
-    history.pushState = function (...args) {
-      pushState.apply(this, ...args);
-      update();
-    };
-    addEventListener("popstate", update);
-  }
 })();

package/source/js/components/accordion.js

@@ -0,0 +1,192 @@
+/**
+ * Accordion Custom Element
+ *
+ * Usage:
+ * <x-accordion>
+ *   <accordion-item title="Introduction">
+ *     Content here...
+ *   </accordion-item>
+ *   <accordion-item title="Design Patterns">
+ *     More content...
+ *   </accordion-item>
+ * </x-accordion>
+ */
+
+let styleSheetInjected = false;
+
+class Accordion extends HTMLElement {
+  connectedCallback() {
+    this.injectStyles();
+    this.render();
+    this.setupListeners();
+  }
+
+  injectStyles() {
+    if (styleSheetInjected) return;
+
+    const style = `
+      x-accordion {
+        display: block;
+        margin: 1em 0;
+      }
+
+      .accordion-item {
+        border-bottom: 1px solid var(--surface0);
+      }
+
+      .accordion-item:last-child {
+        border-bottom: none;
+      }
+
+      .accordion-header {
+        width: 100%;
+        padding: 16px 0;
+        border: none;
+        color: var(--text);
+        background: transparent;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        cursor: pointer;
+        transition: color 0.2s;
+        text-align: left;
+        & :hover {
+         color: var(--subtext0);
+        }
+      }
+
+      .accordion-icon {
+        font-size: 16px;
+        font-weight: 300;
+        color: var(--subtext0);
+        transition: transform 0.2s ease;
+        flex-shrink: 0;
+        display: inline-flex;
+        width: 16px;
+        justify-content: center;
+      }
+
+      .accordion-item.active .accordion-icon {
+        transform: rotate(45deg);
+      }
+
+      .accordion-content {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+      }
+
+      .accordion-content-inner {
+        padding: 0 0 16px 28px;
+        color: var(--subtext1);
+        font-size: 14px;
+        line-height: 1.6;
+      }
+    `;
+
+    const styleEl = document.createElement("style");
+    styleEl.textContent = style;
+    document.head.appendChild(styleEl);
+    styleSheetInjected = true;
+  }
+
+  render() {
+    const items = this.querySelectorAll("accordion-item");
+    if (items.length === 0) return; // Already rendered or empty
+
+    const itemsHTML = Array.from(items)
+      .map((item) => {
+        const title = item.getAttribute("title") || "Item";
+
+        // Filter out nested accordion-item elements to handle malformed HTML
+        const contentNodes = Array.from(item.childNodes).filter((node) => {
+          return node.nodeType !== Node.ELEMENT_NODE || node.tagName.toLowerCase() !== "accordion-item";
+        });
+
+        const content = contentNodes
+          .map((node) => {
+            return node.nodeType === Node.TEXT_NODE ? node.textContent : node.outerHTML;
+          })
+          .join("");
+
+        return `
+        <div class="accordion-item">
+          <button class="accordion-header" aria-expanded="false">
+            <span class="accordion-icon">+</span>
+            <span>${title}</span>
+          </button>
+          <div class="accordion-content">
+            <div class="accordion-content-inner content">${content}</div>
+          </div>
+        </div>
+      `;
+      })
+      .join("");
+
+    this.innerHTML = itemsHTML;
+  }
+
+  setupListeners() {
+    const headers = this.querySelectorAll(".accordion-header");
+
+    headers.forEach((header) => {
+      header.addEventListener("click", () => {
+        const item = header.closest(".accordion-item");
+        const isActive = item.classList.contains("active");
+        const content = item.querySelector(".accordion-content");
+
+        // Close all items (accordion mode - single expansion)
+        this.querySelectorAll(".accordion-item").forEach((i) => {
+          i.classList.remove("active");
+          i.querySelector(".accordion-header").setAttribute("aria-expanded", "false");
+          const c = i.querySelector(".accordion-content");
+          if (c) c.style.maxHeight = null;
+        });
+
+        // Open clicked item if it wasn't active
+        if (!isActive) {
+          item.classList.add("active");
+          header.setAttribute("aria-expanded", "true");
+          if (content) {
+            content.style.maxHeight = `${content.scrollHeight}px`;
+          }
+        }
+      });
+    });
+  }
+
+  // Public method to expand a specific item by index
+  expandItem(index) {
+    const items = this.querySelectorAll(".accordion-item");
+    if (items[index]) {
+      items[index].querySelector(".accordion-header").click();
+    }
+  }
+
+  // Public method to collapse all items
+  collapseAll() {
+    this.querySelectorAll(".accordion-item").forEach((item) => {
+      item.classList.remove("active");
+      item.querySelector(".accordion-header").setAttribute("aria-expanded", "false");
+      const content = item.querySelector(".accordion-content");
+      if (content) content.style.maxHeight = null;
+    });
+  }
+
+  static get observedAttributes() {
+    return ["single-expand"];
+  }
+
+  attributeChangedCallback() {
+    // Future: support multi-expand mode
+  }
+}
+
+// Define accordion-item as a placeholder for slot content
+class AccordionItem extends HTMLElement {}
+
+// Register custom elements
+customElements.define("x-accordion", Accordion);
+customElements.define("accordion-item", AccordionItem);
+
+export { Accordion, AccordionItem };

package/source/js/components/chat.js

@@ -0,0 +1,239 @@
+/**
+ * Chat Component Custom Element
+ * Displays group chat conversations with avatars, names, timestamps, and messages
+ *
+ * Usage:
+ * <x-chat>
+ *   <chat-message
+ *     name="User Name"
+ *     avatar="/path/to/avatar.png"
+ *     timestamp="2024-01-15 10:30"
+ *     is-me
+ *   >
+ *     Message content here...
+ *   </chat-message>
+ *   <chat-message name="Other User" avatar="/path/to/avatar.png" timestamp="2024-01-15 10:32">
+ *     Another message...
+ *   </chat-message>
+ * </x-chat>
+ *
+ * Or with data attribute:
+ * <x-chat messages='[{"name": "User", "content": "Hello", "timestamp": "10:30"}]'></x-chat>
+ */
+
+const CHAT_STYLES = `
+  :host {
+    display: block;
+    font-family: var(--font-sans, sans-serif);
+  }
+
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    background: var(--base, #1e1e2e);
+    border-radius: 12px;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .chat-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chat-message {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .chat-message.is-me {
+    flex-direction: row-reverse;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .avatar-placeholder {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text, #cdd6f4);
+    flex-shrink: 0;
+    background: var(--surface1, #45475a);
+  }
+
+  .message-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 70%;
+  }
+
+  .chat-message.is-me .message-content {
+    align-items: flex-end;
+  }
+
+  .message-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+  }
+
+  .chat-message.is-me .message-header {
+    flex-direction: row-reverse;
+  }
+
+  .sender-name {
+    font-weight: 600;
+    color: var(--subtext1, #bac2de);
+  }
+
+  .timestamp {
+    color: var(--subtext0, #a6adc8);
+    font-size: 11px;
+  }
+
+  .message-bubble {
+    padding: 10px 14px;
+    border-radius: 16px;
+    background: var(--surface1, #45475a);
+    color: var(--text, #cdd6f4);
+    line-height: 1.5;
+    font-size: 14px;
+    word-wrap: break-word;
+  }
+
+  .chat-message.is-me .message-bubble {
+    background: var(--blue, #89b4fa);
+    color: var(--base, #1e1e2e);
+  }
+
+  .message-bubble a {
+    color: var(--blue, #89b4fa);
+    text-decoration: underline;
+  }
+
+  .message-bubble code {
+    font-family: var(--font-mono, 'Maple Mono', 'Fira Code', monospace);
+    font-size: 13px;
+    background: var(--mantle, #181825);
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    color: var(--subtext0, #a6adc8);
+  }
+`;
+
+class Chat extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  getMessagesFromSlots() {
+    const messages = this.querySelectorAll("chat-message");
+    return Array.from(messages).map((msg) => ({
+      name: msg.getAttribute("name") || "Anonymous",
+      avatar: msg.getAttribute("avatar") || "",
+      timestamp: msg.getAttribute("timestamp") || "",
+      isMe: msg.hasAttribute("is-me"),
+      content: msg.innerHTML.trim(),
+    }));
+  }
+
+  getMessagesFromAttribute() {
+    const data = this.getAttribute("messages");
+    if (!data) return [];
+    try {
+      return JSON.parse(data);
+    } catch (e) {
+      console.warn("Invalid messages JSON:", e);
+      return [];
+    }
+  }
+
+  render() {
+    const messages = this.getMessagesFromSlots();
+
+    const messagesHTML = messages.map((msg) => this.renderMessage(msg)).join("");
+
+    this.shadowRoot.innerHTML = `
+      <style>${CHAT_STYLES}</style>
+      <div class="chat-container">
+        ${messagesHTML}
+      </div>
+    `;
+  }
+
+  renderMessage(msg) {
+    const initial = msg.name.charAt(0).toUpperCase();
+    const avatarHTML = msg.avatar ? `<img src="${msg.avatar}" alt="${msg.name}" class="avatar" loading="lazy"/>` : `<div class="avatar-placeholder">${initial}</div>`;
+
+    return `
+      <div class="chat-message ${msg.isMe ? "is-me" : ""}">
+        ${avatarHTML}
+        <div class="message-content">
+          <div class="message-header">
+            <span class="sender-name">${msg.name}</span>
+            <span class="timestamp">${msg.timestamp}</span>
+          </div>
+          <div class="message-bubble">${msg.content}</div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get observedAttributes() {
+    return ["messages"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "messages" && oldValue !== newValue) {
+      this.render();
+    }
+  }
+
+  // Public API
+  addMessage(msg) {
+    const messages = this.getMessagesFromAttribute();
+    messages.push(msg);
+    this.setAttribute("messages", JSON.stringify(messages));
+  }
+
+  clear() {
+    this.innerHTML = "";
+    this.render();
+  }
+}
+
+// Placeholder for slot content
+class ChatMessage extends HTMLElement {}
+
+// Register custom elements
+customElements.define("x-chat", Chat);
+customElements.define("chat-message", ChatMessage);
+
+export { Chat, ChatMessage };