simple-site-generator 0.1.3 → 0.2.0

package/dist/verify/serve.js

@@ -0,0 +1,123 @@
+import { createServer } from 'node:http';
+import { createReadStream } from 'node:fs';
+import { readFile, stat } from 'node:fs/promises';
+import { extname, join, normalize, resolve } from 'node:path';
+import { gzipSync } from 'node:zlib';
+/**
+ * Minimal static file server for `ssg verify`.
+ *
+ * `verify` must measure the *built* site the way a real static host serves it,
+ * so it serves `dist/static` on an ephemeral port rather than reusing a dev
+ * server (which would report dev transforms, not the deployed bytes).
+ *
+ * "The way a real static host serves it" includes the two things that move
+ * Lighthouse most and that a production host always does:
+ *
+ * - **compression** — Caddy (and every CDN) serves `encode gzip`; a verifier
+ *   that ships raw bytes makes every byte budget and every LCP look ~3× worse
+ *   than production, so the score is not a measurement of the site.
+ * - **caching** — fingerprinted assets are immutable, so a browser (and
+ *   Lighthouse's cache audit) must be told that. Without the header the
+ *   `cache-insight` audit fails for a site whose host would pass it.
+ */
+const CONTENT_TYPES = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.mjs': 'text/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon',
+    '.txt': 'text/plain; charset=utf-8',
+    '.xml': 'application/xml; charset=utf-8',
+    '.woff2': 'font/woff2'
+};
+const COMPRESSIBLE = new Set([
+    'text/html; charset=utf-8',
+    'text/plain; charset=utf-8',
+    'text/css; charset=utf-8',
+    'text/javascript; charset=utf-8',
+    'application/json; charset=utf-8',
+    'application/xml; charset=utf-8',
+    'image/svg+xml'
+]);
+/** Vite fingerprints assets as `name-<hash>.ext`; those are immutable. */
+const IMMUTABLE = /-[A-Za-z0-9_-]{8,}\.[a-z0-9]+$/;
+function contentType(file) {
+    return CONTENT_TYPES[extname(file)] ?? 'application/octet-stream';
+}
+function cacheControl(file, type) {
+    if (IMMUTABLE.test(file))
+        return 'public, max-age=31536000, immutable';
+    if (type.startsWith('text/html'))
+        return 'no-cache';
+    return 'public, max-age=3600';
+}
+/** Candidate files for a request path, in the order a static host would try. */
+function candidatesFor(root, pathname) {
+    const clean = normalize(decodeURIComponent(pathname)).replace(/^(\.\.[/\\])+/, '');
+    const base = join(root, clean);
+    if (extname(base))
+        return [base];
+    return [join(base, 'index.html'), `${base}.html`, join(base, 'index.html')];
+}
+export async function startStaticServer(root) {
+    const absoluteRoot = resolve(root);
+    const server = createServer(async (request, response) => {
+        const pathname = new URL(request.url ?? '/', 'http://localhost').pathname;
+        const acceptsGzip = /\bgzip\b/.test(request.headers['accept-encoding'] ?? '');
+        for (const candidate of candidatesFor(absoluteRoot, pathname)) {
+            try {
+                const info = await stat(candidate);
+                if (!info.isFile())
+                    continue;
+                const type = contentType(candidate);
+                const headers = {
+                    'content-type': type,
+                    'cache-control': cacheControl(candidate, type),
+                    vary: 'Accept-Encoding'
+                };
+                if (acceptsGzip && COMPRESSIBLE.has(type)) {
+                    const body = gzipSync(await readFile(candidate));
+                    response.writeHead(200, {
+                        ...headers,
+                        'content-encoding': 'gzip',
+                        'content-length': body.length
+                    });
+                    response.end(body);
+                    return;
+                }
+                response.writeHead(200, { ...headers, 'content-length': info.size });
+                createReadStream(candidate).pipe(response);
+                return;
+            }
+            catch {
+                // Try the next candidate.
+            }
+        }
+        response.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
+        response.end('Not found');
+    });
+    await new Promise((done, fail) => {
+        server.once('error', fail);
+        // Port 0 → the OS picks a free port, so parallel runs cannot collide.
+        server.listen(0, '127.0.0.1', () => done());
+    });
+    const address = server.address();
+    if (!address || typeof address === 'string') {
+        server.close();
+        throw new Error('static server did not bind to a port');
+    }
+    return {
+        url: `http://127.0.0.1:${address.port}`,
+        port: address.port,
+        close: () => new Promise((done) => {
+            server.close(() => done());
+        })
+    };
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "simple-site-generator",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "UNLICENSED",
   "author": "simsustech",
   "type": "module",
   "bin": {
+    "ssg": "dist/cli.js",
     "simple-site-generator": "dist/cli.js"
   },
   "main": "dist/cli.js",
@@ -21,19 +22,24 @@
   },
   "homepage": "https://github.com/simsustech/simple-site-generator/tree/main/packages/simple-site-generator#readme",
   "dependencies": {
-    "@vitrify/tools": "^0.5.4",
-    "handlebars": "^4.7.9",
-    "inquirer": "^14.2.2",
+    "@inquirer/prompts": "^8.7.4",
+    "@vitrify/tools": "^0.5.5",
+    "chrome-launcher": "^1.2.2",
+    "gray-matter": "^4.0.3",
+    "handlebars": "^4.7.10",
+    "inquirer": "^14.2.4",
     "latest-version": "^9.0.0",
-    "minimist": "^1.2.8"
+    "lighthouse": "^13.5.0",
+    "minimist": "^1.2.8",
+    "zod": "^4.6.7"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.10",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.5",
     "typescript": "^7.0.2",
-    "vite": "^8.3.0",
-    "vue": "^3.5.42"
+    "vite": "^8.3.5",
+    "vue": "^3.5.44"
   },
   "files": [
     "dist",

package/templates/app/.github/workflows/deploy-rsync.yaml.hbs

@@ -0,0 +1,58 @@
+name: Build and deploy through rsync
+
+on:
+  push:
+    branches: ["production"]
+
+env:
+  working-directory: ./
+  url: {{ url }}
+
+jobs:
+  build:
+    name: Build and deploy production
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+
+      - name: Creating .npmrc
+        run: |
+          cat > $\{{env.working-directory}}.npmrc << EOF
+            @simsustech:registry=https://npm.simsus.tech
+            //npm.simsus.tech/:_authToken=$SIMSUSTECH_NPM_TOKEN
+          EOF
+        env:
+          SIMSUSTECH_NPM_TOKEN: $\{{ secrets.SIMSUSTECH_NPM_TOKEN }}
+
+      - name: Install pnpm
+        # generated projects have no packageManager field, so set the version here
+        uses: pnpm/action-setup@v6
+        with:
+          version: 12
+
+      - name: Use Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version: 24
+
+      - name: Install and build
+        working-directory: $\{{ env.working-directory }}
+        run: |
+          pnpm i
+          pnpm run build
+
+      - name: rsync deployments
+        uses: burnett01/rsync-deployments@v9
+        with:
+          switches: -avzr --delete
+          path: $\{{env.working-directory}}dist/static/
+          remote_path: /srv/$\{{env.url}}
+          remote_host: $\{{ secrets.DEPLOY_HOST }}
+          remote_user: $\{{ secrets.DEPLOY_USER }}
+          remote_key: $\{{ secrets.DEPLOY_KEY }}
+
+      - name: Remove .npmrc
+        # run even if an earlier step failed: this file holds registry tokens
+        if: always()
+        # -f: the file may legitimately be gone already
+        run: rm -f $\{{env.working-directory}}.npmrc

package/templates/app/.oxfmtrc.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "none",
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "**/dist/**",
+    "**/node_modules/**",
+    "**/*.hbs",
+    ".github/**",
+    "pnpm-lock.yaml",
+    "pnpm-workspace.yaml"
+  ],
+  "overrides": [
+    {
+      "files": ["*.json5"],
+      "options": {
+        "singleQuote": false,
+        "quoteProps": "preserve"
+      }
+    },
+    {
+      "files": ["*.yml", "*.yaml"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

package/templates/app/.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "off"
+  }
+}

package/templates/app/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["vue.volar", "oxc.oxc-vscode"]
+}

