Skip to content

docs: a landing page that types its Markdown, a rail that widens on hover, and a Vite Doctor page - #60

Merged
vitehub-bot[bot] merged 3 commits into
mainfrom
docs/landing
Oct 21, 2026
Merged

vitehub-bot[bot] merged 3 commits into
mainfrom
docs/landing

Conversation

@onmax

@onmax onmax commented Oct 21, 2026

Copy link
Copy Markdown
Owner

The docs site gets a landing page that shows what the plugins do, a rail that widens to show every section's name, and fixes for what broke on phones. comark-lint's Vite Doctor setup gets its own page.

Landing page

  • Hero: the headline keeps its Markdown #. Under it, a window types a short review's Markdown a line at a time, one step per character, in about two seconds. It then wipes to the page the plugins render from that Markdown, at build time and with no framework. The review.md and Rendered tabs switch back and forth. With reduced motion it opens on the rendered page.
  • Packages: each card shows its rail icon, name, description, and a dashed footer with the install command and a copy button. Commands no longer spill out of their box.
  • Guides, recipes, and the comparison: each is a row instead of a card.

Sidebar

  • Rail: hovering it (after 150ms) or focusing it widens it from 52px to 216px over the second column, with every section's name, as on vitehub.dev. The pages don't move, and Escape folds it back. This replaces the one-at-a-time tooltip.
  • Second column: its head is the section's name alone. The icon, the uppercase group label, and the mono slug are gone.
  • Vite Doctor: a new page under comark-lint covers setup, the include and exclude options, this repo's own config, and a table of each COMARK000N code with its rule and severity. Getting started and the validation guide link to it.

Motion

Each of these passed the animate skill's gate: occasional, with a named purpose, under 300ms, and gentler or off with reduced motion.

  • Tab rows and Preview/Code switches slide one indicator. Their panels fade in.
  • Copy buttons swap to a check.
  • The mobile menu grows from its button.
  • In the playground, the header's npmx pill resizes to the new package name as the name rises in.
  • The search dialog is left as it was, since it opens from the keyboard.

Phones and overflow

  • Mobile menu: sections are labeled tiles over the current pages, and the panel scrolls. On /play/ most presets could not be reached before.
  • Tables: wide tables scroll inside the column instead of widening the page (/guide/renderers/, /guide/theming/, /charts/guides/, /embed/syntax/).
  • Inline code: it wraps instead of widening the page.
  • Touch: controls are at least 40px tall on coarse pointers, and the playground editor is 16px so iOS doesn't zoom into it.
  • Compare labels: the handwritten Before/After labels in the docs' compare examples are no longer cut off at the top.
  • Fonts: Geist Mono is preloaded, so the header doesn't shift when it loads. That shift was already happening on main, in 2 of 8 runs of zoom.e2e.ts's "doesn't shift the page sideways" test.

comark-annotate

fix(annotate): in ::compare, the carousel track clips whatever a slide overflows, so the number of a mark on a screenshot's left edge was cut in half. Slides now keep 0.5rem at their sides, and the gap shrinks to match, so the screenshots stay 1.5rem apart.

Testing

  • pnpm ready passes.
  • The full Playwright suite passes (47 tests). The new e2e/docs.e2e.ts covers:
    • the window typing and then showing the rendered page
    • reduced motion
    • the rail widening without moving the pages, and Escape
    • card copy
    • no sideways scroll at 390px on the pages that used to have it
  • A script swept all 43 built pages at 1280px and 390px. None scrolls sideways, and no inline code spills.
  • I checked desktop, iPhone 12 Pro size, and dark mode in a browser.

Conflicts with open PRs

This touches docs/build.ts and docs/style.css, so it will conflict with:

Whichever lands second needs a rebase.

🤖 Generated with Claude Code

onmax added 2 commits October 21, 2026 11:46
The carousel track clips whatever a slide overflows, so the number of a mark on a
screenshot's left edge was cut in half. Compare slides now keep 0.5rem at their sides
and the gap shrinks by the same amount, so the screenshots stay 1.5rem apart.
…over, and a Vite Doctor page

- The index opens on a window that types a review's Markdown, then wipes to the page
  the plugins render from it. Reduced motion shows the page at once.
- Package cards carry their rail icon and their install command with a copy button;
  guides and recipes are rows.
- The rail widens over the pages on hover or focus to show every section's name, as
  on vitehub.dev, and Escape folds it back. The second column's head is the section's
  name alone.
