Browser-showpiece hero, SEO, and design polish for reins.tech#23
Merged
Conversation
`pnpm dev` runs protocol's `tsdown --watch` alongside the extension/cli builds. With `clean: true`, the watch task wiped `dist/` on startup while those builds resolved `@reins/protocol` from it in parallel, intermittently failing with "Rolldown failed to resolve import @reins/protocol". The package has a single fixed entry (`src/index.ts` -> `index.js` / `index.d.ts`) that overwrites in place, so cleaning is unnecessary and there are no orphan outputs to prune. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Hero
- New `Hero` (components/hero.tsx): a browser window being driven by an
agent — chrome bar on `app.acme.com/checkout`, Chrome-style "reins is
controlling this browser" banner, a sign-in form with e3/e7 element refs
and a cursor about to click, and a docked agent session running
`reins snapshot` -> `reins click --ref e7`. Replaces the split/terminal hero.
- README: light/dark `<picture>` of the same illustration
(.github/assets/hero-{light,dark}.png).
Design polish
- Fix Tailwind v4 border-color fallback: bare `border-*` utilities resolved
to currentColor, rendering the FAQ accordion dividers as harsh near-black/
near-white lines. Add a base layer defaulting border-color to the token.
- Dark-mode TOC contrast: active items and the rail thumb use a lighter
violet (violet-300) so they read against the near-black background.
- Terminal: real macOS traffic-light colors; dark mode gets a distinct
surface + ring so the card no longer melts into the page.
- Hero backdrop utilities (dot grid + soft violet glow).
SEO
- Per-route title/description/canonical/OG via a small `seo()` helper.
- JSON-LD: SoftwareApplication (home) and FAQPage (FAQ).
- Root: og:site_name, og:image dimensions/alt, light/dark theme-color.
- public/: sitemap.xml, robots.txt, llms.txt.
- New 1200x630 og.png matching the site (dark, violet glow, reins glyph).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Polishes the docs site (reins.tech) end to end: a new distinctive hero, full SEO, dark-mode contrast fixes, a fresh OG image, and one build-infra fix.
Hero
Replaces the split copy/terminal hero with a browser showpiece — a browser window being driven by an agent:
app.acme.com/checkout) + the Chrome-style "reins is controlling this browser" banner.e3/e7element-ref chips and a cursor about to click Sign in.agent sessionrunningreins snapshot→reins click --ref e7→✓ clicked e7.Explored 4 directions (command-bar demo, browser showpiece, architecture flow, editorial minimal) via the ui.sh picker, informed by Linear / Firecrawl / Resend. Picker scaffolding fully removed after selection.
The same illustration is added to the README as a light/dark
<picture>.Design polish
border-*fell back tocurrentColor— harsh near-black/near-white lines per theme. Added a base layer defaultingborder-colorto the token; fixes dividers site-wide.violet-300so they're legible on the near-black background.SEO
title/description/canonical/ OG via a smallseo()helper.SoftwareApplication(home),FAQPage(FAQ).og:site_name,og:imagedimensions/alt, light/darktheme-color.public/:sitemap.xml,robots.txt,llms.txt.og.pngmatching the site (dark, violet glow, reins glyph).Build fix
packages/protocoltsdown.config.ts:clean: false. Inpnpm dev, protocol's--watchwipeddist/on startup while extension/cli builds resolved@reins/protocolfrom it in parallel → intermittent "Rolldown failed to resolve import". Single fixed entry overwrites in place, so cleaning was unnecessary.Verification
pnpm typecheck+biome checkpass.pnpm buildprerenders all 14 pages; picker fully absent from output; SEO tags confirmed in prerendered HTML.🤖 Generated with Claude Code