@tinyvolt/pie 0.1.0 → 0.2.0

package/README.md

@@ -55,3 +55,15 @@ pnpm build     # build to .output/
 pnpm start     # run the built server
 pnpm preview   # preview the build with vite
 ```
+
+## Publishing
+
+Bump `version` in `package.json`, then at the repo root:
+
+```sh
+npm whoami
+npm login # if npm whoami fails
+npm publish --dry-run   # list the files without publishing
+npm publish
+git tag pie@<version> && git push origin pie@<version>
+```

package/init/site-agents.md

@@ -32,6 +32,8 @@ Do the work in the folders above. Don't edit `node_modules/@tinyvolt/pie/`: inst
 Flat `key: value` lines. Values may be quoted. A key may appear only once.
 
 - `title` (required): shown in the header and in every browser tab title.
+- `url`: where the site is deployed, e.g. `https://example.com`. Needed for `sitemap.xml`, `robots.txt`, canonical links and `og:url`; without it the build skips them and warns.
+- `description`: shown in search results and link previews for a page with no `description` of its own.
 
 ## Pages
 
@@ -47,13 +49,14 @@ canvas: left
 ```
 
 - `title`: the tab title. Empty means the tab shows the site title alone.
+- `description`: shown in search results and link previews. Empty means `site.yml`'s `description`.
 - `canvas`: `left`, `right`, `top`, `bottom` or `none` (default). Adds a canvas on that side of the page.
 
 Other keys are ignored. A bad value fails the build, and shows an error screen in dev.
 
 Math uses KaTeX: `$…$` inline, and `$$…$$` on its own lines for a display block.
 
-A page's URL must not match a route in `node_modules/@tinyvolt/pie/src/routes/` (`/`, `/about`, `/pages`). For example, `pages/about.md` fails the build.
+A page's URL must not match a route in `node_modules/@tinyvolt/pie/src/routes/` (`/`, `/pages`). For example, `pages/pages.md` fails the build.
 
 ## Python editors
 
@@ -71,6 +74,7 @@ pie.circle(a, r)
 - All editors on one page share the same Python variables and the same canvas.
 - `import numpy`, `scipy`, `matplotlib` and other [Pyodide packages](https://pyodide.org/en/0.28.2/usage/packages-in-pyodide.html) load on first use.
 - `plt.show()` shows matplotlib figures under the editor.
+- `` ```python-editor collapsed `` starts the editor collapsed: only its toolbar shows until the reader expands it. Other words after `python-editor` are ignored.
 
 ## Drawing on the canvas: `pie.*`
 

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@tinyvolt/pie",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A Markdown-based SSG for interactive science explainers. Create a site with: npx @tinyvolt/pie init my-site",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TinyVolt/pie-ssg.git"
+  },
   "exports": {
     "./vite": "./vite.ts"
   },

package/pages/about.md

@@ -0,0 +1,5 @@
+---
+title: About
+---
+
+# About

package/pages/python-editor.md

