Repository navigation
fix(docs): one rail item per kind of page, and the old example tabs and code frames - #372
Conversation
The rail had an item per package, and since #370 each package's sidebar lists its category's packages too, so every package showed twice. The rail now has Docs, Skills, Components, Typography, Linter, and Migrate, each a group whose sidebar lists its sections under their categories. Sections sort by category, so each heading shows once, and Mermaid joins Charts and diagrams instead of sitting alone in the rail.
Examples get the old underlined tabs, with the Preview/Code switch and the Playground link on the same row, and a block that draws its own frame, such as a diff, isn't framed again. Code blocks get their frame back: comark-code replaces pre, so Nuxt UI's prose styles never reached them and they had no padding or background.
Codex Review Summary: ❌ FailedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
ℹ️ One visual regression remains in annotate examples.
Reviewed changes in the two commits through 99359c3, covering the generated docs navigation and restored example/code presentation.
- Rail grouping — packages now collapse into five configured rail groups, Skills remains standalone, and Mermaid and Doctor sort after their related package sections.
- Example controls — examples restore underlined tabs, the Playground link, and an animated Preview/Code segmented switch with responsive stacking.
- Preview framing — code blocks regain a docs-level frame and previews made solely of self-framing blocks drop their outer ring and padding.
- HTML-only block metadata — server-rendered blocks now pass their source tag to
.comark-htmlthroughdata-blockfor wrapper-aware styling.
gpt-5.6-sol | 𝕏
comark-annotate
comark-badge
comark-cards
comark-carousel
comark-cast
comark-charts
comark-chat
comark-chips
comark-cjk
comark-code
comark-code-notes
comark-colors
comark-comments
comark-critic
comark-deflist
comark-details
comark-diagrams
comark-diff
comark-embed
comark-fields
comark-figure
comark-file-tree
comark-footnotes
comark-github
comark-icon
comark-include
comark-keys
comark-links
comark-linter
comark-magic-move
comark-mark
markdown-it-to-comark
marked-to-comark
comark-mathml
comark-media
comark-metrics
migrate-to-comark
comark-outline
comark-properties
comark-qr
comark-quiz
comark-reading-time
remark-to-comark
comark-sources
comark-steps
comark-table
comark-tabs
comark-tests
comark-time
comark-ui
comark-xref
comark-zoom
commit: |
Latest result Pull request merged. Final answersSession Pull request merged. Pushed a0814eb, fixing Pullfrog’s P1 annotate double-framing finding, and resolved its thread. `node /tmp/comark-ui-pr372-framing.mjs before` and `after` passed six Chromium cases each, confirming the fix preserves inner outlines and prose framing. `vp check docs/app/components/content/Example.vue` and `git diff --check` passed. Awaiting checks. |
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes since the prior Pullfrog review at 99359c3, focused on the annotate example framing fix.
- Annotate wrapper allowlist — Added
screenshotandcompareHTML wrapper tags to the self-framing preview selector, resolving the extra ring and padding around annotate examples. - Focused verification — Confirmed
test/site.test.tsand the changed Vue component's Vite+ checks pass.
gpt-5.6-sol | 𝕏

Since #351, every package has its own item in the rail. Since #370, each package's sidebar also lists the other packages in its category, so the site shows every package twice: once in the rail and again in the sidebar beside it. The examples also lost the old site's look. The tabs were replaced by a plain bar of Preview and Code links, and that bar sat in a box that put a second frame around blocks such as the diff, which draw their own. Code blocks outside the examples had no frame at all: comark-code replaces
pre, so Nuxt UI's prose styles never reach it, and the docs app had nothing in their place.This PR brings back the old site's rail: Docs, Skills, Components, Typography, Linter, and Migrate. Each is a
@vite-hub/docsgroup whose sidebar lists its sections under category headings.docs/sections.tsmaps each category to its group. Sections now sort by category, so each heading appears once. Mermaid, which had no category and sat alone in the rail, joins Charts and diagrams.Examples get the old underlined tabs back, with the Playground link and a pill-shaped Preview/Code switch on the same row. A preview that holds only blocks with their own frame drops its ring. Blocks drawn on the server arrive wrapped in a
.comark-htmldiv, so the wrapper now carries the block's tag for the CSS to read. Code blocks get the old frame: outlined in light mode, a flat panel in dark mode.Checked on a local production build: the rail and sidebar of
/diff,/guide/theming,/skills,/math,/lint,/doctor,/migrate-to-comark,/mermaid, and/include; tab and switch changes on/diffand/code; dark mode.test/site.test.tspasses, andvp checkpasses on the changed files. I didn't run the fullpnpm ready.Note: #370 never deployed. Workers Builds has no run for a6b7e24, and the live site is still the 13:18 UTC deploy of #369.
Before/after on Drop