Add js web stuff to landing page + documentation

go/cmd/kjol-web/frontend/src/layers.ts

@@ -0,0 +1,72 @@
+// The layers of kjol, as data.
+//
+// This is the JS mirror of app/layers.go on the Go/WASM side. The site has two
+// front-ends built by two completely different pipelines, and the Layers menu has
+// to be identical in both — so it is a LIST in each, not markup, and the two lists
+// are the only thing that has to be kept in step.
+//
+// (A shared source would be better than a mirrored one. There isn't one: the Go
+// side compiles to WebAssembly and the JS side is bundled by esbuild, and nothing
+// is upstream of both. Keeping it to a flat array of plain data is what makes the
+// duplication survivable — you can diff the two by eye.)
+
+export interface Layer {
+    name: string;
+    href: string;
+    tagline: string;
+    /** Live = you can click into worked examples. Reference = documented, no demo. */
+    live: boolean;
+    /**
+     * The ONE field that does not match app/layers.go, and cannot: the two kits have
+     * different icon sets. This side names FontAwesome; the Go side names webui's own
+     * hand-drawn registry, which has no FontAwesome in it at all. Where the two have no
+     * glyph in common the names diverge (here `table-columns`, there `squares`).
+     *
+     * Both sides fail loudly rather than quietly — a name neither registry knows renders
+     * an empty box, and app/icons_test.go fails the build over it.
+     */
+    icon: string;
+}
+
+export const LAYERS: Layer[] = [
+    {
+        name: "Kjol Go",
+        href: "/go",
+        tagline: "The server base: config, database, logging, HTTP, mail, validation.",
+        live: false,
+        icon: "server",
+    },
+    {
+        name: "Kjol Wasm Web",
+        href: "/wasm",
+        tagline: "Web interfaces written in Go, compiled to WebAssembly. SSR + hydration, no JS build.",
+        live: true,
+        icon: "code",
+    },
+    {
+        name: "Kjol JS Web",
+        href: "/js",
+        tagline: "The Solid component kit, bundled by a Go toolchain: TSX → Solid → esbuild, Tailwind in Go.",
+        live: true,
+        icon: "table-columns",
+    },
+    {
+        name: "Kjol C",
+        href: "/c",
+        tagline: "Arena allocator, strings, math, lexer, platform layer.",
+        live: false,
+        icon: "bolt",
+    },
+    {
+        name: "Kjol Jai",
+        href: "/jai",
+        tagline: "Console rendering module. Early.",
+        live: false,
+        icon: "cube",
+    },
+];
+
+/** The layer the current path belongs to, or undefined on the front page. */
+export function currentLayer(path: string): Layer | undefined {
+    return LAYERS.find((l) => path === l.href || path.startsWith(l.href + "/"));
+}