Skip to content

fix(docs): one rail item per kind of page, and the old example tabs and code frames - #372

Merged
vite-hub[bot] merged 3 commits into
mainfrom
fix/docs-example-tabs
Nov 6, 2026
Merged

vite-hub[bot] merged 3 commits into
mainfrom
fix/docs-example-tabs

Conversation

@onmax

@onmax onmax commented Nov 6, 2026 •

Copy link
Copy Markdown
Owner

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/docs group whose sidebar lists its sections under category headings. docs/sections.ts maps 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-html div, 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 /diff and /code; dark mode. test/site.test.ts passes, and vp check passes on the changed files. I didn't run the full pnpm 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

onmax added 2 commits November 6, 2026 22:20
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.
@chatgpt-codex-connector

Copy link
Copy Markdown
Codex Review Summary: ❌ Failed

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ❌ Failed 2026-11-06T21:21:27.454992Z
We couldn’t complete this review. Comment @codex review to try again.
99359c3 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@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.

ℹ️ 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-html through data-block for wrapper-aware styling.

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

Comment thread docs/app/components/content/Example.vue Resolved
@pkg-pr-new

pkg-pr-new Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

comark-annotate

pnpm add https://pkg.pr.new/comark-annotate@372

comark-badge

pnpm add https://pkg.pr.new/comark-badge@372

comark-cards

pnpm add https://pkg.pr.new/comark-cards@372

comark-carousel

pnpm add https://pkg.pr.new/comark-carousel@372

comark-cast

pnpm add https://pkg.pr.new/comark-cast@372

comark-charts

pnpm add https://pkg.pr.new/comark-charts@372

comark-chat

pnpm add https://pkg.pr.new/comark-chat@372

comark-chips

pnpm add https://pkg.pr.new/comark-chips@372

comark-cjk

pnpm add https://pkg.pr.new/comark-cjk@372

comark-code

pnpm add https://pkg.pr.new/comark-code@372

comark-code-notes

pnpm add https://pkg.pr.new/comark-code-notes@372

comark-colors

pnpm add https://pkg.pr.new/comark-colors@372

comark-comments

pnpm add https://pkg.pr.new/comark-comments@372

comark-critic

pnpm add https://pkg.pr.new/comark-critic@372

comark-deflist

pnpm add https://pkg.pr.new/comark-deflist@372

comark-details

pnpm add https://pkg.pr.new/comark-details@372

comark-diagrams

pnpm add https://pkg.pr.new/comark-diagrams@372

comark-diff

pnpm add https://pkg.pr.new/comark-diff@372

comark-embed

pnpm add https://pkg.pr.new/comark-embed@372

comark-fields

pnpm add https://pkg.pr.new/comark-fields@372

comark-figure

pnpm add https://pkg.pr.new/comark-figure@372

comark-file-tree

pnpm add https://pkg.pr.new/comark-file-tree@372

comark-footnotes

pnpm add https://pkg.pr.new/comark-footnotes@372

comark-github

pnpm add https://pkg.pr.new/comark-github@372

comark-icon

pnpm add https://pkg.pr.new/comark-icon@372

comark-include

pnpm add https://pkg.pr.new/comark-include@372

comark-keys

pnpm add https://pkg.pr.new/comark-keys@372

comark-links

pnpm add https://pkg.pr.new/comark-links@372

comark-linter

pnpm add https://pkg.pr.new/comark-linter@372

comark-magic-move

pnpm add https://pkg.pr.new/comark-magic-move@372

comark-mark

pnpm add https://pkg.pr.new/comark-mark@372

markdown-it-to-comark

pnpm add https://pkg.pr.new/markdown-it-to-comark@372

marked-to-comark

pnpm add https://pkg.pr.new/marked-to-comark@372

comark-mathml

pnpm add https://pkg.pr.new/comark-mathml@372

comark-media

pnpm add https://pkg.pr.new/comark-media@372

comark-metrics

pnpm add https://pkg.pr.new/comark-metrics@372

migrate-to-comark

pnpm add https://pkg.pr.new/migrate-to-comark@372

comark-outline

pnpm add https://pkg.pr.new/comark-outline@372

comark-properties

pnpm add https://pkg.pr.new/comark-properties@372

comark-qr

pnpm add https://pkg.pr.new/comark-qr@372

comark-quiz

pnpm add https://pkg.pr.new/comark-quiz@372

comark-reading-time

pnpm add https://pkg.pr.new/comark-reading-time@372

remark-to-comark

pnpm add https://pkg.pr.new/remark-to-comark@372

comark-sources

pnpm add https://pkg.pr.new/comark-sources@372

comark-steps

pnpm add https://pkg.pr.new/comark-steps@372

comark-table

pnpm add https://pkg.pr.new/comark-table@372

comark-tabs

pnpm add https://pkg.pr.new/comark-tabs@372

comark-tests

pnpm add https://pkg.pr.new/comark-tests@372

comark-time

pnpm add https://pkg.pr.new/comark-time@372

comark-ui

pnpm add https://pkg.pr.new/comark-ui@372

comark-xref

pnpm add https://pkg.pr.new/comark-xref@372

comark-zoom

pnpm add https://pkg.pr.new/comark-zoom@372

commit: a0814eb

@vite-hub

vite-hub Bot commented Nov 6, 2026 •

Copy link
Copy Markdown
Contributor
Session Status Started Duration
Pending Completed Not started —
View session Completed 2026-11-06T21:44:47.916Z 10m 47s

Latest result

Pull request merged.

Final answers

Session

Pull request merged.

View session

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.

@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 since the prior Pullfrog review at 99359c3, focused on the annotate example framing fix.

  • Annotate wrapper allowlist — Added screenshot and compare HTML wrapper tags to the self-framing preview selector, resolving the extra ring and padding around annotate examples.
  • Focused verification — Confirmed test/site.test.ts and the changed Vue component's Vite+ checks pass.

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

@vite-hub
vite-hub Bot merged commit eb7d6e2 into main Nov 6, 2026
6 checks passed
@vite-hub
vite-hub Bot deleted the fix/docs-example-tabs branch November 6, 2026 22:14
This was referenced Nov 6, 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