package/templates/app/build/Caddyfile.hbs

@@ -0,0 +1,24 @@
+{{ url }} {
+  # The bundler fingerprints every asset as `name-<hash>.ext`; such a file is
+  # immutable, so the browser may keep it for a year without revalidating.
+  @hashed path_regexp hashed -[A-Za-z0-9_]{8,}\.(js|mjs|css|woff2|png|jpe?g|webp|svg)$
+  header @hashed Cache-Control "public, max-age=31536000, immutable"
+
+  encode zstd gzip
+  handle {
+    root * /srv/{{ url }}
+    try_files {path}.html {path}
+    file_server
+  }
+
+  # A missing page has to answer 404. Ending `try_files` in a file — the old
+  # `/index.html` fallback, or a `/404.html` one — answers 200, so every
+  # mistyped URL is served as a real page and a crawler indexes it. The status
+  # a monitor sees would be a lie too.
+  handle_errors {
+    root * /srv/{{ url }}
+    @notFound expression {err.status_code} == 404
+    rewrite @notFound /404.html
+    file_server
+  }
+}

package/templates/app/build/Caddyfile.preview

@@ -0,0 +1,34 @@
+# Local preview of the built site — `pnpm preview`, or directly:
+#
+#   caddy run --config build/Caddyfile.preview --adapter caddyfile
+#
+# Why a Caddyfile rather than `caddy file-server`: the routes are extensionless
+# (`/about` serves `about.html`), and `file-server` has no `try_files` — it
+# answers 404 for every page URL. This mirrors the shape of `build/Caddyfile`,
+# which is what production runs, so what you check here is what ships.
+#
+# The port is overridable: PREVIEW_PORT=9000 pnpm preview
+:{$PREVIEW_PORT:8095} {
+	# `root` is relative to the directory the command runs in, which is this
+	# package — so it needs no absolute path and survives a different checkout.
+	root * ./dist/static
+
+	encode gzip
+
+	# The bundler fingerprints every asset as `name-<hash>.ext`; such a file is
+	# immutable, so the browser may keep it for a year without revalidating.
+	@hashed path_regexp hashed -[A-Za-z0-9_]{8,}\.(js|mjs|css|woff2|png|jpe?g|webp|svg)$
+	header @hashed Cache-Control "public, max-age=31536000, immutable"
+
+	try_files {path}.html {path}
+	file_server
+
+	# A missing page answers 404 with the site's own error page, rather than
+	# ending `try_files` in a file (which would answer 200 — a soft 404).
+	handle_errors {
+		root * ./dist/static
+		@notFound expression {err.status_code} == 404
+		rewrite @notFound /404.html
+		file_server
+	}
+}

