- layout/logo.wo: the mark as inline SVG — dark tile, two-stroke "W" (white then accent blue). One source: nav brand + /favicon.svg - favicon/controller.wo: GET /favicon.svg, image/svg+xml, day cache - install/: GET /install — toolchain tarball, PATH, verify, first project, build/run, adding a dep. Copy from the real install README - packages/: GET /packages + /packages/:name — catalogue with the [deps] line, what each library gives you, and a usage snippet. Index cards are child components (multi Component) - wo-html: page_head(title, head, body) and a `head` slot on Layout — a favicon link or meta tag had nowhere else to go; page() passes "" - header: Install/Tutorial/Packages/GitHub, brand shows the mark - main.wo: SITE_HOST picks the interface (loopback default), bound address printed at startup - site-accept: 11 -> 17 checks (install, packages x2, 404, favicon, inline logo) Verified on 192.168.0.165:8080 — every route, favicon bytes, and the mark rasterised at 256px and 32px. Gates: oop-accept MET, site 17/0, web-app 46/0, fibers 10/0, db-actor 8/0; shop rebuilt clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
61 lines
2.1 KiB
Text
61 lines
2.1 KiB
Text
-- packages/view.wo — the VIEW for /packages and /packages/:name.
|
|
--
|
|
-- Three components: a card for the index, the index itself (holding its
|
|
-- cards as CHILDREN through the structural interface), and the detail
|
|
-- page. None of them knows where the catalogue came from.
|
|
use html
|
|
|
|
pub class PackageCard {
|
|
name: Text
|
|
summary: Text
|
|
|
|
fn render() -> Text {
|
|
return `
|
|
<div class="bg-white rounded-lg border shadow-sm p-6">
|
|
<h3 class="text-lg font-bold mb-2"><a href="/packages/{{ self.name }}">{{ self.name }}</a></h3>
|
|
<p class="leading-relaxed text-gray-700">{{ self.summary }}</p>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
pub class PackagesPage {
|
|
cards: multi Component
|
|
|
|
fn render() -> Text {
|
|
return `
|
|
<h1 class="text-3xl font-bold mb-4">Packages</h1>
|
|
<p class="leading-relaxed mb-6">A package is a git repository with a
|
|
<code>wo.toml</code> that says <code>kind = "library"</code>. There is no
|
|
registry and no publish step: you depend on a URL and a revision, and
|
|
<code>wo.lock</code> pins exactly what you built against. These are the
|
|
libraries this site itself is built on.</p>
|
|
<div class="grid grid-cols-2 gap-6 mb-8">${render_all(self.cards)}</div>`;
|
|
}
|
|
}
|
|
|
|
pub class PackagePage {
|
|
name: Text
|
|
summary: Text
|
|
git: Text
|
|
rev: Text
|
|
what: Text
|
|
usage: Text
|
|
|
|
fn render() -> Text {
|
|
let dep = code_block("[deps]\n" .. self.name .. " = { git = \"" .. self.git .. "\", rev = \"" .. self.rev .. "\" }");
|
|
let head = `
|
|
<h1 class="text-3xl font-bold mb-2">{{ self.name }}</h1>
|
|
<p class="leading-relaxed text-gray-700 mb-6">{{ self.summary }}</p>
|
|
<h2 class="text-2xl font-bold mb-2">Install</h2>
|
|
<p class="leading-relaxed mb-4">Add it to your <code>wo.toml</code>. The
|
|
KEY is the module name — that is what <code>use</code> imports.</p>`;
|
|
let what = `
|
|
<h2 class="text-2xl font-bold mb-2 mt-8">What you get</h2>
|
|
${self.what}`;
|
|
let usage = `
|
|
<h2 class="text-2xl font-bold mb-2 mt-8">Usage</h2>
|
|
${self.usage}`;
|
|
let back = el("p", "mt-8", link("/packages", "", "← all packages"));
|
|
return head .. dep .. what .. usage .. back;
|
|
}
|
|
}
|