hexo-theme-gnix 7.0.0 → 9.0.0

package/source/js/archive-breadcrumb.js

@@ -20,7 +20,7 @@
 
   function getMenuForTrigger(trigger) {
     const menu = trigger?.nextElementSibling;
-    if (!menu || !menu.classList.contains("archive-breadcrumb__menu")) return null;
+    if (!menu?.classList.contains("archive-breadcrumb__menu")) return null;
     return menu;
   }
 
@@ -129,8 +129,4 @@
   }
 
   initAll();
-
-  if (typeof swup !== "undefined") {
-    swup.hooks.on("page:view", 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/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 };

package/source/js/components/image-carousel.js

@@ -0,0 +1,410 @@
+/**
+ * Image Carousel Custom Element
+ * A responsive image carousel with fade transitions and autoplay
+ *
+ * Usage:
+ * <image-carousel autoplay interval="4000">
+ *   ![alt text](image-url)
+ *   ![alt text](image-url)
+ * </image-carousel>
+ *
+ * Attributes:
+ * - autoplay: Enable automatic slide advancement
+ * - interval: Autoplay interval in ms (default: 3000)
+ * - ratio: Aspect ratio as CSS value (default: 3/2)
+ */
+
+// Shared stylesheet — parsed once, reused across all carousel instances
+let _sheet;
+
+const STYLES = `
+  :host {
+    display: block;
+    margin: 1.5em 0;
+  }
+
+  .carousel {
+    outline: none;
+  }
+
+  .carousel:focus-visible {
+    outline: 2px solid var(--blue, #89b4fa);
+    outline-offset: 2px;
+  }
+
+  .stage {
+    position: relative;
+    border-radius: var(--radius, 12px);
+    overflow: hidden;
+    background: var(--crust, #11111b);
+    contain: content;
+  }
+
+  .slides {
+    position: relative;
+    width: 100%;
+    aspect-ratio: var(--carousel-ratio, 3/2);
+  }
+
+  .slide {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1);
+    pointer-events: none;
+  }
+
+  .slide.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .slide figure {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .slide figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 2rem 1.25rem 0.875rem;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
+    color: #fff;
+    font-size: 0.875rem;
+    font-style: italic;
+    font-family: var(--font-serif, serif);
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.28);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    color: white;
+    border: none;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: background 0.2s ease-out, opacity 0.2s ease-out;
+    z-index: 2;
+    padding: 0;
+  }
+
+  .nav svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .carousel:hover .nav,
+  .carousel:focus-within .nav {
+    opacity: 1;
+  }
+
+  .nav:hover {
+    background: rgba(0, 0, 0, 0.55);
+  }
+
+  .nav:focus-visible {
+    opacity: 1;
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+
+  .nav:active {
+    transform: translateY(-50%) scale(0.92);
+  }
+
+  .prev { left: 0.75rem; }
+  .next { right: 0.75rem; }
+
+  .dots {
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+    padding: 0.5rem 0 0;
+  }
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: none;
+    background: var(--overlay0, rgba(127, 127, 127, 0.45));
+    cursor: pointer;
+    padding: 0;
+    transition: background 0.2s ease-out, transform 0.2s ease-out;
+  }
+
+  .dot:hover {
+    background: var(--overlay1);
+  }
+
+  .dot:focus-visible {
+    outline: 2px solid var(--blue, #89b4fa);
+    outline-offset: 2px;
+  }
+
+  .dot.active {
+    background: var(--text);
+    transform: scale(1.25);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .slide { transition: none; }
+    .nav, .dot { transition: none; }
+  }
+`;
+
+class ImageCarousel extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._currentIndex = 0;
+    this._timer = null;
+    this._images = [];
+    this._slides = [];
+    this._dots = [];
+    this._touchStartX = 0;
+    this._observer = null;
+    this._isVisible = true;
+    this._handleVisibility = () => {
+      if (document.hidden) this._stopAutoplay();
+      else if (this._isVisible && this.hasAttribute("autoplay")) this._startAutoplay();
+    };
+  }
+
+  connectedCallback() {
+    this._images = this._collectImages();
+    this.render();
+    if (this._images.length > 1) {
+      this._setupListeners();
+      this._observeVisibility();
+    }
+    if (this.hasAttribute("autoplay") && this._images.length > 1) {
+      this._startAutoplay();
+    }
+  }
+
+  disconnectedCallback() {
+    this._stopAutoplay();
+    this._observer?.disconnect();
+    document.removeEventListener("visibilitychange", this._handleVisibility);
+  }
+
+  _collectImages() {
+    return Array.from(this.querySelectorAll("img")).map((img) => ({
+      src: img.src || img.getAttribute("src"),
+      alt: img.alt || "",
+      srcset: img.getAttribute("srcset") || "",
+    }));
+  }
+
+  _getInterval() {
+    return parseInt(this.getAttribute("interval") || "3000", 10);
+  }
+
+  _startAutoplay() {
+    this._stopAutoplay();
+    this._timer = setInterval(() => {
+      this._goTo((this._currentIndex + 1) % this._images.length);
+    }, this._getInterval());
+  }
+
+  _stopAutoplay() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
+
+  _goTo(index) {
+    const prev = this._currentIndex;
+    this._currentIndex = index;
+    this._toggleSlide(prev, false);
+    this._toggleSlide(index, true);
+  }
+
+  _toggleSlide(i, active) {
+    this._slides[i]?.classList.toggle("active", active);
+    const dot = this._dots[i];
+    if (dot) {
+      dot.classList.toggle("active", active);
+      dot.setAttribute("aria-selected", String(active));
+    }
+  }
+
+  render() {
+    const images = this._images;
+    const ratio = this.getAttribute("ratio") || "3/2";
+
+    if (images.length === 0) {
+      this.shadowRoot.innerHTML = "";
+      return;
+    }
+
+    if (!_sheet) {
+      _sheet = new CSSStyleSheet();
+      _sheet.replaceSync(STYLES);
+    }
+    this.shadowRoot.adoptedStyleSheets = [_sheet];
+    this.style.setProperty("--carousel-ratio", ratio);
+
+    const slidesHTML = images
+      .map(
+        (img, i) => `
+      <div class="slide${i === 0 ? " active" : ""}" role="tabpanel" aria-label="${img.alt || `Slide ${i + 1}`}">
+        <figure>
+          <img src="${img.src}"${img.srcset ? ` srcset="${img.srcset}"` : ""} alt="${img.alt}" loading="${i === 0 ? "eager" : "lazy"}">
+          ${img.alt ? `<figcaption>${img.alt}</figcaption>` : ""}
+        </figure>
+      </div>
+    `,
+      )
+      .join("");
+
+    const navHTML =
+      images.length > 1
+        ? `<button class="nav prev" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg></button>
+           <button class="nav next" aria-label="Next slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg></button>`
+        : "";
+
+    const dotsHTML =
+      images.length > 1
+        ? `<div class="dots" role="tablist" aria-label="Slide navigation">
+        ${images.map((_img, i) => `<button class="dot${i === 0 ? " active" : ""}" data-index="${i}" role="tab" aria-label="Slide ${i + 1}" aria-selected="${i === 0}"></button>`).join("")}
+      </div>`
+        : "";
+
+    this.shadowRoot.innerHTML = `
+      <div class="carousel" role="region" aria-label="Image carousel" tabindex="0">
+        <div class="stage">
+          <div class="slides">${slidesHTML}</div>
+          ${navHTML}
+        </div>
+        ${dotsHTML}
+      </div>
+      <slot style="display:none"></slot>
+    `;
+
+    this._slides = Array.from(this.shadowRoot.querySelectorAll(".slide"));
+    this._dots = Array.from(this.shadowRoot.querySelectorAll(".dot"));
+  }
+
+  _setupListeners() {
+    const root = this.shadowRoot;
+    const carousel = root.querySelector(".carousel");
+    const n = this._images.length;
+
+    root.querySelector(".prev")?.addEventListener("click", () => {
+      this._resetAutoplay();
+      this._goTo((this._currentIndex - 1 + n) % n);
+    });
+
+    root.querySelector(".next")?.addEventListener("click", () => {
+      this._resetAutoplay();
+      this._goTo((this._currentIndex + 1) % n);
+    });
+
+    root.querySelector(".dots")?.addEventListener("click", (e) => {
+      const dot = e.target.closest(".dot");
+      if (!dot) return;
+      this._resetAutoplay();
+      this._goTo(parseInt(dot.dataset.index, 10));
+    });
+
+    // Pause autoplay on hover
+    carousel.addEventListener("mouseenter", () => this._stopAutoplay());
+    carousel.addEventListener("mouseleave", () => {
+      if (this.hasAttribute("autoplay")) this._startAutoplay();
+    });
+
+    // Keyboard navigation
+    carousel.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft") {
+        this._resetAutoplay();
+        this._goTo((this._currentIndex - 1 + n) % n);
+      } else if (e.key === "ArrowRight") {
+        this._resetAutoplay();
+        this._goTo((this._currentIndex + 1) % n);
+      }
+    });
+
+    // Touch/swipe support
+    carousel.addEventListener(
+      "touchstart",
+      (e) => {
+        this._touchStartX = e.touches[0].clientX;
+      },
+      { passive: true },
+    );
+
+    carousel.addEventListener(
+      "touchend",
+      (e) => {
+        const dx = e.changedTouches[0].clientX - this._touchStartX;
+        if (Math.abs(dx) > 40) {
+          this._resetAutoplay();
+          this._goTo(dx < 0 ? (this._currentIndex + 1) % n : (this._currentIndex - 1 + n) % n);
+        }
+      },
+      { passive: true },
+    );
+  }
+
+  _observeVisibility() {
+    this._observer = new IntersectionObserver(([entry]) => {
+      this._isVisible = entry.isIntersecting;
+      if (!entry.isIntersecting) {
+        this._stopAutoplay();
+      } else if (this.hasAttribute("autoplay")) {
+        this._startAutoplay();
+      }
+    });
+    this._observer.observe(this);
+    document.addEventListener("visibilitychange", this._handleVisibility);
+  }
+
+  _resetAutoplay() {
+    if (this.hasAttribute("autoplay")) {
+      this._stopAutoplay();
+      this._startAutoplay();
+    }
+  }
+
+  static get observedAttributes() {
+    return ["autoplay", "interval"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this._images.length) return;
+    if (name === "autoplay") {
+      newValue !== null ? this._startAutoplay() : this._stopAutoplay();
+    }
+    if (name === "interval" && this._timer) {
+      this._startAutoplay();
+    }
+  }
+}
+
+customElements.define("image-carousel", ImageCarousel);
+
+export { ImageCarousel };