Update 3d chart mode, add US heatmap, move kjol-web -> kjol-website

go/cmd/kjol-website/frontend/src/pages/public/PublicLayout.tsx

@@ -0,0 +1,73 @@
+// The chrome around every server-rendered public page.
+//
+// The bundler's SSR entry is hardcoded to import { PublicLayout } from this exact
+// path and to call it with { currentPath, children } — it is a contract, not a
+// convention. The client takeover (public.tsx) wraps the same body in the same
+// layout with the same currentPath, which is what makes the server markup and the
+// post-takeover markup identical. If they diverged, the page would visibly rebuild
+// itself the moment the bundle landed.
+//
+// Deliberately plain. This renders inside goja against a DOM shim at BUILD time,
+// where there is no layout, no getBoundingClientRect and no window — so nothing in
+// here may measure the page. That rules out the kit's floating components (Menu,
+// Tooltip, Popover), which is why the Layers menu is a row of links here and a real
+// menu everywhere else.
+
+import { JSXElement } from "solid-js";
+
+export function PublicLayout(props: { currentPath: string; children?: JSXElement }) {
+    return (
+        <div class="min-h-screen bg-surface">
+            <nav class="border-b border-line">
+                <div class="mx-auto flex max-w-2xl items-center gap-2 px-4 py-4">
+                    <a href="/" class="flex items-center gap-2.5 no-underline">
+                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-default bg-fill-neutral text-on-fill-neutral">
+                            {/* The boat is the point of the name: kjol is Norwegian for KEEL. Inlined
+                                rather than pulled from the icon kit, because the kit's <Icon> reads a
+                                CSS custom property at runtime to pick its style — and under SSR there
+                                is no computed style to read. */}
+                            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M11.25 3.75v12M11.25 15.75H4.5l6.75-12M14.25 15.75h4.5l-4.5-7.5zM2.25 18.75h19.5l-2.4 3H4.65z" />
+                            </svg>
+                        </span>
+                        <span class="flex items-baseline gap-1.5">
+                            <span class="text-lg font-semibold tracking-tight text-ink">Kjøl JS Web</span>
+                            <span class="text-sm text-ink-faint">Solid + Go toolchain</span>
+                        </span>
+                    </a>
+
+                    <ul class="ml-auto flex items-center gap-1">
+                        <li>
+                            <a
+                                href="/js"
+                                class={
+                                    props.currentPath === "/js"
+                                        ? "rounded-default bg-surface-raised px-3 py-1.5 text-sm font-medium text-ink no-underline"
+                                        : "rounded-default px-3 py-1.5 text-sm font-medium text-ink-soft no-underline hover:bg-surface-raised hover:text-ink"
+                                }
+                            >
+                                Docs
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                href="/wasm"
+                                class="rounded-default px-3 py-1.5 text-sm font-medium text-ink-soft no-underline hover:bg-surface-raised hover:text-ink"
+                            >
+                                Wasm Web
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+
+            <main>{props.children}</main>
+
+            <footer class="mx-auto max-w-2xl px-4 pb-14">
+                <p class="text-sm text-ink-faint">
+                    Kjøl JS Web is one layer of kjol — a shared base layer. kjol is Norwegian for keel.
+                </p>
+            </footer>
+        </div>
+    );
+}