@mintfolio/theme-verdant 0.2.0

package/scripts/article.ts

@@ -0,0 +1,42 @@
+import { navigate } from 'astro:transitions/client';
+import { ARTICLE_BACK_NAV_STORAGE_KEY, resolveStoredArticleBackHref } from '../utils/blogNavigation';
+import { readStorage } from '../utils/storage';
+import { onPage } from './lifecycle';
+import { initTocDrawer } from './toc';
+import { initLightbox } from './lightbox';
+import { readArticleOrigin, persistArticleOrigin } from './articleOrigin';
+import { initArticleTables } from './articleTables';
+
+onPage('.blog-post', (_root, scope) => {
+  document.documentElement.classList.add('blog-article-page');
+  scope.add(() => document.documentElement.classList.remove('blog-article-page'));
+  const origin = readArticleOrigin();
+  // Keep the return target when an article heading creates a new history entry.
+  window.addEventListener('hashchange', () => {
+    if (origin) persistArticleOrigin(origin);
+  }, { signal: scope.signal });
+  document.getElementById('back-btn')?.addEventListener(
+    'click',
+    () => {
+      const currentIndex: unknown = history.state?.index;
+      if (origin && typeof currentIndex === 'number' && origin.index < currentIndex) {
+        history.go(origin.index - currentIndex);
+        return;
+      }
+      const href = resolveStoredArticleBackHref({
+        storedHref: origin?.href ?? readStorage('session', ARTICLE_BACK_NAV_STORAGE_KEY),
+        currentPath: location.pathname,
+        currentOrigin: location.origin,
+        fallbackHref: document.body.dataset.archiveHref ?? location.href,
+      });
+      void navigate(href);
+    },
+    { signal: scope.signal },
+  );
+});
+
+onPage('.article-prose', (root, scope) => {
+  initTocDrawer(scope);
+  initLightbox(root, scope);
+  initArticleTables(root, scope);
+});

package/scripts/articleOrigin.ts

@@ -0,0 +1,31 @@
+interface ArticleOrigin {
+  href: string;
+  index: number;
+}
+
+const stateKey = 'personalSiteArticleOrigin';
+let pending: { destination: string; origin: ArticleOrigin } | null = null;
+
+/** Capture the actual history entry so article anchors can be skipped on return. */
+export function rememberArticleOrigin(destination: string, href: string): void {
+  const index: unknown = history.state?.index;
+  pending = typeof index === 'number' && Number.isInteger(index)
+    ? { destination, origin: { href, index } }
+    : null;
+}
+
+export function persistArticleOrigin(origin: ArticleOrigin): void {
+  history.replaceState({ ...history.state, [stateKey]: origin }, '');
+}
+
+export function readArticleOrigin(): ArticleOrigin | null {
+  const candidate: Partial<ArticleOrigin> | undefined = pending?.destination === location.pathname
+    ? pending.origin
+    : history.state?.[stateKey];
+  pending = null;
+  if (typeof candidate?.href !== 'string' || typeof candidate.index !== 'number' || !Number.isInteger(candidate.index)) return null;
+  if (new URL(candidate.href, location.origin).origin !== location.origin) return null;
+  const origin = { href: candidate.href, index: candidate.index };
+  persistArticleOrigin(origin);
+  return origin;
+}

package/scripts/articleTables.ts

@@ -0,0 +1,15 @@
+import type { PageScope } from './lifecycle';
+
+export function initArticleTables(root: HTMLElement, scope: PageScope): void {
+  for (const table of root.querySelectorAll('table')) {
+    if (table.parentElement?.classList.contains('table-scroll-wrap')) continue;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'table-scroll-wrap';
+    table.parentNode?.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+    scope.add(() => {
+      wrapper.parentNode?.insertBefore(table, wrapper);
+      wrapper.remove();
+    });
+  }
+}

package/scripts/blog.ts

