@kamod-ch/preactpress 1.0.0 → 1.0.2

package/templates/hono/.preactpress/theme/Layout.tsx

@@ -1,143 +1,82 @@
-import type { ComponentChildren, FunctionalComponent, JSX } from 'preact'
-import { useEffect, useMemo, useState } from 'preact/hooks'
-import type { LayoutProps } from '@kamod-ch/preactpress/client'
-import Logo from './Logo.js'
-import ThemeToggle from './ThemeToggle.js'
-import './hono.css'
+import type { FunctionalComponent } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import {
+  createMdxHeadingComponents,
+  isActive,
+  normalizeLink,
+  slugifyHeading,
+  withBase,
+  type LayoutProps,
+} from "@kamod-ch/preactpress/client";
+import Logo from "./Logo.js";
+import ThemeToggle from "./ThemeToggle.js";
+import "./hono.css";
 
 interface SidebarItem {
-  text: string
-  link?: string
-  items?: SidebarItem[]
+  text: string;
+  link?: string;
+  items?: SidebarItem[];
 }
 
 interface SidebarGroup {
-  text?: string
-  items: SidebarItem[]
+  text?: string;
+  items: SidebarItem[];
 }
 
-type SocialLink = NonNullable<LayoutProps['themeConfig']['socialLinks']>[number]
+type SocialLink = NonNullable<LayoutProps["themeConfig"]["socialLinks"]>[number];
 
 const GITHUB_SVG =
-  '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
-
-function withBase(base: string, link: string): string {
-  if (/^(?:[a-z]+:)?\/\//i.test(link) || /^(?:data|mailto|tel):/i.test(link) || link.startsWith('#')) {
-    return link
-  }
-  const b = base === '/' ? '' : base.replace(/\/$/, '')
-  const l = link.startsWith('/') ? link : `/${link}`
-  return `${b}${l}`
-}
-
-function normalizeLink(link: string): string {
-  const clean = link.split(/[?#]/, 1)[0] || '/'
-  const prefixed = clean.startsWith('/') ? clean : `/${clean}`
-  return prefixed.replace(/\/$/, '') || '/'
-}
-
-function isActive(routePath: string, link: string | undefined): boolean {
-  if (!link || /^(?:[a-z]+:)?\/\//i.test(link)) return false
-  const route = normalizeLink(routePath)
-  const target = normalizeLink(link)
-  return route === target || (target !== '/' && route.startsWith(`${target}/`))
-}
-
-function childText(children: ComponentChildren): string {
-  if (children == null || typeof children === 'boolean') return ''
-  if (typeof children === 'string' || typeof children === 'number') return String(children)
-  if (Array.isArray(children)) return children.map(childText).join('')
-  if (typeof children === 'object' && 'props' in children) {
-    return childText(children.props.children as ComponentChildren)
-  }
-  return ''
-}
-
-function slugify(text: string): string {
-  const slug = text
-    .toLowerCase()
-    .trim()
-    .replace(/<[^>]+>/g, '')
-    .replace(/&[a-z0-9#]+;/gi, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-  return slug || 'section'
-}
+  '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>';
 
 function tagRoute(tag: string): string {
-  return `/tags/${slugify(tag)}`
+  return `/tags/${slugifyHeading(tag)}`;
 }
 
 function resolveSidebar(
-  sidebar: LayoutProps['themeConfig']['sidebar'],
-  routePath: string
+  sidebar: LayoutProps["themeConfig"]["sidebar"],
+  routePath: string,
 ): SidebarGroup[] {
-  if (!sidebar) return []
-  if (Array.isArray(sidebar)) return sidebar
+  if (!sidebar) return [];
+  if (Array.isArray(sidebar)) return sidebar;
 
-  const route = normalizeLink(routePath)
+  const route = normalizeLink(routePath);
   const entries = Object.entries(sidebar)
     .map(([prefix, groups]) => ({ prefix: normalizeLink(prefix), groups }))
-    .filter(({ prefix }) => prefix !== '/')
-    .sort((a, b) => b.prefix.length - a.prefix.length)
+    .filter(({ prefix }) => prefix !== "/")
+    .sort((a, b) => b.prefix.length - a.prefix.length);
 
   for (const { prefix, groups } of entries) {
-    if (route === prefix || route.startsWith(`${prefix}/`)) return groups
+    if (route === prefix || route.startsWith(`${prefix}/`)) return groups;
   }
 
-  return sidebar['/'] ?? sidebar[''] ?? []
+  return sidebar["/"] ?? sidebar[""] ?? [];
 }
 
 function flattenItems(items: SidebarItem[]): Array<{ text: string; link: string }> {
-  const out: Array<{ text: string; link: string }> = []
+  const out: Array<{ text: string; link: string }> = [];
   for (const item of items) {
-    if (item.link) out.push({ text: item.text, link: item.link })
-    if (item.items?.length) out.push(...flattenItems(item.items))
+    if (item.link) out.push({ text: item.text, link: item.link });
+    if (item.items?.length) out.push(...flattenItems(item.items));
   }
-  return out
+  return out;
 }
 
 function flattenSidebarItems(sidebar: SidebarGroup[]): Array<{ text: string; link: string }> {
-  return sidebar.flatMap((group) => flattenItems(group.items))
+  return sidebar.flatMap((group) => flattenItems(group.items));
 }
 
-function socialIconSvg(icon: SocialLink['icon']): string | undefined {
-  if (typeof icon === 'object') return icon.svg
-  return icon.toLowerCase() === 'github' ? GITHUB_SVG : undefined
+function socialIconSvg(icon: SocialLink["icon"]): string | undefined {
+  if (typeof icon === "object") return icon.svg;
+  return icon.toLowerCase() === "github" ? GITHUB_SVG : undefined;
 }
 
-function socialLinkLabel(icon: SocialLink['icon'], ariaLabel?: string): string {
-  if (ariaLabel) return ariaLabel
-  return typeof icon === 'string' ? icon : 'Social link'
-}
-
-function createMdxHeadingComponents() {
-  const used = new Map<string, number>()
-  const heading =
-    (Tag: 'h2' | 'h3') =>
-    ({ children, ...props }: JSX.HTMLAttributes<HTMLHeadingElement>) => {
-      const base = slugify(childText(children))
-      const count = used.get(base) ?? 0
-      used.set(base, count + 1)
-      const id = count === 0 ? base : `${base}-${count + 1}`
-      return (
-        <Tag {...props} id={id} class={`hn-heading ${props.class ?? ''}`.trim()}>
-          {children}
-          <a class="hn-heading-anchor" href={`#${id}`} aria-label="Link to section">
-            #
-          </a>
-        </Tag>
-      )
-    }
-
-  return {
-    h2: heading('h2'),
-    h3: heading('h3')
-  }
+function socialLinkLabel(icon: SocialLink["icon"], ariaLabel?: string): string {
+  if (ariaLabel) return ariaLabel;
+  return typeof icon === "string" ? icon : "Social link";
 }
 
 function isHomeRoute(routePath: string, prefix: string | undefined): boolean {
-  return normalizeLink(routePath) === normalizeLink(prefix || '/')
+  return normalizeLink(routePath) === normalizeLink(prefix || "/");
 }
 
 const Layout: FunctionalComponent<LayoutProps> = ({
@@ -147,75 +86,88 @@ const Layout: FunctionalComponent<LayoutProps> = ({
   page,
   locale,
   locales = [],
-  localizeRoute
+  localizeRoute,
 }) => {
-  const [query, setQuery] = useState('')
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-  const isHome = isHomeRoute(routePath, locale?.prefix)
-  const activeSidebar = resolveSidebar(themeConfig.sidebar, routePath)
-  const sidebarItems = flattenSidebarItems(activeSidebar)
-  const normalizedQuery = query.trim().toLowerCase()
+  const [query, setQuery] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const isHome = isHomeRoute(routePath, locale?.prefix);
+  const activeSidebar = resolveSidebar(themeConfig.sidebar, routePath);
+  const sidebarItems = flattenSidebarItems(activeSidebar);
+  const normalizedQuery = query.trim().toLowerCase();
   const visibleSidebar = useMemo(() => {
-    if (!normalizedQuery) return activeSidebar
+    if (!normalizedQuery) return activeSidebar;
     return activeSidebar
       .map((group) => ({
         ...group,
-        items: group.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery))
+        items: group.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)),
       }))
-      .filter((group) => group.items.length > 0)
-  }, [activeSidebar, normalizedQuery])
-  const activeIndex = sidebarItems.findIndex((item) => isActive(routePath, item.link))
-  const previous = activeIndex > 0 ? sidebarItems[activeIndex - 1] : undefined
+      .filter((group) => group.items.length > 0);
+  }, [activeSidebar, normalizedQuery]);
+  const activeIndex = sidebarItems.findIndex((item) => isActive(routePath, item.link));
+  const previous = activeIndex > 0 ? sidebarItems[activeIndex - 1] : undefined;
   const next =
-    activeIndex >= 0 && activeIndex < sidebarItems.length - 1 ? sidebarItems[activeIndex + 1] : undefined
-  const mdxComponents = createMdxHeadingComponents()
-  const MdxComponent = page?.kind === 'mdx' ? page.Component : undefined
-  const pageTags = page?.tags ?? []
-  const showTags = themeConfig.tags !== false && pageTags.length > 0 && !Boolean(page?.meta.tagIndex)
+    activeIndex >= 0 && activeIndex < sidebarItems.length - 1
+      ? sidebarItems[activeIndex + 1]
+      : undefined;
+  const mdxComponents = createMdxHeadingComponents({
+    headingClass: "hn-heading",
+    anchorClass: "hn-heading-anchor",
+    anchorLabel: "Link to section",
+  });
+  const MdxComponent = page?.kind === "mdx" ? page.Component : undefined;
+  const pageTags = page?.tags ?? [];
+  const showTags = themeConfig.tags !== false && pageTags.length > 0 && !page?.meta.tagIndex;
   const editHref =
     themeConfig.editLink && page?.relativePath
       ? themeConfig.editLink.pattern.replace(/:path/g, page.relativePath)
-      : undefined
+      : undefined;
   const lastUpdated = page?.lastUpdated
-    ? new Date(page.lastUpdated).toLocaleDateString(site.lang || 'en', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
+    ? new Date(page.lastUpdated).toLocaleDateString(site.lang || "en", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
       })
-    : undefined
-  const outlineItems = themeConfig.outline === false || isHome ? [] : page?.headings ?? []
-  const contentClass = isHome ? 'hn-home-content' : 'hn-doc-content'
+    : undefined;
+  const outlineItems = themeConfig.outline === false || isHome ? [] : (page?.headings ?? []);
+  const contentClass = isHome ? "hn-home-content" : "hn-doc-content";
   const renderedContent = MdxComponent ? (
     <div class={contentClass}>
       <MdxComponent components={mdxComponents} />
     </div>
   ) : (
-    <div class={contentClass} dangerouslySetInnerHTML={{ __html: page?.kind === 'markdown' ? page.html : '' }} />
-  )
+    <div
+      class={contentClass}
+      dangerouslySetInnerHTML={{ __html: page?.kind === "markdown" ? page.html : "" }}
+    />
+  );
 
   useEffect(() => {
-    setQuery('')
-    if (window.matchMedia('(max-width: 820px)').matches) {
-      setSidebarOpen(false)
+    setQuery("");
+    if (window.matchMedia("(max-width: 820px)").matches) {
+      setSidebarOpen(false);
     }
-  }, [routePath])
+  }, [routePath]);
 
   useEffect(() => {
-    const media = window.matchMedia('(max-width: 820px)')
-    const syncSidebar = () => setSidebarOpen(!media.matches)
-    syncSidebar()
-    media.addEventListener('change', syncSidebar)
-    return () => media.removeEventListener('change', syncSidebar)
-  }, [])
+    const media = window.matchMedia("(max-width: 820px)");
+    const syncSidebar = () => setSidebarOpen(!media.matches);
+    syncSidebar();
+    media.addEventListener("change", syncSidebar);
+    return () => media.removeEventListener("change", syncSidebar);
+  }, []);
 
   return (
-    <div class={`hn-site${isHome ? ' is-home' : ''}`}>
+    <div class={`hn-site${isHome ? " is-home" : ""}`}>
       <a class="hn-skip" href="#content">
         Skip to content
       </a>
       <header class="hn-header">
         <div class="hn-header-inner">
-          <a class="hn-brand" href={withBase(site.base, locale?.prefix || '/')} aria-label={site.title}>
+          <a
+            class="hn-brand"
+            href={withBase(site.base, locale?.prefix || "/")}
+            aria-label={site.title}
+          >
             <Logo label={site.title} />
           </a>
           <div class="hn-header-actions">
@@ -224,47 +176,51 @@ const Layout: FunctionalComponent<LayoutProps> = ({
                 item.link ? (
                   <a
                     key={item.link}
-                    class={isActive(routePath, item.link) ? 'active' : ''}
+                    class={isActive(routePath, item.link) ? "active" : ""}
                     href={withBase(site.base, item.link)}
-                    aria-current={isActive(routePath, item.link) ? 'page' : undefined}
+                    aria-current={isActive(routePath, item.link) ? "page" : undefined}
                   >
                     {item.text}
                   </a>
-                ) : null
+                ) : null,
               )}
             </nav>
             {themeConfig.socialLinks?.length ? (
               <div class="hn-social" aria-label="Social links">
                 {themeConfig.socialLinks.map((link) => {
-                  const svg = socialIconSvg(link.icon)
+                  const svg = socialIconSvg(link.icon);
                   return (
                     <a
                       href={withBase(site.base, link.link)}
                       aria-label={socialLinkLabel(link.icon, link.ariaLabel)}
                       key={`${socialLinkLabel(link.icon, link.ariaLabel)}:${link.link}`}
                     >
-                      {svg ? <span dangerouslySetInnerHTML={{ __html: svg }} /> : socialLinkLabel(link.icon, link.ariaLabel)}
+                      {svg ? (
+                        <span dangerouslySetInnerHTML={{ __html: svg }} />
+                      ) : (
+                        socialLinkLabel(link.icon, link.ariaLabel)
+                      )}
                     </a>
-                  )
+                  );
                 })}
               </div>
             ) : null}
             {locales.length > 1 && localizeRoute ? (
               <details class="hn-locale-switcher">
-                <summary>{locale?.label ?? 'Language'}</summary>
+                <summary>{locale?.label ?? "Language"}</summary>
                 <div class="hn-locale-menu">
                   {locales.map((item) => {
-                    const active = item.key === locale?.key
+                    const active = item.key === locale?.key;
                     return (
                       <a
                         key={item.key}
                         href={withBase(site.base, localizeRoute(item))}
-                        aria-current={active ? 'page' : undefined}
-                        class={active ? 'active' : ''}
+                        aria-current={active ? "page" : undefined}
+                        class={active ? "active" : ""}
                       >
                         {item.label}
                       </a>
-                    )
+                    );
                   })}
                 </div>
               </details>
@@ -298,21 +254,21 @@ const Layout: FunctionalComponent<LayoutProps> = ({
                 </label>
               ) : null}
               {visibleSidebar.map((group, groupIndex) => (
-                <div class="hn-sidebar-group" key={`${group.text ?? 'group'}:${groupIndex}`}>
+                <div class="hn-sidebar-group" key={`${group.text ?? "group"}:${groupIndex}`}>
                   {group.text ? <h2>{group.text}</h2> : null}
                   <ul>
                     {group.items.map((item) =>
                       item.link ? (
                         <li key={item.link}>
                           <a
-                            class={isActive(routePath, item.link) ? 'active' : ''}
+                            class={isActive(routePath, item.link) ? "active" : ""}
                             href={withBase(site.base, item.link)}
-                            aria-current={isActive(routePath, item.link) ? 'page' : undefined}
+                            aria-current={isActive(routePath, item.link) ? "page" : undefined}
                           >
                             {item.text}
                           </a>
                         </li>
-                      ) : null
+                      ) : null,
                     )}
                   </ul>
                 </div>
@@ -353,11 +309,13 @@ const Layout: FunctionalComponent<LayoutProps> = ({
               ) : null}
               {themeConfig.lastUpdated || editHref ? (
                 <footer class="hn-doc-meta">
-                  {themeConfig.lastUpdated && lastUpdated ? <span>Updated {lastUpdated}</span> : null}
+                  {themeConfig.lastUpdated && lastUpdated ? (
+                    <span>Updated {lastUpdated}</span>
+                  ) : null}
                   {editHref ? (
                     <span>
-                      {themeConfig.lastUpdated && lastUpdated ? ' · ' : null}
-                      <a href={editHref}>{themeConfig.editLink?.text ?? 'Edit this page'}</a>
+                      {themeConfig.lastUpdated && lastUpdated ? " · " : null}
+                      <a href={editHref}>{themeConfig.editLink?.text ?? "Edit this page"}</a>
                     </span>
                   ) : null}
                 </footer>
@@ -382,7 +340,7 @@ const Layout: FunctionalComponent<LayoutProps> = ({
       )}
       {themeConfig.footer ? <footer class="hn-footer">{themeConfig.footer}</footer> : null}
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;

package/templates/hono/.preactpress/theme/Logo.tsx

@@ -1,12 +1,12 @@
-import type { FunctionalComponent } from 'preact'
+import type { FunctionalComponent } from "preact";
 
 interface LogoProps {
-  class?: string
-  label: string
+  class?: string;
+  label: string;
 }
 
 const Logo: FunctionalComponent<LogoProps> = ({ class: className, label }) => (
-  <span class={`hn-logo ${className ?? ''}`.trim()} aria-label={label}>
+  <span class={`hn-logo ${className ?? ""}`.trim()} aria-label={label}>
     <svg aria-hidden="true" viewBox="0 0 36 36" width="36" height="36">
       <rect width="36" height="36" rx="11" fill="currentColor" opacity="0.12" />
       <path
@@ -21,6 +21,6 @@ const Logo: FunctionalComponent<LogoProps> = ({ class: className, label }) => (
     </svg>
     <span>{label}</span>
   </span>
-)
+);
 
-export default Logo
+export default Logo;

package/templates/hono/.preactpress/theme/ThemeToggle.tsx

@@ -1,72 +1,5 @@
-import type { FunctionalComponent } from 'preact'
-import { useEffect } from 'preact/hooks'
+import { ThemeToggle as BaseThemeToggle } from "@kamod-ch/preactpress/client";
 
-const THEME_STORAGE_KEY = 'preactpress-theme'
-type StoredTheme = 'light' | 'dark'
-
-function readStoredTheme(): StoredTheme | null {
-  try {
-    const value = localStorage.getItem(THEME_STORAGE_KEY)
-    return value === 'light' || value === 'dark' ? value : null
-  } catch {
-    return null
-  }
-}
-
-function applyTheme(theme: StoredTheme | null): void {
-  if (theme === null) document.documentElement.removeAttribute('data-theme')
-  else document.documentElement.setAttribute('data-theme', theme)
-}
-
-function toggleTheme(): void {
-  const stored = readStoredTheme()
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  const isDark = stored === 'dark' || (stored === null && prefersDark)
-  const next: StoredTheme = isDark ? 'light' : 'dark'
-  applyTheme(next)
-  try {
-    localStorage.setItem(THEME_STORAGE_KEY, next)
-  } catch {
-    /* Ignore private mode or storage quota failures. */
-  }
+export default function ThemeToggle() {
+  return <BaseThemeToggle className="hn-theme-toggle" ariaLabel="Toggle theme" />;
 }
-
-const ThemeToggle: FunctionalComponent = () => {
-  useEffect(() => {
-    function onStorage(event: StorageEvent): void {
-      if (event.key !== THEME_STORAGE_KEY) return
-      const value = event.newValue
-      applyTheme(value === 'light' || value === 'dark' ? value : null)
-    }
-
-    window.addEventListener('storage', onStorage)
-    return () => window.removeEventListener('storage', onStorage)
-  }, [])
-
-  return (
-    <button type="button" class="hn-theme-toggle" onClick={toggleTheme} aria-label="Toggle theme">
-      <span class="hn-theme-toggle-moon" aria-hidden="true">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
-          <path
-            d="M21 14.8A8.5 8.5 0 0 1 9.2 3a7 7 0 1 0 11.8 11.8Z"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="1.7"
-          />
-        </svg>
-      </span>
-      <span class="hn-theme-toggle-sun" aria-hidden="true">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
-          <circle cx="12" cy="12" r="3.5" strokeWidth="1.7" />
-          <path
-            d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4"
-            strokeLinecap="round"
-            strokeWidth="1.7"
-          />
-        </svg>
-      </span>
-    </button>
-  )
-}
-
-export default ThemeToggle

package/templates/hono/.preactpress/theme/hono.css

@@ -15,7 +15,8 @@
   --hono-code-text: #f3f4f6;
   --hono-radius: 1.1rem;
   --hono-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
-  --hono-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --hono-font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --hono-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --hono-layout-max: 1360px;
   --hono-layout-gutter: 2rem;
@@ -23,7 +24,7 @@
   color-scheme: dark;
 }
 
-:root[data-theme='light'] {
+:root[data-theme="light"] {
   --hono-bg: #ffffff;
   --hono-bg-soft: #f7f7f8;
   --hono-panel: rgba(15, 23, 42, 0.04);
@@ -56,7 +57,11 @@ body {
   margin: 0;
   min-width: 320px;
   background:
-    radial-gradient(circle at 70% 0, color-mix(in srgb, var(--hono-accent) 16%, transparent), transparent 24rem),
+    radial-gradient(
+      circle at 70% 0,
+      color-mix(in srgb, var(--hono-accent) 16%, transparent),
+      transparent 24rem
+    ),
     linear-gradient(180deg, var(--hono-bg-soft), var(--hono-bg) 22rem);
   color: var(--hono-text);
   font-family: var(--hono-font-sans);
@@ -240,8 +245,8 @@ a {
   color: var(--hono-text-strong);
 }
 
-:root[data-theme='light'] .hn-theme-toggle-sun,
-:root:not([data-theme='light']) .hn-theme-toggle-moon {
+:root[data-theme="light"] .hn-theme-toggle-sun,
+:root:not([data-theme="light"]) .hn-theme-toggle-moon {
   display: none;
 }
 
@@ -655,8 +660,8 @@ a {
   min-width: 100%;
 }
 
-:root:not([data-theme='light']) .hn-doc-content .shiki,
-:root:not([data-theme='light']) .hn-doc-content .shiki span {
+:root:not([data-theme="light"]) .hn-doc-content .shiki,
+:root:not([data-theme="light"]) .hn-doc-content .shiki span {
   color: var(--shiki-dark) !important;
   background-color: var(--shiki-dark-bg) !important;
 }
@@ -780,12 +785,24 @@ a {
   display: none;
 }
 
-.hn-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(1):checked) .pp-code-group-block:nth-child(1),
-.hn-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(2):checked) .pp-code-group-block:nth-child(2),
-.hn-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(3):checked) .pp-code-group-block:nth-child(3),
-.hn-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(4):checked) .pp-code-group-block:nth-child(4),
-.hn-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(5):checked) .pp-code-group-block:nth-child(5),
-.hn-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(6):checked) .pp-code-group-block:nth-child(6) {
+.hn-doc-content
+  .pp-code-group:has(.pp-code-group-input:nth-of-type(1):checked)
+  .pp-code-group-block:nth-child(1),
+.hn-doc-content
+  .pp-code-group:has(.pp-code-group-input:nth-of-type(2):checked)
+  .pp-code-group-block:nth-child(2),
+.hn-doc-content
+  .pp-code-group:has(.pp-code-group-input:nth-of-type(3):checked)
+  .pp-code-group-block:nth-child(3),
+.hn-doc-content
+  .pp-code-group:has(.pp-code-group-input:nth-of-type(4):checked)
+  .pp-code-group-block:nth-child(4),
+.hn-doc-content
+  .pp-code-group:has(.pp-code-group-input:nth-of-type(5):checked)
+  .pp-code-group-block:nth-child(5),
+.hn-doc-content
+  .pp-code-group:has(.pp-code-group-input:nth-of-type(6):checked)
+  .pp-code-group-block:nth-child(6) {
   display: block;
 }
 
@@ -971,7 +988,7 @@ a {
   }
 
   .hn-sidebar-panel > summary::after {
-    content: '▾';
+    content: "▾";
     color: var(--hono-muted);
     font-size: 0.85rem;
     transition: transform 0.15s ease;