@kamod-ch/preactpress 1.0.3 → 2.0.0

package/dist/shared/scrollRestoration.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollRestoration.js","sourceRoot":"","sources":["../../src/shared/scrollRestoration.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scrollRestoration.js","sourceRoot":"","sources":["../../src/shared/scrollRestoration.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kamod-ch/preactpress",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "Vite and Preact powered static site generator",
   "keywords": [
     "markdown",
@@ -103,6 +103,7 @@
     "markdown-it": "^14.2.0",
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-mathjax3": "^5.2.0",
+    "mermaid": "^11.16.0",
     "minimist": "^1.2.8",
     "node-html-parser": "^7.1.0",
     "picocolors": "^1.1.1",

package/src/client/app.tsx

@@ -10,9 +10,11 @@ import {
   consumeScrollRestoreOnPopstate,
   restoreScrollPositionAfterLayout,
   saveScrollPositionBeforeNavigation,
+  scrollToTopAfterLayout,
   setupScrollRestoration,
 } from "../shared/scrollRestoration.js";
 import { getCachedPage, loadPage, prefetchPage, seedPage } from "./loadPage.js";
+import { renderMermaidDiagrams } from "./mermaid.js";
 import { setupViewportPrefetch } from "./prefetchLinks.js";
 import {
   localeFromRoute,
@@ -62,6 +64,9 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
   const [currentRoute, setCurrentRoute] = useState(() => normalizeRoute(routePath));
   const [page, setPage] = useState<PageView>(() => initialPage ?? loadingPage(routePath));
   const pendingScrollRestore = useRef(false);
+  const pendingScrollTop = useRef(false);
+  const [scrollRestoreNonce, setScrollRestoreNonce] = useState(0);
+  const [scrollTopNonce, setScrollTopNonce] = useState(0);
   const availableRoutes = new Set(routes);
   const activeLocale = localeFromRoute(currentRoute, i18n);
   const activeSite = siteForRoute(site, currentRoute, i18n);
@@ -81,7 +86,10 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
           setPage(loaded);
           if (pendingScrollRestore.current) {
             pendingScrollRestore.current = false;
-            restoreScrollPositionAfterLayout();
+            setScrollRestoreNonce((nonce) => nonce + 1);
+          } else if (pendingScrollTop.current) {
+            pendingScrollTop.current = false;
+            setScrollTopNonce((nonce) => nonce + 1);
           }
         }
       })
@@ -95,6 +103,13 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
             meta: {},
             headings: [],
           });
+          if (pendingScrollRestore.current) {
+            pendingScrollRestore.current = false;
+            setScrollRestoreNonce((nonce) => nonce + 1);
+          } else if (pendingScrollTop.current) {
+            pendingScrollTop.current = false;
+            setScrollTopNonce((nonce) => nonce + 1);
+          }
         }
       });
     return () => {
@@ -102,6 +117,16 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
     };
   }, [activeSite.description, currentRoute]);
 
+  useEffect(() => {
+    if (scrollRestoreNonce === 0) return;
+    void restoreScrollPositionAfterLayout();
+  }, [scrollRestoreNonce]);
+
+  useEffect(() => {
+    if (scrollTopNonce === 0) return;
+    void scrollToTopAfterLayout();
+  }, [scrollTopNonce]);
+
   useEffect(() => {
     const prefetch = (route: string) => prefetchPage(route, site.base);
     const stopViewportPrefetch = setupViewportPrefetch(routeFromHref, prefetch);
@@ -138,9 +163,10 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
       }
       event.preventDefault();
       saveScrollPositionBeforeNavigation();
+      pendingScrollTop.current = true;
       window.history.pushState({}, "", url);
       setCurrentRoute(route);
-      window.scrollTo({ top: 0, behavior: "auto" });
+      window.scrollTo({ top: 0, left: 0, behavior: "auto" });
     };
     const onMouseEnter = (event: MouseEvent) => {
       const link = anchorFromEvent(event);
@@ -160,9 +186,13 @@ export function App({ routePath, initialPage }: { routePath: string; initialPage
     };
   }, [currentRoute, mpa]);
 
