@mintfolio/theme-verdant 0.2.0

package/scripts/toc.ts

@@ -0,0 +1,149 @@
+import { createTocController, type PageScope } from '@mintfolio/core/client';
+
+export function initTocDrawer(scope: PageScope): void {
+  const toggle = document.getElementById('toc-toggle');
+  const overlay = document.getElementById('toc-overlay');
+  const tocCard = document.getElementById('toc-card');
+  const progressBar = tocCard?.querySelector<HTMLElement>('.toc-progress');
+  const tocLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.toc-link'));
+  const floatRight = document.getElementById('ui-float-right');
+
+  if (!toggle || !overlay || !tocCard || tocLinks.length === 0 || !floatRight) {
+    return;
+  }
+
+  // 将 TOC 按钮移动到 ui-float-right 容器中
+  if (!floatRight.contains(toggle)) {
+    toggle.style.display = '';
+    floatRight.insertBefore(toggle, floatRight.firstChild);
+  }
+
+  const addDisposer = scope.add;
+
+  // Check if desktop mode
+  const isDesktop = () => window.innerWidth >= 1320;
+
+  // State: desktop default open, mobile/tablet default closed
+  let isOpen = isDesktop();
+
+  // Desktop: toggle sidebar visibility
+  const toggleDesktop = () => {
+    isOpen = !isOpen;
+    tocCard.classList.toggle('hidden', !isOpen);
+    toggle.classList.toggle('active', isOpen);
+    toggle.setAttribute('aria-expanded', String(isOpen));
+  };
+
+  // Mobile/Tablet: open drawer
+  const openDrawer = () => {
+    isOpen = true;
+    tocCard.classList.add('open');
+    overlay.classList.add('open');
+    toggle.classList.add('active');
+    toggle.setAttribute('aria-expanded', 'true');
+    document.body.style.overflow = 'hidden';
+  };
+
+  // Mobile/Tablet: close drawer
+  const closeDrawer = () => {
+    isOpen = false;
+    tocCard.classList.remove('open');
+    overlay.classList.remove('open');
+    toggle.classList.remove('active');
+    toggle.setAttribute('aria-expanded', 'false');
+    document.body.style.overflow = '';
+  };
+
+  // Toggle handler
+  const handleToggle = () => {
+    if (isDesktop()) {
+      toggleDesktop();
+    } else {
+      if (isOpen) {
+        closeDrawer();
+      } else {
+        openDrawer();
+      }
+    }
+  };
+
+  // Initialize state based on screen size
+  const initializeState = () => {
+    if (isDesktop()) {
+      // Desktop: default open
+      isOpen = true;
+      tocCard.classList.remove('hidden');
+      tocCard.classList.remove('open');
+      overlay.classList.remove('open');
+      toggle.classList.add('active');
+      toggle.setAttribute('aria-expanded', 'true');
+      document.body.style.overflow = '';
+    } else {
+      // Mobile/Tablet: default closed (使用 CSS 默认的隐藏状态)
+      isOpen = false;
+      tocCard.classList.remove('open');
+      tocCard.classList.remove('hidden');
+      overlay.classList.remove('open');
+      toggle.classList.remove('active');
+      toggle.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+    }
+  };
+
+  // Set initial state
+  initializeState();
+
+  // Event listeners
+  toggle.addEventListener('click', handleToggle);
+  addDisposer(() => toggle.removeEventListener('click', handleToggle));
+
+  overlay.addEventListener('click', closeDrawer);
+  addDisposer(() => overlay.removeEventListener('click', closeDrawer));
+
+  const headings = tocLinks.map((link) => {
+    try { return document.getElementById(decodeURIComponent(new URL(link.href).hash.slice(1))); }
+    catch { return null; }
+  }).filter((heading): heading is HTMLElement => heading !== null);
+  const toc = createTocController({
+    headings, links: tocLinks, activeClass: 'active', scrollActiveLink: true,
+    offset: () => window.innerWidth <= 768 ? 100 : 120,
+    onNavigate: () => { if (!isDesktop()) closeDrawer(); },
+    onProgress: (value) => {
+      tocCard.style.setProperty('--reading-progress', value + '%');
+      progressBar?.setAttribute('aria-valuenow', String(Math.round(value)));
+    },
+    signal: scope.signal,
+  });
+
+  // Escape key handler
+  const onEscClose = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isOpen && !isDesktop()) {
+      closeDrawer();
+      toggle.focus();
+    }
+  };
+  document.addEventListener('keydown', onEscClose);
+  addDisposer(() => document.removeEventListener('keydown', onEscClose));
+
+  // Resize handler - reinitialize on breakpoint change
+  let wasDesktop = isDesktop();
+  const onResize = () => {
+    const nowDesktop = isDesktop();
+    if (wasDesktop !== nowDesktop) {
+      initializeState();
+      wasDesktop = nowDesktop;
+    }
+    toc.refresh();
+  };
+  window.addEventListener('resize', onResize);
+  addDisposer(() => window.removeEventListener('resize', onResize));
+
+  // Initial updates
+  scope.frame(() => toc.refresh());
+
+  addDisposer(() => {
+    document.body.style.overflow = '';
+    // Relocking can remove the article without a page swap, including this relocated control.
+    toggle.remove();
+  });
+}