@@ -0,0 +1,26 @@
+import { onPage } from './lifecycle';
+import { createPostList } from './postList';
+import { createPostFilters, readFiltersFromUrl, writeFiltersToUrl } from './postFilters';
+import { createTagFold } from './tagFold';
+
+onPage('.blog-page', (_root, scope) => {
+  const list = createPostList(scope);
+  const fold = createTagFold(
+    document.getElementById('tags-filter'),
+    document.getElementById('blog-tags-filter-toggle'),
+    scope,
+  );
+  const input = document.querySelector<HTMLInputElement>('#search-input');
+  createPostFilters(
+    list.items,
+    input,
+    scope,
+    (filters) => {
+      const url = writeFiltersToUrl(filters);
+      if (url.href !== window.location.href) window.history.replaceState(window.history.state, '', url);
+      list.filter(filters);
+      fold.refresh();
+    },
+    readFiltersFromUrl(),
+  );
+});

package/scripts/codeBlocks.ts

@@ -0,0 +1,172 @@
+import { copyText, resolveCodeLanguage, extractCodeText } from '@mintfolio/core/client';
+import { onPage } from './lifecycle';
+
+function createIcon(kind: 'clipboard' | 'check' | 'error'): SVGSVGElement {
+  const namespace = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(namespace, 'svg');
+  const attributes = { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true' };
+  for (const [name, value] of Object.entries(attributes)) svg.setAttribute(name, value);
+  const append = (name: 'path' | 'rect' | 'circle', attributes: Record<string, string>): void => {
+    const element = document.createElementNS(namespace, name);
+    for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+    svg.appendChild(element);
+  };
+  if (kind === 'clipboard') {
+    append('rect', { x: '9', y: '9', width: '13', height: '13', rx: '2', ry: '2' });
+    append('path', { d: 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' });
+  } else if (kind === 'check') {
+    append('path', { d: 'M20 6 9 17l-5-5' });
+  } else {
+    append('circle', { cx: '12', cy: '12', r: '9' });
+    append('path', { d: 'M12 8v5 M12 16h.01' });
+  }
+  return svg;
+}
+
+function getRenderedLines(code: HTMLElement, rawText: string): HTMLElement[] {
+  const renderedLines = Array.from(code.children).filter(
+    (child): child is HTMLElement => child instanceof HTMLElement && child.classList.contains('line'),
+  );
+  if (renderedLines.length > 0) {
+    return renderedLines;
+  }
+
+  const fragment = document.createDocumentFragment();
+  const nextLines = rawText.split('\n').map((lineText) => {
+    const line = document.createElement('span');
+    line.className = 'line';
+
+    if (lineText.length > 0) {
+      line.textContent = lineText;
+    }
+
+    fragment.appendChild(line);
+    return line;
+  });
+
+  code.textContent = '';
+  code.appendChild(fragment);
+  return nextLines;
+}
+
+function createCodeGutter(code: HTMLElement, rawText: string): HTMLDivElement {
+  const lines = getRenderedLines(code, rawText);
+  const gutter = document.createElement('div');
+  gutter.className = 'code-block-gutter';
+  gutter.setAttribute('aria-hidden', 'true');
+  // Reuse every Shiki token node, removing only the inter-row formatting newlines.
+  code.replaceChildren(...lines);
+  lines.forEach((line, index) => {
+    line.classList.add('code-block-row');
+    const lineNumber = document.createElement('span');
+    lineNumber.className = 'code-block-line-number';
+    lineNumber.textContent = String(index + 1);
+    gutter.appendChild(lineNumber);
+  });
+  return gutter;
+}
+
+function createToolbar(languageLabel: string): HTMLDivElement {
+  const toolbar = document.createElement('div');
+  toolbar.className = 'code-block-toolbar';
+  const controls = document.createElement('div');
+  controls.className = 'code-block-window-controls';
+  controls.setAttribute('aria-hidden', 'true');
+  for (const color of ['red', 'yellow', 'green']) {
+    const dot = document.createElement('span');
+    dot.className = `code-block-window-dot is-${color}`;
+    controls.appendChild(dot);
+  }
+  const language = document.createElement('span');
+  language.className = 'code-block-language';
+  language.textContent = languageLabel;
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'code-copy-btn';
+  button.setAttribute('aria-label', '复制代码');
+  button.title = '复制代码';
+  button.appendChild(createIcon('clipboard'));
+  toolbar.append(controls, language, button);
+
+  return toolbar;
+}
+
+function enhancePreBlock(pre: HTMLPreElement, code: HTMLElement, rawText: string): (() => void) | null {
+  let toolbar = pre.closest('.code-block-shell')?.querySelector<HTMLDivElement>('.code-block-toolbar');
+  if (!toolbar) {
+    const languageLabel = resolveCodeLanguage(pre, code);
+    const gutter = createCodeGutter(code, rawText);
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'code-block-shell';
+    wrapper.style.setProperty('--code-block-line-digits', String(Math.max(2, String(gutter.childElementCount).length)));
+
+    toolbar = createToolbar(languageLabel);
+    const scroll = document.createElement('div');
+    scroll.className = 'code-block-scroll';
+
+    pre.parentNode?.insertBefore(wrapper, pre);
+    wrapper.append(toolbar, scroll);
+    scroll.append(gutter, pre);
+    pre.tabIndex = 0;
+    pre.setAttribute('aria-label', `${languageLabel} 代码`);
+
+    pre.dataset.codeBlockEnhanced = '1';
+  }
+
+  const copyButton = toolbar.querySelector('.code-copy-btn');
+  if (!copyButton) {
+    return null;
+  }
+
+  let resetTimer: number | null = null;
+  let disposed = false;
+
+  const resetCopyState = () => {
+    copyButton.replaceChildren(createIcon('clipboard'));
+    copyButton.classList.remove('is-copied');
+    copyButton.classList.remove('is-copy-failed');
+    copyButton.setAttribute('aria-label', '复制代码');
+    copyButton.setAttribute('title', '复制代码');
+    resetTimer = null;
+  };
+
+  const onCopy = async () => {
+    const copied = await copyText(rawText);
+    if (disposed) return;
+    copyButton.replaceChildren(createIcon(copied ? 'check' : 'error'));
+    copyButton.classList.toggle('is-copied', copied);
+    copyButton.classList.toggle('is-copy-failed', !copied);
+    copyButton.setAttribute('aria-label', copied ? '复制成功' : '复制失败');
+    copyButton.setAttribute('title', copied ? '复制成功' : '复制失败');
+
+    if (resetTimer) {
+      window.clearTimeout(resetTimer);
+    }
+
+    resetTimer = window.setTimeout(resetCopyState, copied ? 1800 : 1500);
+  };
+
+  copyButton.addEventListener('click', onCopy);
+
+  return () => {
+    disposed = true;
+    if (resetTimer) {
+      window.clearTimeout(resetTimer);
+    }
+
+    copyButton.removeEventListener('click', onCopy);
+    resetCopyState();
+  };
+}
+
+onPage('.article-prose', (postContent, scope) => {
+  for (const pre of postContent.querySelectorAll('pre')) {
+    const code = pre.querySelector('code');
+    if (!code) continue;
+    const rawText = extractCodeText(code, pre);
+    if (!rawText.trim()) continue;
+    const dispose = enhancePreBlock(pre, code, rawText);
+    if (dispose) scope.add(dispose);
+  }
+});

package/scripts/hero.ts

@@ -0,0 +1,173 @@
+import type { PageScope } from './lifecycle';
+
+export function initHero(hero: HTMLElement, scope: PageScope): void {
+  const content = document.querySelector('.content-wrapper');
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  const options = { signal: scope.signal };
+  let collapsed = false;
+  let hintRequested = false;
+  const setCollapsed = (value: boolean): void => {
+    collapsed = value;
+    hero.classList.toggle('collapsed', value);
+    content?.classList.toggle('hero-collapsed', value);
+    hero.inert = value;
+    if (value && !hintRequested) {
+      hintRequested = true;
+      window.dispatchEvent(new CustomEvent('home:show-return-hint'));
+    }
+  };
+  const enterContent = (): void => {
+    history.replaceState(history.state, '', `${location.pathname}${location.search}#content`);
+    setCollapsed(true);
+    scope.frame(() => window.scrollTo({ top: 0, behavior: 'instant' }));
+  };
+  hero.querySelector('a[href="#content"]')?.addEventListener(
+    'click',
+    (event) => {
+      event.preventDefault();
+      enterContent();
+    },
+    options,
+  );
+  const indicator = hero.querySelector('.scroll-indicator');
+  indicator?.addEventListener('click', enterContent, options);
+  indicator?.addEventListener(
+    'keydown',
+    (event) => {
+      if (event instanceof KeyboardEvent && ['Enter', ' '].includes(event.key)) {
+        event.preventDefault();
+        enterContent();
+      }
+    },
+    options,
+  );
+  hero.addEventListener(
+    'wheel',
+    (event) => {
+      if (!collapsed && event.deltaY > 0) {
+        event.preventDefault();
+        enterContent();
+      }
+    },
+    { ...options, passive: false },
+  );
+  let touchY: number | null = null;
+  hero.addEventListener(
+    'touchstart',
+    (event) => {
+      touchY = event.touches[0]?.clientY ?? null;
+    },
+    { ...options, passive: true },
+  );
+  hero.addEventListener(
+    'touchmove',
+    (event) => {
+      if (!collapsed && touchY !== null && touchY - (event.touches[0]?.clientY ?? touchY) > 28) {
+        touchY = null;
+        enterContent();
+      }
+    },
+    { ...options, passive: true },
+  );
+  const restore = (): void => {
+    // Hydrating a history entry must not overwrite the router's restored scroll position.
+    if (window.location.hash === '#content') setCollapsed(true);
+    else if (!collapsed && window.scrollY > 8) setCollapsed(true);
+  };
+  window.addEventListener('hashchange', restore, options);
+  window.addEventListener(
+    'scroll',
+    () => {
+      if (!collapsed && window.scrollY > 8) {
+        history.replaceState(history.state, '', `${location.pathname}${location.search}#content`);
+        setCollapsed(true);
+      }
+    },
+    { ...options, passive: true },
+  );
+  window.addEventListener(
+    'home:return-to-hero',
+    () => {
+      setCollapsed(false);
+      history.replaceState(history.state, '', `${location.pathname}${location.search}`);
+      window.scrollTo({ top: 0, behavior: 'instant' });
+    },
+    options,
+  );
+  document.addEventListener('astro:page-load', restore, options);
+  restore();
+  const pause = (): void => {
+    hero.classList.toggle('is-paused', document.hidden);
+  };
+  document.addEventListener('visibilitychange', pause, options);
+  pause();
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry?.isIntersecting) return;
+      observer.disconnect();
+      for (const node of hero.querySelectorAll<HTMLElement>('[data-countup]')) {
+        const target = Number(node.dataset.countup);
+        if (!Number.isFinite(target) || reducedMotion.matches) continue;
+        const start = performance.now();
+        const tick = (now: number): void => {
+          const progress = Math.min((now - start) / 900, 1);
+          node.textContent = String(Math.round(target * (1 - (1 - progress) ** 3)));
+          if (progress < 1 && !collapsed) scope.frame(tick);
+          else node.textContent = String(target);
+        };
+        scope.frame(tick);
+      }
+    },
+    { threshold: 0.35 },
+  );
+  observer.observe(hero);
+  scope.add(() => observer.disconnect());
+  const gradient = hero.querySelector<HTMLElement>('.hero-gradient');
+  const pattern = hero.querySelector<HTMLElement>('.hero-pattern');
+  if (
+    !gradient ||
+    !pattern ||
+    reducedMotion.matches ||
+    navigator.maxTouchPoints > 0 ||
+    matchMedia('(pointer: coarse)').matches
+  )
+    return;
+  let targetX = 0;
+  let targetY = 0;
+  let x = 0;
+  let y = 0;
+  let pending = false;
+  const animate = (): void => {
+    pending = false;
+    if (collapsed || document.hidden) return;
+    x += (targetX - x) * 0.12;
+    y += (targetY - y) * 0.12;
+    gradient.style.transform = `translate3d(${x * 36}px, ${y * 36}px, 0)`;
+    pattern.style.transform = `translate3d(${x * -24}px, ${y * -24}px, 0)`;
+    if (Math.abs(targetX - x) + Math.abs(targetY - y) > 0.001) requestFrame();
+  };
+  const requestFrame = (): void => {
+    if (!pending) {
+      pending = true;
+      scope.frame(animate);
+    }
+  };
+  hero.addEventListener(
+    'mousemove',
+    (event) => {
+      const rect = hero.getBoundingClientRect();
+      targetX = (event.clientX - rect.left) / rect.width - 0.5;
+      targetY = (event.clientY - rect.top) / rect.height - 0.5;
+      requestFrame();
+    },
+    options,
+  );
+  hero.addEventListener(
+    'mouseleave',
+    () => {
+      targetX = targetY = 0;
+      requestFrame();
+    },
+    options,
+  );
+}

