@kamod-ch/preactpress 1.0.0 → 1.0.2

package/src/client/app.tsx

@@ -1,105 +1,101 @@
-import { useEffect, useState } from 'preact/hooks'
-import Layout from 'virtual:preactpress-layout'
-import { pagesMeta, routes } from 'virtual:preactpress-pages'
-import { i18n, mpa, site, themeConfig } from 'virtual:preactpress-site'
-import type { PageView } from './types.js'
-import type { ResolvedLocale } from '../node/siteConfig.js'
-import { usePageHead } from './usePageHead.js'
-import { normalizeRoute, routeFromPathname } from '../shared/route.js'
-import { loadPage, prefetchPage, seedPage } from './loadPage.js'
-import { setupViewportPrefetch } from './prefetchLinks.js'
+import { useEffect, useState } from "preact/hooks";
+import Layout from "virtual:preactpress-layout";
+import { pagesMeta, routes } from "virtual:preactpress-pages";
+import { i18n, mpa, site, themeConfig } from "virtual:preactpress-site";
+import type { PageView } from "./types.js";
+import type { ResolvedLocale } from "../node/siteConfig.js";
+import { usePageHead } from "./usePageHead.js";
+import { normalizeRoute, routeFromPathname } from "../shared/route.js";
+import { loadPage, prefetchPage, seedPage } from "./loadPage.js";
+import { setupViewportPrefetch } from "./prefetchLinks.js";
 import {
   localeFromRoute,
   localizedRouteForLocale,
   siteForRoute,
-  themeConfigForRoute
-} from '../shared/locale.js'
+  themeConfigForRoute,
+} from "../shared/locale.js";
 
 function routeFromLocation(): string {
-  return routeFromPathname(window.location.pathname, site.base)
+  return routeFromPathname(window.location.pathname, site.base);
 }
 
 function routeFromHref(href: string): string | undefined {
-  const url = new URL(href, window.location.href)
-  if (url.origin !== window.location.origin) return undefined
-  const base = site.base === '/' ? '' : site.base.replace(/\/$/, '')
+  const url = new URL(href, window.location.href);
+  if (url.origin !== window.location.origin) return undefined;
+  const base = site.base === "/" ? "" : site.base.replace(/\/$/, "");
   if (base && url.pathname !== base && !url.pathname.startsWith(`${base}/`)) {
-    return undefined
+    return undefined;
   }
-  const path = base ? url.pathname.slice(base.length) || '/' : url.pathname
-  return normalizeRoute(path)
+  const path = base ? url.pathname.slice(base.length) || "/" : url.pathname;
+  return normalizeRoute(path);
 }
 
 function anchorFromEvent(event: MouseEvent): HTMLAnchorElement | null {
-  const target = event.target
+  const target = event.target;
   const element =
-    target instanceof Element
-      ? target
-      : target instanceof Text
-        ? target.parentElement
-        : null
-  return element?.closest('a[href]') ?? null
+    target instanceof Element ? target : target instanceof Text ? target.parentElement : null;
+  return element?.closest("a[href]") ?? null;
 }
 
 function loadingPage(route: string): PageView {
-  const meta = pagesMeta[route]
+  const meta = pagesMeta[route];
   return {
-    kind: 'markdown',
-    html: '<p>Loading...</p>',
+    kind: "markdown",
+    html: "<p>Loading...</p>",
     title: meta?.title,
     description: meta?.description,
     tags: meta?.tags,
     image: meta?.image,
     pageType: meta?.pageType,
     meta: meta?.meta ?? {},
-    headings: meta?.headings ?? []
-  }
+    headings: meta?.headings ?? [],
+  };
 }
 
 export function App({ routePath, initialPage }: { routePath: string; initialPage?: PageView }) {
-  const [currentRoute, setCurrentRoute] = useState(() => normalizeRoute(routePath))
-  const [page, setPage] = useState<PageView>(() => initialPage ?? loadingPage(routePath))
-  const availableRoutes = new Set(routes)
-  const activeLocale = localeFromRoute(currentRoute, i18n)
-  const activeSite = siteForRoute(site, currentRoute, i18n)
-  const activeThemeConfig = themeConfigForRoute(themeConfig, currentRoute, i18n)
+  const [currentRoute, setCurrentRoute] = useState(() => normalizeRoute(routePath));
+  const [page, setPage] = useState<PageView>(() => initialPage ?? loadingPage(routePath));
+  const availableRoutes = new Set(routes);
+  const activeLocale = localeFromRoute(currentRoute, i18n);
+  const activeSite = siteForRoute(site, currentRoute, i18n);
+  const activeThemeConfig = themeConfigForRoute(themeConfig, currentRoute, i18n);
 
   useEffect(() => {
-    if (initialPage) seedPage(normalizeRoute(routePath), initialPage)
-  }, [initialPage, routePath])
+    if (initialPage) seedPage(normalizeRoute(routePath), initialPage);
+  }, [initialPage, routePath]);
 
   useEffect(() => {
-    let cancelled = false
-    setPage(loadingPage(currentRoute))
+    let cancelled = false;
+    setPage(loadingPage(currentRoute));
     void loadPage(currentRoute, site.base)
       .then((loaded) => {
-        if (!cancelled) setPage(loaded)
+        if (!cancelled) setPage(loaded);
       })
       .catch(() => {
         if (!cancelled) {
           setPage({
-            kind: 'markdown',
-            html: '<p>Page not found.</p>',
-            title: '404',
+            kind: "markdown",
+            html: "<p>Page not found.</p>",
+            title: "404",
             description: activeSite.description,
             meta: {},
-            headings: []
-          })
+            headings: [],
+          });
         }
-      })
+      });
     return () => {
-      cancelled = true
-    }
-  }, [activeSite.description, currentRoute])
+      cancelled = true;
+    };
+  }, [activeSite.description, currentRoute]);
 
   useEffect(() => {
-    const prefetch = (route: string) => prefetchPage(route, site.base)
-    const stopViewportPrefetch = setupViewportPrefetch(routeFromHref, prefetch)
+    const prefetch = (route: string) => prefetchPage(route, site.base);
+    const stopViewportPrefetch = setupViewportPrefetch(routeFromHref, prefetch);
     if (mpa) {
-      return () => stopViewportPrefetch()
+      return () => stopViewportPrefetch();
     }
 
-    const onPopState = () => setCurrentRoute(routeFromLocation())
+    const onPopState = () => setCurrentRoute(routeFromLocation());
     const onClick = (event: MouseEvent) => {
       if (
         event.defaultPrevented ||
@@ -109,44 +105,44 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
         event.ctrlKey ||
         event.shiftKey
       ) {
-        return
+        return;
       }
-      const link = anchorFromEvent(event)
-      if (!link || link.target || link.hasAttribute('download')) return
-      const route = routeFromHref(link.href)
-      if (!route) return
-      const url = new URL(link.href)
+      const link = anchorFromEvent(event);
+      if (!link || link.target || link.hasAttribute("download")) return;
+      const route = routeFromHref(link.href);
+      if (!route) return;
+      const url = new URL(link.href);
       if (url.hash && route === currentRoute) {
-        document.getElementById(url.hash.slice(1))?.scrollIntoView()
-        return
+        document.getElementById(url.hash.slice(1))?.scrollIntoView();
+        return;
       }
-      event.preventDefault()
-      window.history.pushState({}, '', url)
-      setCurrentRoute(route)
-      window.scrollTo({ top: 0 })
-    }
+      event.preventDefault();
+      window.history.pushState({}, "", url);
+      setCurrentRoute(route);
+      window.scrollTo({ top: 0 });
+    };
     const onMouseEnter = (event: MouseEvent) => {
-      const link = anchorFromEvent(event)
-      if (!link) return
-      const route = routeFromHref(link.href)
-      if (route) prefetch(route)
-    }
-    window.addEventListener('popstate', onPopState)
-    document.addEventListener('click', onClick)
-    document.addEventListener('mouseenter', onMouseEnter, true)
+      const link = anchorFromEvent(event);
+      if (!link) return;
+      const route = routeFromHref(link.href);
+      if (route) prefetch(route);
+    };
+    window.addEventListener("popstate", onPopState);
+    document.addEventListener("click", onClick);
+    document.addEventListener("mouseenter", onMouseEnter, true);
     return () => {
-      stopViewportPrefetch()
-      window.removeEventListener('popstate', onPopState)
-      document.removeEventListener('click', onClick)
-      document.removeEventListener('mouseenter', onMouseEnter, true)
-    }
-  }, [currentRoute, mpa])
+      stopViewportPrefetch();
+      window.removeEventListener("popstate", onPopState);
+      document.removeEventListener("click", onClick);
+      document.removeEventListener("mouseenter", onMouseEnter, true);
+    };
+  }, [currentRoute, mpa]);
 
   useEffect(() => {
     if (currentRoute !== normalizeRoute(routePath)) {
-      document.getElementById('content')?.focus()
+      document.getElementById("content")?.focus();
     }
-  }, [currentRoute, routePath])
+  }, [currentRoute, routePath]);
 
   usePageHead({
     site,
@@ -154,7 +150,7 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
     routes: availableRoutes,
     route: currentRoute,
     page:
-      page?.kind === 'markdown'
+      page?.kind === "markdown"
         ? {
             meta: page.meta,
             title: page.title,
@@ -162,8 +158,8 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
             tags: page.tags,
             image: page.image,
             pageType: page.pageType,
-            kind: 'markdown',
-            html: page.html
+            kind: "markdown",
+            html: page.html,
           }
         : page
           ? {
@@ -173,10 +169,10 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
               tags: page.tags,
               image: page.image,
               pageType: page.pageType,
-              kind: 'mdx'
+              kind: "mdx",
             }
-          : undefined
-  })
+          : undefined,
+  });
 
   return (
     <Layout
@@ -188,7 +184,8 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
       locale={activeLocale}
       locales={i18n?.locales}
       localizeRoute={(locale: ResolvedLocale) =>
-        localizedRouteForLocale(currentRoute, locale, i18n, availableRoutes)}
+        localizedRouteForLocale(currentRoute, locale, i18n, availableRoutes)
+      }
     />
-  )
+  );
 }

package/src/client/entry-client.tsx

@@ -1,27 +1,25 @@
-import { hydrate } from 'preact'
-import { App } from './app.js'
-import type { PageView } from './types.js'
-import { loadPage, seedPage } from './loadPage.js'
+import { hydrate } from "preact";
+import { App } from "./app.js";
+import type { PageView } from "./types.js";
+import { loadPage, seedPage } from "./loadPage.js";
 
 function currentRoute(): string {
-  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '') || ''
-  let p = window.location.pathname
-  if (base && p.startsWith(base)) p = p.slice(base.length) || '/'
-  if (!p.startsWith('/')) p = `/${p}`
-  return (p.replace(/\/$/, '') || '/') as string
+  const base = (import.meta.env.BASE_URL || "/").replace(/\/$/, "") || "";
+  let p = window.location.pathname;
+  if (base && p.startsWith(base)) p = p.slice(base.length) || "/";
+  if (!p.startsWith("/")) p = `/${p}`;
+  return (p.replace(/\/$/, "") || "/") as string;
 }
 
-const el = document.getElementById('app')
+const el = document.getElementById("app");
 if (el) {
   void (async () => {
-    const initial =
-      el.getAttribute('data-preactpress-route') ??
-      currentRoute()
-    const dataEl = document.getElementById('__PREACTPRESS_PAGE_DATA__')
+    const initial = el.getAttribute("data-preactpress-route") ?? currentRoute();
+    const dataEl = document.getElementById("__PREACTPRESS_PAGE_DATA__");
     const initialPage = dataEl?.textContent
-      ? JSON.parse(dataEl.textContent) as PageView
-      : await loadPage(initial, import.meta.env.BASE_URL || '/')
-    seedPage(initial, initialPage)
-    hydrate(<App routePath={initial} initialPage={initialPage} />, el)
-  })()
+      ? (JSON.parse(dataEl.textContent) as PageView)
+      : await loadPage(initial, import.meta.env.BASE_URL || "/");
+    seedPage(initial, initialPage);
+    hydrate(<App routePath={initial} initialPage={initialPage} />, el);
+  })();
 }

package/src/client/entry-ssr.tsx

@@ -1,41 +1,41 @@
-import { renderToString } from 'preact-render-to-string'
-import { App } from './app.js'
-import { pages } from 'virtual:preactpress-pages'
-import { i18n, site } from 'virtual:preactpress-site'
-import { resolvePageHeadMeta, titleTemplateFromMeta } from '../shared/pageMeta.js'
-import type { PageView } from './types.js'
-import { siteForRoute } from '../shared/locale.js'
+import { renderToString } from "preact-render-to-string";
+import { App } from "./app.js";
+import { pages } from "virtual:preactpress-pages";
+import { i18n, site } from "virtual:preactpress-site";
+import { resolvePageHeadMeta, titleTemplateFromMeta } from "../shared/pageMeta.js";
+import type { PageView } from "./types.js";
+import { siteForRoute } from "../shared/locale.js";
 
 export interface RenderResult {
-  body: string
-  title: string
-  description: string
-  tags: string[]
-  image?: string
-  pageType: 'website' | 'article'
-  page: PageView
+  body: string;
+  title: string;
+  description: string;
+  tags: string[];
+  image?: string;
+  pageType: "website" | "article";
+  page: PageView;
 }
 
 export function resolveRoutePage(routePath: string): PageView {
-  const activeSite = siteForRoute(site, routePath, i18n)
+  const activeSite = siteForRoute(site, routePath, i18n);
   return (
     pages[routePath] ??
-    pages['/404'] ?? {
-      kind: 'markdown' as const,
-      html: '',
-      title: 'Not found',
+    pages["/404"] ?? {
+      kind: "markdown" as const,
+      html: "",
+      title: "Not found",
       description: activeSite.description,
       meta: {},
-      headings: []
+      headings: [],
     }
-  )
+  );
 }
 
 function renderResult(routePath: string, page: PageView): RenderResult {
-  const body = renderToString(<App routePath={routePath} initialPage={page} />)
-  const activeSite = siteForRoute(site, routePath, i18n)
+  const body = renderToString(<App routePath={routePath} initialPage={page} />);
+  const activeSite = siteForRoute(site, routePath, i18n);
   const head = resolvePageHeadMeta(
-    page.kind === 'markdown'
+    page.kind === "markdown"
       ? {
           title: page.title,
           titleTemplate: titleTemplateFromMeta(page.meta),
@@ -43,8 +43,8 @@ function renderResult(routePath: string, page: PageView): RenderResult {
           tags: page.tags,
           image: page.image,
           pageType: page.pageType,
-          kind: 'markdown',
-          html: page.html
+          kind: "markdown",
+          html: page.html,
         }
       : {
           title: page.title,
@@ -53,10 +53,10 @@ function renderResult(routePath: string, page: PageView): RenderResult {
           tags: page.tags,
           image: page.image,
           pageType: page.pageType,
-          kind: 'mdx'
+          kind: "mdx",
         },
-    activeSite
-  )
+    activeSite,
+  );
   return {
     body,
     title: head.title,
@@ -64,14 +64,14 @@ function renderResult(routePath: string, page: PageView): RenderResult {
     tags: head.tags,
     image: head.image,
     pageType: head.pageType,
-    page
-  }
+    page,
+  };
 }
 
 export function renderFromPage(routePath: string, page: PageView): RenderResult {
-  return renderResult(routePath, page)
+  return renderResult(routePath, page);
 }
 
 export function render(routePath: string): RenderResult {
-  return renderFromPage(routePath, resolveRoutePage(routePath))
+  return renderFromPage(routePath, resolveRoutePage(routePath));
 }

package/src/client/index.ts

@@ -1,2 +1,16 @@
-export type { HtmlPageView, LayoutProps, MdxPageView, PageView } from './types.js'
-export { usePageHead } from './usePageHead.js'
+export type { HtmlPageView, LayoutProps, MdxPageView, PageView } from "./types.js";
+export {
+  ThemeToggle,
+  childText,
+  classNames,
+  createMdxHeadingComponents,
+  isActive,
+  normalizeLink,
+  slugifyHeading,
+  toggleStoredTheme,
+  useStoredThemeSync,
+  withBase,
+  type MdxHeadingOptions,
+  type ThemeToggleProps,
+} from "./theme-utils.js";
+export { usePageHead } from "./usePageHead.js";

package/src/client/loadPage.ts

@@ -1,68 +1,67 @@
-import { mdxLoaders, pagesMeta } from 'virtual:preactpress-pages'
-import type { HtmlPageView, PageView } from './types.js'
-import { contentChunkPath } from '../shared/contentChunk.js'
-import { publicUrl } from '../shared/url.js'
+import { mdxLoaders, pagesMeta } from "virtual:preactpress-pages";
+import type { HtmlPageView, PageView } from "./types.js";
+import { contentChunkPath } from "../shared/contentChunk.js";
+import { publicUrl } from "../shared/url.js";
 
-const cache = new Map<string, PageView>()
+const cache = new Map<string, PageView>();
 
 function fallbackPage(): PageView {
   return (
-    cache.get('/404') ??
+    cache.get("/404") ??
     ({
-      kind: 'markdown',
-      html: '<p>Page not found.</p>',
-      title: '404',
+      kind: "markdown",
+      html: "<p>Page not found.</p>",
+      title: "404",
       description: undefined,
       meta: {},
-      headings: []
+      headings: [],
     } satisfies HtmlPageView)
-  )
+  );
 }
 
 export function seedPage(route: string, page: PageView | undefined): void {
-  if (page) cache.set(route, page)
+  if (page) cache.set(route, page);
 }
 
 async function loadMarkdownPage(route: string, base: string): Promise<PageView> {
-  const meta = pagesMeta[route]
-  const url =
-    import.meta.env.DEV
-      ? publicUrl(base, `/__preactpress/page.json?route=${encodeURIComponent(route)}`)
-      : publicUrl(base, contentChunkPath(route))
-  const res = await fetch(url, { credentials: 'same-origin' })
-  if (!res.ok) throw new Error(`Failed to load page ${route}`)
-  const data = (await res.json()) as HtmlPageView
+  const meta = pagesMeta[route];
+  const url = import.meta.env.DEV
+    ? publicUrl(base, `/__preactpress/page.json?route=${encodeURIComponent(route)}`)
+    : publicUrl(base, contentChunkPath(route));
+  const res = await fetch(url, { credentials: "same-origin" });
+  if (!res.ok) throw new Error(`Failed to load page ${route}`);
+  const data = (await res.json()) as HtmlPageView;
   return {
     ...meta,
     ...data,
-    kind: 'markdown'
-  }
+    kind: "markdown",
+  };
 }
 
 export async function loadPage(route: string, base: string): Promise<PageView> {
-  const cached = cache.get(route)
-  if (cached) return cached
+  const cached = cache.get(route);
+  if (cached) return cached;
 
-  const meta = pagesMeta[route]
-  if (!meta) return fallbackPage()
+  const meta = pagesMeta[route];
+  if (!meta) return fallbackPage();
 
-  if (meta.kind === 'mdx') {
-    const loader = mdxLoaders[route]
-    if (!loader) return fallbackPage()
-    const mod = await loader()
-    const page = { ...meta, kind: 'mdx' as const, Component: mod.default }
-    cache.set(route, page)
-    return page
+  if (meta.kind === "mdx") {
+    const loader = mdxLoaders[route];
+    if (!loader) return fallbackPage();
+    const mod = await loader();
+    const page = { ...meta, kind: "mdx" as const, Component: mod.default };
+    cache.set(route, page);
+    return page;
   }
 
-  const page = await loadMarkdownPage(route, base)
-  cache.set(route, page)
-  return page
+  const page = await loadMarkdownPage(route, base);
+  cache.set(route, page);
+  return page;
 }
 
 export function prefetchPage(route: string, base: string): void {
-  if (cache.has(route)) return
+  if (cache.has(route)) return;
   void loadPage(route, base).catch(() => {
     /* Prefetch failures should not affect navigation. */
-  })
+  });
 }