- comark-lint's Vite Doctor setup, options, and codes get their own page.
- Tab rows and switches slide an indicator, panels fade in, copy buttons swap to a
  check, the menu grows from its button, and the npmx pill resizes to the package.
- Phones: the menu lists sections as tiles over the pages and scrolls, wide tables
  and inline code no longer widen the page, controls are 40px tall, and the
  playground's editor is 16px.
- Geist Mono is preloaded, so the header doesn't shift when it loads.
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status Deployment URL Commit Updated (UTC) See this deployment's details
  • Build: Success ✅

View logs ↗
No Preview URL. Enable ↗ 1d7de08 2026-10-21T10:08:45.337Z Visit the dashboard ↗
  • Build: Success ✅

View logs ↗
No Preview URL. Enable ↗ 4a91491 2026-10-21T09:47:36.389Z Visit the dashboard ↗

@pkg-pr-new

pkg-pr-new Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

comark-annotate

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-annotate@60

comark-carousel

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-carousel@60

comark-charts

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-charts@60

comark-embed

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-embed@60

comark-github-callouts

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-github-callouts@60

comark-include

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-include@60

comark-lint

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-lint@60

comark-tabs

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-tabs@60

comark-zoom

pnpm add https://pkg.pr.new/onmax/comark-plugins/comark-zoom@60

commit: 1d7de08

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

Rapidly switching the landing-page tabs can leave the demo blank until reload.

Reviewed changes

  • Landing page — Reviewed the generated hero window, rendered Markdown preview, package cards, docs rows, and landing-page actions.
  • Navigation and responsiveness — Reviewed the widened sidebar rail, mobile menu, overflow handling, touch sizing, reduced-motion styles, and playground pill animation.
  • Vite Doctor docs — Reviewed the new page, navigation links, root config component registration, and documented options and rule severities against comark-lint/doctor.
  • Annotate and verification — Reviewed the compare-track spacing fix and the new docs Playwright coverage.

Pullfrog  | Fix all ➔ | Fix 👍s ➔ | View workflow run | Using gpt-5.6-sol | 𝕏

Comment thread docs/build.ts
@vitehub-bot

vitehub-bot Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor
Session Status Started Duration
Pending Completed Not started —
View session Last seen running 2026-10-21T10:16:38.506Z 1s
View session Completed 2026-10-21T10:02:07.583Z 6m 1s

Latest result

Pull request merged.

Final answers

Session

Pull request merged.

Session

Waiting for GitHub merge request 87518677-32cf-46de-965b-1404a79dd8db.

Session

Fixed Pullfrog P1 overlapping tab-transition race with a generation guard, pushed the repair, and resolved its review thread. Git diff validation passes. Local TypeScript validation remains unavailable because workspace installation cannot write protected .git/config and built workspace outputs are absent; hosted checks should validate the pushed head.

Session

Fixed Pullfrog P1 overlapping tab-transition race with a generation guard, pushed the repair, and resolved its review thread. Git diff validation passes. Local TypeScript validation remains unavailable because workspace installation cannot write protected .git/config and built workspace outputs are absent; hosted checks should validate the pushed head.

Session

Fixed Pullfrog P1 overlapping tab-transition race with a generation guard, pushed the repair, and resolved its review thread. Git diff validation passes. Local TypeScript validation remains unavailable because workspace installation cannot write protected .git/config and built workspace outputs are absent; hosted checks should validate the pushed head.

Session

Fixed Pullfrog P1 overlapping tab-transition race with a generation guard, pushed the repair, and resolved its review thread. Git diff validation passes. Local TypeScript validation remains unavailable because workspace installation cannot write protected .git/config and built workspace outputs are absent; hosted checks should validate the pushed head.

View session

Fixed Pullfrog P1 overlapping tab-transition race with a generation guard, pushed the repair, and resolved its review thread. Git diff validation passes. Local TypeScript validation remains unavailable because workspace installation cannot write protected .git/config and built workspace outputs are absent; hosted checks should validate the pushed head.

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes

  • Guarded overlapping hero transitions — Added a per-window transition token so stale wipe-animation callbacks cannot hide the panel selected by a newer tab change.

Pullfrog  | View workflow run | Using gpt-5.6-sol | 𝕏

@vitehub-bot
vitehub-bot Bot merged commit 3c80126 into main Oct 21, 2026
9 checks passed
@github-actions github-actions Bot mentioned this pull request Oct 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant