diff --git a/src/styles.ts b/src/styles.ts index 8f03770..90321cc 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -1162,6 +1162,314 @@ 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
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); } + +/* ---------- 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. */ +.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: 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; + 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 .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 + 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; } +/* 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; } + .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..27c5ee2 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 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 '

hello from htmlbin

' > 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 '

hello from htmlbin

' > 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) => + `${escapeText(m.name)}`, + ).join("\n "); + return /* html */ ` htmlbin — agent-first HTML hosting - + - + @@ -119,9 +73,9 @@ export function landingPage(env: Bindings): string { - + - + ${STYLE_INLINE} @@ -131,209 +85,157 @@ ${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

+
+

Send your agent's work as a link, not a file.

+

A URL that survives every revision. Free, no signup, works with any agent.

-
-
- -
-
- - - -
- -
+
+
+ + +
-
-
-
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
- +

Free · no signup · one human click to start

-

- 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 the live page ↗ +
+
+ +
+

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)
+

Revise without breaking the link.

+

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 anything you published.

+

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
+

Start from a real structure.

+

Shared shapes 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
+

Keep some pages private.

+

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 pages people have published

+
+ +
@@ -350,74 +252,47 @@ $ 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"];