package/src/client/prefetchLinks.ts

@@ -1,60 +1,60 @@
-const PREFETCH_MARGIN = '200px'
+const PREFETCH_MARGIN = "200px";
 
 function scheduleIdle(task: () => void): void {
-  if (typeof requestIdleCallback === 'function') {
-    requestIdleCallback(() => task(), { timeout: 2000 })
-    return
+  if (typeof requestIdleCallback === "function") {
+    requestIdleCallback(() => task(), { timeout: 2000 });
+    return;
   }
-  setTimeout(task, 1)
+  setTimeout(task, 1);
 }
 
 export function setupViewportPrefetch(
   routeFromHref: (href: string) => string | undefined,
-  prefetch: (route: string) => void
+  prefetch: (route: string) => void,
 ): () => void {
-  if (typeof IntersectionObserver === 'undefined') return () => {}
+  if (typeof IntersectionObserver === "undefined") return () => {};
 
-  const seen = new WeakSet<HTMLAnchorElement>()
+  const seen = new WeakSet<HTMLAnchorElement>();
   const observer = new IntersectionObserver(
     (entries) => {
       for (const entry of entries) {
-        if (!entry.isIntersecting) continue
-        const link = entry.target
-        if (!(link instanceof HTMLAnchorElement) || seen.has(link)) continue
-        const route = routeFromHref(link.href)
-        if (!route) continue
-        seen.add(link)
-        scheduleIdle(() => prefetch(route))
-        observer.unobserve(link)
+        if (!entry.isIntersecting) continue;
+        const link = entry.target;
+        if (!(link instanceof HTMLAnchorElement) || seen.has(link)) continue;
+        const route = routeFromHref(link.href);
+        if (!route) continue;
+        seen.add(link);
+        scheduleIdle(() => prefetch(route));
+        observer.unobserve(link);
       }
     },
-    { rootMargin: PREFETCH_MARGIN }
-  )
+    { rootMargin: PREFETCH_MARGIN },
+  );
 
   const observe = (root: ParentNode): void => {
-    for (const link of Array.from(root.querySelectorAll('a[href]'))) {
+    for (const link of Array.from(root.querySelectorAll("a[href]"))) {
       if (link instanceof HTMLAnchorElement && !seen.has(link)) {
-        observer.observe(link)
+        observer.observe(link);
       }
     }
-  }
+  };
 
-  observe(document)
+  observe(document);
   const mutation = new MutationObserver((records) => {
     for (const record of records) {
       for (const node of Array.from(record.addedNodes)) {
         if (node instanceof HTMLAnchorElement) {
-          if (!seen.has(node)) observer.observe(node)
-          continue
+          if (!seen.has(node)) observer.observe(node);
+          continue;
         }
-        if (node instanceof Element) observe(node)
+        if (node instanceof Element) observe(node);
       }
     }
-  })
-  mutation.observe(document.body, { childList: true, subtree: true })
+  });
+  mutation.observe(document.body, { childList: true, subtree: true });
 
   return () => {
-    observer.disconnect()
-    mutation.disconnect()
-  }
+    observer.disconnect();
+    mutation.disconnect();
+  };
 }