package/templates/app/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!--
+      `charset` must stay first: the encoding has to be declared inside the
+      first 1 KiB, and the SSR-collected meta tags are injected at the end of the
+      head element (see the vitrify injectSsrContext fix) so they cannot push
+      this line out of that window.
+    -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--
+      Fonts are served by the preset's web-fonts provider (bunny); connecting
+      early avoids an extra round-trip on the critical path.
+    -->
+    <link rel="preconnect" href="https://fonts.bunny.net" crossorigin />
+
+    <!--
+      The Meta plugin owns the document title. A static title element written
+      here would be a second one in the built HTML, which the verifier rejects —
+      and a crawler would then pick arbitrarily between the two.
+
+      Keep element literals (an angle-bracketed `title`, `head` or `link`) out of
+      these comments: vitrify rewrites the head with tag-matching regular
+      expressions, and a tag-shaped word inside a comment is a false match that
+      mangles the document.
+    -->
+  </head>
+
+  <body>
+    <!-- A body opening and closing tag is sufficient for Vitrify -->
+    <div id="app"></div>
+  </body>
+</html>

package/templates/app/logo.svg

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="76.023819mm"
+   height="66.642418mm"
+   viewBox="0 0 76.02382 66.642419"
+   version="1.1"
+   id="svg130"
+   sodipodi:docname="logo text.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   inkscape:export-filename="/home/stefan/Nextcloud/logo simsustech4.png"
+   inkscape:export-xdpi="44"
+   inkscape:export-ydpi="44"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview132"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.5"
+     inkscape:cx="281"
+     inkscape:cy="-298"
+     inkscape:window-width="2560"
+     inkscape:window-height="1379"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     fit-margin-top="3"
+     fit-margin-left="3"
+     fit-margin-right="3"
+     fit-margin-bottom="3" />
+  <defs
+     id="defs127" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(308.77352,-114.8964)">
+    <g
+       id="g8406-0"
+       transform="matrix(0.03124864,-0.05412422,0.05412422,0.03124864,-375.29155,156.30058)">
+      <path
+         sodipodi:type="star"
+         style="fill:#22c92a;fill-opacity:1;stroke:#111115;stroke-width:64.7013;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4686-5-0-6"
+         inkscape:flatsided="true"
+         sodipodi:sides="6"
+         sodipodi:cx="-1711.292"
+         sodipodi:cy="-2891.6067"
+         sodipodi:r1="1941.0391"
+         sodipodi:r2="1680.9893"
+         sodipodi:arg1="1.0471975"
+         sodipodi:arg2="1.5707963"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         transform="matrix(0.28316651,0,0,0.28316651,1432.8627,2202.612)"
+         inkscape:transform-center-x="1.6003776e-05"
+         inkscape:transform-center-y="-1.5044873e-05"
+         d="m -740.77237,-1210.6176 -1941.03903,10e-5 -970.5197,-1680.9891 970.5195,-1680.9892 1941.03905,-1e-4 970.51962,1680.9891 z" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.161583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 673.46343,907.80596 H 856.6758"
+         id="path4451-3-6-2-2" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.242375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 398.74983,1383.7452 137.4093,237.9999"
+         id="path5002-2-3-6" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.242375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 673.46343,907.80596 274.81862,10e-5"
+         id="path5002-5-9-7-1" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.242375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 1223.1007,1859.8056 1360.51,1621.8057"
+         id="path5002-3-1-5-8" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.48475px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 536.15913,1621.7451 948.28205,907.80606 1360.51,1621.8057 Z"
+         id="path5157-2-9-7" />
+      <path
+         style="fill:#d67915;fill-opacity:1;stroke:#000000;stroke-width:0.48475px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 948.28205,907.80606 274.81865,-2e-4 274.8186,475.99984 -137.4093,238 -412.22795,-713.99964"
+         id="path5272-7-2-9" />
+      <path
+         style="fill:#00a4e6;fill-opacity:1;stroke:#000000;stroke-width:0.48475px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 948.28205,907.80606 -274.81861,-10e-5 -274.81861,475.99984 137.5143,237.9393 412.12292,-713.93904"
+         id="path5274-0-2-2" />
+      <path
+         style="fill:#eece0c;fill-opacity:1;stroke:#000000;stroke-width:0.48475px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 536.15913,1621.7451 137.30434,238.0605 h 549.63723 l 137.4093,-237.9999 -824.35087,-0.061"
+         id="path5276-9-8-0" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 673.46342,907.80601 549.63728,-8e-5 274.8186,475.99977 -274.8186,475.9999 -549.63723,10e-5"
+         id="path7069-9-2" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.48475px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 673.46346,1859.8057 398.6448,1383.8058 673.46342,907.80601"
+         id="path7071-7-3" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 673.46342,907.80601 398.64479,1383.8059 673.46344,1859.8058"
+         id="path7281-3-7" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3208;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 965.83267,938.18694 c -10.97866,-19.01559 -24.1009,-19.03555 -33.40914,-2.91319"
+         id="path33462"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3208;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 1342.9801,1591.4734 c 10.9786,19.0155 4.4348,30.3897 -14.1817,30.3897"
+         id="path33462-2"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3208;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 565.71911,1621.69 c -18.40838,0 -24.03457,-9.498 -15.36275,-24.5181"
+         id="path40533"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3208;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 565.71916,1621.69 763.07924,0.1731"
+         id="path43135" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3208;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 550.35638,1597.1719 932.42356,935.27375"
+         id="path43137" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:18.3208;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 965.83269,938.18695 1342.9789,1591.4741"
+         id="path43139" />
+    </g>
+  </g>
+</svg>

