@kamod-ch/preactpress 1.0.0 → 1.0.3

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

@@ -1,94 +1,114 @@
-import { defineConfig } from '@kamod-ch/preactpress/config'
+import { defineConfig } from "@kamod-ch/preactpress/config";
+
+const matomoImageTracker =
+  '<!-- Matomo Image Tracker--><img referrerpolicy="no-referrer-when-downgrade" src="https://matomo.kamod.ch/matomo.php?idsite=6&amp;rec=1" style="border:0" alt="" /><!-- End Matomo -->';
+
+const includeMatomoImageTracker = process.env.PREACTPRESS_INCLUDE_MATOMO === "true";
 
 export default defineConfig({
-  srcExclude: ['README.md', 'partials/**', 'parts/**'],
+  srcExclude: ["README.md", "partials/**", "parts/**"],
   site: {
-    title: 'PreactPress',
-    description: 'Vite + Preact static site generator for Markdown and MDX'
+    title: "PreactPress",
+    description: "The documentation framework for Preact",
   },
   markdown: {
     html: false,
     emoji: true,
-    math: true
+    math: true,
+  },
+  transformHtml(html) {
+    if (!includeMatomoImageTracker) return html;
+    return html.replace("</body>", `  ${matomoImageTracker}\n  </body>`);
   },
   themeConfig: {
     outline: true,
     search: true,
     lastUpdated: true,
-    footer: 'Built with PreactPress.'
+    footer: "Built with PreactPress.",
+    socialLinks: [
+      {
+        icon: "github",
+        link: "https://github.com/kamod-ch/preactpress",
+        ariaLabel: "PreactPress on GitHub",
+      },
+    ],
   },
   locales: {
     root: {
-      label: 'English',
-      lang: 'en',
+      label: "English",
+      lang: "en",
       themeConfig: {
         nav: [
-          { text: 'Guide', link: '/guide/getting-started' },
-          { text: 'Reference', link: '/guide/configuration' },
-          { text: 'Examples', link: '/markdown-examples' }
+          { text: "Guide", link: "/guide/getting-started" },
+          { text: "Reference", link: "/guide/configuration" },
+          { text: "Examples", link: "/markdown-examples" },
         ],
         sidebar: [
           {
-            text: 'Introduction',
+            text: "Introduction",
             items: [
-              { text: 'Overview', link: '/' },
-              { text: 'What is PreactPress?', link: '/guide/what-is-preactpress' },
-              { text: 'Getting started', link: '/guide/getting-started' },
-              { text: 'First five minutes', link: '/guide/first-five-minutes' }
-            ]
+              { text: "Overview", link: "/" },
+              { text: "What is PreactPress?", link: "/guide/what-is-preactpress" },
+              { text: "Getting started", link: "/guide/getting-started" },
+              { text: "First five minutes", link: "/guide/first-five-minutes" },
+            ],
           },
           {
-            text: 'Authoring',
+            text: "Authoring",
             items: [
-              { text: 'Creating pages', link: '/guide/creating-pages' },
-              { text: 'Markdown and MDX', link: '/guide/markdown-and-mdx' },
-              { text: 'Routing and i18n', link: '/guide/routing' },
-              { text: 'Default theme', link: '/guide/default-theme' }
-            ]
+              { text: "Creating pages", link: "/guide/creating-pages" },
+              { text: "Markdown and MDX", link: "/guide/markdown-and-mdx" },
+              { text: "Routing and i18n", link: "/guide/routing" },
+              { text: "Default theme", link: "/guide/default-theme" },
+            ],
           },
           {
-            text: 'Reference',
+            text: "Reference",
             items: [
-              { text: 'Configuration', link: '/guide/configuration' },
-              { text: 'CLI and validation', link: '/guide/commands' },
-              { text: 'Advanced APIs', link: '/guide/advanced' },
-              { text: 'Custom themes', link: '/guide/custom-themes' },
-              { text: 'Deploy', link: '/guide/deploy' }
-            ]
+              { text: "Configuration", link: "/guide/configuration" },
+              { text: "CLI and validation", link: "/guide/commands" },
+              { text: "Advanced APIs", link: "/guide/advanced" },
+              { text: "Custom themes", link: "/guide/custom-themes" },
+              { text: "Deploy", link: "/guide/deploy" },
+            ],
           },
           {
-            text: 'Examples',
+            text: "Examples",
             items: [
-              { text: 'Markdown examples', link: '/markdown-examples' },
-              { text: 'Interactive MDX', link: '/interactive' }
-            ]
-          }
-        ]
-      }
+              { text: "Markdown examples", link: "/markdown-examples" },
+              { text: "Interactive MDX", link: "/interactive" },
+              { text: "Algolia DocSearch", link: "/examples/algolia-docsearch" },
+              { text: "Content loader", link: "/examples/content-loader" },
+              { text: "Dynamic routes", link: "/examples/dynamic-routes" },
+              { text: "Static assets", link: "/examples/static-assets" },
+            ],
+          },
+        ],
+      },
     },
     de: {
-      label: 'Deutsch',
-      lang: 'de',
-      link: '/de/',
-      description: 'Kleine deutschsprachige i18n-Demo für PreactPress',
+      label: "Deutsch",
+      lang: "de",
+      link: "/de/",
+      description: "Kleine deutschsprachige i18n-Demo für PreactPress",
       themeConfig: {
-        footer: 'Erstellt mit PreactPress.',
+        footer: "Erstellt mit PreactPress.",
         nav: [
-          { text: 'Start', link: '/de' },
-          { text: 'Einführung', link: '/de/guide/what-is-preactpress' },
-          { text: 'English docs', link: '/guide/getting-started' }
+          { text: "Start", link: "/de" },
+          { text: "Einführung", link: "/de/guide/what-is-preactpress" },
+          { text: "English docs", link: "/guide/getting-started" },
         ],
         sidebar: [
           {
-            text: 'i18n-Demo',
+            text: "i18n-Demo",
             items: [
-              { text: 'Willkommen', link: '/de' },
-              { text: 'Was ist PreactPress?', link: '/de/guide/what-is-preactpress' },
-              { text: 'Erste Schritte', link: '/de/guide/getting-started' }
-            ]
-          }
-        ]
-      }
-    }
-  }
-})
+              { text: "Willkommen", link: "/de" },
+              { text: "Was ist PreactPress?", link: "/de/guide/what-is-preactpress" },
+              { text: "Erste Schritte", link: "/de/guide/getting-started" },
+            ],
+          },
+        ],
+      },
+    },
+  },
+});

