74 lines
3.9 KiB
TypeScript
74 lines
3.9 KiB
TypeScript
// 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>
|
|
);
|
|
}
|