package/scripts/home.ts

@@ -0,0 +1,12 @@
+import { onPage } from './lifecycle';
+import { createPostList } from './postList';
+import { initHero } from './hero';
+import { initHomePanels } from './homePanels';
+import { initHotContent } from './hotContent';
+
+onPage('#hero', (hero, scope) => {
+  const list = createPostList(scope);
+  initHero(hero, scope);
+  initHomePanels(hero, list.items, scope);
+  initHotContent(scope);
+});

package/scripts/homePanels.ts

@@ -0,0 +1,100 @@
+import { navigate } from 'astro:transitions/client';
+import type { PageScope } from './lifecycle';
+import type { PostItem } from '../utils/types';
+import { createPostFilters, writeFiltersToUrl } from './postFilters';
+import { createTagFold } from './tagFold';
+
+export function initHomePanels(hero: HTMLElement, items: PostItem[], scope: PageScope): void {
+  const options = { signal: scope.signal };
+  const search = document.querySelector<HTMLDialogElement>('#search-modal');
+  const input = document.querySelector<HTMLInputElement>('#search-modal-input');
+  const searchToggle = document.getElementById('search-float-btn');
+  const sidebar = document.getElementById('sidebar');
+  const sidebarToggle = document.getElementById('sidebar-drawer-toggle');
+  const overlay = document.getElementById('sidebar-overlay');
+  const fold = createTagFold(
+    document.getElementById('tags-filter'),
+    document.getElementById('home-tags-filter-toggle'),
+    scope,
+  );
+  const filters = createPostFilters(items, input, scope, () => fold.refresh());
+  const apply = (): void => {
+    const url = writeFiltersToUrl(filters.value(), new URL(document.body.dataset.archiveHref ?? location.href, location.origin));
+    void navigate(`${url.pathname}${url.search}`);
+  };
+  searchToggle?.addEventListener(
+    'click',
+    () => {
+      search?.showModal();
+      fold.refresh();
+      input?.focus();
+    },
+    options,
+  );
+  document.getElementById('search-close-btn')?.addEventListener('click', () => search?.close(), options);
+  document.getElementById('search-apply-btn')?.addEventListener('click', apply, options);
+  search?.addEventListener(
+    'click',
+    (event) => {
+      if (event.target === search) search.close();
+    },
+    options,
+  );
+  input?.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        apply();
+      }
+    },
+    options,
+  );
+  const setSidebar = (open: boolean): void => {
+    sidebar?.classList.toggle('open', open);
+    overlay?.classList.toggle('open', open);
+    sidebarToggle?.classList.toggle('open', open);
+    sidebarToggle?.setAttribute('aria-expanded', String(open));
+    sidebarToggle?.setAttribute('aria-label', open ? '关闭侧边栏' : '打开侧边栏');
+    document.body.classList.toggle('sidebar-drawer-open', open);
+    document.body.style.overflow = open ? 'hidden' : '';
+  };
+  sidebarToggle?.addEventListener('click', () => setSidebar(!sidebar?.classList.contains('open')), options);
+  overlay?.addEventListener('click', () => setSidebar(false), options);
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.key === 'Escape' && sidebar?.classList.contains('open')) {
+        setSidebar(false);
+        sidebarToggle?.focus();
+      }
+    },
+    options,
+  );
+  let heroVisible = true;
+  const update = (): void => {
+    searchToggle?.classList.toggle('visible', !heroVisible);
+    sidebarToggle?.classList.toggle('visible', !heroVisible && window.innerWidth < 900);
+  };
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      heroVisible = entry?.isIntersecting ?? false;
+      update();
+    },
+    { threshold: 0.1 },
+  );
+  observer.observe(hero);
+  window.addEventListener(
+    'resize',
+    () => {
+      if (window.innerWidth >= 900) setSidebar(false);
+      update();
+    },
+    options,
+  );
+  scope.add(() => {
+    observer.disconnect();
+    search?.close();
+    setSidebar(false);
+  });
+}

package/scripts/hotContent.ts

@@ -0,0 +1,16 @@
+import type { PageScope } from './lifecycle';
+
+/** Scroll snapping is native; update the indicator only when scrolling settles. */
+export function initHotContent(scope: PageScope): void {
+  const list = document.querySelector<HTMLElement>('.hot-content-carousel');
+  const dots = Array.from(document.querySelectorAll<HTMLElement>('.hot-scroll-dot'));
+  const items = Array.from(list?.querySelectorAll<HTMLElement>('.hot-content-item') ?? []);
+  if (!list || dots.length < 2) return;
+  const update = (): void => {
+    const start = list.getBoundingClientRect().left;
+    const distances = items.map((item) => Math.abs(item.getBoundingClientRect().left - start));
+    const index = distances.indexOf(Math.min(...distances));
+    dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
+  };
+  list.addEventListener('scrollend', update, { signal: scope.signal });
+}

package/scripts/lifecycle.ts

@@ -0,0 +1,3 @@
+/** Public Core lifecycle shared with plain-page and client-router themes. */
+export { createPageScope, onPage } from '@mintfolio/core/client';
+export type { Cleanup, PageScope } from '@mintfolio/core/client';

package/scripts/lightbox.ts

@@ -0,0 +1,14 @@
+import { createLightboxController, type PageScope } from '@mintfolio/core/client';
+
+/** Verdant provides its controls; all preview behavior comes from Core. */
+export function initLightbox(root: HTMLElement, scope: PageScope): void {
+  const dialog = document.querySelector<HTMLDialogElement>('#image-lightbox');
+  const image = document.querySelector<HTMLImageElement>('#lightbox-image');
+  const viewport = document.getElementById('lightbox-viewport');
+  const zoomIn = document.querySelector<HTMLButtonElement>('#lightbox-zoom-in');
+  const zoomOut = document.querySelector<HTMLButtonElement>('#lightbox-zoom-out');
+  const zoomLevel = document.querySelector<HTMLOutputElement>('#lightbox-zoom-level');
+  const reset = document.getElementById('lightbox-reset');
+  if (!dialog || !image || !viewport || !zoomIn || !zoomOut || !zoomLevel || !reset) return;
+  createLightboxController({ root, dialog, image, viewport, zoomIn, zoomOut, zoomLevel, reset, close: document.getElementById('lightbox-close'), signal: scope.signal });
+}