Learn: per-lesson URLs, a :::data shared-dataset construct, and a linked-views deep dive

vite.config.ts

@@ -3,11 +3,18 @@ import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
+import { generateLearnPages, lessonInputs } from './scripts/learn-pages';
 
 const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8')) as {
   version: string;
 };
 
+// Write a static `learn/<slug>/index.html` shell per lesson (from the lesson `.md`
+// frontmatter) before the inputs below reference them. Regenerated whenever Vite
+// (re)loads its config — every dev start and build — so a newly added lesson needs a
+// dev restart to get its page; the generated dirs are git-ignored.
+generateLearnPages();
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -24,11 +31,14 @@ export default defineConfig({
       // lightweight `src/landing` entry); the app at `/app/` (app/index.html →
       // src/main.tsx). The app is hash-routed, so it runs unchanged under /app/.
       // `/learn/` is the deep-dive learning section — another light marketing
-      // entry (src/learn), reusing core + the landing's chart embed only.
+      // entry (src/learn), reusing core + the landing's chart embed only. Its index
+      // is `learn/index.html`; each lesson is its own page (`learn/<slug>/`) from a
+      // generated shell, added to the inputs here via `lessonInputs()`.
       input: {
         main: fileURLToPath(new URL('./index.html', import.meta.url)),
         app: fileURLToPath(new URL('./app/index.html', import.meta.url)),
         learn: fileURLToPath(new URL('./learn/index.html', import.meta.url)),
+        ...lessonInputs(),
       },
       output: {
         // Split the heavy vendors so the chunk graph stays legible and the PWA