The Svelte 5 SSG Migration (#1)

- Migrates the site to Svelte 5
- Still generates a static site with inlined critical path CSS for the ultimate in performance
- Opens up future possibilities for site growth

Reviewed-on: #1
Co-authored-by: mifi <badmf@mifi.dev>
Co-committed-by: mifi <badmf@mifi.dev>

scripts/critters.mjs

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+/**
+ * Post-build: inline critical CSS in dist/*.html (SvelteKit adapter-static output).
+ * Runs after vite build; Critters reads/writes relative to dist/.
+ *
+ * Critters with preload:'swap' adds onload but does not set rel="preload" as="style",
+ * so the link stays render-blocking. We fix that in postProcessSwapLinks().
+ */
+
+import Critters from 'critters';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, '..');
+const DIST = path.join(ROOT, 'dist');
+
+/**
+ * Critters leaves rel="stylesheet" on swap links; change to rel="preload" as="style"
+ * so the full CSS loads async and only applies on load (non-blocking).
+ */
+// function postProcessSwapLinks(html) {
+//     return html.replace(/<link\s+([^>]*)>/gi, (full, attrs) => {
+//         if (
+//             !/rel="stylesheet"/i.test(attrs) ||
+//             !/onload="this\.rel='stylesheet'"/i.test(attrs)
+//         ) {
+//             return full;
+//         }
+//         const fixed = attrs
+//             .replace(/\brel="stylesheet"\s*/i, 'rel="preload" as="style" ')
+//             .replace(
+//                 /\bonload="this\.rel='stylesheet'"/i,
+//                 'onload="this.onload=null;this.rel=\'stylesheet\'"',
+//             );
+//         return `<link ${fixed}>`;
+//     });
+// }
+
+async function main() {
+    if (!fs.existsSync(DIST)) {
+        console.error('dist/ not found. Run vite build first.');
+        process.exit(1);
+    }
+
+    const critters = new Critters({
+        path: DIST,
+        preload: 'default',
+        noscriptFallback: true,
+        pruneSource: false,
+        logLevel: 'warn',
+    });
+
+    const files = fs.readdirSync(DIST).filter((f) => f.endsWith('.html'));
+    for (const file of files) {
+        const filePath = path.join(DIST, file);
+        let html = fs.readFileSync(filePath, 'utf8');
+        html = await critters.process(html);
+        // html = postProcessSwapLinks(html);
+        fs.writeFileSync(filePath, html, 'utf8');
+        console.log('✓ Critical CSS inlined → dist/' + file);
+    }
+
+    console.log('Critical CSS step complete.');
+}
+
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});