@@ -14,7 +14,7 @@ print(A)
 
 Below are python editors created using \`\`\`python-editor ... \`\`\` code fence:
 
-```python-editor
+```python-editor collapsed
 a = pie.point(1, 2, out='a')
 r = pie.scalar(1, out='r')
 c = pie.circle(a, r)

package/src/app.css

@@ -256,6 +256,8 @@ main .katex-display {
 /* Hidden until MarkdownBody swaps it for the editor; keeps its space so the text below doesn't jump. */
 pre:has(> code.language-python-editor) {
   visibility: hidden;
+  max-height: 20rem;
+  overflow: hidden;
 }
 
 .python-editor {
@@ -265,8 +267,24 @@ pre:has(> code.language-python-editor) {
   font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
 }
 
+/* Default cap on the code's height. Dragging the resize bar replaces it with a fixed height. */
 .python-editor .cm-editor {
   font-size: 0.875rem;
+  max-height: 20rem;
+}
+
+.python-editor .cm-scroller {
+  overflow-y: auto;
+}
+
+.python-editor-resize {
+  height: 6px;
+  cursor: row-resize;
+  touch-action: none;
+}
+
+.python-editor-resize:hover {
+  background: var(--color-border, #ddd);
 }
 
 .python-editor-toolbar {
@@ -278,6 +296,9 @@ pre:has(> code.language-python-editor) {
 }
 
 .python-editor-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
@@ -296,9 +317,23 @@ pre:has(> code.language-python-editor) {
   font-size: 0.875rem;
 }
 
-/* ↺ draws small in most fonts. */
-.python-editor-reset {
-  font-size: 1.125rem;
+.python-editor-result {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.python-editor-result-success {
+  color: var(--color-success, #1a7f37);
+}
+
+.python-editor-result-error {
+  color: var(--color-error, #c00);
+}
+
+.python-editor-result-stopped {
+  color: var(--color-warning, #9a6700);
 }
 
 .python-editor-collapse {
@@ -307,6 +342,7 @@ pre:has(> code.language-python-editor) {
 
 /* Collapsed: only the toolbar shows. Hidden with CSS so the editor keeps its code. */
 .python-editor-collapsed .python-editor-code,
+.python-editor-collapsed .python-editor-resize,
 .python-editor-collapsed .python-editor-output {
   display: none;
 }
@@ -315,12 +351,20 @@ pre:has(> code.language-python-editor) {
   border-top: none;
 }
 
+/* Right padding leaves room for the copy button so it doesn't cover the text. */
 .python-editor-output {
-  padding: 0.5rem;
+  position: relative;
+  padding: 0.5rem 2.75rem 0.5rem 0.5rem;
   border-top: 1px solid var(--color-border, #ddd);
   font-size: 0.875rem;
 }
 
+.python-editor-copy {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
 .python-editor-text {
   margin: 0;
   max-height: 20rem;

package/src/components/PageMeta.tsx

@@ -0,0 +1,40 @@
+import { Link, Meta } from "@solidjs/meta";
+import { useLocation } from "@solidjs/router";
+import { Show } from "solid-js";
+import site from "/site.yml";
+import { PageTitle } from "./PageTitle";
+
+/**
+ * The tab title plus the tags for search results and link previews. Each route renders it once:
+ * `@solidjs/meta` replaces a `<meta>` only when its content matches too, so a page's tag can't override a default.
+ * Empty `title` or `description` falls back to `site.yml`. The canonical link and `og:url` need `site.yml`'s `url`.
+ */
+export function PageMeta(props: { title?: string; description?: string }) {
+  const location = useLocation();
+  const ogTitle = () => props.title || site.title;
+  const description = () => props.description || site.description;
+  return (
+    <>
+      <PageTitle>{props.title}</PageTitle>
+      <Meta property="og:type" content="website" />
+      <Meta property="og:site_name" content={site.title} />
+      <Meta property="og:title" content={ogTitle()} />
+      <Show when={description()}>
+        {description => (
+          <>
+            <Meta name="description" content={description()} />
+            <Meta property="og:description" content={description()} />
+          </>
+        )}
+      </Show>
+      <Show when={site.url}>
+        {url => (
+          <>
+            <Link rel="canonical" href={url() + location.pathname} />
+            <Meta property="og:url" content={url() + location.pathname} />
+          </>
+        )}
+      </Show>
+    </>
+  );
+}

package/src/components/icons.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from 'solid-js';
+
 export type Direction = 'left' | 'right' | 'up' | 'down';
 
 const CHEVRON_TURN: Record<Direction, number> = { left: 0, up: 90, right: 180, down: 270 };
@@ -20,3 +22,73 @@ export function Chevron(props: { direction: Direction }) {
     </svg>
   );
 }
+
+/** The shared frame for the icons below: 24×24 drawing, lines in the text color. */
+function Icon(props: { children: JSX.Element }) {
+  return (
+    <svg
+      class="icon"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      {props.children}
+    </svg>
+  );
+}
+
+export function PlayIcon() {
+  return (
+    <Icon>
+      <path d="M6 4l14 8-14 8z" fill="currentColor" />
+    </Icon>
+  );
+}
+
+export function StopIcon() {
+  return (
+    <Icon>
+      <rect x="5" y="5" width="14" height="14" rx="1" fill="currentColor" />
+    </Icon>
+  );
+}
+
+export function ResetIcon() {
+  return (
+    <Icon>
+      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+    </Icon>
+  );
+}
+
+export function CopyIcon() {
+  return (
+    <Icon>
+      <rect x="8" y="8" width="14" height="14" rx="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </Icon>
+  );
+}
+
+export function CheckIcon() {
+  return (
+    <Icon>
+      <path d="M20 6L9 17l-5-5" />
+    </Icon>
+  );
+}
+
+export function CrossIcon() {
+  return (
+    <Icon>
+      <path d="M18 6L6 18M6 6l12 12" />
+    </Icon>
+  );
+}

package/src/lib/markdown/components/MarkdownBody.tsx

@@ -30,9 +30,10 @@ export function MarkdownBody(props: { html: string; store?: NodeStore; class?: s
         const pre = codeEl.parentElement!;
         if (!pre.isConnected) return;
         const code = codeEl.textContent ?? '';
+        const collapsed = codeEl.hasAttribute('data-collapsed');
         const host = document.createElement('div');
         pre.replaceWith(host);
-        disposers.push(render(() => <PythonEditor code={code} scope={scope} />, host));
+        disposers.push(render(() => <PythonEditor code={code} collapsed={collapsed} scope={scope} />, host));
       });
     });
   });

package/src/lib/markdown/components/PythonEditor.tsx

@@ -1,7 +1,9 @@
-import { Accessor, createSignal, For, onCleanup, onMount, Setter, Show } from 'solid-js';
+import { Accessor, Component, createSignal, For, onCleanup, onMount, Setter, Show } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 import { basicSetup, EditorView } from 'codemirror';
 import { keymap } from '@codemirror/view';
 import { python } from '@codemirror/lang-python';
+import { CheckIcon, Chevron, CopyIcon, CrossIcon, PlayIcon, ResetIcon, StopIcon } from '~/components/icons';
 import type { PythonScope, RunStatus } from '~/lib/python/runner';
 
 const STATUS_TEXT: Record<RunStatus | 'idle', string> = {
@@ -19,6 +21,15 @@ const END_NOTE: Partial<Record<RunStatus, string>> = {
   killed: 'Stopped. Python restarted, so variables from earlier blocks are gone.',
 };
 
+/** How the last run ended, shown in the toolbar. */
+type RunResult = 'success' | 'error' | 'stopped';
+
+const RESULT: Record<RunResult, { icon: Component; text: string }> = {
+  success: { icon: CheckIcon, text: 'Ran successfully' },
+  error: { icon: CrossIcon, text: 'Error' },
+  stopped: { icon: StopIcon, text: 'Stopped' },
+};
+
 const isActive = (status: RunStatus | 'idle') =>
   status === 'waiting' || status === 'loading' || status === 'running';
 
@@ -27,8 +38,11 @@ type OutputEntry =
   | { type: 'text'; text: Accessor<string>; setText: Setter<string> }
   | { type: 'plot'; png: string };
 
-/** An editable block of Python. Run draws its `pie.*` calls on the scope's canvas. */
-export function PythonEditor(props: { code: string; scope: PythonScope }) {
+/**
+ * An editable block of Python. Run draws its `pie.*` calls on the scope's canvas.
+ * `collapsed`: start with only the toolbar showing.
+ */
+export function PythonEditor(props: { code: string; collapsed?: boolean; scope: PythonScope }) {
   let host!: HTMLDivElement;
   let view: EditorView | undefined;
   let stop: (() => void) | undefined;
@@ -37,8 +51,13 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
   const [output, setOutput] = createSignal<OutputEntry[]>([]);
   const [error, setError] = createSignal('');
   const [note, setNote] = createSignal('');
-  const [collapsed, setCollapsed] = createSignal(false);
+  const [collapsed, setCollapsed] = createSignal(props.collapsed ?? false);
+  const [copied, setCopied] = createSignal(false);
   const active = () => isActive(status());
+  const result = (): RunResult | undefined => {
+    if (status() === 'finished') return error() ? 'error' : 'success';
+    if (status() === 'stopped' || status() === 'killed') return 'stopped';
+  };
   const initialCode = props.code.replace(/\n$/, '');
 
   const addText = (text: string) => {
@@ -70,6 +89,28 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
     );
   };
 
+  /** Printed text and the error, without plots or the stop note. */
+  const copyText = () =>
+    [
+      ...output().flatMap((entry) => (entry.type === 'text' ? [entry.text()] : [])),
+      error(),
+    ]
+      .map((part) => part.replace(/\n+$/, ''))
+      .filter(Boolean)
+      .join('\n');
+
+  let copiedTimer: ReturnType<typeof setTimeout> | undefined;
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(copyText());
+    } catch {
+      return; // Clipboard is only available on https or localhost.
+    }
+    setCopied(true);
+    clearTimeout(copiedTimer);
+    copiedTimer = setTimeout(() => setCopied(false), 1500);
+  };
+
   /** Puts the original code back. Ctrl/Cmd+Z undoes it. */
   const reset = () => {
     if (!view) return;
@@ -82,6 +123,32 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
     if (!collapsed()) view?.requestMeasure();
   };
 
+  /** Drag the bar under the code to set the editor's height. */
+  const startResize = (e: PointerEvent) => {
+    if (!view || e.button !== 0) return;
+    e.preventDefault(); // no text selection while dragging
+    const handle = e.currentTarget as HTMLElement;
+    const editor = view.dom;
+    const startY = e.clientY;
+    const startHeight = editor.getBoundingClientRect().height;
+    // About one line, plus the 4px top and bottom padding CodeMirror puts on its content.
+    const minHeight = view.defaultLineHeight + 8;
+
+    const move = (ev: PointerEvent) => {
+      editor.style.maxHeight = 'none';
+      editor.style.height = `${Math.max(minHeight, startHeight + ev.clientY - startY)}px`;
+    };
+    const end = () => {
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', end);
+      handle.removeEventListener('pointercancel', end);
+    };
+    handle.setPointerCapture(e.pointerId);
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+  };
+
   const runFromKeyboard = () => {
     run();
     return true;
@@ -105,12 +172,14 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
 
   onCleanup(() => {
     stop?.();
+    clearTimeout(copiedTimer);
     view?.destroy();
   });
 
   return (
     <div class="python-editor" classList={{ 'python-editor-collapsed': collapsed() }}>
       <div class="python-editor-code" ref={host} />
+      <div class="python-editor-resize" title="Drag to resize" onPointerDown={startResize} />
       <div class="python-editor-toolbar">
         <button
           type="button"
@@ -119,7 +188,7 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
           aria-label={active() ? 'Stop' : 'Run'}
           onClick={() => (active() ? stop?.() : run())}
         >
-          {active() ? '■' : '▶'}
+          {active() ? <StopIcon /> : <PlayIcon />}
         </button>
         <button
           type="button"
@@ -128,9 +197,17 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
           aria-label="Reset code"
           onClick={reset}
         >
-          ↺
+          <ResetIcon />
         </button>
         <span class="python-editor-status">{STATUS_TEXT[status()]}</span>
+        <Show when={result()}>
+          {(r) => (
+            <span class={`python-editor-result python-editor-result-${r()}`}>
+              <Dynamic component={RESULT[r()].icon} />
+              {RESULT[r()].text}
+            </span>
+          )}
+        </Show>
         <button
           type="button"
           class="python-editor-button python-editor-collapse"
@@ -139,11 +216,22 @@ export function PythonEditor(props: { code: string; scope: PythonScope }) {
           aria-expanded={!collapsed()}
           onClick={toggleCollapsed}
         >
-          {collapsed() ? '▼' : '▲'}
+          <Chevron direction={collapsed() ? 'down' : 'up'} />
         </button>
       </div>
       <Show when={output().length > 0 || error() || note()}>
         <div class="python-editor-output">
+          <Show when={copyText()}>
+            <button
+              type="button"
+              class="python-editor-button python-editor-copy"
+              title={copied() ? 'Copied' : 'Copy output'}
+              aria-label={copied() ? 'Copied' : 'Copy output'}
+              onClick={copy}
+            >
+              {copied() ? <CheckIcon /> : <CopyIcon />}
+            </button>
+          </Show>
           <For each={output()}>
             {(entry) =>
               entry.type === 'text' ? (

package/src/lib/markdown/frontmatter.ts

@@ -28,6 +28,8 @@ const FIELDS = {
   canvas: oneOf(['left', 'right', 'top', 'bottom', 'none'], 'none'),
   // Empty: the tab shows the site title alone.
   title: text(''),
+  // Empty: `site.yml`'s `description`.
+  description: text(''),
 };
 
 export type Frontmatter = Values<typeof FIELDS>;

package/src/lib/markdown/render.ts

@@ -1,5 +1,5 @@
 import katex from 'katex';
-import { Marked } from 'marked';
+import { Marked, Renderer } from 'marked';
 
 function renderMath(formula: string, displayMode: boolean): string {
   return katex.renderToString(formula, { displayMode, throwOnError: false });
@@ -47,6 +47,14 @@ const marked = new Marked({
       },
     },
   ],
+  renderer: {
+    // ```python-editor collapsed: marked keeps only the first word, so mark the block for the editor here.
+    code(token) {
+      const [lang, ...flags] = (token.lang ?? '').split(/\s+/);
+      if (lang !== 'python-editor' || !flags.includes('collapsed')) return false;
+      return new Renderer().code(token).replace('<code ', '<code data-collapsed ');
+    },
+  },
 });
 
 export function renderMarkdown(markdown: string): string {

package/src/lib/site/vitePlugin.ts

@@ -1,17 +1,32 @@
 import path from 'node:path';
 import type { Plugin } from 'vite';
-import { parseKeyValues, readFields, text, type Values } from '../markdown/frontmatter';
+import { parseKeyValues, readFields, text, type Field, type Values } from '../markdown/frontmatter';
+
+/** An `http://` or `https://` address, without a trailing `/`. */
+function address(): Field<string> {
+  return {
+    default: '',
+    parse(raw) {
+      if (!/^https?:\/\/[^\s/]+/.test(raw)) throw new Error(`must start with http:// or https://, got ${JSON.stringify(raw)}`);
+      return raw.replace(/\/+$/, '');
+    },
+  };
+}
 
 /** Every field `site.yml` can set. Keys not listed here are ignored. */
 const FIELDS = {
   /** Shown in the header and in every browser tab title. */
   title: text(''),
+  /** Where the site is deployed, e.g. `https://example.com`. Empty: no sitemap, robots.txt, canonical links or `og:url`. */
+  url: address(),
+  /** The search-result description of a page that has no `description` of its own. */
+  description: text(''),
 };
 
 export type Site = Values<typeof FIELDS>;
 
 /** Reads `site.yml`. Throws, naming the file, on a bad line or a missing `title`. */
-function parseSite(file: string, yml: string): Site {
+export function parseSite(file: string, yml: string): Site {
   try {
     const site = readFields(FIELDS, parseKeyValues(yml));
     if (!site.title) throw new Error('`title` is required');

package/src/routes/[...slug].tsx

@@ -2,6 +2,7 @@ import { createAsync, useParams } from '@solidjs/router';
 import { HttpStatusCode } from '@solidjs/start';
 import { Match, Switch } from 'solid-js';
 import 'katex/dist/katex.min.css';
+import { PageMeta } from '~/components/PageMeta';
 import { PageTitle } from '~/components/PageTitle';
 import { CanvasPage } from '~/lib/markdown/components/CanvasPage';
 import { MarkdownBody } from '~/lib/markdown/components/MarkdownBody';
@@ -27,7 +28,7 @@ export default function Page() {
           const canvas = page.frontmatter.canvas;
           return (
             <>
-              <PageTitle>{page.frontmatter.title}</PageTitle>
+              <PageMeta title={page.frontmatter.title} description={page.frontmatter.description} />
               {canvas === 'none' ? <MarkdownBody html={page.html} /> : <CanvasPage side={canvas} html={page.html} />}
             </>
           );

package/src/routes/index.tsx

@@ -1,3 +1,4 @@
+import { PageMeta } from "~/components/PageMeta";
 import { layout, type LayoutModules } from "~/lib/layouts/layout";
 
 // Shown when the site has no `layouts/index.tsx`.
@@ -11,4 +12,13 @@ function Home() {
   );
 }
 
-export default layout(import.meta.glob<LayoutModules[string]>("/layouts/index.tsx", { eager: true }), Home);
+const Layout = layout(import.meta.glob<LayoutModules[string]>("/layouts/index.tsx", { eager: true }), Home);
+
+export default function Index() {
+  return (
+    <>
+      <PageMeta />
+      <Layout />
+    </>
+  );
+}

package/src/routes/pages/index.tsx

@@ -1,11 +1,11 @@
 import { For } from 'solid-js';
-import { PageTitle } from '~/components/PageTitle';
+import { PageMeta } from '~/components/PageMeta';
 import { slugs } from '~/lib/markdown/pages';
 
 export default function Pages() {
   return (
     <main>
-      <PageTitle>Pages</PageTitle>
+      <PageMeta title="Pages" />
       <ul>
         <For each={slugs}>
           {slug => (

package/vite.ts

@@ -1,13 +1,15 @@
 // `pie()`: every Vite plugin a pie-ssg site needs. A site's `vite.config.ts` is `plugins: [pie()]`.
+import fs from 'node:fs';
 import path from 'node:path';
 import type { Plugin, PluginOption } from 'vite';
 import { nitro } from 'nitro/vite';
+import type { NitroModule } from 'nitro/types';
 import { solidStart } from '@solidjs/start/config';
 import { APP_DIR } from './src/lib/appDir';
 import { checkPageRoutes, markdownPages } from './src/lib/markdown/vitePlugin';
 import { checkFunctions } from './src/lib/nodes/functions/vitePlugin';
 import { checkLayouts } from './src/lib/layouts/vitePlugin';
-import { siteConfig } from './src/lib/site/vitePlugin';
+import { parseSite, siteConfig } from './src/lib/site/vitePlugin';
 
 /**
  * `~/...` in a site's own files (`functions/`, `nodes/`, `layouts/`) means the app's `src/`.
@@ -50,12 +52,45 @@ function dedupeSolid(): Plugin {
   };
 }
 
+/**
+ * After prerendering, writes `sitemap.xml` (every prerendered page) and `robots.txt` (pointing to it).
+ * Both need `site.yml`'s `url`; without it they are skipped with a warning. A site's own `public/` file wins.
+ */
+function seoFiles(): NitroModule {
+  return {
+    name: 'pie-seo-files',
+    setup(nitro) {
+      nitro.hooks.hook('prerender:done', ({ prerenderedRoutes }) => {
+        const { url } = parseSite('site.yml', fs.readFileSync(path.join(nitro.options.rootDir, 'site.yml'), 'utf8'));
+        if (!url) {
+          nitro.logger.warn('site.yml has no `url`: skipped sitemap.xml, robots.txt, canonical links and og:url. Add e.g. `url: https://example.com` before deploying.');
+          return;
+        }
+        const pages = prerenderedRoutes.filter(route => route.fileName?.endsWith('.html')).map(route => route.route).sort();
+        const escape = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const write = (name: string, contents: string) => {
+          const file = path.join(nitro.options.output.publicDir, name);
+          if (!fs.existsSync(file)) fs.writeFileSync(file, contents);
+        };
+        write('sitemap.xml', [
+          '<?xml version="1.0" encoding="UTF-8"?>',
+          '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+          ...pages.map(page => `  <url><loc>${escape(url + page)}</loc></url>`),
+          '</urlset>',
+          '',
+        ].join('\n'));
+        write('robots.txt', `User-agent: *\nAllow: /\n\nSitemap: ${url}/sitemap.xml\n`);
+      });
+    },
+  };
+}
+
 export function pie(): PluginOption[] {
   return [
     siteAlias(), optimizeDeps(), dedupeSolid(),
     markdownPages(), checkPageRoutes(), checkFunctions(), checkLayouts(), siteConfig(),
     // SolidStart resolves `appRoot` against the working directory.
     solidStart({ appRoot: path.relative(process.cwd(), APP_DIR) }),
-    nitro({ prerender: { crawlLinks: true, routes: ['/', '/pages'] } }),
+    nitro({ prerender: { crawlLinks: true, routes: ['/', '/pages'] }, modules: [seoFiles()] }),
   ];
 }

package/src/routes/about.tsx

@@ -1,10 +0,0 @@
-import { PageTitle } from "~/components/PageTitle";
-
-export default function About() {
-  return (
-    <main>
-      <PageTitle>About</PageTitle>
-      <h1>About</h1>
-    </main>
-  );
-}