package/templates/app/pnpm-workspace.yaml

@@ -0,0 +1,10 @@
+# pnpm 12 does not run a dependency's build scripts unless they are allowlisted,
+# and it fails the install when one is skipped. These need theirs:
+#   - esbuild / sharp select and link a prebuilt native binary at install time,
+#   - @parcel/watcher compiles its native watcher.
+# Vitrify's dev server uses esbuild, so without these the project installs but
+# cannot build.
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  sharp: true

package/templates/app/public/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+Disallow: /404
+
+Sitemap: /sitemap.xml

package/templates/app/src/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <Suspense>
+      <template #default>
+        <component :is="Component" />
+      </template>
+      <template #fallback>
+        <div>Loading...</div>
+      </template>
+    </Suspense>
+  </router-view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'App'
+}
+</script>
+
+<script setup lang="ts"></script>
+
+<style lang="sass"></style>

package/templates/app/src/pages/Contact.md

@@ -0,0 +1,25 @@
+---
+id: contact
+title: Contact
+description: How to reach us, including the project repository and support channels.
+label: Contact
+# Prerendered like every other page, so it gets a real <h1> and its own
+# <head> tags. A content page should not be client-only: `noSsr` would make it
+# invisible to a crawler and would fail `ssg verify`.
+tags:
+  - contact
+  - footer
+lists:
+  - header: Links
+    items:
+      - overline: Source
+        label: https://github.com/simsustech/simple-site-generator
+        icon:
+          name: i-mdi-github
+---
+
+## Get in touch
+
+Add your own contact details here — a phone number, an email address and your
+opening hours. Anything you put in the `ssg.extra` block of `vitrify.config.ts`
+is also mirrored into `LocalBusiness` structured data automatically.

package/templates/app/src/pages/Error404Page.vue

@@ -0,0 +1,31 @@
+<template>
+  <main
+    class="ssg-section flex flex-center text-center min-h-[60vh] bg-[var(--q-surface-container-low)] text-[var(--q-on-surface)]"
+  >
+    <div class="ssg-section__inner">
+      <!--
+        A real `h1`: the 404 page is a page like any other, and `ssg verify`
+        requires exactly one `h1` on every page. Using a styled `div` here would
+        make the site fail its own check.
+      -->
+      <h1 class="text-[clamp(5rem,18vw,10rem)] leading-none m-0">404</h1>
+
+      <p class="text-step-1 opacity-80 mt-space-2 mb-0">Sorry, nothing here.</p>
+
+      <!--
+        The kit's own action: it carries the primary/on-primary pair, so this
+        button cannot drift into a hand-picked colour. An earlier version of this
+        page used `color="white" text-color="blue"`, which measured 2.54:1 and put
+        a Quasar-blue label on a green page.
+      -->
+      <CtaButton class="mt-space-4" label="Go home" route="/" />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { CtaButton } from '@simple-site-generator/templates'
+
+// Keep the name — `ssg check` and the router both key off it.
+defineOptions({ name: 'Error404Page' })
+</script>