+  useEffect(() => {
+    void renderMermaidDiagrams();
+  }, [currentRoute, page]);
+
   useEffect(() => {
     if (currentRoute !== normalizeRoute(routePath)) {
-      document.getElementById("content")?.focus();
+      document.getElementById("content")?.focus({ preventScroll: true });
     }
   }, [currentRoute, routePath]);
 

package/src/client/mermaid.ts

@@ -0,0 +1,74 @@
+let renderRun = 0;
+
+function isDarkTheme(): boolean {
+  if (typeof document === "undefined" || typeof window === "undefined") return false;
+  const explicit = document.documentElement.dataset.theme;
+  if (explicit === "dark") return true;
+  if (explicit === "light") return false;
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+}
+
+function mermaidSourceFromElement(element: HTMLElement): string {
+  if (element.dataset.mermaidSource) return element.dataset.mermaidSource;
+  return element.textContent ?? "";
+}
+
+function normalizeMermaidBlocks(): HTMLElement[] {
+  const blocks = Array.from(document.querySelectorAll<HTMLElement>(".pp-mermaid"));
+
+  for (const code of document.querySelectorAll<HTMLElement>(
+    'pre > code.language-mermaid, pre > code[class*="language-mermaid"]',
+  )) {
+    const pre = code.parentElement;
+    if (!pre || pre.dataset.mermaidNormalized === "true") continue;
+
+    const block = document.createElement("div");
+    block.className = "pp-mermaid";
+    block.dataset.mermaidSource = code.textContent ?? "";
+    block.textContent = code.textContent ?? "";
+    pre.replaceWith(block);
+    pre.dataset.mermaidNormalized = "true";
+    blocks.push(block);
+  }
+
+  return blocks;
+}
+
+export async function renderMermaidDiagrams(): Promise<void> {
+  if (typeof document === "undefined") return;
+
+  const blocks = normalizeMermaidBlocks().filter(
+    (block) => block.dataset.mermaidRendered !== "true",
+  );
+  if (blocks.length === 0) return;
+
+  const run = ++renderRun;
+  const { default: mermaid } = await import("mermaid");
+  if (run !== renderRun) return;
+
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: "strict",
+    theme: isDarkTheme() ? "dark" : "default",
+  });
+
+  await Promise.all(
+    blocks.map(async (block, index) => {
+      const source = mermaidSourceFromElement(block).trim();
+      if (!source) return;
+
+      try {
+        const id = `pp-mermaid-${run}-${index}`;
+        const { svg } = await mermaid.render(id, source);
+        if (run !== renderRun) return;
+        block.innerHTML = svg;
+        block.dataset.mermaidRendered = "true";
+        block.dataset.mermaidSource = source;
+      } catch (error) {
+        block.dataset.mermaidError = "true";
+        block.textContent = source;
+        console.warn("Failed to render Mermaid diagram", error);
+      }
+    }),
+  );
+}

package/src/client/theme-default/Layout.tsx

@@ -150,6 +150,49 @@ const Layout: FunctionalComponent<LayoutProps> = ({
     setMobileMenuOpen(false);
   }, [routePath]);
 
+  useEffect(() => {
+    const copyText = async (text: string) => {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return;
+      }
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.top = "-9999px";
+      document.body.append(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      textarea.remove();
+    };
+
+    const onClick = (event: MouseEvent) => {
+      const target = event.target;
+      const candidate = target instanceof Element ? target.closest(".pp-code-copy") : null;
+      if (!(candidate instanceof HTMLButtonElement)) return;
+      const button = candidate;
+      const code = button.closest(".pp-code-block")?.querySelector("code")?.textContent ?? "";
+      if (!code) return;
+
+      event.preventDefault();
+      void copyText(code).then(() => {
+        const icon = button.querySelector(".pp-code-copy-icon");
+        if (icon && button.dataset.checkIcon) icon.innerHTML = button.dataset.checkIcon;
+        button.classList.add("copied");
+        button.setAttribute("aria-label", button.dataset.copiedLabel ?? "Copied");
+        window.setTimeout(() => {
+          if (icon && button.dataset.copyIcon) icon.innerHTML = button.dataset.copyIcon;
+          button.classList.remove("copied");
+          button.setAttribute("aria-label", "Copy code");
+        }, 2000);
+      });
+    };
+
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+
   useEffect(() => {
     if (!mobileMenuOpen) return;
 

package/src/client/theme-default/styles.css

@@ -759,14 +759,188 @@ body::selection {
   margin: 16px 0;
 }
 
+.pp-doc-content .pp-mermaid {
+  margin: 1.25rem 0;
+  padding: 1.25rem;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--pp-border) 82%, transparent);
+  border-radius: 14px;
+  background: var(--pp-code-bg);
+  color: var(--pp-code-text);
+  text-align: center;
+}
+
+.pp-doc-content .pp-mermaid[data-mermaid-error="true"] {
+  text-align: left;
+  white-space: pre;
+}
+
+.pp-doc-content .pp-mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.pp-doc-content .pp-code-block {
+  position: relative;
+  margin: 1.25rem 0;
+  border: 1px solid color-mix(in srgb, var(--pp-border) 82%, transparent);
+  border-radius: 14px;
+  background: var(--pp-code-bg);
+  box-shadow:
+    0 14px 34px color-mix(in srgb, #000 8%, transparent),
+    inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
+  overflow: hidden;
+}
+
 .pp-doc-content pre {
-  padding: 16px;
-  border-radius: 8px;
+  padding: 16px 18px;
+  border-radius: 0;
   overflow: auto;
-  border: 1px solid var(--pp-border);
+  border: 0;
   background: var(--pp-code-bg);
   color: var(--pp-code-text);
-  line-height: 1.55;
+  line-height: 1.38;
+}
+
+.pp-doc-content .pp-code-block pre {
+  margin: 0;
+  max-height: min(68vh, 720px);
+  padding-top: 2.7rem;
+  padding-right: 3.75rem;
+  line-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--pp-muted) 40%, transparent) transparent;
+}
+
+.pp-doc-content .pp-code-block .shiki.shiki-themes.vitesse-light.vitesse-dark {
+  padding-bottom: 1rem;
+}
+
+.pp-doc-content .pp-code-block pre code {
+  display: block;
+  min-width: max-content;
+  font-size: 0.9rem;
+  line-height: 1.32;
+  tab-size: 2;
+}
+
+.pp-doc-content .pp-code-block .line {
+  display: block;
+  line-height: 0;
+  counter-increment: pp-code-line;
+}
+
+.pp-doc-content .pp-code-block code {
+  counter-reset: pp-code-line;
+}
+
+.pp-doc-content .pp-code-block .line::before {
+  content: counter(pp-code-line);
+  display: inline-block;
+  width: 2rem;
+  margin-right: 1rem;
+  color: color-mix(in srgb, var(--pp-muted) 42%, transparent);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  user-select: none;
+}
+
+.pp-doc-content .pp-code-block[data-language="plaintext"] pre {
+  padding-top: 18px;
+}
+
+.pp-doc-content .pp-code-lang {
+  position: absolute;
+  top: 12px;
+  left: 14px;
+  z-index: 2;
+  max-width: calc(100% - 4.75rem);
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--pp-border) 72%, transparent);
+  border-radius: 999px;
+  padding: 0.18rem 0.55rem;
+  background: color-mix(in srgb, var(--pp-bg) 72%, transparent);
+  color: var(--pp-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.72rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  backdrop-filter: blur(12px);
+}
+
+.pp-doc-content .shiki,
+.pp-doc-content .shiki span {
+  color: var(--shiki-light, var(--pp-code-text)) !important;
+  background-color: var(--shiki-light-bg, var(--pp-code-bg)) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .pp-doc-content .shiki,
+  :root:not([data-theme]) .pp-doc-content .shiki span {
+    color: var(--shiki-dark, var(--pp-code-text)) !important;
+    background-color: var(--shiki-dark-bg, var(--pp-code-bg)) !important;
+  }
+}
+
+:root[data-theme="dark"] .pp-doc-content .shiki,
+:root[data-theme="dark"] .pp-doc-content .shiki span {
+  color: var(--shiki-dark, var(--pp-code-text)) !important;
+  background-color: var(--shiki-dark-bg, var(--pp-code-bg)) !important;
+}
+
+.pp-doc-content .pp-code-copy {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--pp-border) 72%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--pp-bg) 72%, transparent);
+  color: var(--pp-muted);
+  opacity: 0;
+  transform: translateY(-3px) scale(0.96);
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease,
+    color 0.18s ease,
+    border-color 0.18s ease,
+    background 0.18s ease;
+}
+
+.pp-doc-content .pp-code-block:hover .pp-code-copy,
+.pp-doc-content .pp-code-copy:focus-visible,
+.pp-doc-content .pp-code-copy.copied {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.pp-doc-content .pp-code-copy:hover,
+.pp-doc-content .pp-code-copy.copied {
+  color: var(--pp-accent);
+  border-color: color-mix(in srgb, var(--pp-accent) 44%, var(--pp-border));
+  background: color-mix(in srgb, var(--pp-bg) 88%, var(--pp-accent) 12%);
+}
+
+.pp-doc-content .pp-code-copy svg {
+  width: 17px;
+  height: 17px;
+  fill: currentColor;
+}
+
+.pp-doc-content.pp-code-wrap .pp-code-block pre code,
+.pp-doc-content .pp-code-block.pp-code-wrap pre code {
+  min-width: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .pp-doc-content :not(pre) > code {
@@ -970,9 +1144,11 @@ body::selection {
   display: block;
 }
 
-.pp-doc-content .pp-code-group-block .shiki {
+.pp-doc-content .pp-code-group-block .pp-code-block {
   margin: 0;
+  border: 0;
   border-radius: 0;
+  box-shadow: none;
 }
 
 .pp-doc-content table {

package/src/shared/scrollRestoration.ts

@@ -9,15 +9,14 @@ export function setupScrollRestoration(): () => void {
     window.history.scrollRestoration = "manual";
   }
 
-  let timeout: ReturnType<typeof setTimeout> | undefined;
   const onScroll = () => {
-    clearTimeout(timeout);
-    timeout = setTimeout(persistScrollPosition, 150);
+    persistScrollPosition();
   };
   window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("pagehide", persistScrollPosition);
   return () => {
     window.removeEventListener("scroll", onScroll);
-    clearTimeout(timeout);
+    window.removeEventListener("pagehide", persistScrollPosition);
   };
 }
 
@@ -44,17 +43,49 @@ export function restoreScrollPosition(): void {
   window.scrollTo({ top: readScrollPositionFromHistory(), left: 0, behavior: "auto" });
 }
 
-export function restoreScrollPositionAfterLayout(): void {
+export async function restoreScrollPositionAfterLayout(): Promise<void> {
+  await scrollAfterLayout(readScrollPositionFromHistory());
+}
+
+export async function scrollToTopAfterLayout(): Promise<void> {
+  await scrollAfterLayout(0);
+}
+
+async function scrollAfterLayout(top: number): Promise<void> {
   if (typeof window === "undefined") return;
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      const html = document.documentElement;
-      const previous = html.style.scrollBehavior;
-      html.style.scrollBehavior = "auto";
-      restoreScrollPosition();
-      html.style.scrollBehavior = previous;
-    });
-  });
+  await nextAnimationFrame();
+  await nextAnimationFrame();
+  await waitForImagesToSettle();
+  await nextAnimationFrame();
+
+  const html = document.documentElement;
+  const previous = html.style.scrollBehavior;
+  html.style.scrollBehavior = "auto";
+  window.scrollTo({ top, left: 0, behavior: "auto" });
+  html.style.scrollBehavior = previous;
+}
+
+function nextAnimationFrame(): Promise<void> {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+async function waitForImagesToSettle(timeoutMs = 1500): Promise<void> {
+  if (typeof document === "undefined") return;
+  const images = Array.from(document.images).filter((image) => !image.complete);
+  if (images.length === 0) return;
+
+  await Promise.race([
+    Promise.allSettled(
+      images.map(
+        (image) =>
+          new Promise<void>((resolve) => {
+            image.addEventListener("load", () => resolve(), { once: true });
+            image.addEventListener("error", () => resolve(), { once: true });
+          }),
+      ),
+    ),
+    new Promise<void>((resolve) => setTimeout(resolve, timeoutMs)),
+  ]);
 }
 
 export function skipNextScrollRestore(): void {

package/templates/docs/.preactpress/config.ts

@@ -77,9 +77,14 @@ export default defineConfig({
             items: [
               { text: "Markdown examples", link: "/markdown-examples" },
               { text: "Interactive MDX", link: "/interactive" },
+              { text: "Preact Signals", link: "/examples/preact-signals" },
+              { text: "Mermaid diagrams", link: "/examples/mermaid" },
+              { text: "RSS / Atom feed", link: "/examples/rss" },
               { text: "Algolia DocSearch", link: "/examples/algolia-docsearch" },
               { text: "Content loader", link: "/examples/content-loader" },
               { text: "Dynamic routes", link: "/examples/dynamic-routes" },
+              { text: "Custom theme", link: "/examples/custom-theme" },
+              { text: "Cloudflare Pages", link: "/examples/cloudflare-pages" },
               { text: "Static assets", link: "/examples/static-assets" },
             ],
           },

package/templates/docs/examples/cloudflare-pages.md

@@ -0,0 +1,117 @@
+---
+title: Cloudflare Pages deployment
+description: Deploy a PreactPress static site to Cloudflare Pages.
+tags:
+  - deploy
+  - examples
+---
+
+PreactPress outputs static files, so Cloudflare Pages can serve the generated `dist/` directory without a Node server.
+
+## Prerequisites
+
+- A PreactPress site committed to GitHub or GitLab
+- Node.js 20 or newer
+- A package script like:
+
+```json [package.json]
+{
+  "scripts": {
+    "check": "preactpress check",
+    "build": "preactpress build"
+  }
+}
+```
+
+## Configure PreactPress
+
+Set the final production URL in `.preactpress/config.ts`:
+
+```ts [.preactpress/config.ts]
+import { defineConfig } from "@kamod-ch/preactpress/config";
+
+export default defineConfig({
+  site: {
+    title: "My Docs",
+    description: "Documentation built with PreactPress",
+    url: "https://docs.example.com",
+    base: "/",
+  },
+});
+```
+
+Use `base: "/"` for normal Cloudflare Pages deployments. Only change `base` if you intentionally serve the site from a subpath.
+
+## Deploy with the Cloudflare dashboard
+
+1. Open **Cloudflare Dashboard → Workers & Pages → Create application → Pages**.
+2. Connect your GitHub or GitLab repository.
+3. Choose your PreactPress project.
+4. Use these build settings:
+
+| Setting             | Value            |
+| ------------------- | ---------------- |
+| Framework preset    | `None` / custom  |
+| Build command       | `pnpm run build` |
+| Build output folder | `dist`           |
+| Root directory      | project root     |
+
+If your docs live in a monorepo subfolder, set **Root directory** to that folder, for example:
+
+```txt
+packages/docs
+```
+
+## Environment variables
+
+Set the Node version in Cloudflare Pages:
+
+| Variable       | Value |
+| -------------- | ----- |
+| `NODE_VERSION` | `22`  |
+
+Cloudflare Pages usually detects pnpm from `pnpm-lock.yaml`. If needed, set:
+
+| Variable       | Value     |
+| -------------- | --------- |
+| `PNPM_VERSION` | `10.12.4` |
+
+## Optional: run checks before build
+
+For stricter deployments, use this build command:
+
+```sh
+pnpm run check && pnpm run build
+```
+
+This fails the deployment when routes, nav links, sidebar links, or internal Markdown links are invalid.
+
+## Deploy with Wrangler
+
+You can also deploy the built `dist/` directory manually with Wrangler:
+
+```sh
+pnpm run check
+pnpm run build
+pnpm dlx wrangler pages deploy dist --project-name my-preactpress-site
+```
+
+For a monorepo, run those commands from the site package directory or pass the correct output path.
+
+## Custom domains
+
+After the first deployment, add your domain in **Pages → Custom domains**. Then update `site.url` to match the production domain:
+
+```ts
+export default defineConfig({
+  site: {
+    url: "https://docs.example.com",
+  },
+});
+```
+
+This keeps canonical URLs, Open Graph metadata, `sitemap.xml`, `robots.txt`, and feeds correct.
+
+## Cache notes
+
+Cloudflare can cache hashed files under `assets/` aggressively because their filenames change when content changes. Avoid immutable caching for HTML, `preactpress-search.json`, and `preactpress-content/*.json`.