package/templates/docs/README.md

@@ -4,12 +4,12 @@ This is the canonical PreactPress documentation and the site created by `preactp
 
 ## Commands
 
-| Script | Purpose |
-| --- | --- |
-| `pnpm run dev` | Start the docs at http://localhost:5173 |
-| `pnpm run check` | Validate routes, config, and links |
-| `pnpm run build` | Generate static output in `dist/` |
-| `pnpm run preview` | Preview the production output locally |
+| Script             | Purpose                                 |
+| ------------------ | --------------------------------------- |
+| `pnpm run dev`     | Start the docs at http://localhost:5173 |
+| `pnpm run check`   | Validate routes, config, and links      |
+| `pnpm run build`   | Generate static output in `dist/`       |
+| `pnpm run preview` | Preview the production output locally   |
 
 ## Structure
 

package/templates/docs/components/BenefitsGrid.tsx

@@ -0,0 +1,45 @@
+/** @jsx h */
+import { h } from "preact";
+
+const benefits = [
+  {
+    title: "Preact components in MDX",
+    details:
+      "Bring interactive examples, demos and product-specific widgets into otherwise simple content.",
+    href: "/guide/markdown-and-mdx",
+  },
+  {
+    title: "Documentation features included",
+    details:
+      "Navigation, sidebars, local search, outlines, tags, i18n and validation are ready in the docs template.",
+    href: "/guide/configuration",
+  },
+  {
+    title: "Static deployment anywhere",
+    details:
+      "Build once and publish the generated files to GitHub Pages, Netlify, Vercel, Cloudflare Pages or any static host.",
+    href: "/guide/deploy",
+  },
+];
+
+export default function BenefitsGrid() {
+  return (
+    <section class="pp-mkt-section" aria-labelledby="benefits-title">
+      <div class="pp-mkt-section-heading">
+        <p class="pp-mkt-eyebrow">Three main benefits</p>
+        <h2 id="benefits-title">Focused on Preact documentation</h2>
+      </div>
+      <div class="pp-mkt-card-grid pp-mkt-card-grid-three">
+        {benefits.map((benefit, index) => (
+          <a class="pp-mkt-card" href={benefit.href} key={benefit.title}>
+            <span class="pp-mkt-card-index" aria-hidden="true">
+              0{index + 1}
+            </span>
+            <h3>{benefit.title}</h3>
+            <p>{benefit.details}</p>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/docs/components/CliBlock.tsx

@@ -0,0 +1,38 @@
+/** @jsx h */
+import { h } from "preact";
+
+const commands = [
+  { cwd: "~", cmd: "pnpm dlx @kamod-ch/preactpress init my-docs --template docs" },
+  { cwd: "~", cmd: "cd my-docs" },
+  { cwd: "my-docs", cmd: "pnpm install" },
+  { cwd: "my-docs", cmd: "pnpm dev", active: true },
+];
+
+export default function CliBlock() {
+  return (
+    <section class="pp-mkt-cli" aria-label="Start a PreactPress documentation site">
+      <div class="pp-mkt-code-card pp-mkt-code-card-terminal">
+        <div class="pp-mkt-code-topbar" aria-hidden="true">
+          <span />
+          <span />
+          <span />
+          <span class="pp-mkt-terminal-title">Terminal — zsh</span>
+        </div>
+        <pre>
+          <code>
+            {commands.map((command) => (
+              <span class="pp-mkt-terminal-line" key={command.cmd}>
+                <span class="pp-mkt-terminal-prompt" aria-hidden="true">
+                  <span class="pp-mkt-terminal-path">{command.cwd}</span>
+                  <span class="pp-mkt-terminal-caret">%</span>
+                </span>
+                <span class="pp-mkt-terminal-cmd">{command.cmd}</span>
+                {command.active ? <span class="pp-mkt-terminal-cursor" aria-hidden="true" /> : null}
+              </span>
+            ))}
+          </code>
+        </pre>
+      </div>
+    </section>
+  );
+}

package/templates/docs/components/ComparisonTable.tsx

@@ -0,0 +1,60 @@
+/** @jsx h */
+import { h } from "preact";
+
+const products = [
+  {
+    product: "PreactPress",
+    components: "Preact + MDX",
+    focus: "Preact documentation",
+  },
+  {
+    product: "VitePress",
+    components: "Vue",
+    focus: "Vue documentation",
+  },
+  {
+    product: "Docusaurus",
+    components: "React",
+    focus: "Large documentation portals",
+  },
+  {
+    product: "Starlight",
+    components: "Astro",
+    focus: "Cross-framework content sites",
+  },
+];
+
+export default function ComparisonTable() {
+  return (
+    <section class="pp-mkt-section" aria-labelledby="comparison-title">
+      <div class="pp-mkt-section-heading">
+        <p class="pp-mkt-eyebrow">Comparison</p>
+        <h2 id="comparison-title">Pick the documentation tool that matches your stack</h2>
+        <p>
+          Each tool has a clear audience. PreactPress is for teams that want documentation built
+          around Preact and MDX.
+        </p>
+      </div>
+      <div class="pp-mkt-table-wrap">
+        <table class="pp-mkt-table">
+          <thead>
+            <tr>
+              <th scope="col">Product</th>
+              <th scope="col">Components</th>
+              <th scope="col">Best for</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.map((product) => (
+              <tr key={product.product}>
+                <th scope="row">{product.product}</th>
+                <td>{product.components}</td>
+                <td>{product.focus}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

package/templates/docs/components/CopyableCommand.tsx

@@ -0,0 +1,86 @@
+/** @jsx h */
+import { h } from "preact";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+async function copyText(text: string): Promise<void> {
+  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.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textarea);
+}
+
+export default function CopyableCommand({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false);
+  const resetTimer = useRef<number | undefined>(undefined);
+
+  const copy = useCallback(async () => {
+    try {
+      await copyText(command);
+      setCopied(true);
+      window.clearTimeout(resetTimer.current);
+      resetTimer.current = window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setCopied(false);
+    }
+  }, [command]);
+
+  useEffect(() => () => window.clearTimeout(resetTimer.current), []);
+
+  return (
+    <div class="pp-mkt-copyable">
+      <code class="pp-mkt-copyable-code">{command}</code>
+      <button
+        type="button"
+        class={`pp-mkt-copy-btn${copied ? " pp-mkt-copy-btn-copied" : ""}`}
+        onClick={copy}
+        aria-label={copied ? "Command copied" : "Copy command"}
+        title={copied ? "Copied" : "Copy command"}
+      >
+        {copied ? (
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path
+              d="M20 6 9 17l-5-5"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        ) : (
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <rect
+              x="9"
+              y="9"
+              width="11"
+              height="11"
+              rx="2"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            />
+            <path
+              d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        )}
+        <span class="pp-mkt-copy-btn-label">{copied ? "Copied" : "Copy"}</span>
+      </button>
+    </div>
+  );
+}

package/templates/docs/components/Counter.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'preact/hooks'
+import { useState } from "preact/hooks";
 
-export default function Counter({ initial = 0 }: { initial?: number }) {
-  const [count, setCount] = useState(initial)
+export function Counter({ initial = 0 }: { initial?: number }) {
+  const [count, setCount] = useState(initial);
 
   return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}>
+    <div style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
       <button
         type="button"
         onClick={() => setCount((value) => value - 1)}
@@ -21,5 +21,7 @@ export default function Counter({ initial = 0 }: { initial?: number }) {
         +
       </button>
     </div>
-  )
+  );
 }
+
+export default Counter;

package/templates/docs/components/MarketingHero.tsx

@@ -0,0 +1,63 @@
+/** @jsx h */
+import { h } from "preact";
+
+const actions = [
+  { text: "Get started", href: "/guide/getting-started", theme: "brand" },
+  { text: "View demo", href: "#interactive-demo", theme: "alt" },
+  {
+    text: "GitHub",
+    href: "https://github.com/kamod-ch/preactpress",
+    theme: "ghost",
+    external: true,
+  },
+];
+
+export default function MarketingHero() {
+  return (
+    <section class="pp-mkt-hero" aria-labelledby="preactpress-hero-title">
+      <div class="pp-mkt-hero-copy">
+        <p class="pp-mkt-eyebrow">PreactPress</p>
+        <h1 id="preactpress-hero-title">The documentation framework for Preact</h1>
+        <p class="pp-mkt-hero-lead">
+          Build fast documentation, blogs and product sites with Markdown, MDX, Preact and Vite.
+        </p>
+        <div class="pp-mkt-actions">
+          {actions.map((action) => (
+            <a
+              class={`pp-mkt-button pp-mkt-button-${action.theme}`}
+              href={action.href}
+              key={action.text}
+              rel={action.external ? "noopener noreferrer" : undefined}
+              target={action.external ? "_blank" : undefined}
+            >
+              {action.text}
+            </a>
+          ))}
+        </div>
+      </div>
+      <div class="pp-mkt-hero-panel" aria-label="PreactPress workflow">
+        <span class="pp-mkt-panel-label">Markdown</span>
+        <span class="pp-mkt-panel-label">MDX</span>
+        <span class="pp-mkt-panel-label">Preact</span>
+        <span class="pp-mkt-panel-arrow" aria-hidden="true">
+          <svg
+            class="pp-mkt-panel-arrow-icon"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="M12 5v10M8 11l4 4 4-4"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </span>
+        <strong>Static docs</strong>
+      </div>
+    </section>
+  );
+}

package/templates/docs/components/MdxDemo.tsx

@@ -0,0 +1,96 @@
+/** @jsx h */
+import { h } from "preact";
+import { Counter } from "./Counter.tsx";
+
+const sourceLines = [
+  {
+    line: 1,
+    parts: [
+      { kind: "keyword", text: "import" },
+      { kind: "plain", text: " { Counter } " },
+      { kind: "keyword", text: "from" },
+      { kind: "string", text: "'./components/Counter'" },
+    ],
+  },
+  { line: 2, parts: [] },
+  {
+    line: 3,
+    parts: [{ kind: "heading", text: "# Interactive documentation" }],
+  },
+  { line: 4, parts: [] },
+  {
+    line: 5,
+    parts: [{ kind: "component", text: "<Counter />" }],
+    active: true,
+  },
+];
+
+function EditorToken({ kind, text }: { kind: string; text: string }) {
+  return <span class={`pp-mkt-editor-token pp-mkt-editor-token-${kind}`}>{text}</span>;
+}
+
+export default function MdxDemo() {
+  return (
+    <section
+      class="pp-mkt-section pp-mkt-demo"
+      id="interactive-demo"
+      aria-labelledby="interactive-demo-title"
+    >
+      <div class="pp-mkt-section-heading">
+        <p class="pp-mkt-eyebrow">Interactive demo</p>
+        <h2 id="interactive-demo-title">A small MDX example</h2>
+        <p>
+          Author mostly in Markdown, then drop in Preact components exactly where the page needs
+          interactivity.
+        </p>
+      </div>
+      <div class="pp-mkt-demo-grid">
+        <div class="pp-mkt-demo-code">
+          <div class="pp-mkt-code-card pp-mkt-code-card-editor">
+            <div class="pp-mkt-code-topbar" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+              <span class="pp-mkt-editor-title">
+                <span class="pp-mkt-editor-tab">pages/interactive.mdx</span>
+              </span>
+            </div>
+            <pre>
+              <code>
+                {sourceLines.map((sourceLine) => (
+                  <span
+                    class={`pp-mkt-editor-line${sourceLine.active ? " pp-mkt-editor-line-active" : ""}`}
+                    key={sourceLine.line}
+                  >
+                    <span class="pp-mkt-editor-gutter" aria-hidden="true">
+                      {sourceLine.line}
+                    </span>
+                    <span class="pp-mkt-editor-content">
+                      {sourceLine.parts.map((part) => (
+                        <EditorToken
+                          kind={part.kind}
+                          key={`${sourceLine.line}-${part.text}`}
+                          text={part.text}
+                        />
+                      ))}
+                      {sourceLine.active ? (
+                        <span class="pp-mkt-editor-cursor" aria-hidden="true" />
+                      ) : null}
+                    </span>
+                  </span>
+                ))}
+              </code>
+            </pre>
+          </div>
+        </div>
+        <div class="pp-mkt-demo-result" aria-label="Rendered MDX result">
+          <article>
+            <p class="pp-mkt-demo-label">Rendered result</p>
+            <h3>Interactive documentation</h3>
+            <Counter />
+          </article>
+        </div>
+      </div>
+    </section>
+  );
+}