writeonce/docs/examples/site/packages/view.wo
shoney.arickathil 24245438cf feat(site): logo, favicon, install guide, package catalogue
- 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>
2026-08-25 04:05:00 +02:00

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;
}
}