package/settings.ts

@@ -0,0 +1,21 @@
+import type { PublicImage } from '@mintfolio/theme-api';
+
+/** Verdant Theme settings, fully populated and validated by its own manifest. */
+export interface VerdantSettings extends Record<string, unknown> {
+  /** Visitor choices in localStorage take precedence over these initial appearance values. */
+  initialMode: 'auto' | 'light' | 'dark';
+  initialPalette: string;
+  /** Number of cards initially visible before the visitor loads more. */
+  homePageSize: number;
+  archivePageSize: number;
+  analyticsId: string;
+  /** Optional sidebar presentation; Core contains no Verdant-specific configuration. */
+  sidebar: {
+    sections: { contact: boolean; activity: boolean; tools: boolean };
+    tools: Array<{ name: string; description: string; url: string }>;
+    quote: { enabled: boolean; text: string; author: string };
+  };
+  /** Explicitly curated post identifiers and display images; Core resolves their public posts. */
+  home: { hotContent: { enabled: boolean; items: Array<{ postId: string; image: string | PublicImage }> } };
+  article: { footerImage: { enabled: boolean; src: string | PublicImage } };
+}

package/styles/fonts.css

@@ -0,0 +1,120 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Inter Light'),
+    local('Inter-Light'),
+    url('../assets/fonts/Inter-300.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Inter Regular'),
+    local('Inter-Regular'),
+    url('../assets/fonts/Inter-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Inter Medium'),
+    local('Inter-Medium'),
+    url('../assets/fonts/Inter-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Inter SemiBold'),
+    local('Inter-SemiBold'),
+    url('../assets/fonts/Inter-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Inter Bold'),
+    local('Inter-Bold'),
+    url('../assets/fonts/Inter-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('JetBrains Mono'),
+    local('JetBrainsMono-Regular'),
+    url('../assets/fonts/JetBrainsMono-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('JetBrains Mono Medium'),
+    local('JetBrainsMono-Medium'),
+    url('../assets/fonts/JetBrainsMono-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Playfair Display Regular'),
+    local('PlayfairDisplay-Regular'),
+    url('../assets/fonts/PlayfairDisplay-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Playfair Display Medium'),
+    local('PlayfairDisplay-Medium'),
+    url('../assets/fonts/PlayfairDisplay-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Playfair Display SemiBold'),
+    local('PlayfairDisplay-SemiBold'),
+    url('../assets/fonts/PlayfairDisplay-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Playfair Display Bold'),
+    local('PlayfairDisplay-Bold'),
+    url('../assets/fonts/PlayfairDisplay-700.woff2') format('woff2');
+}

package/styles/global.css

@@ -0,0 +1,146 @@
+@import "tailwindcss";
+
+body:has(dialog:modal) { overflow: hidden; }
+
+html[data-restoring-scroll='true'] { scroll-behavior: auto; }
+
+@media (prefers-reduced-motion: reduce) {
+  html:root { scroll-behavior: auto; }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  --browser-safe-area-max-bottom: env(safe-area-max-inset-bottom, 36px);
+  background-color: var(--color-bg);
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+body,
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.7;
+  overflow-x: hidden;
+}
+
+::selection {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* Paint a stable background behind Android's gesture bar as Chrome's chin retracts.
+   Keep its height constant; only bottom follows the changing safe-area inset. */
+.browser-bottom-background,
+dialog:modal::after {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--browser-safe-area-max-bottom));
+  height: var(--browser-safe-area-max-bottom);
+  background-color: var(--color-bg);
+  pointer-events: none;
+  z-index: 10000;
+}
+
+/* Modal dialogs paint above the document, so they need the same backing. */
+dialog:modal::after {
+  content: '';
+}
+
+input,
+textarea {
+  font-family: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ===== 焦点可见样式 ===== */
+:focus-visible {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ===== 跳过链接 ===== */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  padding: 0.75rem 1.5rem;
+  background: var(--color-secondary);
+  color: var(--color-bg);
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+  top: 1rem;
+}
+
+/* ===== 屏幕阅读器辅助类 ===== */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/styles/themes/happyhues/effects.css

@@ -0,0 +1,62 @@
+@layer components {
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-base);
+  }
+
+  .card:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+  }
+
+  .tag {
+    display: inline-block;
+    background: var(--color-tag-bg);
+    color: var(--color-tag-text);
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  .section-title {
+    color: var(--color-text-headline);
+    font-size: 2rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    padding-left: 2.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: 0.95rem;
+    transition: all var(--transition-fast);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(255, 216, 3, 0.2);
+  }
+
+  .search-input::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .glass-card {
+    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
+    backdrop-filter: blur(12px) saturate(120%);
+    -webkit-backdrop-filter: blur(12px) saturate(120%);
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-base);
+  }
+}

package/styles/themes/happyhues/index.css

@@ -0,0 +1,2 @@
+@import './theme.css';
+@import './effects.css';