From 10bfc916c96bd39e9a5028c05c41ead369167307 Mon Sep 17 00:00:00 2001 From: Utkarsh Sengar Date: Sat, 22 Aug 2026 23:36:52 -0700 Subject: [PATCH 1/3] landing: redesign the fold around evidence instead of instructions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The old landing was a left-aligned document on pure white with the HTTP memo as its hero. Held next to the pages that do this well (portradar, zerolang, subtitlegenerator) it read as unstyled rather than restrained. An earlier attempt at fixing that by subtraction - removing the accent word, the subhead, the motion, the shadows - made it worse, because austerity is not the same thing as professionalism. Those pages are heavily designed; they just don't spend the budget on slop vocabulary. So this is additive: - A tinted page (#F4F5F6) with a dot texture, so white surfaces have something to sit on. Single biggest contributor to "looks designed". - Centred composition, and a real nav with one solid action. - Display type up to 66px carrying the claim, all black. No accent- coloured word: that is the most templated move in this category, and none of the reference pages do it. - A short subhead that states the mechanic. Researched lengths from the pages worth copying: Vercel 5-word headline, Linear 8 + 13, Resend 8 + 12. This lands at 8 + 13. The old lede was 45 words. - Evidence above the fold. A real drop in an iframe (/p/ztx4J9P/raw, which does not bump view_count so the homepage doesn't inflate that drop's counter), plus the marks of the agents the CLI already detects. - The prompt slab loses its fake traffic lights, and its duplicate copy button. One affordance, no window chrome. The HTTP memo is retired from this page and replaced by the real thing: a trimmed but literal GET /api/onboard response. The old block rendered to:/from:/re: as if they were HTTP headers. They are RFC 5322 email headers - so the component built to signal protocol-seriousness was showing invented ones, which the engineers most worth impressing would notice. The endpoint returns 13.4 KB across 21 sections; showing it beats drawing it. Copy is rewritten throughout to drop insider language. "Mints a new version" and "slug stays put" are phrases nobody outside this repo says. New file src/views/logos.ts holds the brand marks, inlined so the page makes no third-party request. Only the four whose identity was verified against the source SVG are included: Claude, Cursor, OpenAI (for Codex), Cline - all from simple-icons 16.28.0, CC0-1.0. Aider and Devin are not in that set, and the "amp" slug there is Google AMP rather than Sourcegraph's Amp, so those three are named in prose instead. A wrong logo reads worse than no logo and these are other companies' marks. Scope: landing only. /verify and /p/:slug still use pageHead() and httpMemo() from chrome.ts, and every new rule is scoped to body.landing or to a class only this page emits, so those two pages are byte-identical. Verified: typecheck clean; wrangler dev returns 200 with all five marks rendered and no old-chrome markup; /verify, the viewer and /style.css still 200; true 360px and 768px viewports (rendered inside sized iframes, because headless Chrome clamps its own window to 500px) show no page-level horizontal overflow. This bends DESIGN.md §1, §3, §5.2, §6 and §7 - see the block comment in styles.ts. The doc needs amending if this direction is accepted; not touched here so it doesn't get rewritten for a design that may not ship. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> --- src/styles.ts | 257 ++++++++++++++++++++++++ src/views/landing.ts | 457 ++++++++++++++----------------------------- src/views/logos.ts | 30 +++ 3 files changed, 438 insertions(+), 306 deletions(-) create mode 100644 src/views/logos.ts diff --git a/src/styles.ts b/src/styles.ts index 8f03770..ae91751 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -1162,6 +1162,263 @@ iframe.canvas { border: 0; width: 100%; background: #fff; flex: 1; } .gate { margin-top: 36px; max-width: 100%; padding: 0 8px; } .gate-input { font-size: 18px; } } + +/* ══════════════════════════════════════════════════════════════════ + LANDING REDESIGN + + Everything here is scoped to body.landing (or to classes only the + landing emits) so /verify and /p/:slug keep the existing chrome + untouched. The old .page-head / details.req / .prompt / .hero rules + above are still live for those two pages. + + Why this exists: the previous landing was a left-aligned document on + pure white with the HTTP memo as its hero. Against the pages that do + this well it read as unstyled rather than restrained. The moves that + changed that, roughly in order of effect: + + 1. A tinted page with a dot texture, so white surfaces have + something to sit on. + 2. Centred composition and a real nav with one solid action. + 3. Display type carrying the claim, all black - no accent-coloured + word, which is the most templated move in this category. + 4. A short subhead that states the mechanic. Researched lengths: + Vercel 5-word headline, Linear 8 + 13, Resend 8 + 12. + 5. Evidence above the fold - a real drop in an iframe, plus the + marks of the agents the CLI already detects. + + This bends DESIGN.md §1, §3 (pure white, no gradients), §5.2 (memo + as hero), §6 (720px left-aligned single column) and §7 (no marketing + prose above the fold). DESIGN.md needs amending if this ships. + ══════════════════════════════════════════════════════════════════ */ + +body.landing { + --page: #F4F5F6; + --card: #FFFFFF; + --lshell: 1080px; + background: var(--page); + /* Texture, not decoration: it renders as dots, not a colour wash. + The one gradient on the page. */ + background-image: radial-gradient(circle, rgba(10,10,10,.055) 1px, transparent 1.1px); + background-size: 24px 24px; +} +/* the shared 880px <main> does not apply to this layout */ +body.landing main { max-width: none; margin: 0; padding: 0; } + +/* ---------- nav ---------- */ +.lnav { + position: sticky; top: 0; z-index: 20; + background: rgba(244,245,246,.92); + border-bottom: 1px solid var(--rule); +} +.lnav .in { + max-width: var(--lshell); margin: 0 auto; + padding: 14px 28px; + display: flex; align-items: center; gap: 22px; +} +.lnav .wm { + font-family: var(--mono); font-weight: 500; font-size: 14.5px; + letter-spacing: -0.01em; color: var(--ink); text-decoration: none; +} +.lnav .wm::before { content: "<"; color: var(--red); } +.lnav .wm::after { content: ">"; color: var(--red); } +.lnav .links { display: flex; gap: 20px; margin-left: 14px; } +.lnav .links a { + font-size: 14px; color: var(--ink-soft); + text-decoration: none; transition: color 0.12s; +} +.lnav .links a:hover { color: var(--ink); } +.lnav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; } +.lnav .gh { + display: inline-flex; align-items: center; gap: 7px; + font-family: var(--mono); font-size: 12.5px; + color: var(--ink-soft); text-decoration: none; +} +.lnav .gh:hover { color: var(--ink); } +.lnav .gh svg { width: 15px; height: 15px; flex: 0 0 auto; } +.lnav .btn { + background: var(--ink); color: #fff; + font-size: 13.5px; font-weight: 500; + padding: 9px 16px; border-radius: var(--r-md); + border: 1px solid var(--ink); + text-decoration: none; white-space: nowrap; + transition: background 0.12s; +} +.lnav .btn:hover { background: #262626; } + +/* ---------- hero ---------- */ +.lhero { + max-width: var(--lshell); margin: 0 auto; + padding: 96px 28px 0; text-align: center; +} +.lhero h1 { + font-size: clamp(38px, 5.6vw, 66px); + line-height: 1.03; letter-spacing: -0.035em; + font-weight: 700; max-width: 17ch; + margin: 0 auto 22px; +} +.lhero .lede { + font-size: 19.5px; line-height: 1.52; + color: var(--ink-soft); + max-width: 60ch; margin: 0 auto 34px; +} + +/* ---------- the one action ---------- */ +/* No traffic lights. The reference set does not use fake window chrome + and it was the most toy-like thing on the old fold. */ +.lbox { + max-width: 720px; margin: 0 auto; + background: var(--code-bg); + border-radius: var(--r-lg); + overflow: hidden; text-align: left; + box-shadow: 0 1px 2px rgba(10,10,10,.06), 0 8px 24px -18px rgba(10,10,10,.28); +} +.lbox .strip { + display: flex; align-items: center; + border-bottom: 1px solid rgba(255,255,255,.08); + padding: 0 6px 0 4px; +} +.lbox .strip .t { + background: none; border: 0; cursor: pointer; + font-family: var(--mono); font-size: 12.5px; + color: rgba(239,239,239,.5); + padding: 13px 14px; + border-bottom: 2px solid transparent; margin-bottom: -1px; + transition: color 0.12s; +} +.lbox .strip .t:hover { color: rgba(239,239,239,.85); } +.lbox .strip .t.on { color: #fff; border-bottom-color: var(--red); } +.lbox .cp { + margin-left: auto; + background: rgba(255,255,255,.07); border: 0; cursor: pointer; + color: rgba(239,239,239,.72); + font-family: var(--mono); font-size: 11.5px; + padding: 6px 11px; border-radius: var(--r-sm); + transition: background 0.12s, color 0.12s; +} +.lbox .cp:hover { background: rgba(255,255,255,.13); color: #fff; } +.lbox .cp.ok { background: rgba(40,190,70,.18); color: var(--ok-on-dark); } +/* All panes share one grid cell so the slab never jumps between tabs. + That means it sizes to the tallest pane, so keep every payload to + the same number of lines or the shorter ones show dead black. */ +.lbox .body { padding: 20px 22px 22px; display: grid; } +.lbox pre { + grid-area: 1 / 1; + font-family: var(--mono); font-size: 13.5px; line-height: 1.75; + color: var(--code-fg); + white-space: pre-wrap; overflow-wrap: anywhere; + visibility: hidden; pointer-events: none; +} +.lbox pre.on { visibility: visible; pointer-events: auto; } +.lbox pre .em { color: var(--code-em); } +.lbox pre .c, .lbox pre .d { color: var(--code-dim); } +.lbox pre .a { color: var(--ok-on-dark); } + +/* ---------- works-with ---------- */ +/* No box per item. Seven outlined pills read as a tag list, and an + empty mark slot inside each one read as an unchecked checkbox. */ +.works { max-width: 860px; margin: 38px auto 0; text-align: center; } +.works-lab { font-size: 13.5px; color: var(--ink-softer); margin-bottom: 20px; } +.works-row { + display: flex; flex-wrap: wrap; justify-content: center; + align-items: center; gap: 14px 30px; +} +.works-row .lg { + display: inline-flex; align-items: center; gap: 8px; + font-size: 14.5px; font-weight: 500; + color: var(--ink-soft); white-space: nowrap; + transition: color 0.14s; +} +.works-row .lg:hover { color: var(--ink); } +.works-row .lg svg { + width: 17px; height: 17px; flex: 0 0 auto; + opacity: .62; transition: opacity 0.14s; +} +.works-row .lg:hover svg { opacity: 1; } +.works-fine { + font-family: var(--mono); font-size: 11.5px; line-height: 1.9; + color: var(--ink-softer); margin-top: 22px; +} + +/* ---------- evidence ---------- */ +.lsec { max-width: var(--lshell); margin: 0 auto; padding: 92px 28px 0; } +.lsec .eyebrow { + font-family: var(--mono); font-size: 11px; + letter-spacing: 0.1em; text-transform: uppercase; + color: var(--ink-softer); text-align: center; margin-bottom: 16px; +} +.frame { + background: var(--card); border: 1px solid var(--rule); + border-radius: var(--r-lg); overflow: hidden; + box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 20px 44px -32px rgba(10,10,10,.3); +} +.frame .bar { + display: flex; align-items: center; gap: 10px; + padding: 11px 16px; border-bottom: 1px solid var(--rule-soft); + font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); +} +.frame .bar .u { color: var(--ink); font-weight: 500; } +.frame .bar .go { margin-left: auto; font-size: 11.5px; color: var(--ink-softer); text-decoration: none; } +.frame .bar .go:hover { color: var(--red); } +.shot { position: relative; } +/* The frame crops mid-sentence, which reads as broken rather than + truncated. The fade makes the cut deliberate. Functional, not + decorative — but it is a gradient, so DESIGN.md §3 needs the + carve-out if this ships. */ +.shot::after { + content: ""; position: absolute; left: 0; right: 0; bottom: 0; + height: 72px; pointer-events: none; + background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%); +} +.frame iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff; } +.lnote { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 16px auto 0; max-width: 58ch; } +.lnote .inl { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(217,48,37,.3); } +.lnote .inl:hover { border-bottom-color: var(--red); } + +/* ---------- the onboard response, shown not illustrated ---------- */ +.onb { + max-width: 760px; margin: 0 auto; + background: var(--code-bg); + border-radius: var(--r-lg); overflow: hidden; + box-shadow: 0 1px 2px rgba(10,10,10,.06), 0 8px 24px -18px rgba(10,10,10,.28); +} +.onb .strip { + display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; + padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.08); + font-family: var(--mono); font-size: 12.5px; + color: rgba(239,239,239,.9); +} +.onb .strip .m { color: var(--code-em); font-weight: 500; } +.onb .strip .meta { margin-left: auto; color: rgba(239,239,239,.42); font-size: 11.5px; } +.onb .body { padding: 16px 18px 20px; overflow-x: auto; } +.onb pre { + font-family: var(--mono); font-size: 12.5px; line-height: 1.75; + color: var(--code-fg); white-space: pre; +} +.onb .k { color: #9CDCFE; } +.onb .s { color: #CE9178; } +.onb .n { color: #B5CEA8; } +.onb .p { color: rgba(239,239,239,.45); } +.onb .c { color: var(--code-dim); font-style: normal; } + +/* ---------- capability list + examples, centred for this layout ---------- */ +body.landing .caps { max-width: 900px; margin: 0 auto; gap: 36px 52px; } +body.landing .examples { max-width: 760px; margin: 0 auto; } +body.landing .examples .cue { display: none; } +body.landing .footer-merged { max-width: 900px; margin: 70px auto 56px; } + +@media (max-width: 820px) { + .lnav .links { display: none; } + .lhero { padding-top: 56px; } + body.landing .caps { grid-template-columns: 1fr; gap: 30px; } +} +@media (max-width: 600px) { + .lnav .in, .lhero, .lsec { padding-left: 20px; padding-right: 20px; } + .lhero h1 { font-size: 34px; max-width: none; } + .lhero .lede { font-size: 17px; } + .lbox pre { font-size: 12px; } + .frame iframe { height: 300px; } + .shot::after { height: 56px; } +} `; // Cache-bust the stylesheet automatically on every CSS change. The version diff --git a/src/views/landing.ts b/src/views/landing.ts index dc8d73a..69a9dd5 100644 --- a/src/views/landing.ts +++ b/src/views/landing.ts @@ -1,96 +1,45 @@ import type { Bindings } from "../types"; -import { httpMemo, pageHead } from "./chrome"; import { STYLE_INLINE } from "../styles"; +import { AGENT_MARKS, AGENTS_WITHOUT_MARKS, GITHUB_MARK } from "./logos"; -// Curated "what people are building" list, rendered below the tool -// section. Edit this array + redeploy to rotate. Captions and `kind` -// labels are hand-curated — they don't read from the drop's stored -// title. The `kind` column on the right gives the list a visible range -// (explainer / pr writeup / design / playful / plan-spec) so it reads -// as proof-of-breadth, not just "four random links." +// Curated "a few drops people have made" list. Edit this array + redeploy +// to rotate. Captions and `kind` labels are hand-written — they don't read +// from the drop's stored title. const EXAMPLES: Array<{ slug: string; caption: string; kind: string }> = [ - { - slug: "gDMy7Vb", - caption: "how htmlbin works — an animated explainer", - kind: "explainer", - }, - { - slug: "1Wyf23j", - caption: "cross-platform gstack — pr #1111 deep dive", - kind: "pr writeup", - }, - { - slug: "ztx4J9P", - caption: "workers nav — three redesigns side by side", - kind: "design", - }, - { - slug: "i2taphP", - caption: "google logo — animation playground", - kind: "playful", - }, - { - slug: "HYmZ6DjCM", - caption: "plan: queryable drop metadata", - kind: "plan / spec", - }, + { slug: "gDMy7Vb", caption: "how htmlbin works — an animated explainer", kind: "explainer" }, + { slug: "1Wyf23j", caption: "cross-platform gstack — pr #1111 deep dive", kind: "pr writeup" }, + { slug: "ztx4J9P", caption: "workers nav — three redesigns side by side", kind: "design" }, + { slug: "i2taphP", caption: "google logo — animation playground", kind: "playful" }, + { slug: "HYmZ6DjCM", caption: "plan: queryable drop metadata", kind: "plan / spec" }, ]; -// The two prompt-tab payloads. We deliberately serve two — "one thing -// to copy" is preserved because at any moment exactly one tab is -// active, and the copy buttons read whichever one is selected. Plain -// strings here are the clipboard payloads; the visible HTML below -// hand-wires the same content with <span class="em"> accents for color. +// The drop embedded above the fold as evidence. Picked because it is light +// (the prompt slab above it is already dark), visually rich, and reads +// instantly as work somebody would actually send. `/raw` is used so the +// viewer chrome isn't nested inside our own frame, and that route does NOT +// bump view_count — see the /p/:slug/raw handler in index.ts — so embedding +// it on every homepage hit doesn't inflate this drop's counter. // -// Keep these in sync with the prompt-body HTML further down — if you -// edit one, edit the other. -const AGENT_PROMPT = `Make a delightful HTML page to explain a concept or a problem — show me what HTML can do that markdown or a flat file can't. Something visual, interactive, alive. +// If this slug is ever deleted the frame goes blank. Swap it here. +const SHOWCASE_SLUG = "ztx4J9P"; -Publish to htmlbin.dev. Credentials and API at htmlbin.dev/api/onboard.`; +// Clipboard payloads for the three tabs. Keep each visible pane to THREE +// rendered lines: the panes share one grid cell so the slab can't jump on +// tab change, which means it sizes to the tallest — and a shorter pane then +// shows dead black space underneath. +const AGENT_PROMPT = `Explain this as an HTML page — visual, not a wall of text. -// Clipboard form — paste-and-run. The visible CLI panel keeps the `$ ` -// prompt prefix and the `→ URL` result line as visual signposts, but -// neither belongs in what we copy: `$` is the shell prompt indicator, -// and `→ https://…` is example output, not a command. The echo line -// creates a tiny sample file so the publish actually succeeds — without -// it, `publish out.html` would fail with file-not-found. Comments stay: -// bash ignores `#` lines, so they're harmless on paste and useful for -// context. -const CLI_PROMPT = `# one-time — GitHub device-code, ~30s -npx @htmlbin/cli login +Publish it to htmlbin.dev. Start at htmlbin.dev/api/onboard.`; -# create a sample page and publish it -echo '<h1>hello from htmlbin</h1>' > out.html -npx @htmlbin/cli publish out.html`; +const CLI_PROMPT = `npm i -g @htmlbin/cli && htmlbin login +htmlbin publish ./plan.html`; -// "skill" tab — installs the official htmlbin-publish agent skill via -// skills.sh. The skill walks any supported agent (Claude Code, Cursor, -// Codex, Gemini, …) through the pattern-before-publish workflow without -// requiring a hand-pasted prompt every session. One install, ambient -// for the lifetime of the agent. Lives in the htmlbin-cli repo — -// skills.sh resolves the subdirectory automatically. -const SKILL_PROMPT = `# install the official htmlbin agent skill (one-time) -# works with claude code, cursor, codex, gemini, … -npx skills add https://github.com/utsengar/htmlbin-cli --skill htmlbin-publish`; - -// Tool-section copy button. Same shape as CLI_PROMPT but the global -// install path (npm i -g, then bare `htmlbin`). End-to-end paste-and-run. -const TOOL_SETUP = `npm i -g @htmlbin/cli -htmlbin login -echo '<h1>hello from htmlbin</h1>' > out.html -htmlbin publish out.html`; +const SKILL_PROMPT = `npx skills add utsengar/htmlbin-cli --skill htmlbin-publish`; export function landingPage(env: Bindings): string { const PUBLIC_URL = env.PUBLIC_URL; const HOST = stripScheme(PUBLIC_URL); - const date = new Date().toLocaleDateString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - }); - - // JSON-LD service schema for crawlers and agent indexers. const jsonLd = JSON.stringify({ "@context": "https://schema.org", "@type": "WebAPI", @@ -101,15 +50,20 @@ export function landingPage(env: Bindings): string { documentation: `${PUBLIC_URL}/api/onboard`, }); + const marks = AGENT_MARKS.map( + (m) => + `<span class="lg" title="${escapeAttr(m.name)}"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${m.path}"/></svg>${escapeText(m.name)}</span>`, + ).join("\n "); + return /* html */ `<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <title>htmlbin — agent-first HTML hosting - + - + @@ -119,9 +73,9 @@ export function landingPage(env: Bindings): string { - + - + ${STYLE_INLINE} @@ -131,209 +85,136 @@ ${STYLE_INLINE} - - + -${pageHead({ verb: "GET", path: "/" })} +
- ${httpMemo({ - verb: "GET", - path: "/", - rows: [ - { k: "host", v: HOST }, - { k: "to", v: "any agent reading this" }, - { k: "from", v: `htmlbin <${HOST}>` }, - { k: "re", v: "publishing HTML to a public URL", em: true }, - { k: "date", v: date }, - { k: "accept", v: "text/agent-friendly, text/markdown, application/json" }, - ], - res: { - status: "200 OK", - ok: true, - trailing: "content-type: text/html; charset=utf-8", - }, - })} - -
-

API for agents to share HTML.

-

Agent-native, end to end.

-
-
-

↓ paste into your agent — pop open a terminal — or install the skill

+
+

Your agent writes HTML. You get a URL.

+

One human click to start. After that your agent publishes on its own.

-
-
- -
-
- - - -
- -
+
+
+ + + +
-
-
-
Make a delightful HTML page to explain a concept or a problem — show me what HTML can do that markdown or a flat file can't. Something visual, interactive, alive.
-
-Publish to htmlbin.dev. Credentials and API at htmlbin.dev/api/onboard.
-
-
-
# one-time — GitHub device-code, ~30s
-$ npx @htmlbin/cli login
-
-# create a sample page and publish it
-$ echo '<h1>hello from htmlbin</h1>' > out.html
-$ npx @htmlbin/cli publish out.html
-→ https://htmlbin.dev/p/aB3xK7g
-
-
-
# install the official htmlbin agent skill (one-time)
-# works with claude code, cursor, codex, gemini, …
-$ npx skills add https://github.com/utsengar/htmlbin-cli \
-    --skill htmlbin-publish
-
-# then just ask the agent
-> publish a drop to htmlbin explaining this PR
-
+
+
Explain this as an HTML page — visual, not a wall of text.
+
+Publish it to htmlbin.dev. Start at htmlbin.dev/api/onboard.
+
$ npm i -g @htmlbin/cli && htmlbin login
+$ htmlbin publish ./plan.html
+→ htmlbin.dev/p/gDMy7Vb
+
# one-time
+$ npx skills add utsengar/htmlbin-cli --skill htmlbin-publish
+# then just ask your agent to publish anything
- - -

- First publish needs one human click; after that, the agent owns it. -

+
+

Works with the agent you already use

+
+ ${marks} +
+

Also ${AGENTS_WITHOUT_MARKS.join(", ")}. Auto-detected — no flags to set.

+
-
-

tool /

-

Or pop open a terminal.

-

The CLI is your one-verb shortcut to the API — versioning, tags, patterns, passcodes, all in one binary.

- -
- -# install -$ npm i -g @htmlbin/cli - -# one-time — GitHub device-code, ~30s -$ htmlbin login - -# create a sample page and publish it -$ echo '<h1>hello from htmlbin</h1>' > out.html -$ htmlbin publish out.html -→ https://htmlbin.dev/p/aB3xK7g +
+

what you send someone

+
+
+ ${HOST}/p/${SHOWCASE_SLUG} + · v1 + open ↗ +
+
+ +
+

A real drop, not a screenshot.

+
-

— and there's more under the hood

+
+

for the agent reading this

+
+
+ GET ${HOST}/api/onboard + one document · 21 sections +
+
+
{
+  "summary": "Agent-first HTML hosting. Drop self-contained HTML, get a public URL.",
+  "auth":    { "steps": [ 3 ] /* one of them is the human */ },
+  "publish": { "method": "POST", "url": ".../api/drops", "status": 201 },
+  "iterate": { "new_version": "PUT", "metadata_only": "PATCH" },
+  "limits":  { "max_html_bytes": 2097152 }
+  /* + spec, cli, skill, drop_shape, errors, recommendations */
+}
+
+
+

This is the response, trimmed. Read all of it.

+
+
-
versions
-

Iterate. Slug stays put.

-

Every publish mints a new version of the same drop. Pin any past one with ?v=N.

-
# republish — same slug, v2 lands -$ htmlbin publish ./out.html -→ /p/aB3xK7g (v2)
+

Same URL, every revision.

+

Publish again and it becomes v2. The link you already sent still works, and ?v=1 still shows the old one.

-
-
tags & queries
-

Find drops by anything.

-

Attach any string tag at publish; query your library by any combination, anytime.

-
# tag and query — any string keys -$ htmlbin publish ./out.html --tag kind=plan -$ htmlbin list --filter kind=plan
+
tags
+

Find it again later.

+

Tag a page when you publish it. Search by any combination of tags afterwards.

-
patterns
-

Pluggable templates.

-

Pre-shaped drop kinds for recurring use cases. Install the catalog or write your own.

-
# grab the official catalog -$ htmlbin patterns init -$ htmlbin patterns add pr-explainer
+

Starting points.

+

Shared structures for the pages you make often — PR write-ups, plans, roundups. Use ours or write your own.

-
passcodes
-

Share-gate any drop.

-

Public by default. Drop a passcode in front of the viewer when it shouldn't be open.

-
# gate a drop -$ htmlbin publish ./out.html \\ - --passcode hunter2
+

Not everything is public.

+

Add a passcode and the page asks for it first. A share gate, not encryption — we say so plainly.

- -
- -
- @htmlbin/cli on github - · - readme - · - node 20+
-
-

↓ a few drops people have made

- +
+

a few drops people have made

+
+ +
@@ -350,74 +231,38 @@ $ htmlbin publish ./out.html \\ diff --git a/src/views/logos.ts b/src/views/logos.ts new file mode 100644 index 0000000..3a87ea8 --- /dev/null +++ b/src/views/logos.ts @@ -0,0 +1,30 @@ +// Brand marks used on the landing page, inlined as SVG path data so the +// page makes no third-party request for them. +// +// The four agent marks come from simple-icons (v16.28.0, CC0-1.0) and each +// one was checked against the in its source SVG before being copied +// here. Deliberately NOT included: +// +// - Aider and Devin: not in simple-icons at all. +// - Amp (Sourcegraph): the "amp" slug in simple-icons is Google AMP, a +// different product. Using it would be the wrong brand. +// +// Those three are named in prose in the works-with strip instead. Do not +// substitute a hand-drawn approximation for a real mark — a wrong logo +// reads worse than no logo, and these are other companies' trademarks. +// If simple-icons adds them, drop the path in here and add a row. + +export type Mark = { name: string; path: string }; + +export const GITHUB_MARK = + "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7 0-.7 0-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6.1-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.3 2.8.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.3v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"; + +export const AGENT_MARKS: Mark[] = [ + { name: "Claude Code", path: "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" }, + { name: "Cursor", path: "M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" }, + { name: "Codex", path: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" }, + { name: "Cline", path: "m23.365 13.556-1.442-2.895V8.994c0-2.764-2.218-5.002-4.954-5.002h-2.464c.178-.367.276-.779.276-1.213A2.77 2.77 0 0 0 12.018 0a2.77 2.77 0 0 0-2.763 2.779c0 .434.098.846.276 1.213H7.067c-2.736 0-4.954 2.238-4.954 5.002v1.667L.64 13.549c-.149.29-.149.636 0 .927l1.472 2.855v1.667C2.113 21.762 4.33 24 7.067 24h9.902c2.736 0 4.954-2.238 4.954-5.002V17.33l1.44-2.865c.143-.286.143-.622.002-.91m-12.854 2.36a2.27 2.27 0 0 1-2.261 2.273 2.27 2.27 0 0 1-2.261-2.273v-4.042A2.27 2.27 0 0 1 8.249 9.6a2.267 2.267 0 0 1 2.262 2.274zm7.285 0a2.27 2.27 0 0 1-2.26 2.273 2.27 2.27 0 0 1-2.262-2.273v-4.042A2.267 2.267 0 0 1 15.535 9.6a2.267 2.267 0 0 1 2.261 2.274z" }, +]; + +// Named in the works-with strip but without a mark (see note above). +export const AGENTS_WITHOUT_MARKS = ["Aider", "Amp", "Devin"]; From ad134eaec9bb1c3c7a97e4332a5e1635d3930a7f Mon Sep 17 00:00:00 2001 From: Utkarsh Sengar <utkarsh2012@gmail.com> Date: Sun, 23 Aug 2026 08:45:12 -0700 Subject: [PATCH 2/3] landing: rewrite the copy as a marketing pass, not a line edit The previous pass measured length against Vercel/Linear/Resend and cut jargon. That is a line edit. It never asked who the reader is, what job they are hiring this for, or whether the fold competes. Scored against the four questions a fold has to answer, it came out: what is it - fine what problem - never stated why different - buried below the fold what do I do next - no verb anywhere on the page Fixes, in order of weight: - Headline states the job instead of the mechanic. "Your agent writes HTML. You get a URL." describes what happens; a reader who does not already feel the pain has no reason to care. "Send your agent's work as a link, not a file." names the job, and "not a file" carries the pain without being a complaint. Grounded in what the heaviest user said unprompted: reading markdown files is the thing they stopped doing. - The subhead stops spending its 13 words on auth friction. Nobody is blocked on auth; that is a risk reducer, not a differentiator, and it was sitting in the highest-value slot on the page. It now carries the actual differentiator (a URL that survives revision) plus two claims that were true and unstated: free, and no signup. There is no billing code in this repo, so free is accurate. - A real call to action. The page had none: the only action was a small copy pill in the code box chrome. Copying the prompt IS the conversion event that starts the device-code flow, so it gets a button with a verb, and the label tracks the active tab so it stays true. The in-chrome pill is removed, so there is still exactly one copy affordance. Microcopy underneath carries the risk reducer that used to be the subhead. - Capability headings are now one grammatical shape. They ran as a noun phrase, an imperative, a bare noun and a declarative, which reads unconsidered in a list people scan. - "drops" is gone from the marketing surface. It is our word; a first-time visitor does not have it yet. The API, skill and docs keep the product vocabulary. Verified: typecheck clean, wrangler dev serves all five changes. Known accuracy problem, not fixed here: the nav and footer say "open source" but this repo has no LICENSE file (the CLI repo is MIT). That claim is currently wrong and needs a license chosen, which is not a copy decision. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> --- src/styles.ts | 27 +++++++++++++++++++++++ src/views/landing.ts | 51 +++++++++++++++++++++++++++++++------------- 2 files changed, 63 insertions(+), 15 deletions(-) diff --git a/src/styles.ts b/src/styles.ts index ae91751..0ea5a1f 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -1313,6 +1313,33 @@ body.landing main { max-width: none; margin: 0; padding: 0; } .lbox pre .c, .lbox pre .d { color: var(--code-dim); } .lbox pre .a { color: var(--ok-on-dark); } +/* ---------- the primary action ---------- */ +/* The page previously had no CTA verb at all: the only action was a + small copy pill inside the code box chrome. For a page whose whole + job is starting the device-code flow — and which sits at the top of a + funnel that loses ~41% at /verify — that was the weakest element on + it. Copying the prompt IS the conversion event, so it gets a real + button with a real verb, and the in-chrome pill is gone so there is + still only one copy affordance. */ +.lcta { + display: inline-flex; align-items: center; gap: 9px; + margin: 22px auto 0; + background: var(--red); color: #fff; + border: 1px solid var(--red); + font-size: 14.5px; font-weight: 500; + padding: 12px 22px; border-radius: var(--r-md); + cursor: pointer; + transition: background 0.12s, border-color 0.12s, transform 0.04s; +} +.lcta:hover { background: var(--red-press); border-color: var(--red-press); } +.lcta:active { transform: translateY(1px); } +.lcta.ok { background: var(--ok); border-color: var(--ok); } +.lcta svg { width: 15px; height: 15px; flex: 0 0 auto; } +.lcta-fine { + font-family: var(--mono); font-size: 11.5px; + color: var(--ink-softer); margin: 12px 0 0; +} + /* ---------- works-with ---------- */ /* No box per item. Seven outlined pills read as a tag list, and an empty mark slot inside each one read as an unchecked checkbox. */ diff --git a/src/views/landing.ts b/src/views/landing.ts index 69a9dd5..569700a 100644 --- a/src/views/landing.ts +++ b/src/views/landing.ts @@ -112,15 +112,14 @@ ${STYLE_INLINE} <main> <section class="lhero"> - <h1>Your agent writes HTML. You get a URL.</h1> - <p class="lede">One human click to start. After that your agent publishes on its own.</p> + <h1>Send your agent's work as a link, not a file.</h1> + <p class="lede">A URL that survives every revision. Free, no signup, works with any agent.</p> <div class="lbox"> <div class="strip" role="tablist" aria-label="Choose how to publish"> <button class="t on" type="button" role="tab" aria-selected="true" data-p="agent">agent</button> <button class="t" type="button" role="tab" aria-selected="false" data-p="cli">cli</button> <button class="t" type="button" role="tab" aria-selected="false" data-p="skill">skill</button> - <button class="cp js-copy" type="button" aria-label="Copy to clipboard">copy</button> </div> <div class="body"> <pre class="on" data-p="agent" role="tabpanel">Explain this as an HTML page — visual, not a wall of text. @@ -135,6 +134,12 @@ Publish it to <span class="em">htmlbin.dev</span>. Start at <span class="em">htm </div> </div> + <button class="lcta js-copy" type="button"> + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="square" aria-hidden="true"><rect x="8" y="8" width="11" height="11"/><path d="M5 14V5h9"/></svg> + <span class="lbl">Copy the prompt</span> + </button> + <p class="lcta-fine">Free · no signup · one human click to start</p> + <div class="works"> <p class="works-lab">Works with the agent you already use</p> <div class="works-row"> @@ -182,31 +187,38 @@ Publish it to <span class="em">htmlbin.dev</span>. Start at <span class="em">htm <section class="lsec" aria-label="What you get"> <div class="caps"> + <!-- All four headings are the same grammatical shape on purpose: + benefit, stated as a short imperative. They previously ran as + a noun phrase, an imperative, a bare noun and a declarative, + which reads unconsidered in a scannable list. --> <div class="cap"> <div class="eb">versions</div> - <h3>Same URL, every revision.</h3> + <h3>Revise without breaking the link.</h3> <p>Publish again and it becomes v2. The link you already sent still works, and <code>?v=1</code> still shows the old one.</p> </div> <div class="cap"> <div class="eb">tags</div> - <h3>Find it again later.</h3> + <h3>Find anything you published.</h3> <p>Tag a page when you publish it. Search by any combination of tags afterwards.</p> </div> <div class="cap"> <div class="eb">patterns</div> - <h3>Starting points.</h3> - <p>Shared structures for the pages you make often — PR write-ups, plans, roundups. Use ours or write your own.</p> + <h3>Start from a real structure.</h3> + <p>Shared shapes for the pages you make often — PR write-ups, plans, roundups. Use ours or write your own.</p> </div> <div class="cap"> <div class="eb">passcodes</div> - <h3>Not everything is public.</h3> + <h3>Keep some pages private.</h3> <p>Add a passcode and the page asks for it first. A share gate, not encryption — we say so plainly.</p> </div> </div> </section> <section class="lsec" aria-label="Example drops"> - <p class="eyebrow">a few drops people have made</p> + <!-- "drops" is our word, not the visitor's. Nobody arriving here for + the first time knows it yet, so the marketing surface says pages + and the API, skill and docs keep the product vocabulary. --> + <p class="eyebrow">a few pages people have published</p> <div class="examples"> <ul> ${EXAMPLES.map( @@ -236,10 +248,15 @@ Publish it to <span class="em">htmlbin.dev</span>. Start at <span class="em">htm cli: ${JSON.stringify(CLI_PROMPT)}, skill: ${JSON.stringify(SKILL_PROMPT)} }; + // The CTA label names what the active tab will actually put on your + // clipboard, so the verb stays true when you switch tabs. + var LABEL = { agent: 'Copy the prompt', cli: 'Copy the command', skill: 'Copy the install' }; + var active = 'agent'; var tabs = document.querySelectorAll('.lbox .strip .t'); var panes = document.querySelectorAll('.lbox pre'); - var cp = document.querySelector('.lbox .js-copy'); + var cta = document.querySelector('.lcta'); + var lbl = cta ? cta.querySelector('.lbl') : null; tabs.forEach(function (t) { t.addEventListener('click', function () { @@ -250,16 +267,20 @@ Publish it to <span class="em">htmlbin.dev</span>. Start at <span class="em">htm x.setAttribute('aria-selected', on ? 'true' : 'false'); }); panes.forEach(function (p) { p.classList.toggle('on', p.dataset.p === active); }); + if (lbl && !cta.classList.contains('ok')) lbl.textContent = LABEL[active]; }); }); - if (cp) { - cp.addEventListener('click', async function () { + if (cta) { + cta.addEventListener('click', async function () { try { await navigator.clipboard.writeText(PAYLOAD[active] || ''); - cp.classList.add('ok'); - cp.textContent = 'copied'; - setTimeout(function () { cp.classList.remove('ok'); cp.textContent = 'copy'; }, 1600); + cta.classList.add('ok'); + if (lbl) lbl.textContent = 'Copied'; + setTimeout(function () { + cta.classList.remove('ok'); + if (lbl) lbl.textContent = LABEL[active]; + }, 1600); } catch (e) {} }); } From bd881c7b4d3defb48c4fd39d2089baab72d82e03 Mon Sep 17 00:00:00 2001 From: Utkarsh Sengar <utkarsh2012@gmail.com> Date: Sun, 23 Aug 2026 08:51:21 -0700 Subject: [PATCH 3/3] landing: fix the footer white strip, and four smaller UI corrections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Footer white strip was a real bug, not a spacing choice. .footer-merged carried margin-bottom:56px as the last child of a <main> with padding:0, so that margin collapsed through main and out of body — landing outside the body's background box. html still has the base stylesheet's white background, so it showed through as a 56px strip under the footer. Bottom spacing is now padding, which cannot collapse, plus min-height:100vh on body.landing so any future escaping margin can't expose white again. Verified by sampling pixels at the bottom of a 3600px render: rgb(244, 245,246) all the way down. Also: - The "open" link was 11.5px in the faintest ink on the page, floated to the far right by margin-left:auto, so it sat nowhere near the version it acts on and read as decoration. It now follows "· v1", says "open the live page", wears the accent with an underline, and actually opens in a new tab — which is what the ↗ was already promising. - "Get the CLI" deep-links to #install rather than the repo root. The button names an action, so it should land on the install command instead of a README to scan. Anchor verified present. - The gap between the works-with strip and the evidence block was ~114px (18px fine-print margin + 92px section padding), which pushed the embedded page most of a screen down. That block is a continuation of the fold rather than a new section, so it gets lsec-tight at 48px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> --- src/styles.ts | 32 ++++++++++++++++++++++++++++---- src/views/landing.ts | 17 +++++++++++++---- 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/styles.ts b/src/styles.ts index 0ea5a1f..90321cc 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -1363,11 +1363,14 @@ body.landing main { max-width: none; margin: 0; padding: 0; } .works-row .lg:hover svg { opacity: 1; } .works-fine { font-family: var(--mono); font-size: 11.5px; line-height: 1.9; - color: var(--ink-softer); margin-top: 22px; + color: var(--ink-softer); margin-top: 18px; } /* ---------- evidence ---------- */ .lsec { max-width: var(--lshell); margin: 0 auto; padding: 92px 28px 0; } +/* The evidence block reads as part of the fold rather than a new + section, and starting it higher shows more of the embedded page. */ +.lsec.lsec-tight { padding-top: 48px; } .lsec .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; @@ -1384,8 +1387,18 @@ body.landing main { max-width: none; margin: 0; padding: 0; } font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); } .frame .bar .u { color: var(--ink); font-weight: 500; } -.frame .bar .go { margin-left: auto; font-size: 11.5px; color: var(--ink-softer); text-decoration: none; } -.frame .bar .go:hover { color: var(--red); } +.frame .bar .ver { color: var(--ink-softer); } +/* Was 11.5px in the faintest ink on the page, floated hard right by + margin-left:auto — so it sat far from the version it acts on and read + as decoration rather than a control. Now it follows the version, wears + the accent, and carries an underline so it is legible as a link. */ +.frame .bar .go { + margin-left: 6px; + color: var(--red); text-decoration: none; + border-bottom: 1px solid var(--red-bg-stroke); + transition: border-color 0.12s; +} +.frame .bar .go:hover { border-bottom-color: var(--red); } .shot { position: relative; } /* The frame crops mid-sentence, which reads as broken rather than truncated. The fade makes the cut deliberate. Functional, not @@ -1431,7 +1444,18 @@ body.landing main { max-width: none; margin: 0; padding: 0; } body.landing .caps { max-width: 900px; margin: 0 auto; gap: 36px 52px; } body.landing .examples { max-width: 760px; margin: 0 auto; } body.landing .examples .cue { display: none; } -body.landing .footer-merged { max-width: 900px; margin: 70px auto 56px; } +/* Bottom spacing is padding, not margin, on purpose. As a margin it + collapsed through main (padding:0) and out of body, so it landed + outside the tinted background box and html's white showed through as + a strip under the footer. Padding cannot collapse. */ +body.landing .footer-merged { + max-width: 900px; + margin: 70px auto 0; + padding-bottom: 56px; +} +/* Belt and braces: if any future last-child margin escapes again, the + canvas is still the landing surface rather than white. */ +body.landing { min-height: 100vh; } @media (max-width: 820px) { .lnav .links { display: none; } diff --git a/src/views/landing.ts b/src/views/landing.ts index 569700a..27c5ee2 100644 --- a/src/views/landing.ts +++ b/src/views/landing.ts @@ -104,7 +104,10 @@ ${STYLE_INLINE} <a class="gh" href="https://github.com/utsengar/htmlbin" target="_blank" rel="noopener noreferrer"> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${GITHUB_MARK}"/></svg><span>GitHub</span> </a> - <a class="btn" href="https://github.com/utsengar/htmlbin-cli" target="_blank" rel="noopener noreferrer">Get the CLI</a> + <!-- Deep-links to the install section, not the repo root: the button + says "Get the CLI", so it should land on the install command + rather than a README the reader then has to scan. --> + <a class="btn" href="https://github.com/utsengar/htmlbin-cli#install" target="_blank" rel="noopener noreferrer">Get the CLI</a> </div> </div> </nav> @@ -149,13 +152,19 @@ Publish it to <span class="em">htmlbin.dev</span>. Start at <span class="em">htm </div> </section> - <section class="lsec" aria-label="An example drop"> + <!-- lsec-tight: this block is a continuation of the fold, not a new + section, so it gets roughly half the top padding. It also means + more of the embedded page is visible without scrolling. --> + <section class="lsec lsec-tight" aria-label="An example drop"> <p class="eyebrow">what you send someone</p> <div class="frame"> + <!-- The action sits next to the version it acts on, not floated to + the far right where it read as unrelated chrome. It opens in a + new tab, which is what the ↗ promises — so it says so. --> <div class="bar"> <span class="u">${HOST}/p/${SHOWCASE_SLUG}</span> - <span>· v1</span> - <a class="go" href="/p/${SHOWCASE_SLUG}">open ↗</a> + <span class="ver">· v1</span> + <a class="go" href="/p/${SHOWCASE_SLUG}" target="_blank" rel="noopener noreferrer">open the live page ↗</a> </div> <div class="shot"> <iframe src="/p/${SHOWCASE_SLUG}/raw" title="A real htmlbin drop, rendered live" loading="lazy"></iframe>