Update kjol website with C documentation
This commit is contained in:
@@ -10,20 +10,25 @@
|
||||
|
||||
The values below match the Go/WASM section's css/app.css on purpose — same
|
||||
Lora, same sky accent — so that crossing between /wasm and /js reads as two
|
||||
halves of ONE site rather than two demos that happen to share a domain. The
|
||||
parts of ONE site rather than two demos that happen to share a domain. The
|
||||
two sections are built by completely different pipelines; they should not look
|
||||
like it.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
@theme {
|
||||
/* The accent. `primary` is the ONE semantic token the Solid kit actually
|
||||
honours (bg-primary / text-primary / border-primary / bg-primary-hover);
|
||||
everything else in the kit names a raw Tailwind neutral directly. That is a
|
||||
real difference from the Go/WASM kit — which is themed end to end by tokens
|
||||
and can therefore switch to dark by changing ten values — and the /js/theming
|
||||
page says so out loud rather than pretending otherwise. */
|
||||
--color-primary: #0284c7; /* sky-600 — fills; they carry white text */
|
||||
--color-primary-hover: #0369a1; /* sky-700 */
|
||||
/* The brand: navy and red, the Norwegian flag muted down. These are the SAME values
|
||||
the Go/WASM section's css/app.css sets, and under the same names — so the Layers
|
||||
menu, the sidebar highlight and the callouts are the same navy on both sides of the
|
||||
site rather than two navies that happen to be close.
|
||||
|
||||
primary FILLS (white text sits on it) and is the NAVY; accent is TEXT and icons and
|
||||
is the RED (it has to be readable on the surface); primary-subtle/-border are the
|
||||
tinted panel. */
|
||||
--color-primary: #1e3a63; /* muted navy — fills; they carry white text */
|
||||
--color-primary-hover: #16294a;
|
||||
--color-primary-subtle: #eef2f8; /* a navy wash — tinted panels, callouts */
|
||||
--color-primary-border: #c5d1e2;
|
||||
--color-accent: #9e1b32; /* dark red — accent TEXT */
|
||||
|
||||
/* Lora, the same body face the Go/WASM section vendors. The woff2 files are
|
||||
served out of wwwroot/fonts by the same server, so this section pays no
|
||||
@@ -77,3 +82,21 @@
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* The dark values for the brand.
|
||||
---------------------------------------------------------------------------
|
||||
Both tokens move, for different reasons. The accent CLIMBS: a dark red on a near-black
|
||||
surface is unreadable, so it goes up to a light rose — still the flag's red, just the
|
||||
only version of it you can read here. The FILL climbs too, which the sky blue it
|
||||
replaced did not have to: navy is dark enough that a navy button on a #101013 page loses
|
||||
its edges and reads as a hole. And the tinted panel inverts outright, because a pale
|
||||
wash on #101013 is not a tint, it is a white box.
|
||||
|
||||
Same values, same names, as the Go/WASM section's css/app.css. */
|
||||
.dark {
|
||||
--color-accent: #f0a3ad;
|
||||
--color-primary: #2b4f80;
|
||||
--color-primary-hover: #37619b;
|
||||
--color-primary-subtle: #182234;
|
||||
--color-primary-border: #2c3e5c;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// SPA entry for the Kjol JS Web section (/js/*).
|
||||
// SPA entry for the Kjøl JS Web section (/js/*).
|
||||
//
|
||||
// This file is .ts and NOT .tsx on purpose — it is not a style choice. The bundler
|
||||
// resolves the SPA entry as src/app.ts (falling back to src/app.js) and nothing
|
||||
@@ -6,13 +6,13 @@
|
||||
// the pages it points at.
|
||||
//
|
||||
// The section is mounted under a base path rather than at the root: the front page
|
||||
// and the whole /wasm section are served by the Go/WASM half of this site, which
|
||||
// and the whole /wasm section are served by Kjøl Wasm Web, a different binary, which
|
||||
// this bundle knows nothing about. `base: "/js"` keeps every route in here relative
|
||||
// to that, so a link to "/kit" resolves to /js/kit and the two SPAs never fight
|
||||
// over a URL.
|
||||
// to that, so a link to "/components" resolves to /js/components and the two SPAs
|
||||
// never fight over a URL.
|
||||
//
|
||||
// Crossing OUT of /js (to the front page, or into /wasm) is a plain <a href> and a
|
||||
// real page load — the other half of the site is a different binary. That is the
|
||||
// real page load — the rest of the site is a different binary. That is the
|
||||
// honest cost of running two front-ends behind one server, and it is one navigation.
|
||||
|
||||
import { render, createComponent } from "solid-js/web";
|
||||
@@ -21,19 +21,26 @@ import type { RouteDefinition } from "@solidjs/router";
|
||||
|
||||
import { Shell } from "./layout/Shell.tsx";
|
||||
import { Overview } from "./pages/Overview.tsx";
|
||||
import { Kit } from "./pages/Kit.tsx";
|
||||
import { Forms } from "./pages/Forms.tsx";
|
||||
import { Table } from "./pages/Table.tsx";
|
||||
import { Theming } from "./pages/Theming.tsx";
|
||||
import { Components } from "./pages/Components.tsx";
|
||||
import { NotFound } from "./pages/NotFound.tsx";
|
||||
|
||||
// Routes as plain data: solid-router accepts RouteDefinition[] as `children`, which
|
||||
// is what lets a JSX-free entry declare a full route tree.
|
||||
//
|
||||
// There are only two. The kit used to be spread across /kit, /forms, /table and
|
||||
// /theming — a split along the lines of the SOURCE FILES rather than along anything a
|
||||
// reader wants: a person looking for a date picker does not know, and should not have
|
||||
// to guess, whether it was filed under forms or under overlays. It is one page now,
|
||||
// and the sidebar jumps you down it.
|
||||
const routes: RouteDefinition[] = [
|
||||
{ path: "/", component: Overview },
|
||||
{ path: "/kit", component: Kit },
|
||||
{ path: "/forms", component: Forms },
|
||||
{ path: "/table", component: Table },
|
||||
{ path: "/theming", component: Theming },
|
||||
{ path: "/components", component: Components },
|
||||
|
||||
// The catch-all, and it is not optional. The SERVER answers every /js/* URL with this
|
||||
// shell — it has no idea which paths the router knows about — so without a fallback an
|
||||
// unknown one renders the chrome around an empty <main>: a blank page, with a 200, and
|
||||
// nothing to tell you why. Kjøl Wasm Web has the same catch-all for the same reason.
|
||||
{ path: "*", component: NotFound },
|
||||
];
|
||||
|
||||
const root = document.getElementById("app");
|
||||
|
||||
36
go/cmd/kjol-web/frontend/src/componentGroups.ts
Normal file
36
go/cmd/kjol-web/frontend/src/componentGroups.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
// The component groups: one entry per section of /js/components, AND one line in the
|
||||
// sidebar that jumps to it.
|
||||
//
|
||||
// Declaring them once, as data, is what keeps those two in step — the sidebar cannot
|
||||
// offer a jump to a section that does not exist, and a section cannot go missing from
|
||||
// the sidebar.
|
||||
//
|
||||
// This is the JS mirror of app/components.go's componentGroups(). The ids match, so the
|
||||
// two sections of the site have the same shape and a reader crossing between them lands
|
||||
// in the same place. The ICONS differ, and have to: this side names FontAwesome, the Go
|
||||
// side names webui's own hand-drawn registry, and where the two have no glyph in common
|
||||
// the names diverge.
|
||||
|
||||
export interface ComponentGroup {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const COMPONENT_GROUPS: ComponentGroup[] = [
|
||||
{ id: "buttons", label: "Buttons", icon: "check" },
|
||||
{ id: "badges", label: "Badges & alerts", icon: "circle-info" },
|
||||
{ id: "cards", label: "Cards & layout", icon: "table-columns" },
|
||||
{ id: "icons", label: "Icons", icon: "star" },
|
||||
{ id: "forms", label: "Forms & inputs", icon: "pen-to-square" },
|
||||
{ id: "selects", label: "Selects & comboboxes", icon: "sliders" },
|
||||
{ id: "toggles", label: "Toggles & signature", icon: "check" },
|
||||
{ id: "dates", label: "Dates", icon: "calendar" },
|
||||
{ id: "tables", label: "Tables", icon: "table" },
|
||||
{ id: "overlays", label: "Overlays", icon: "copy" },
|
||||
{ id: "feedback", label: "Toasts & tours", icon: "bell" },
|
||||
{ id: "navigation", label: "Tabs & navigation", icon: "bars" },
|
||||
{ id: "search", label: "Fuzzy search", icon: "magnifying-glass" },
|
||||
{ id: "charts", label: "Charts", icon: "chart-column" },
|
||||
{ id: "theming", label: "Theming", icon: "palette" },
|
||||
];
|
||||
@@ -1,14 +1,22 @@
|
||||
// The layers of kjol, as data.
|
||||
// What kjøl is made of, 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.
|
||||
// There are two kinds of thing here, and conflating them was the mistake this file used
|
||||
// to make — one flat list called "the layers", holding both.
|
||||
//
|
||||
// (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.)
|
||||
// LAYERS are LANGUAGES. What kjøl is written in, and what it gives you in each:
|
||||
// the Go base, the TypeScript kit, the C base, the Jai modules. A layer is
|
||||
// a directory of code you can use on its own.
|
||||
//
|
||||
// COMPOSITIONS are FRAMEWORKS. What you get when the layers are assembled into
|
||||
// something that does a job — the two web engines. A composition is not
|
||||
// another language; it is a use of them.
|
||||
//
|
||||
// Kjøl Wasm Web is Go, all the way down. Kjøl JS Web is TypeScript compiled by a Go
|
||||
// toolchain — two layers, one framework. Listing that beside "C" as though they were the
|
||||
// same kind of noun told the reader nothing about either.
|
||||
//
|
||||
// This is the JS mirror of app/layers.go. The ids, the order and the taglines match; only
|
||||
// the ICONS diverge, and they have to — see below.
|
||||
|
||||
export interface Layer {
|
||||
name: string;
|
||||
@@ -20,7 +28,7 @@ export interface Layer {
|
||||
* 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`).
|
||||
* glyph in common the names diverge.
|
||||
*
|
||||
* 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.
|
||||
@@ -28,45 +36,59 @@ export interface Layer {
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const LAYERS: Layer[] = [
|
||||
/** Languages: what kjøl is written in. */
|
||||
export const LANGUAGES: Layer[] = [
|
||||
{
|
||||
name: "Kjol Go",
|
||||
name: "Go",
|
||||
href: "/go",
|
||||
tagline: "The server base: config, database, logging, HTTP, mail, validation.",
|
||||
tagline: "The base: config, database, logging, HTTP, mail, validation — and both web engines.",
|
||||
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,
|
||||
name: "TypeScript",
|
||||
href: "/ts",
|
||||
tagline: "The Solid component kit, the vendored runtime, and the generic scaffolding apps import as @kjol/*.",
|
||||
live: false,
|
||||
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",
|
||||
name: "C",
|
||||
href: "/c",
|
||||
tagline: "Arena allocator, strings, math, lexer, platform layer.",
|
||||
live: false,
|
||||
tagline: "Arena allocator, counted strings, math, a lexer, a platform layer — and a build system that is a C file.",
|
||||
live: true,
|
||||
icon: "bolt",
|
||||
},
|
||||
{
|
||||
name: "Kjol Jai",
|
||||
name: "Jai",
|
||||
href: "/jai",
|
||||
tagline: "Console rendering module. Early.",
|
||||
tagline: "Console rendering. Early.",
|
||||
live: false,
|
||||
icon: "cube",
|
||||
},
|
||||
];
|
||||
|
||||
/** The layer the current path belongs to, or undefined on the front page. */
|
||||
/** Compositions: what the languages are assembled into. */
|
||||
export const COMPOSITIONS: Layer[] = [
|
||||
{
|
||||
name: "Kjøl Wasm Web",
|
||||
href: "/wasm",
|
||||
tagline: "Web interfaces written in Go, compiled to WebAssembly. SSR + hydration, and no JavaScript build at all.",
|
||||
live: true,
|
||||
icon: "code",
|
||||
},
|
||||
{
|
||||
name: "Kjøl 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",
|
||||
},
|
||||
];
|
||||
|
||||
/** The layer or composition 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 + "/"));
|
||||
return [...COMPOSITIONS, ...LANGUAGES].find(
|
||||
(l) => path === l.href || path.startsWith(l.href + "/"),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// The Kjol JS Web shell: top bar (wordmark + Layers menu), sidebar, content.
|
||||
// The Kjøl JS Web shell: top bar (wordmark + Layers menu), sidebar, content.
|
||||
//
|
||||
// It is deliberately a near-copy of the Go/WASM section's AppLayout. Two front-ends,
|
||||
// one site: if the chrome drifted, crossing from /wasm to /js would feel like leaving
|
||||
@@ -7,11 +7,12 @@
|
||||
// and the page should not betray that.
|
||||
|
||||
import { For, Show } from "solid-js";
|
||||
import { A, useLocation } from "@solidjs/router";
|
||||
import { A, useLocation, useNavigate } from "@solidjs/router";
|
||||
import { Icon } from "@ui/Icons";
|
||||
import { Menu, MenuTrigger, MenuContent, MenuLink, MenuSection } from "@ui/Menu";
|
||||
import { Menu, MenuTrigger, MenuContent } from "@ui/Menu";
|
||||
import { ThemeToggle, initTheme } from "@ui/Theme";
|
||||
import { LAYERS } from "../layers.ts";
|
||||
import { LANGUAGES, COMPOSITIONS, currentLayer, Layer } from "../layers.ts";
|
||||
import { COMPONENT_GROUPS } from "../componentGroups.ts";
|
||||
|
||||
interface NavItem {
|
||||
path: string;
|
||||
@@ -22,68 +23,109 @@ interface NavItem {
|
||||
// The section's own pages. Paths are relative to the router base (/js).
|
||||
const NAV: NavItem[] = [
|
||||
{ path: "/", label: "Overview", icon: "circle-info" },
|
||||
{ path: "/kit", label: "Components", icon: "table-columns" },
|
||||
{ path: "/forms", label: "Forms", icon: "pen-to-square" },
|
||||
{ path: "/table", label: "AutoTable", icon: "table" },
|
||||
{ path: "/theming", label: "Theming", icon: "palette" },
|
||||
{ path: "/components", label: "Components", icon: "table-columns" },
|
||||
];
|
||||
|
||||
// The Layers menu — the site's primary navigation. kjol is a stack of layers, and
|
||||
// this is how you get from any one of them to any other. It is rendered from the
|
||||
// LAYERS array so adding a layer is one object, not a nav edit in two front-ends.
|
||||
// jumpTo scrolls a section into view, routing there first if we are somewhere else.
|
||||
//
|
||||
// Layers that are not `live` still appear. A menu that silently omits half the
|
||||
// library teaches the reader that the library is half the size it is; showing them
|
||||
// greyed, with the reason, is the more honest shape.
|
||||
function LayersMenu() {
|
||||
// A plain <a href="#forms"> would work if the reader were already on the components
|
||||
// page, and would do nothing useful from anywhere else. The router's <A> is no good
|
||||
// either — it would try to navigate to a route called "#forms".
|
||||
//
|
||||
// The queueMicrotask is not superstition: after navigate() the target section does not
|
||||
// exist yet, because the page it lives on has not rendered. Scrolling on the next tick
|
||||
// is the earliest moment the element is actually there to scroll to.
|
||||
function jumpTo(navigate: (to: string) => void, onComponentsPage: boolean, id: string) {
|
||||
const scroll = () => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
|
||||
if (onComponentsPage) {
|
||||
scroll();
|
||||
return;
|
||||
}
|
||||
navigate("/components");
|
||||
queueMicrotask(scroll);
|
||||
}
|
||||
|
||||
// The site's primary navigation, as TWO dropdowns: Layers (the languages) and
|
||||
// Compositions (the frameworks assembled out of them — see layers.ts).
|
||||
//
|
||||
// Two menus, not one with two headings inside it. They answer different questions —
|
||||
// "what is this written in" and "what can I read" — and a reader who wants the second
|
||||
// should not have to scroll past the first to find it. The kit's single-open manager
|
||||
// means opening one closes the other, so they behave like one control with two halves.
|
||||
//
|
||||
// Anything not `live` still appears, greyed, with the reason. A menu that silently omits
|
||||
// half the library teaches the reader that the library is half the size it is.
|
||||
//
|
||||
// Same shape as the Go side (app/layers.go: layersMenu / compositionsMenu).
|
||||
function Dropdown(props: { label: string; rows: Layer[] }) {
|
||||
const location = useLocation();
|
||||
const current = () => currentLayer(location.pathname);
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
// bottom-end, because the triggers sit at the right-hand end of the bar and a 24rem
|
||||
// panel hanging off the left edge of one would run past the window.
|
||||
<Menu placement="bottom-end">
|
||||
<MenuTrigger>
|
||||
<span class="inline-flex items-center gap-1.5 rounded-default px-3 py-1.5 text-sm font-medium text-ink-soft hover:bg-surface-raised hover:text-ink">
|
||||
Layers
|
||||
{props.label}
|
||||
<Icon icon="chevron-down" size={11} class="text-ink-faint" />
|
||||
</span>
|
||||
</MenuTrigger>
|
||||
|
||||
<MenuContent class="w-96">
|
||||
<MenuSection>
|
||||
<p class="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-widest text-ink-faint">
|
||||
The layers of kjol
|
||||
</p>
|
||||
<For each={LAYERS}>
|
||||
{(layer) => (
|
||||
<Show
|
||||
when={layer.live}
|
||||
fallback={
|
||||
<div class="flex cursor-default flex-col gap-0.5 px-3 py-2 opacity-55">
|
||||
<span class="flex items-center gap-2 text-sm font-medium text-ink-muted">
|
||||
<Icon icon={layer.icon} size={14} class="shrink-0 text-ink-faint" />
|
||||
{layer.name}
|
||||
<span class="rounded-full bg-surface-raised px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-ink-muted">
|
||||
reference
|
||||
</span>
|
||||
</span>
|
||||
<span class="pl-6 text-xs text-ink-muted">{layer.tagline}</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* MenuLink is a real <a href> (not a router link), which is what a
|
||||
cross-layer jump has to be: the other layers are served by a
|
||||
different binary. */}
|
||||
<MenuLink href={layer.href} icon={layer.icon}>
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-sm font-medium text-ink">{layer.name}</span>
|
||||
<span class="text-xs text-ink-muted">{layer.tagline}</span>
|
||||
</span>
|
||||
</MenuLink>
|
||||
</Show>
|
||||
)}
|
||||
</For>
|
||||
</MenuSection>
|
||||
<For each={props.rows}>{(layer) => <LayerItem layer={layer} current={current()} />}</For>
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
// LayerItem is one row of the menu.
|
||||
//
|
||||
// The markup is deliberately the same shape and the same classes as app/layers.go's
|
||||
// layerItem. Two front-ends, one menu: if they drifted, this is where it would show,
|
||||
// because it is the one component a reader sees on both sides within seconds of each
|
||||
// other.
|
||||
function LayerItem(props: { layer: Layer; current?: Layer }) {
|
||||
return (
|
||||
<Show
|
||||
when={props.layer.live}
|
||||
fallback={
|
||||
<div class="flex cursor-default flex-col gap-0.5 px-3 py-2 opacity-55">
|
||||
<span class="flex items-center gap-2 text-sm font-medium text-ink-muted">
|
||||
<Icon icon={props.layer.icon} size={14} class="shrink-0 text-ink-faint" />
|
||||
{props.layer.name}
|
||||
<span class="rounded-full bg-surface-raised px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-ink-muted">
|
||||
reference
|
||||
</span>
|
||||
</span>
|
||||
<span class="pl-6 text-xs text-ink-muted">{props.layer.tagline}</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* A plain <a href>, not MenuLink and not the router's <A>. Both of the
|
||||
alternatives are wrong here: MenuLink lays its icon out BESIDE the whole
|
||||
two-line block (so the tagline never lines up under the name, which is what
|
||||
the Go menu does), and the router would try to handle the jump itself — but
|
||||
the other side is served by a different binary, so it has to be a real
|
||||
navigation. */}
|
||||
<a
|
||||
href={props.layer.href}
|
||||
class={
|
||||
"flex flex-col gap-0.5 px-3 py-2 no-underline hover:bg-surface-raised " +
|
||||
(props.current?.href === props.layer.href ? "bg-primary-subtle" : "")
|
||||
}
|
||||
>
|
||||
<span class="flex items-center gap-2 text-sm font-medium text-ink">
|
||||
<Icon icon={props.layer.icon} size={14} class="shrink-0 text-accent" />
|
||||
{props.layer.name}
|
||||
</span>
|
||||
<span class="pl-6 text-xs text-ink-muted">{props.layer.tagline}</span>
|
||||
</a>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
||||
function Wordmark() {
|
||||
// A plain <a href>, not a router <A>: "/" is the front page, which belongs to the
|
||||
// Go/WASM binary. Routing to it inside this SPA would resolve to /js and land you
|
||||
@@ -94,7 +136,7 @@ function Wordmark() {
|
||||
<Icon icon="sailboat" size={17} />
|
||||
</span>
|
||||
<span class="flex items-baseline gap-1.5">
|
||||
<span class="text-lg font-semibold tracking-tight text-ink">Kjol JS Web</span>
|
||||
<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>
|
||||
@@ -103,29 +145,32 @@ function Wordmark() {
|
||||
|
||||
function Sidebar() {
|
||||
const location = useLocation();
|
||||
// The router's pathname is absolute (/js/kit); NAV paths are base-relative (/kit).
|
||||
const navigate = useNavigate();
|
||||
|
||||
// The router's pathname is absolute (/js/components); NAV paths are base-relative.
|
||||
const active = (path: string) => location.pathname === "/js" + (path === "/" ? "" : path);
|
||||
const onComponents = () => location.pathname === "/js/components";
|
||||
|
||||
// The same active treatment the Go sidebar uses (app/pages.go: sidebarLink) — a
|
||||
// tinted panel and accent text, not a grey fill. Now that the Solid theme carries the
|
||||
// primary-subtle / accent tokens, the two sidebars are the same sidebar.
|
||||
const linkCls = (on: boolean) =>
|
||||
on
|
||||
? "flex items-center gap-2 rounded-default bg-primary-subtle px-2 py-1.5 text-sm font-medium text-accent no-underline"
|
||||
: "flex items-center gap-2 rounded-default px-2 py-1.5 text-sm text-ink-soft no-underline hover:bg-surface-raised hover:text-ink";
|
||||
|
||||
return (
|
||||
<aside class="sticky top-[3.75rem] hidden h-[calc(100vh-3.75rem)] w-56 shrink-0 overflow-y-auto py-10 lg:block">
|
||||
<p class="px-2 text-[11px] font-semibold uppercase tracking-widest text-ink-faint">Kjol JS Web</p>
|
||||
<p class="px-2 text-[11px] font-semibold uppercase tracking-widest text-ink-faint">Kjøl JS Web</p>
|
||||
<ul class="mt-2 space-y-0.5">
|
||||
<For each={NAV}>
|
||||
{(item) => (
|
||||
<li>
|
||||
<A
|
||||
href={item.path}
|
||||
end={item.path === "/"}
|
||||
class={
|
||||
active(item.path)
|
||||
? "flex items-center gap-2 rounded-default bg-surface-raised px-2 py-1.5 text-sm font-medium text-primary no-underline"
|
||||
: "flex items-center gap-2 rounded-default px-2 py-1.5 text-sm text-ink-soft no-underline hover:bg-surface-muted hover:text-ink"
|
||||
}
|
||||
>
|
||||
<A href={item.path} end={item.path === "/"} class={linkCls(active(item.path))}>
|
||||
<Icon
|
||||
icon={item.icon}
|
||||
size={14}
|
||||
class={active(item.path) ? "text-primary" : "text-ink-faint"}
|
||||
class={active(item.path) ? "text-accent" : "text-ink-faint"}
|
||||
/>
|
||||
{item.label}
|
||||
</A>
|
||||
@@ -133,6 +178,36 @@ function Sidebar() {
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
|
||||
{/* The component groups are not pages — they are anchors into the one components
|
||||
page, and clicking one scrolls you there.
|
||||
|
||||
They are not highlighted by which section you have scrolled to. Finding that
|
||||
out means measuring all fifteen of them on every scroll frame, and the only
|
||||
way to act on the answer is a state write, which re-renders. Sixty times a
|
||||
second, to move a highlight. The highlight is not worth the page. */}
|
||||
<p class="mt-8 px-2 text-[11px] font-semibold uppercase tracking-widest text-ink-faint">
|
||||
Components
|
||||
</p>
|
||||
<ul class="mt-2 space-y-0.5">
|
||||
<For each={COMPONENT_GROUPS}>
|
||||
{(g) => (
|
||||
<li>
|
||||
<a
|
||||
href={"/js/components#" + g.id}
|
||||
class={linkCls(false)}
|
||||
onclick={(e) => {
|
||||
e.preventDefault();
|
||||
jumpTo(navigate, onComponents(), g.id);
|
||||
}}
|
||||
>
|
||||
<Icon icon={g.icon} size={14} class="text-ink-faint" />
|
||||
{g.label}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -155,7 +230,8 @@ export function Shell(props: { children?: any }) {
|
||||
Docs
|
||||
</span>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<LayersMenu />
|
||||
<Dropdown label="Layers" rows={LANGUAGES} />
|
||||
<Dropdown label="Compositions" rows={COMPOSITIONS} />
|
||||
<a
|
||||
href="/"
|
||||
class="rounded-default px-3 py-1.5 text-sm font-medium text-ink-soft no-underline hover:bg-surface-raised hover:text-ink"
|
||||
|
||||
1540
go/cmd/kjol-web/frontend/src/pages/Components.tsx
Normal file
1540
go/cmd/kjol-web/frontend/src/pages/Components.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,220 +0,0 @@
|
||||
// /js/forms — the form fields, and the masks that make them worth having.
|
||||
|
||||
import { createSignal } from "solid-js";
|
||||
import {
|
||||
FormInput,
|
||||
FormLabel,
|
||||
FormSelect,
|
||||
FormTextarea,
|
||||
FormCurrencyInput,
|
||||
FormPercentInput,
|
||||
FormPhoneInput,
|
||||
FormEmailInput,
|
||||
FormNumberInput,
|
||||
FormCombobox,
|
||||
FormMultiSelect,
|
||||
FormFieldset,
|
||||
US_STATES,
|
||||
} from "@ui/Forms";
|
||||
import { ToggleSwitch } from "@ui/ToggleSwitch";
|
||||
import { ButtonUI, BUTTON_COLOR_PRIMARY } from "@ui/Buttons";
|
||||
import { AlertBlue } from "@ui/Alerts";
|
||||
import { isEmailValid } from "@ui/Validation";
|
||||
import { Demo } from "../layout/Demo.tsx";
|
||||
|
||||
export function Forms() {
|
||||
const [name, setName] = createSignal("");
|
||||
const [email, setEmail] = createSignal("");
|
||||
const [amount, setAmount] = createSignal("");
|
||||
const [rate, setRate] = createSignal("");
|
||||
const [phone, setPhone] = createSignal("");
|
||||
const [term, setTerm] = createSignal("90");
|
||||
const [state, setState] = createSignal("");
|
||||
const [tags, setTags] = createSignal<string[]>(["cd"]);
|
||||
const [notify, setNotify] = createSignal(true);
|
||||
const [notes, setNotes] = createSignal("");
|
||||
|
||||
// The error is a derived value, not a second piece of state — so it cannot get
|
||||
// out of step with the field it describes. Blank is not "invalid", it is unfilled.
|
||||
const emailError = () => (email() && !isEmailValid(email()) ? "That is not an email address." : "");
|
||||
|
||||
return (
|
||||
<div class="max-w-4xl">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjol JS Web</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-ink">Forms</h1>
|
||||
<p class="mt-4 leading-relaxed text-ink-soft">
|
||||
The fields carry their own input masks. A currency field will not let you type a letter into
|
||||
it; a percent field keeps one trailing symbol; a phone field formats as you go. That behaviour
|
||||
is in the component, not in the page — which is the only reason it is the same in every app.
|
||||
</p>
|
||||
|
||||
<AlertBlue header="Handlers are lowercase" class="mt-6">
|
||||
These are Solid components, so DOM handlers keep their DOM names:{" "}
|
||||
<code class="font-mono">oninput</code>, <code class="font-mono">onchange</code>,{" "}
|
||||
<code class="font-mono">onclick</code> — not <code class="font-mono">onInput</code>. It is the
|
||||
single most common thing to get wrong when writing against this kit.
|
||||
</AlertBlue>
|
||||
|
||||
<Demo
|
||||
title="Text, email, and validation"
|
||||
code={`const emailError = () =>
|
||||
email() && !isEmailValid(email()) ? "That is not an email address." : "";
|
||||
|
||||
<FormEmailInput
|
||||
value={email}
|
||||
oninput={(e) => setEmail(e.currentTarget.value)}
|
||||
error={emailError()}
|
||||
showIcon
|
||||
/>`}
|
||||
>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<FormLabel for="f-name">Name</FormLabel>
|
||||
<FormInput
|
||||
id="f-name"
|
||||
placeholder="Ada Lovelace"
|
||||
value={name}
|
||||
oninput={(e) => setName(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel for="f-email">Email</FormLabel>
|
||||
<FormEmailInput
|
||||
id="f-email"
|
||||
placeholder="ada@example.com"
|
||||
value={email}
|
||||
oninput={(e) => setEmail(e.currentTarget.value)}
|
||||
error={emailError()}
|
||||
showIcon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Masked inputs"
|
||||
code={`<FormCurrencyInput value={amount} oninput={…} />
|
||||
<FormPercentInput value={rate} oninput={…} />
|
||||
<FormPhoneInput value={phone} oninput={…} />
|
||||
<FormNumberInput int unsigned />`}
|
||||
>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<FormLabel for="f-amt">Amount</FormLabel>
|
||||
<FormCurrencyInput
|
||||
id="f-amt"
|
||||
value={amount}
|
||||
oninput={(e) => setAmount(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel for="f-rate">Rate</FormLabel>
|
||||
<FormPercentInput id="f-rate" value={rate} oninput={(e) => setRate(e.currentTarget.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel for="f-phone">Phone</FormLabel>
|
||||
<FormPhoneInput id="f-phone" value={phone} oninput={(e) => setPhone(e.currentTarget.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel for="f-int">Whole number</FormLabel>
|
||||
<FormNumberInput id="f-int" int unsigned placeholder="0" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-ink-muted">
|
||||
Try typing letters into any of them.
|
||||
</p>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Select, combobox, multi-select"
|
||||
code={`<FormCombobox
|
||||
options={US_STATES}
|
||||
value={state}
|
||||
onchange={setState}
|
||||
searchable
|
||||
placeholder="Pick a state"
|
||||
/>
|
||||
|
||||
<FormMultiSelect options={…} value={tags} onchange={setTags} showSelectAll />`}
|
||||
>
|
||||
<div class="grid gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<FormLabel for="f-term">Term (plain select)</FormLabel>
|
||||
<FormSelect id="f-term" value={term} onchange={(e) => setTerm(e.currentTarget.value)}>
|
||||
<option value="90">90 day</option>
|
||||
<option value="180">180 day</option>
|
||||
<option value="365">1 year</option>
|
||||
</FormSelect>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel>State (searchable)</FormLabel>
|
||||
<FormCombobox
|
||||
options={US_STATES}
|
||||
value={state}
|
||||
onchange={setState}
|
||||
searchable
|
||||
placeholder="Pick a state"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel>Products (multi)</FormLabel>
|
||||
<FormMultiSelect
|
||||
options={[
|
||||
{ value: "cd", label: "Certificates of deposit" },
|
||||
{ value: "mm", label: "Money market" },
|
||||
{ value: "sv", label: "Savings" },
|
||||
{ value: "tr", label: "Treasuries" },
|
||||
]}
|
||||
value={tags}
|
||||
onchange={setTags}
|
||||
showSelectAll
|
||||
searchable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-ink-muted">
|
||||
selected: <span class="font-mono text-ink">{tags().join(", ") || "—"}</span>
|
||||
</p>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Toggles and textareas"
|
||||
code={`// there is no FormCheckbox — booleans are a ToggleSwitch
|
||||
<ToggleSwitch
|
||||
checked={notify}
|
||||
onchange={setNotify}
|
||||
label="Email me when a rate changes"
|
||||
description="At most one message a day."
|
||||
/>`}
|
||||
>
|
||||
<FormFieldset legend="Notifications">
|
||||
<ToggleSwitch
|
||||
checked={notify}
|
||||
onchange={setNotify}
|
||||
label="Email me when a rate changes"
|
||||
description="At most one message a day."
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<FormLabel for="f-notes">Notes</FormLabel>
|
||||
<FormTextarea
|
||||
id="f-notes"
|
||||
rows={3}
|
||||
placeholder="Anything worth remembering about this account…"
|
||||
value={notes}
|
||||
oninput={(e) => setNotes(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
</FormFieldset>
|
||||
|
||||
<div class="mt-5 flex items-center gap-3">
|
||||
<ButtonUI color={BUTTON_COLOR_PRIMARY} disabled={!!emailError()}>
|
||||
Save
|
||||
</ButtonUI>
|
||||
<span class="text-sm text-ink-muted">
|
||||
{emailError() ? "Fix the email address first." : "The button disables itself off derived state."}
|
||||
</span>
|
||||
</div>
|
||||
</Demo>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
// /js/kit — the components, running.
|
||||
|
||||
import { createSignal, For } from "solid-js";
|
||||
import {
|
||||
ButtonUI,
|
||||
SegmentedButtons,
|
||||
BUTTON_COLOR_PRIMARY,
|
||||
BUTTON_COLOR_NEUTRAL,
|
||||
BUTTON_COLOR_GREEN,
|
||||
BUTTON_COLOR_RED,
|
||||
BUTTON_COLOR_BLUE,
|
||||
} from "@ui/Buttons";
|
||||
import { Badge, BADGE_GREEN, BADGE_RED, BADGE_BLUE, BADGE_AMBER, BADGE_NEUTRAL } from "@ui/Badges";
|
||||
import { AlertBlue, AlertGreen, AlertRed, AlertYellow } from "@ui/Alerts";
|
||||
import { Card, CardHeader } from "@ui/Cards";
|
||||
import { TabGroup } from "@ui/Tabs";
|
||||
import { Modal, ConfirmModal } from "@ui/Modal";
|
||||
import { Tooltip } from "@ui/Tooltips";
|
||||
import { Icon } from "@ui/Icons";
|
||||
import { Demo } from "../layout/Demo.tsx";
|
||||
|
||||
export function Kit() {
|
||||
const [count, setCount] = createSignal(0);
|
||||
const [seg, setSeg] = createSignal("day");
|
||||
const [modalOpen, setModalOpen] = createSignal(false);
|
||||
const [confirmOpen, setConfirmOpen] = createSignal(false);
|
||||
const [confirmed, setConfirmed] = createSignal(0);
|
||||
|
||||
return (
|
||||
<div class="max-w-4xl">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjol JS Web</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-ink">Components</h1>
|
||||
<p class="mt-4 leading-relaxed text-ink-soft">
|
||||
Every component below is the real one from{" "}
|
||||
<code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">@ui/*</code>, imported
|
||||
and rendered on this page. Nothing here is a picture of a component.
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="Buttons"
|
||||
code={`import { ButtonUI, BUTTON_COLOR_PRIMARY } from "@ui/Buttons";
|
||||
|
||||
<ButtonUI color={BUTTON_COLOR_PRIMARY} onclick={() => setCount(count() + 1)}>
|
||||
Clicked {count()} times
|
||||
</ButtonUI>`}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<ButtonUI color={BUTTON_COLOR_PRIMARY} onclick={() => setCount(count() + 1)}>
|
||||
Clicked {count()} times
|
||||
</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_NEUTRAL}>Neutral</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_GREEN}>Green</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_RED}>Red</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_BLUE} outline>
|
||||
Outline
|
||||
</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_NEUTRAL} small>
|
||||
Small
|
||||
</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_NEUTRAL} disabled>
|
||||
Disabled
|
||||
</ButtonUI>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Segmented buttons"
|
||||
code={`<SegmentedButtons
|
||||
options={[{ value: "day", label: "Day" }, ...]}
|
||||
value={seg}
|
||||
onchange={setSeg}
|
||||
/>`}
|
||||
>
|
||||
<div class="flex flex-col gap-3">
|
||||
<SegmentedButtons
|
||||
options={[
|
||||
{ value: "day", label: "Day" },
|
||||
{ value: "week", label: "Week" },
|
||||
{ value: "month", label: "Month" },
|
||||
]}
|
||||
value={seg}
|
||||
onchange={setSeg}
|
||||
/>
|
||||
<p class="text-sm text-ink-muted">
|
||||
selected: <span class="font-mono text-ink">{seg()}</span>
|
||||
</p>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Badges"
|
||||
code={`<Badge color={BADGE_GREEN} pill>Active</Badge>`}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Badge color={BADGE_GREEN} pill>
|
||||
Active
|
||||
</Badge>
|
||||
<Badge color={BADGE_RED} pill>
|
||||
Overdue
|
||||
</Badge>
|
||||
<Badge color={BADGE_BLUE}>Info</Badge>
|
||||
<Badge color={BADGE_AMBER}>Pending</Badge>
|
||||
<Badge color={BADGE_NEUTRAL}>Draft</Badge>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Alerts"
|
||||
code={`<AlertGreen header="Saved">Your changes have been written.</AlertGreen>`}
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<AlertGreen header="Saved">Your changes have been written.</AlertGreen>
|
||||
<AlertBlue header="Heads up">The rate table refreshes every fifteen minutes.</AlertBlue>
|
||||
<AlertYellow header="Check this">Two rows are missing a maturity date.</AlertYellow>
|
||||
<AlertRed header="Failed">The upload was rejected by the server.</AlertRed>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Tabs"
|
||||
code={`<TabGroup items={[{ title: "Summary", content: <p>…</p> }, …]} />`}
|
||||
>
|
||||
<TabGroup
|
||||
items={[
|
||||
{ title: "Summary", content: <p class="text-sm text-ink-soft">Three accounts, two of them funded.</p> },
|
||||
{ title: "Activity", badge: 3, content: <p class="text-sm text-ink-soft">Three events since Tuesday.</p> },
|
||||
{ title: "Settings", content: <p class="text-sm text-ink-soft">Nothing configurable yet.</p> },
|
||||
]}
|
||||
/>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Modals"
|
||||
code={`<Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} header="A modal">
|
||||
…
|
||||
</Modal>
|
||||
|
||||
// no provider needed — it portals itself to document.body`}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<ButtonUI color={BUTTON_COLOR_NEUTRAL} onclick={() => setModalOpen(true)}>
|
||||
Open modal
|
||||
</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_RED} outline onclick={() => setConfirmOpen(true)}>
|
||||
Delete something
|
||||
</ButtonUI>
|
||||
<span class="text-sm text-ink-muted">confirmed {confirmed()} times</span>
|
||||
</div>
|
||||
|
||||
<Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} header={<h3 class="text-lg font-semibold">A modal</h3>}>
|
||||
<p class="text-sm leading-relaxed text-ink-soft">
|
||||
It portals itself to <code class="font-mono">document.body</code>, so it escapes any
|
||||
ancestor with <code class="font-mono">overflow: hidden</code> or a transform — the two
|
||||
things that silently clip a floating panel.
|
||||
</p>
|
||||
</Modal>
|
||||
|
||||
<ConfirmModal
|
||||
isOpen={confirmOpen}
|
||||
onClose={() => setConfirmOpen(false)}
|
||||
onConfirm={() => setConfirmed(confirmed() + 1)}
|
||||
title="Delete this?"
|
||||
message="This cannot be undone. (Nothing is actually deleted — this is a docs page.)"
|
||||
confirmText="Delete"
|
||||
/>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="Tooltips and icons"
|
||||
code={`<Tooltip content="…"><Icon icon="circle-info" /></Tooltip>`}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-5">
|
||||
<For each={["circle-info", "calendar", "download", "print", "trash-can", "pen-to-square", "globe"]}>
|
||||
{(name) => (
|
||||
<Tooltip content={name}>
|
||||
<span class="inline-flex cursor-help items-center gap-2 text-ink-soft">
|
||||
<Icon icon={name} size={18} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<p class="mt-3 text-sm text-ink-muted">
|
||||
Only the icons actually referenced in the source are bundled. The registry for this whole
|
||||
site is a few dozen paths, not FontAwesome's 41.5 MB kit.
|
||||
</p>
|
||||
</Demo>
|
||||
|
||||
<Card class="mt-8">
|
||||
<CardHeader>Not shown here</CardHeader>
|
||||
<p class="text-sm leading-relaxed text-ink-soft">
|
||||
The kit also carries a calendar, a date picker, popovers, an accordion, a signature pad, a
|
||||
chart wrapper, a toast system, a guided-tour overlay and a fuzzy matcher. They are in{" "}
|
||||
<code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">go/jsruntime/uikit</code>.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
go/cmd/kjol-web/frontend/src/pages/NotFound.tsx
Normal file
41
go/cmd/kjol-web/frontend/src/pages/NotFound.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
// The fallback for any /js/* URL the router does not know.
|
||||
//
|
||||
// The server cannot 404 these: it answers every /js/* path with the same SPA shell,
|
||||
// because it has no idea which routes the bundle contains. So the router has to be the
|
||||
// one to say so — and if it does not, an unknown URL renders the chrome around an empty
|
||||
// <main>, which is a blank page with a 200 and no explanation.
|
||||
//
|
||||
// It names the paths that MOVED, because that is what a stale bookmark most likely wants:
|
||||
// /js/kit, /js/forms, /js/table and /js/theming were four pages, and are now four
|
||||
// sections of one.
|
||||
|
||||
import { useLocation, useNavigate } from "@solidjs/router";
|
||||
import { ButtonUI, BUTTON_COLOR_PRIMARY, BUTTON_COLOR_LIGHT_NEUTRAL } from "@ui/Buttons";
|
||||
|
||||
export function NotFound() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div class="max-w-2xl py-10">
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-ink">Page not found</h1>
|
||||
<p class="mt-2 leading-relaxed text-ink-soft">
|
||||
No route matches <code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">{location.pathname}</code>.
|
||||
</p>
|
||||
<p class="mt-3 leading-relaxed text-ink-soft">
|
||||
The kit used to be spread across several pages — <code class="font-mono">/js/kit</code>,{" "}
|
||||
<code class="font-mono">/js/forms</code>, <code class="font-mono">/js/table</code>,{" "}
|
||||
<code class="font-mono">/js/theming</code>. It is one page now, and they are sections of it.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex flex-wrap items-center gap-2">
|
||||
<ButtonUI color={BUTTON_COLOR_PRIMARY} onclick={() => navigate("/components")}>
|
||||
Go to Components
|
||||
</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_LIGHT_NEUTRAL} onclick={() => navigate("/")}>
|
||||
Overview
|
||||
</ButtonUI>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,19 @@
|
||||
// /js — what the JS layer is, and how it is built.
|
||||
|
||||
import { For } from "solid-js";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { Card, CardHeader } from "@ui/Cards";
|
||||
import { AlertBlue } from "@ui/Alerts";
|
||||
import { CodeBox } from "@ui/General";
|
||||
import { Icon } from "@ui/Icons";
|
||||
import { COMPONENT_GROUPS } from "../componentGroups.ts";
|
||||
|
||||
export function Overview() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjol JS Web</p>
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjøl JS Web</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-ink">
|
||||
A Solid kit, built by a Go toolchain
|
||||
</h1>
|
||||
@@ -48,7 +54,7 @@ export function Overview() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CodeBox class="mt-5" code={"$ go run ./build\nGenerating FA icon subset...\nGenerating public routes...\nBundling JS + CSS...\n\nBundle Files Size Time\n-------------------------------------------------------\nbundle.min.js 84 241.3 KB 412ms\nbundle.min.css 1418 68.1 KB 31ms"} />
|
||||
<CodeBox class="mt-5" code={"$ go run ./server -build\nGenerating FA icon subset...\n FA icons: 94 defs for 47 names\nGenerating public routes...\n /js/ssr Ssr (rendered, 2498 bytes)\nBundling JS + CSS...\n\nBundle Files Size Time\n-------------------------------------------------------\nbundle.min.js 1 1.4 MB 198ms\nbundle.min.css 2500 74.6 KB 30ms"} />
|
||||
|
||||
<AlertBlue header="One reactive instance, always" class="mt-8">
|
||||
The single hardest invariant in this build is that there is exactly one copy of solid-js. Two
|
||||
@@ -57,26 +63,38 @@ export function Overview() {
|
||||
precisely this reason.
|
||||
</AlertBlue>
|
||||
|
||||
<h2 class="mt-10 text-lg font-semibold text-ink">What is on the other pages</h2>
|
||||
<div class="mt-4 grid gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>Components</CardHeader>
|
||||
<p class="text-sm text-ink-soft">
|
||||
Buttons, badges, alerts, cards, tabs and menus — rendered live, not screenshotted.
|
||||
</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>Forms</CardHeader>
|
||||
<p class="text-sm text-ink-soft">
|
||||
Masked inputs, comboboxes, multi-select, toggles, and the validation helpers.
|
||||
</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>AutoTable</CardHeader>
|
||||
<p class="text-sm text-ink-soft">
|
||||
Sorting, search, column management, CSV export — from one array of column defs.
|
||||
</p>
|
||||
</Card>
|
||||
<h2 class="mt-10 text-lg font-semibold text-ink">The kit</h2>
|
||||
<p class="mt-2 leading-relaxed text-ink-soft">
|
||||
All of it is on one page. It used to be three — Components, Forms, AutoTable — which is a
|
||||
split along the lines of the source files rather than along anything a reader wants: a person
|
||||
looking for a date picker does not know, and should not have to guess, whether it was filed
|
||||
under forms or under overlays.
|
||||
</p>
|
||||
|
||||
<div class="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<For each={COMPONENT_GROUPS}>
|
||||
{(g) => (
|
||||
<a
|
||||
href={"/js/components#" + g.id}
|
||||
class="group flex items-center gap-2 rounded-default border border-line bg-surface px-3 py-2.5 no-underline shadow-xs transition hover:border-primary hover:shadow-sm"
|
||||
onclick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate("/components");
|
||||
queueMicrotask(() =>
|
||||
document.getElementById(g.id)?.scrollIntoView({ behavior: "smooth", block: "start" }),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Icon icon={g.icon} size={14} class="shrink-0 text-primary" />
|
||||
<span class="text-sm font-medium text-ink">{g.label}</span>
|
||||
<Icon
|
||||
icon="arrow-right"
|
||||
size={11}
|
||||
class="ml-auto text-ink-faint transition group-hover:text-primary"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,167 +0,0 @@
|
||||
// /js/table — AutoTable, driven by an array of column definitions.
|
||||
|
||||
import AutoTable, {
|
||||
AutoTableColumn,
|
||||
AutoTableSearch,
|
||||
AutoTableFilterFields,
|
||||
TdLeft,
|
||||
TdRight,
|
||||
TdCenter,
|
||||
COL_POS_LEFT,
|
||||
COL_POS_RIGHT,
|
||||
COL_POS_CENTER,
|
||||
AUTOTABLE_SIZE_COMPACT,
|
||||
} from "@ui/AutoTable";
|
||||
import { Badge, BADGE_GREEN, BADGE_RED, BADGE_NEUTRAL } from "@ui/Badges";
|
||||
import { AlertBlue } from "@ui/Alerts";
|
||||
|
||||
interface Institution {
|
||||
name: string;
|
||||
state: string;
|
||||
term: string;
|
||||
rate: number;
|
||||
minimum: number;
|
||||
status: "open" | "closed" | "waitlist";
|
||||
}
|
||||
|
||||
// Static rows: the point of the page is the table, not where the rows came from.
|
||||
// Swapping `data` for `url` is the only change needed to make it fetch, sort and
|
||||
// paginate against a server instead.
|
||||
const ROWS: Institution[] = [
|
||||
{ name: "First Meridian Bank", state: "CA", term: "90 day", rate: 4.85, minimum: 1000, status: "open" },
|
||||
{ name: "Harborline Credit Union", state: "WA", term: "180 day", rate: 5.1, minimum: 2500, status: "open" },
|
||||
{ name: "Cascade Federal", state: "OR", term: "1 year", rate: 5.35, minimum: 500, status: "waitlist" },
|
||||
{ name: "Ironwood Savings", state: "IL", term: "90 day", rate: 4.6, minimum: 10000, status: "closed" },
|
||||
{ name: "Great Lakes Trust", state: "MI", term: "2 year", rate: 5.55, minimum: 1000, status: "open" },
|
||||
{ name: "Sunbelt National", state: "TX", term: "180 day", rate: 4.95, minimum: 5000, status: "open" },
|
||||
{ name: "Granite State Bank", state: "NH", term: "1 year", rate: 5.2, minimum: 2000, status: "waitlist" },
|
||||
{ name: "Pacific Crest", state: "CA", term: "5 year", rate: 5.75, minimum: 25000, status: "open" },
|
||||
{ name: "Copper Ridge Bank", state: "AZ", term: "90 day", rate: 4.4, minimum: 1000, status: "closed" },
|
||||
{ name: "Bayou Community", state: "LA", term: "1 year", rate: 5.05, minimum: 1500, status: "open" },
|
||||
{ name: "Northern Pine FCU", state: "MN", term: "2 year", rate: 5.45, minimum: 500, status: "open" },
|
||||
{ name: "Chesapeake First", state: "MD", term: "180 day", rate: 4.75, minimum: 3000, status: "waitlist" },
|
||||
];
|
||||
|
||||
// The whole table is this list. Sorting, column ordering, hiding, resizing and CSV
|
||||
// export are all driven from it — there is no per-column wiring anywhere else.
|
||||
const COLUMNS: AutoTableColumn[] = [
|
||||
{ displayName: "Institution", sortable: true, sortIdentifier: "name", displayPosition: COL_POS_LEFT },
|
||||
{ displayName: "State", sortable: true, sortIdentifier: "state", displayPosition: COL_POS_CENTER, toggleable: true },
|
||||
{ displayName: "Term", sortable: true, sortIdentifier: "term", displayPosition: COL_POS_LEFT },
|
||||
{
|
||||
displayName: "Rate",
|
||||
sortable: true,
|
||||
sortIdentifier: "rate",
|
||||
sortType: "numeric",
|
||||
displayPosition: COL_POS_RIGHT,
|
||||
csvValue: (i: Institution) => i.rate,
|
||||
},
|
||||
{
|
||||
displayName: "Minimum",
|
||||
sortable: true,
|
||||
sortIdentifier: "minimum",
|
||||
sortType: "money",
|
||||
displayPosition: COL_POS_RIGHT,
|
||||
toggleable: true,
|
||||
csvValue: (i: Institution) => i.minimum,
|
||||
},
|
||||
{ displayName: "Status", displayPosition: COL_POS_CENTER, sortable: true, sortIdentifier: "status" },
|
||||
];
|
||||
|
||||
const money = (n: number) => "$" + n.toLocaleString("en-US");
|
||||
|
||||
function StatusBadge(props: { status: Institution["status"] }) {
|
||||
if (props.status === "open") return <Badge color={BADGE_GREEN} pill>open</Badge>;
|
||||
if (props.status === "closed") return <Badge color={BADGE_RED} pill>closed</Badge>;
|
||||
return <Badge color={BADGE_NEUTRAL} pill>waitlist</Badge>;
|
||||
}
|
||||
|
||||
export function Table() {
|
||||
return (
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjol JS Web</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-ink">AutoTable</h1>
|
||||
<p class="mt-4 max-w-3xl leading-relaxed text-ink-soft">
|
||||
One array of column definitions produces sorting, per-column search, column reordering by
|
||||
drag, column show/hide, column resizing, pagination and CSV export. The page below writes no
|
||||
table markup — only a <code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">rowRenderer</code>{" "}
|
||||
to say what a cell looks like.
|
||||
</p>
|
||||
|
||||
<AlertBlue header="Try it" class="mt-6 max-w-3xl">
|
||||
Sort by clicking a header. Drag a header to reorder. Use the toolbar to hide a column or
|
||||
export what you are looking at. The column layout persists — it is keyed to localStorage, so
|
||||
it survives a reload.
|
||||
</AlertBlue>
|
||||
|
||||
<div class="mt-8">
|
||||
<AutoTable
|
||||
data={ROWS}
|
||||
columns={COLUMNS}
|
||||
emptyMessage="No institutions match those filters."
|
||||
options={{
|
||||
size: AUTOTABLE_SIZE_COMPACT,
|
||||
hover: true,
|
||||
alternate: true,
|
||||
surroundingBorder: true,
|
||||
headerBorderY: true,
|
||||
draggableColumns: true,
|
||||
toggleColumns: true,
|
||||
resizableColumns: true,
|
||||
resetButton: true,
|
||||
exportCSV: true,
|
||||
exportFilename: "kjol-rates",
|
||||
inlineToolbar: true,
|
||||
columnOrderStorageKey: "kjolweb.table.order",
|
||||
columnVisibilityStorageKey: "kjolweb.table.visible",
|
||||
columnWidthStorageKey: "kjolweb.table.widths",
|
||||
}}
|
||||
searchFields={(ctx) => (
|
||||
<AutoTableFilterFields>
|
||||
<AutoTableSearch
|
||||
label="Institution"
|
||||
placeholder="Search by name…"
|
||||
value={ctx.getSearchValue("name")}
|
||||
onchange={(v) => ctx.setSearchValue("name", v)}
|
||||
/>
|
||||
<AutoTableSearch
|
||||
label="State"
|
||||
placeholder="CA"
|
||||
value={ctx.getSearchValue("state")}
|
||||
onchange={(v) => ctx.setSearchValue("state", v)}
|
||||
/>
|
||||
</AutoTableFilterFields>
|
||||
)}
|
||||
rowRenderer={(item: Institution) => (
|
||||
<>
|
||||
<TdLeft class="font-medium text-ink">{item.name}</TdLeft>
|
||||
<TdCenter>{item.state}</TdCenter>
|
||||
<TdLeft>{item.term}</TdLeft>
|
||||
<TdRight class="font-mono">{item.rate.toFixed(2)}%</TdRight>
|
||||
<TdRight class="font-mono">{money(item.minimum)}</TdRight>
|
||||
<TdCenter>
|
||||
<StatusBadge status={item.status} />
|
||||
</TdCenter>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-3xl">
|
||||
<h2 class="text-lg font-semibold text-ink">Local rows, or a server</h2>
|
||||
<p class="mt-2 leading-relaxed text-ink-soft">
|
||||
This table is passed <code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">data</code>.
|
||||
Give it <code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">url</code> instead and
|
||||
the same column list drives a server-side query — the sort identifier becomes the sort key,
|
||||
the search fields become query parameters, and pagination is handled for you. Nothing else
|
||||
on the page changes.
|
||||
</p>
|
||||
<p class="mt-3 leading-relaxed text-ink-soft">
|
||||
The Go/WASM layer has this same table, rewritten as Go returning a virtual DOM. Same
|
||||
behaviour, no JavaScript — which is the whole argument the other half of this site is
|
||||
making.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
// /js/theming — how the kit is themed, and the switch that proves it.
|
||||
|
||||
import { AlertBlue, AlertGreen } from "@ui/Alerts";
|
||||
import { Card, CardHeader } from "@ui/Cards";
|
||||
import { ButtonUI, BUTTON_COLOR_PRIMARY, BUTTON_COLOR_NEUTRAL, BUTTON_COLOR_WHITE } from "@ui/Buttons";
|
||||
import { Badge, BADGE_GREEN, BADGE_NEUTRAL } from "@ui/Badges";
|
||||
import { CodeBox } from "@ui/General";
|
||||
import { ThemeToggle, useTheme } from "@ui/Theme";
|
||||
import { Demo } from "../layout/Demo.tsx";
|
||||
|
||||
// The swatch class is written out in full, not built as "bg-" + name. Tailwind finds
|
||||
// the classes it must compile by SCANNING THE SOURCE for literal strings — a
|
||||
// concatenation is invisible to it, and every swatch here would come out colourless.
|
||||
// It is the one thing about a utility CSS engine you cannot forget.
|
||||
const TOKENS: { swatch: string; name: string; role: string }[] = [
|
||||
{ swatch: "bg-surface", name: "surface", role: "the page" },
|
||||
{ swatch: "bg-surface-muted", name: "surface-muted", role: "a recessed strip" },
|
||||
{ swatch: "bg-surface-raised", name: "surface-raised", role: "a panel, a hover" },
|
||||
{ swatch: "bg-surface-strong", name: "surface-strong", role: "a track, a divider fill" },
|
||||
{ swatch: "bg-line", name: "line", role: "an ordinary border" },
|
||||
{ swatch: "bg-line-strong", name: "line-strong", role: "a border that has to be seen" },
|
||||
{ swatch: "bg-ink", name: "ink", role: "body text, headings" },
|
||||
{ swatch: "bg-ink-soft", name: "ink-soft", role: "secondary text" },
|
||||
{ swatch: "bg-ink-muted", name: "ink-muted", role: "captions, labels" },
|
||||
{ swatch: "bg-ink-faint", name: "ink-faint", role: "placeholders, disabled" },
|
||||
];
|
||||
|
||||
export function Theming() {
|
||||
const { isDark, mode } = useTheme();
|
||||
|
||||
return (
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjol JS Web</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-ink">Theming</h1>
|
||||
|
||||
<p class="mt-4 leading-relaxed text-ink-soft">
|
||||
No component in this kit names a colour. They say{" "}
|
||||
<code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">bg-surface</code>,{" "}
|
||||
<code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">text-ink</code>,{" "}
|
||||
<code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">border-line</code> — and
|
||||
what those mean is decided in one place. That is the whole of the theme system, and it is why
|
||||
dark mode is a rule that re-points ten variables rather than a{" "}
|
||||
<code class="font-mono">dark:</code> variant on four hundred class strings.
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="The switch"
|
||||
code={`// styles/theme.css
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-surface: #ffffff;
|
||||
--color-ink: #171717;
|
||||
--color-line: #e5e5e5;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-surface: #101013; /* not black: black makes every border vanish */
|
||||
--color-ink: #f2f2f3;
|
||||
--color-line: #2a2a30;
|
||||
}`}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<ThemeToggle />
|
||||
<div class="text-sm text-ink-soft">
|
||||
currently <span class="font-mono text-ink">{isDark() ? "dark" : "light"}</span>, because
|
||||
you asked for <span class="font-mono text-ink">{mode()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-sm leading-relaxed text-ink-muted">
|
||||
Press it. Every component on every page of this section moves — none of them were told.
|
||||
Your choice is remembered, and it is the <em>same</em> choice the Go/WASM section reads:
|
||||
both halves of this site share one localStorage key, so the theme survives crossing between
|
||||
two entirely different front-ends.
|
||||
</p>
|
||||
</Demo>
|
||||
|
||||
<h2 class="mt-12 text-lg font-semibold text-ink">The contract</h2>
|
||||
<p class="mt-2 leading-relaxed text-ink-soft">
|
||||
These are the tokens a component is allowed to name. Each swatch below is drawn with the token
|
||||
itself, so this table is not a picture of the theme — it <em>is</em> the theme, and it repaints
|
||||
when you press the switch.
|
||||
</p>
|
||||
|
||||
<div class="mt-5 overflow-hidden rounded-default border border-line">
|
||||
{TOKENS.map((t, i) => (
|
||||
<div
|
||||
class={
|
||||
"flex items-center gap-4 px-4 py-2.5 " +
|
||||
(i > 0 ? "border-t border-line" : "")
|
||||
}
|
||||
>
|
||||
<span class={"h-7 w-7 shrink-0 rounded border border-line-strong " + t.swatch} />
|
||||
<code class="w-40 shrink-0 font-mono text-[13px] text-ink">{t.name}</code>
|
||||
<span class="text-sm text-ink-muted">{t.role}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<AlertBlue header="Two kits, one vocabulary" class="mt-8">
|
||||
The Go/WASM kit uses these exact token names. A designer changes{" "}
|
||||
<code class="font-mono">surface</code> once and both halves of the site move together — even
|
||||
though one is Solid compiled by esbuild and the other is Go compiled to WebAssembly.
|
||||
</AlertBlue>
|
||||
|
||||
<h2 class="mt-12 text-lg font-semibold text-ink">Where a variant is still needed</h2>
|
||||
<p class="mt-2 leading-relaxed text-ink-soft">
|
||||
Two things a re-pointed token cannot fix, so they are the only places the kit still carries a{" "}
|
||||
<code class="font-mono">dark:</code> variant.
|
||||
</p>
|
||||
|
||||
<div class="mt-5 grid gap-4 sm:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>Coloured tints</CardHeader>
|
||||
<p class="text-sm leading-relaxed text-ink-soft">
|
||||
A <code class="font-mono">red-50</code> wash is invisible on a near-black surface. An
|
||||
alert's tint has to become a deep, transparent one — a different colour, not a
|
||||
different value of the same one.
|
||||
</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>Fills that invert</CardHeader>
|
||||
<p class="text-sm leading-relaxed text-ink-soft">
|
||||
The neutral button is dark on a light page and light on a dark one — so its label must
|
||||
invert with it. <code class="font-mono">text-white</code> would disappear the moment
|
||||
the fill went pale. Hence three tokens, not one.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Demo
|
||||
title="The buttons that had to think about it"
|
||||
code={`// the fill and its text move together, or the label vanishes
|
||||
"neutral": "bg-fill-neutral text-on-fill-neutral hover:bg-fill-neutral-hover",
|
||||
|
||||
// a chromatic fill is dark enough for white text in BOTH themes — leave it
|
||||
"red": "bg-red-700 text-white hover:bg-red-800",`}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<ButtonUI color={BUTTON_COLOR_NEUTRAL}>Neutral (inverts)</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_WHITE}>White (a surface)</ButtonUI>
|
||||
<ButtonUI color={BUTTON_COLOR_PRIMARY}>Primary (a fill)</ButtonUI>
|
||||
<Badge color={BADGE_GREEN} pill>solid</Badge>
|
||||
<Badge color={BADGE_NEUTRAL} pill>fills stay put</Badge>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<AlertGreen header="No flash" class="mt-8">
|
||||
The theme class is applied by a ten-line script in the document head, before the stylesheet and
|
||||
before any markup. The server cannot read localStorage, so it cannot know which theme to send;
|
||||
if the class waited for the bundle, every dark-mode reader would get a white page and then have
|
||||
it snatched away. It is the only hand-written JavaScript on the Go/WASM side of this site.
|
||||
</AlertGreen>
|
||||
|
||||
<CodeBox
|
||||
class="mt-5"
|
||||
code={`<head>
|
||||
<script>(function(){try{
|
||||
var m = localStorage.getItem("kjol-theme");
|
||||
var dark = m === "dark" || (!m && matchMedia("(prefers-color-scheme: dark)").matches);
|
||||
if (dark) document.documentElement.classList.add("dark");
|
||||
}catch(e){}})();</script>
|
||||
<link rel="stylesheet" href="/bundle.min.css" />
|
||||
</head>`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -31,7 +31,7 @@ export function PublicLayout(props: { currentPath: string; children?: JSXElement
|
||||
</svg>
|
||||
</span>
|
||||
<span class="flex items-baseline gap-1.5">
|
||||
<span class="text-lg font-semibold tracking-tight text-ink">Kjol JS Web</span>
|
||||
<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>
|
||||
@@ -65,7 +65,7 @@ export function PublicLayout(props: { currentPath: string; children?: JSXElement
|
||||
|
||||
<footer class="mx-auto max-w-2xl px-4 pb-14">
|
||||
<p class="text-sm text-ink-faint">
|
||||
Kjol JS Web is one layer of kjol — a shared base layer. kjol is Norwegian for keel.
|
||||
Kjøl JS Web is one layer of kjol — a shared base layer. kjol is Norwegian for keel.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ export function Ssr() {
|
||||
|
||||
return (
|
||||
<div class="page-ssr mx-auto max-w-2xl px-4 py-14">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjol JS Web</p>
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-primary">Kjøl JS Web</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-ink">
|
||||
This page was rendered by Go
|
||||
</h1>
|
||||
@@ -69,7 +69,7 @@ export function Ssr() {
|
||||
|
||||
<p class="mt-8 text-sm text-ink-muted">
|
||||
<a href="/js" class="text-primary underline underline-offset-4">
|
||||
Back to Kjol JS Web
|
||||
Back to Kjøl JS Web
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ export const publicPages: PublicPageDef[] = [
|
||||
path: "/js/ssr",
|
||||
module: "pages/public/Ssr.tsx",
|
||||
component: "Ssr",
|
||||
title: "Server-rendered — Kjol JS Web",
|
||||
title: "Server-rendered — Kjøl JS Web",
|
||||
// dynamic: the server may inject data for this route at request time, so bake
|
||||
// the render bundle too, not just the static skeleton.
|
||||
dynamic: true,
|
||||
|
||||
@@ -13,5 +13,5 @@ export const publicRoutes: Record<string, () => JSXElement> = {
|
||||
// <title> for each public route, applied by the client router on navigation
|
||||
// (the first load gets its title from the server-rendered shell).
|
||||
export const publicTitles: Record<string, string> = {
|
||||
"/js/ssr": "Server-rendered — Kjol JS Web",
|
||||
"/js/ssr": "Server-rendered — Kjøl JS Web",
|
||||
};
|
||||
|
||||
589
go/cmd/kjol-web/frontend/vendor/@kurkle/color/dist/color.esm.js
vendored
Normal file
589
go/cmd/kjol-web/frontend/vendor/@kurkle/color/dist/color.esm.js
vendored
Normal file
@@ -0,0 +1,589 @@
|
||||
/*!
|
||||
* @kurkle/color v0.3.4
|
||||
* https://github.com/kurkle/color#readme
|
||||
* (c) 2024 Jukka Kurkela
|
||||
* Released under the MIT License
|
||||
*/
|
||||
function round(v) {
|
||||
return v + 0.5 | 0;
|
||||
}
|
||||
const lim = (v, l, h) => Math.max(Math.min(v, h), l);
|
||||
function p2b(v) {
|
||||
return lim(round(v * 2.55), 0, 255);
|
||||
}
|
||||
function b2p(v) {
|
||||
return lim(round(v / 2.55), 0, 100);
|
||||
}
|
||||
function n2b(v) {
|
||||
return lim(round(v * 255), 0, 255);
|
||||
}
|
||||
function b2n(v) {
|
||||
return lim(round(v / 2.55) / 100, 0, 1);
|
||||
}
|
||||
function n2p(v) {
|
||||
return lim(round(v * 100), 0, 100);
|
||||
}
|
||||
|
||||
const map$1 = {0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, A: 10, B: 11, C: 12, D: 13, E: 14, F: 15, a: 10, b: 11, c: 12, d: 13, e: 14, f: 15};
|
||||
const hex = [...'0123456789ABCDEF'];
|
||||
const h1 = b => hex[b & 0xF];
|
||||
const h2 = b => hex[(b & 0xF0) >> 4] + hex[b & 0xF];
|
||||
const eq = b => ((b & 0xF0) >> 4) === (b & 0xF);
|
||||
const isShort = v => eq(v.r) && eq(v.g) && eq(v.b) && eq(v.a);
|
||||
function hexParse(str) {
|
||||
var len = str.length;
|
||||
var ret;
|
||||
if (str[0] === '#') {
|
||||
if (len === 4 || len === 5) {
|
||||
ret = {
|
||||
r: 255 & map$1[str[1]] * 17,
|
||||
g: 255 & map$1[str[2]] * 17,
|
||||
b: 255 & map$1[str[3]] * 17,
|
||||
a: len === 5 ? map$1[str[4]] * 17 : 255
|
||||
};
|
||||
} else if (len === 7 || len === 9) {
|
||||
ret = {
|
||||
r: map$1[str[1]] << 4 | map$1[str[2]],
|
||||
g: map$1[str[3]] << 4 | map$1[str[4]],
|
||||
b: map$1[str[5]] << 4 | map$1[str[6]],
|
||||
a: len === 9 ? (map$1[str[7]] << 4 | map$1[str[8]]) : 255
|
||||
};
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
const alpha = (a, f) => a < 255 ? f(a) : '';
|
||||
function hexString(v) {
|
||||
var f = isShort(v) ? h1 : h2;
|
||||
return v
|
||||
? '#' + f(v.r) + f(v.g) + f(v.b) + alpha(v.a, f)
|
||||
: undefined;
|
||||
}
|
||||
|
||||
const HUE_RE = /^(hsla?|hwb|hsv)\(\s*([-+.e\d]+)(?:deg)?[\s,]+([-+.e\d]+)%[\s,]+([-+.e\d]+)%(?:[\s,]+([-+.e\d]+)(%)?)?\s*\)$/;
|
||||
function hsl2rgbn(h, s, l) {
|
||||
const a = s * Math.min(l, 1 - l);
|
||||
const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||
return [f(0), f(8), f(4)];
|
||||
}
|
||||
function hsv2rgbn(h, s, v) {
|
||||
const f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
|
||||
return [f(5), f(3), f(1)];
|
||||
}
|
||||
function hwb2rgbn(h, w, b) {
|
||||
const rgb = hsl2rgbn(h, 1, 0.5);
|
||||
let i;
|
||||
if (w + b > 1) {
|
||||
i = 1 / (w + b);
|
||||
w *= i;
|
||||
b *= i;
|
||||
}
|
||||
for (i = 0; i < 3; i++) {
|
||||
rgb[i] *= 1 - w - b;
|
||||
rgb[i] += w;
|
||||
}
|
||||
return rgb;
|
||||
}
|
||||
function hueValue(r, g, b, d, max) {
|
||||
if (r === max) {
|
||||
return ((g - b) / d) + (g < b ? 6 : 0);
|
||||
}
|
||||
if (g === max) {
|
||||
return (b - r) / d + 2;
|
||||
}
|
||||
return (r - g) / d + 4;
|
||||
}
|
||||
function rgb2hsl(v) {
|
||||
const range = 255;
|
||||
const r = v.r / range;
|
||||
const g = v.g / range;
|
||||
const b = v.b / range;
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const l = (max + min) / 2;
|
||||
let h, s, d;
|
||||
if (max !== min) {
|
||||
d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
h = hueValue(r, g, b, d, max);
|
||||
h = h * 60 + 0.5;
|
||||
}
|
||||
return [h | 0, s || 0, l];
|
||||
}
|
||||
function calln(f, a, b, c) {
|
||||
return (
|
||||
Array.isArray(a)
|
||||
? f(a[0], a[1], a[2])
|
||||
: f(a, b, c)
|
||||
).map(n2b);
|
||||
}
|
||||
function hsl2rgb(h, s, l) {
|
||||
return calln(hsl2rgbn, h, s, l);
|
||||
}
|
||||
function hwb2rgb(h, w, b) {
|
||||
return calln(hwb2rgbn, h, w, b);
|
||||
}
|
||||
function hsv2rgb(h, s, v) {
|
||||
return calln(hsv2rgbn, h, s, v);
|
||||
}
|
||||
function hue(h) {
|
||||
return (h % 360 + 360) % 360;
|
||||
}
|
||||
function hueParse(str) {
|
||||
const m = HUE_RE.exec(str);
|
||||
let a = 255;
|
||||
let v;
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
if (m[5] !== v) {
|
||||
a = m[6] ? p2b(+m[5]) : n2b(+m[5]);
|
||||
}
|
||||
const h = hue(+m[2]);
|
||||
const p1 = +m[3] / 100;
|
||||
const p2 = +m[4] / 100;
|
||||
if (m[1] === 'hwb') {
|
||||
v = hwb2rgb(h, p1, p2);
|
||||
} else if (m[1] === 'hsv') {
|
||||
v = hsv2rgb(h, p1, p2);
|
||||
} else {
|
||||
v = hsl2rgb(h, p1, p2);
|
||||
}
|
||||
return {
|
||||
r: v[0],
|
||||
g: v[1],
|
||||
b: v[2],
|
||||
a: a
|
||||
};
|
||||
}
|
||||
function rotate(v, deg) {
|
||||
var h = rgb2hsl(v);
|
||||
h[0] = hue(h[0] + deg);
|
||||
h = hsl2rgb(h);
|
||||
v.r = h[0];
|
||||
v.g = h[1];
|
||||
v.b = h[2];
|
||||
}
|
||||
function hslString(v) {
|
||||
if (!v) {
|
||||
return;
|
||||
}
|
||||
const a = rgb2hsl(v);
|
||||
const h = a[0];
|
||||
const s = n2p(a[1]);
|
||||
const l = n2p(a[2]);
|
||||
return v.a < 255
|
||||
? `hsla(${h}, ${s}%, ${l}%, ${b2n(v.a)})`
|
||||
: `hsl(${h}, ${s}%, ${l}%)`;
|
||||
}
|
||||
|
||||
const map = {
|
||||
x: 'dark',
|
||||
Z: 'light',
|
||||
Y: 're',
|
||||
X: 'blu',
|
||||
W: 'gr',
|
||||
V: 'medium',
|
||||
U: 'slate',
|
||||
A: 'ee',
|
||||
T: 'ol',
|
||||
S: 'or',
|
||||
B: 'ra',
|
||||
C: 'lateg',
|
||||
D: 'ights',
|
||||
R: 'in',
|
||||
Q: 'turquois',
|
||||
E: 'hi',
|
||||
P: 'ro',
|
||||
O: 'al',
|
||||
N: 'le',
|
||||
M: 'de',
|
||||
L: 'yello',
|
||||
F: 'en',
|
||||
K: 'ch',
|
||||
G: 'arks',
|
||||
H: 'ea',
|
||||
I: 'ightg',
|
||||
J: 'wh'
|
||||
};
|
||||
const names$1 = {
|
||||
OiceXe: 'f0f8ff',
|
||||
antiquewEte: 'faebd7',
|
||||
aqua: 'ffff',
|
||||
aquamarRe: '7fffd4',
|
||||
azuY: 'f0ffff',
|
||||
beige: 'f5f5dc',
|
||||
bisque: 'ffe4c4',
|
||||
black: '0',
|
||||
blanKedOmond: 'ffebcd',
|
||||
Xe: 'ff',
|
||||
XeviTet: '8a2be2',
|
||||
bPwn: 'a52a2a',
|
||||
burlywood: 'deb887',
|
||||
caMtXe: '5f9ea0',
|
||||
KartYuse: '7fff00',
|
||||
KocTate: 'd2691e',
|
||||
cSO: 'ff7f50',
|
||||
cSnflowerXe: '6495ed',
|
||||
cSnsilk: 'fff8dc',
|
||||
crimson: 'dc143c',
|
||||
cyan: 'ffff',
|
||||
xXe: '8b',
|
||||
xcyan: '8b8b',
|
||||
xgTMnPd: 'b8860b',
|
||||
xWay: 'a9a9a9',
|
||||
xgYF: '6400',
|
||||
xgYy: 'a9a9a9',
|
||||
xkhaki: 'bdb76b',
|
||||
xmagFta: '8b008b',
|
||||
xTivegYF: '556b2f',
|
||||
xSange: 'ff8c00',
|
||||
xScEd: '9932cc',
|
||||
xYd: '8b0000',
|
||||
xsOmon: 'e9967a',
|
||||
xsHgYF: '8fbc8f',
|
||||
xUXe: '483d8b',
|
||||
xUWay: '2f4f4f',
|
||||
xUgYy: '2f4f4f',
|
||||
xQe: 'ced1',
|
||||
xviTet: '9400d3',
|
||||
dAppRk: 'ff1493',
|
||||
dApskyXe: 'bfff',
|
||||
dimWay: '696969',
|
||||
dimgYy: '696969',
|
||||
dodgerXe: '1e90ff',
|
||||
fiYbrick: 'b22222',
|
||||
flSOwEte: 'fffaf0',
|
||||
foYstWAn: '228b22',
|
||||
fuKsia: 'ff00ff',
|
||||
gaRsbSo: 'dcdcdc',
|
||||
ghostwEte: 'f8f8ff',
|
||||
gTd: 'ffd700',
|
||||
gTMnPd: 'daa520',
|
||||
Way: '808080',
|
||||
gYF: '8000',
|
||||
gYFLw: 'adff2f',
|
||||
gYy: '808080',
|
||||
honeyMw: 'f0fff0',
|
||||
hotpRk: 'ff69b4',
|
||||
RdianYd: 'cd5c5c',
|
||||
Rdigo: '4b0082',
|
||||
ivSy: 'fffff0',
|
||||
khaki: 'f0e68c',
|
||||
lavFMr: 'e6e6fa',
|
||||
lavFMrXsh: 'fff0f5',
|
||||
lawngYF: '7cfc00',
|
||||
NmoncEffon: 'fffacd',
|
||||
ZXe: 'add8e6',
|
||||
ZcSO: 'f08080',
|
||||
Zcyan: 'e0ffff',
|
||||
ZgTMnPdLw: 'fafad2',
|
||||
ZWay: 'd3d3d3',
|
||||
ZgYF: '90ee90',
|
||||
ZgYy: 'd3d3d3',
|
||||
ZpRk: 'ffb6c1',
|
||||
ZsOmon: 'ffa07a',
|
||||
ZsHgYF: '20b2aa',
|
||||
ZskyXe: '87cefa',
|
||||
ZUWay: '778899',
|
||||
ZUgYy: '778899',
|
||||
ZstAlXe: 'b0c4de',
|
||||
ZLw: 'ffffe0',
|
||||
lime: 'ff00',
|
||||
limegYF: '32cd32',
|
||||
lRF: 'faf0e6',
|
||||
magFta: 'ff00ff',
|
||||
maPon: '800000',
|
||||
VaquamarRe: '66cdaa',
|
||||
VXe: 'cd',
|
||||
VScEd: 'ba55d3',
|
||||
VpurpN: '9370db',
|
||||
VsHgYF: '3cb371',
|
||||
VUXe: '7b68ee',
|
||||
VsprRggYF: 'fa9a',
|
||||
VQe: '48d1cc',
|
||||
VviTetYd: 'c71585',
|
||||
midnightXe: '191970',
|
||||
mRtcYam: 'f5fffa',
|
||||
mistyPse: 'ffe4e1',
|
||||
moccasR: 'ffe4b5',
|
||||
navajowEte: 'ffdead',
|
||||
navy: '80',
|
||||
Tdlace: 'fdf5e6',
|
||||
Tive: '808000',
|
||||
TivedBb: '6b8e23',
|
||||
Sange: 'ffa500',
|
||||
SangeYd: 'ff4500',
|
||||
ScEd: 'da70d6',
|
||||
pOegTMnPd: 'eee8aa',
|
||||
pOegYF: '98fb98',
|
||||
pOeQe: 'afeeee',
|
||||
pOeviTetYd: 'db7093',
|
||||
papayawEp: 'ffefd5',
|
||||
pHKpuff: 'ffdab9',
|
||||
peru: 'cd853f',
|
||||
pRk: 'ffc0cb',
|
||||
plum: 'dda0dd',
|
||||
powMrXe: 'b0e0e6',
|
||||
purpN: '800080',
|
||||
YbeccapurpN: '663399',
|
||||
Yd: 'ff0000',
|
||||
Psybrown: 'bc8f8f',
|
||||
PyOXe: '4169e1',
|
||||
saddNbPwn: '8b4513',
|
||||
sOmon: 'fa8072',
|
||||
sandybPwn: 'f4a460',
|
||||
sHgYF: '2e8b57',
|
||||
sHshell: 'fff5ee',
|
||||
siFna: 'a0522d',
|
||||
silver: 'c0c0c0',
|
||||
skyXe: '87ceeb',
|
||||
UXe: '6a5acd',
|
||||
UWay: '708090',
|
||||
UgYy: '708090',
|
||||
snow: 'fffafa',
|
||||
sprRggYF: 'ff7f',
|
||||
stAlXe: '4682b4',
|
||||
tan: 'd2b48c',
|
||||
teO: '8080',
|
||||
tEstN: 'd8bfd8',
|
||||
tomato: 'ff6347',
|
||||
Qe: '40e0d0',
|
||||
viTet: 'ee82ee',
|
||||
JHt: 'f5deb3',
|
||||
wEte: 'ffffff',
|
||||
wEtesmoke: 'f5f5f5',
|
||||
Lw: 'ffff00',
|
||||
LwgYF: '9acd32'
|
||||
};
|
||||
function unpack() {
|
||||
const unpacked = {};
|
||||
const keys = Object.keys(names$1);
|
||||
const tkeys = Object.keys(map);
|
||||
let i, j, k, ok, nk;
|
||||
for (i = 0; i < keys.length; i++) {
|
||||
ok = nk = keys[i];
|
||||
for (j = 0; j < tkeys.length; j++) {
|
||||
k = tkeys[j];
|
||||
nk = nk.replace(k, map[k]);
|
||||
}
|
||||
k = parseInt(names$1[ok], 16);
|
||||
unpacked[nk] = [k >> 16 & 0xFF, k >> 8 & 0xFF, k & 0xFF];
|
||||
}
|
||||
return unpacked;
|
||||
}
|
||||
|
||||
let names;
|
||||
function nameParse(str) {
|
||||
if (!names) {
|
||||
names = unpack();
|
||||
names.transparent = [0, 0, 0, 0];
|
||||
}
|
||||
const a = names[str.toLowerCase()];
|
||||
return a && {
|
||||
r: a[0],
|
||||
g: a[1],
|
||||
b: a[2],
|
||||
a: a.length === 4 ? a[3] : 255
|
||||
};
|
||||
}
|
||||
|
||||
const RGB_RE = /^rgba?\(\s*([-+.\d]+)(%)?[\s,]+([-+.e\d]+)(%)?[\s,]+([-+.e\d]+)(%)?(?:[\s,/]+([-+.e\d]+)(%)?)?\s*\)$/;
|
||||
function rgbParse(str) {
|
||||
const m = RGB_RE.exec(str);
|
||||
let a = 255;
|
||||
let r, g, b;
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
if (m[7] !== r) {
|
||||
const v = +m[7];
|
||||
a = m[8] ? p2b(v) : lim(v * 255, 0, 255);
|
||||
}
|
||||
r = +m[1];
|
||||
g = +m[3];
|
||||
b = +m[5];
|
||||
r = 255 & (m[2] ? p2b(r) : lim(r, 0, 255));
|
||||
g = 255 & (m[4] ? p2b(g) : lim(g, 0, 255));
|
||||
b = 255 & (m[6] ? p2b(b) : lim(b, 0, 255));
|
||||
return {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b,
|
||||
a: a
|
||||
};
|
||||
}
|
||||
function rgbString(v) {
|
||||
return v && (
|
||||
v.a < 255
|
||||
? `rgba(${v.r}, ${v.g}, ${v.b}, ${b2n(v.a)})`
|
||||
: `rgb(${v.r}, ${v.g}, ${v.b})`
|
||||
);
|
||||
}
|
||||
|
||||
const to = v => v <= 0.0031308 ? v * 12.92 : Math.pow(v, 1.0 / 2.4) * 1.055 - 0.055;
|
||||
const from = v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
|
||||
function interpolate(rgb1, rgb2, t) {
|
||||
const r = from(b2n(rgb1.r));
|
||||
const g = from(b2n(rgb1.g));
|
||||
const b = from(b2n(rgb1.b));
|
||||
return {
|
||||
r: n2b(to(r + t * (from(b2n(rgb2.r)) - r))),
|
||||
g: n2b(to(g + t * (from(b2n(rgb2.g)) - g))),
|
||||
b: n2b(to(b + t * (from(b2n(rgb2.b)) - b))),
|
||||
a: rgb1.a + t * (rgb2.a - rgb1.a)
|
||||
};
|
||||
}
|
||||
|
||||
function modHSL(v, i, ratio) {
|
||||
if (v) {
|
||||
let tmp = rgb2hsl(v);
|
||||
tmp[i] = Math.max(0, Math.min(tmp[i] + tmp[i] * ratio, i === 0 ? 360 : 1));
|
||||
tmp = hsl2rgb(tmp);
|
||||
v.r = tmp[0];
|
||||
v.g = tmp[1];
|
||||
v.b = tmp[2];
|
||||
}
|
||||
}
|
||||
function clone(v, proto) {
|
||||
return v ? Object.assign(proto || {}, v) : v;
|
||||
}
|
||||
function fromObject(input) {
|
||||
var v = {r: 0, g: 0, b: 0, a: 255};
|
||||
if (Array.isArray(input)) {
|
||||
if (input.length >= 3) {
|
||||
v = {r: input[0], g: input[1], b: input[2], a: 255};
|
||||
if (input.length > 3) {
|
||||
v.a = n2b(input[3]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
v = clone(input, {r: 0, g: 0, b: 0, a: 1});
|
||||
v.a = n2b(v.a);
|
||||
}
|
||||
return v;
|
||||
}
|
||||
function functionParse(str) {
|
||||
if (str.charAt(0) === 'r') {
|
||||
return rgbParse(str);
|
||||
}
|
||||
return hueParse(str);
|
||||
}
|
||||
class Color {
|
||||
constructor(input) {
|
||||
if (input instanceof Color) {
|
||||
return input;
|
||||
}
|
||||
const type = typeof input;
|
||||
let v;
|
||||
if (type === 'object') {
|
||||
v = fromObject(input);
|
||||
} else if (type === 'string') {
|
||||
v = hexParse(input) || nameParse(input) || functionParse(input);
|
||||
}
|
||||
this._rgb = v;
|
||||
this._valid = !!v;
|
||||
}
|
||||
get valid() {
|
||||
return this._valid;
|
||||
}
|
||||
get rgb() {
|
||||
var v = clone(this._rgb);
|
||||
if (v) {
|
||||
v.a = b2n(v.a);
|
||||
}
|
||||
return v;
|
||||
}
|
||||
set rgb(obj) {
|
||||
this._rgb = fromObject(obj);
|
||||
}
|
||||
rgbString() {
|
||||
return this._valid ? rgbString(this._rgb) : undefined;
|
||||
}
|
||||
hexString() {
|
||||
return this._valid ? hexString(this._rgb) : undefined;
|
||||
}
|
||||
hslString() {
|
||||
return this._valid ? hslString(this._rgb) : undefined;
|
||||
}
|
||||
mix(color, weight) {
|
||||
if (color) {
|
||||
const c1 = this.rgb;
|
||||
const c2 = color.rgb;
|
||||
let w2;
|
||||
const p = weight === w2 ? 0.5 : weight;
|
||||
const w = 2 * p - 1;
|
||||
const a = c1.a - c2.a;
|
||||
const w1 = ((w * a === -1 ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
|
||||
w2 = 1 - w1;
|
||||
c1.r = 0xFF & w1 * c1.r + w2 * c2.r + 0.5;
|
||||
c1.g = 0xFF & w1 * c1.g + w2 * c2.g + 0.5;
|
||||
c1.b = 0xFF & w1 * c1.b + w2 * c2.b + 0.5;
|
||||
c1.a = p * c1.a + (1 - p) * c2.a;
|
||||
this.rgb = c1;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
interpolate(color, t) {
|
||||
if (color) {
|
||||
this._rgb = interpolate(this._rgb, color._rgb, t);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
clone() {
|
||||
return new Color(this.rgb);
|
||||
}
|
||||
alpha(a) {
|
||||
this._rgb.a = n2b(a);
|
||||
return this;
|
||||
}
|
||||
clearer(ratio) {
|
||||
const rgb = this._rgb;
|
||||
rgb.a *= 1 - ratio;
|
||||
return this;
|
||||
}
|
||||
greyscale() {
|
||||
const rgb = this._rgb;
|
||||
const val = round(rgb.r * 0.3 + rgb.g * 0.59 + rgb.b * 0.11);
|
||||
rgb.r = rgb.g = rgb.b = val;
|
||||
return this;
|
||||
}
|
||||
opaquer(ratio) {
|
||||
const rgb = this._rgb;
|
||||
rgb.a *= 1 + ratio;
|
||||
return this;
|
||||
}
|
||||
negate() {
|
||||
const v = this._rgb;
|
||||
v.r = 255 - v.r;
|
||||
v.g = 255 - v.g;
|
||||
v.b = 255 - v.b;
|
||||
return this;
|
||||
}
|
||||
lighten(ratio) {
|
||||
modHSL(this._rgb, 2, ratio);
|
||||
return this;
|
||||
}
|
||||
darken(ratio) {
|
||||
modHSL(this._rgb, 2, -ratio);
|
||||
return this;
|
||||
}
|
||||
saturate(ratio) {
|
||||
modHSL(this._rgb, 1, ratio);
|
||||
return this;
|
||||
}
|
||||
desaturate(ratio) {
|
||||
modHSL(this._rgb, 1, -ratio);
|
||||
return this;
|
||||
}
|
||||
rotate(deg) {
|
||||
rotate(this._rgb, deg);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
function index_esm(input) {
|
||||
return new Color(input);
|
||||
}
|
||||
|
||||
export { Color, b2n, b2p, index_esm as default, hexParse, hexString, hsl2rgb, hslString, hsv2rgb, hueParse, hwb2rgb, lim, n2b, n2p, nameParse, p2b, rgb2hsl, rgbParse, rgbString, rotate, round };
|
||||
77
go/cmd/kjol-web/frontend/vendor/@kurkle/color/package.json
vendored
Normal file
77
go/cmd/kjol-web/frontend/vendor/@kurkle/color/package.json
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"name": "@kurkle/color",
|
||||
"type": "module",
|
||||
"version": "0.3.4",
|
||||
"description": "css color parsing, manupulation and conversion",
|
||||
"sideEffects": false,
|
||||
"main": "dist/color.cjs",
|
||||
"module": "dist/color.esm.js",
|
||||
"types": "dist/color.d.ts",
|
||||
"exports": {
|
||||
"types": "./dist/color.d.ts",
|
||||
"import": "./dist/color.esm.js",
|
||||
"require": "./dist/color.cjs"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node util/copy_dist.js && rollup -c",
|
||||
"lint": "eslint src/*.js test/*.js util/*.js",
|
||||
"test": "node test/index.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kurkle/color.git"
|
||||
},
|
||||
"files": [
|
||||
"dist/*",
|
||||
"dist/color.d.ts"
|
||||
],
|
||||
"keywords": [
|
||||
"color",
|
||||
"colour",
|
||||
"css",
|
||||
"hsl",
|
||||
"hex",
|
||||
"rgb",
|
||||
"rgba",
|
||||
"hwb",
|
||||
"hsv",
|
||||
"cmyk"
|
||||
],
|
||||
"author": "Jukka Kurkela",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kurkle/color/issues"
|
||||
},
|
||||
"homepage": "https://github.com/kurkle/color#readme",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-terser": "^0.4.0",
|
||||
"assert": "^2.0.0",
|
||||
"benchmark": "^2.1.4",
|
||||
"chartjs-color": "^2.4.1",
|
||||
"chartjs-color-string": "^0.6.0",
|
||||
"child_process": "^1.0.2",
|
||||
"chroma-js": "^3.1.1",
|
||||
"color-name": "^2.0.0",
|
||||
"color-names": "^2.0.0",
|
||||
"color-parse": "^2.0.2",
|
||||
"color-parser": "^0.1.0",
|
||||
"color-string": "^1.5.5",
|
||||
"csscolorparser": "^1.0.3",
|
||||
"eslint": "^9.15.0",
|
||||
"eslint-config-chartjs": "^0.3.0",
|
||||
"eslint-config-defaults": "^9.0.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"fs": "0.0.1-security",
|
||||
"perf_hooks": "0.0.1",
|
||||
"rollup": "^4.25.0",
|
||||
"rollup-plugin-analyzer": "^4.0.0",
|
||||
"rollup-plugin-cleanup": "^3.2.1",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"rollup-plugin-visualizer": "^5.8.3",
|
||||
"tinycolor2": "^1.4.2",
|
||||
"typedoc": "^0.26.7",
|
||||
"typescript": "^5.6.2",
|
||||
"util": "^0.12.3"
|
||||
}
|
||||
}
|
||||
11599
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chart.js
vendored
Normal file
11599
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chart.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2915
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.cjs
vendored
Normal file
2915
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.cjs
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.cjs.map
vendored
Normal file
1
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.cjs.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2788
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.js
vendored
Normal file
2788
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.js.map
vendored
Normal file
1
go/cmd/kjol-web/frontend/vendor/chart.js/dist/chunks/helpers.dataset.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
139
go/cmd/kjol-web/frontend/vendor/chart.js/package.json
vendored
Normal file
139
go/cmd/kjol-web/frontend/vendor/chart.js/package.json
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
{
|
||||
"name": "chart.js",
|
||||
"homepage": "https://www.chartjs.org",
|
||||
"description": "Simple HTML5 charts using the canvas element.",
|
||||
"version": "4.5.1",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
"./auto/auto.js",
|
||||
"./auto/auto.cjs",
|
||||
"./dist/chart.umd.min.js",
|
||||
"./dist/chart.umd.js"
|
||||
],
|
||||
"jsdelivr": "./dist/chart.umd.min.js",
|
||||
"unpkg": "./dist/chart.umd.min.js",
|
||||
"main": "./dist/chart.cjs",
|
||||
"module": "./dist/chart.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/types.d.ts",
|
||||
"import": "./dist/chart.js",
|
||||
"require": "./dist/chart.cjs"
|
||||
},
|
||||
"./auto": {
|
||||
"types": "./auto/auto.d.ts",
|
||||
"import": "./auto/auto.js",
|
||||
"require": "./auto/auto.cjs"
|
||||
},
|
||||
"./helpers": {
|
||||
"types": "./helpers/helpers.d.ts",
|
||||
"import": "./helpers/helpers.js",
|
||||
"require": "./helpers/helpers.cjs"
|
||||
}
|
||||
},
|
||||
"types": "./dist/types.d.ts",
|
||||
"keywords": [
|
||||
"canvas",
|
||||
"charts",
|
||||
"data",
|
||||
"graphs",
|
||||
"html5",
|
||||
"responsive"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/chartjs/Chart.js.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/chartjs/Chart.js/issues"
|
||||
},
|
||||
"files": [
|
||||
"auto/**",
|
||||
"dist/**",
|
||||
"!dist/docs/**",
|
||||
"helpers/**"
|
||||
],
|
||||
"scripts": {
|
||||
"autobuild": "rollup -c -w",
|
||||
"copyDeclarations": "node -e \"fs.cpSync('./src/types/', './dist/types/', {recursive:true})\"",
|
||||
"emitDeclarations": "tsc --emitDeclarationOnly && pnpm copyDeclarations",
|
||||
"build": "rollup -c && pnpm emitDeclarations",
|
||||
"dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome --grep",
|
||||
"dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox --grep",
|
||||
"docs": "pnpm run build && pnpm --filter \"./docs/**\" build",
|
||||
"docs:dev": "pnpm run build && pnpm --filter \"./docs/**\" dev",
|
||||
"lint-js": "eslint \"src/**/*.{js,ts}\" \"test/**/*.js\" \"docs/**/*.js\" --cache",
|
||||
"lint-md": "eslint \"**/*.md\" --cache",
|
||||
"lint-types": "pnpm build && node test/types/autogen.js && tsc -p test/types",
|
||||
"lint": "concurrently \"pnpm:lint-*\"",
|
||||
"test": "pnpm lint && pnpm test-ci",
|
||||
"test-ci": "concurrently \"pnpm:test-ci-*\"",
|
||||
"test-ci-karma": "cross-env NODE_ENV=test karma start ./karma.conf.cjs --auto-watch --single-run --coverage --grep",
|
||||
"test-ci-integration": "pnpm --filter \"./test/integration/**\" test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^23.0.2",
|
||||
"@rollup/plugin-inject": "^5.0.2",
|
||||
"@rollup/plugin-json": "^5.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@swc/core": "^1.3.18",
|
||||
"@types/estree": "^1.0.0",
|
||||
"@types/offscreencanvas": "^2019.7.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.32.0",
|
||||
"@typescript-eslint/parser": "^5.32.0",
|
||||
"chartjs-adapter-luxon": "^1.2.0",
|
||||
"chartjs-adapter-moment": "^1.0.0",
|
||||
"chartjs-test-utils": "^0.4.0",
|
||||
"concurrently": "^7.3.0",
|
||||
"coveralls": "^3.1.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.21.0",
|
||||
"eslint-config-chartjs": "^0.3.0",
|
||||
"eslint-plugin-es": "^4.1.0",
|
||||
"eslint-plugin-html": "^7.1.0",
|
||||
"eslint-plugin-markdown": "^3.0.0",
|
||||
"esm": "^3.2.25",
|
||||
"glob": "^8.0.3",
|
||||
"jasmine": "^3.7.0",
|
||||
"jasmine-core": "^3.7.1",
|
||||
"karma": "^6.3.2",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-coverage": "^2.0.3",
|
||||
"karma-edge-launcher": "^0.4.2",
|
||||
"karma-firefox-launcher": "^2.1.0",
|
||||
"karma-jasmine": "^4.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.5.4",
|
||||
"karma-rollup-preprocessor": "7.0.7",
|
||||
"karma-safari-private-launcher": "^1.0.0",
|
||||
"karma-spec-reporter": "0.0.32",
|
||||
"luxon": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"moment-timezone": "^0.5.34",
|
||||
"pixelmatch": "^5.3.0",
|
||||
"rollup": "^3.3.0",
|
||||
"rollup-plugin-cleanup": "^3.2.1",
|
||||
"rollup-plugin-istanbul": "^4.0.0",
|
||||
"rollup-plugin-swc3": "^0.7.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typescript": "^4.7.4",
|
||||
"yargs": "^17.5.1"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
},
|
||||
"packageManager": "pnpm@8.13.0",
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"html-entities": "1.4.0"
|
||||
},
|
||||
"peerDependencyRules": {
|
||||
"ignoreMissing": [
|
||||
"chart.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
6
go/cmd/kjol-web/frontend/vendor/vendor.json
vendored
6
go/cmd/kjol-web/frontend/vendor/vendor.json
vendored
@@ -5,8 +5,12 @@
|
||||
|
||||
"//3": "Only the files the bundler actually pins are vendored, not the whole npm packages — 3.5 MB rather than 62 MB of type definitions, CJS builds and documentation. If a subpath import is ever added that reaches outside dist/ or build/, this is the first place it will fail.",
|
||||
|
||||
"//4": "chart.js (and its @kurkle/color dependency) are here for the same reason: @ui/Chart imports chart.js at the top level and registers every controller on module load. Its wrapper is h-full with maintainAspectRatio:false, so the PARENT must have an explicit height or the canvas collapses to nothing.",
|
||||
|
||||
"entrypoints": {
|
||||
"pdf-lib": "pdf-lib/dist/pdf-lib.esm.js",
|
||||
"pdfjs-dist": "pdfjs-dist/build/pdf.mjs"
|
||||
"pdfjs-dist": "pdfjs-dist/build/pdf.mjs",
|
||||
"chart.js": "chart.js/dist/chart.js",
|
||||
"@kurkle/color": "@kurkle/color/dist/color.esm.js"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user