Repository navigation
docs: one section per package, with an icon rail and a playground - #50
Conversation
🚀 Deploying Preview to Cloudflare 🚀Preview Deployments by commit
|
comark-annotate
comark-carousel
comark-charts
comark-embed
comark-github-callouts
comark-include
comark-lint
comark-tabs
comark-zoom
commit: |
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
The playground's share-link flow is not supported in every browser that can otherwise load the docs.
Reviewed changes
This review covers the static docs restructuring, generated navigation and routes, the new browser playground, and the related end-to-end test updates.
- Docs sections — Split package documentation into overview, getting-started, component or syntax, and guide pages, with updated navigation links and per-section paging.
- Icon-rail shell — Reworked the generated site layout and responsive menu around a section rail and current-section page column.
- Playground — Added browser-side parsing/rendering, iframe previews, issue reporting, compressed hash sharing, presets, and links from examples.
- Verification coverage — Added playground browser tests and updated existing page routes and fixtures for the new generated structure.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
ℹ️ No critical issues — one accessibility suggestion is inline.
Reviewed changes
This review covers the new generated docs search flow and the package/example links added since the prior Pullfrog review.
- Added header search — Generated a
/search.jsonindex and a keyboard-accessible dialog for searching pages and headings. - Linked playground presets — Added package navigation and example links that open the corresponding playground preset or Markdown.
gpt-5.6-sol ｜ 𝕏
Latest result Pull request merged. Final answersSession Pull request merged. Session Waiting for GitHub merge request 4f8b0095-ead3-4ed5-840c-e964cef56a13. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. Session Pass interrupted; current webhook state retained. |
There was a problem hiding this comment.
Important
The new preset thumbnails retain each plugin's attributed <style> block, so the playground page duplicates large CSS payloads and browser style work once per preset.
Reviewed changes
This review covers the changes since the prior Pullfrog review: editor highlighting and server-rendered preset stills in the playground navigation.
- Added editor highlighting — Loaded Comark's Shiki grammar lazily and painted the Markdown behind the transparent textarea.
- Rendered preset stills — Generated script-free thumbnail markup, replaced embedded players with placeholders, and collected thumbnail styles for the playground page.
gpt-5.6-sol ｜ 𝕏
|
The model never responded, so Pullfrog stopped this run after 2 minutes. The request went out but nothing came back. This is usually temporary, so re-trigger to try again. Last agent output
|
The sidebar is two columns, as on vitehub.dev: a rail with one icon per package, and the current package's pages. Each package page splits into an overview with its examples, getting started, components or syntax, and guides, with previous and next links between them. /play/ renders Markdown with every plugin that runs in a browser. Its presets are the examples at the top of each page, each example has a Playground link that opens it there, and a shared link carries the Markdown in its hash. comark.dev's playground can't load these plugins, so it can't be prefilled with them.
…ayground A search button in the middle of the header, or Ctrl K, ⌘K, or /, opens a dialog over every page and heading, read from /search.json the first time it's needed. Without a script the button stays hidden. Each package's column ends with Open in playground, which opens its first example there.
The editor is a transparent textarea over a copy of its text, colored by Comark's own grammar, the one the docs' code blocks already get from the Shiki plugin. Shiki's JavaScript regex engine loads after the page, and the build colors the first preset so it's never plain. The playground's column shows each preset as a still of its example under its package's icon: rendered at build time without scripts, with a box for each embedded player, and inert.
…d's preset A package's pages open its npmx page; the other pages open the project's. On the playground the link follows the selected preset, and a shared link gets the project's, since its Markdown could use any package.
…umbnails, and sync search's expanded state
d9b16ff to
30ce37e
Compare
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes
This review covers the visual-only change since the prior Pullfrog review: the annotate section's rail icon was replaced with a custom hand-drawn loop matching its marks.
- Updated annotate icon — Replaced the generic
pen-toolicon with the newscribble-loopSVG in the generated navigation rail.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
ℹ️ No critical issues — one minor sharing fallback remains inline.
Reviewed changes
This review covers the changes since the prior Pullfrog review: sharing capability/error handling, complete removal of styled thumbnail blocks, and synchronization of search combobox state with the dialog.
- Handled unsupported sharing — Added guarded raw-deflate construction, user-visible errors for compression failures, and consistent handling while loading shared hashes.
- Removed thumbnail styles — Expanded the thumbnail cleanup to remove attributed
<style>elements case-insensitively before collecting their styles once for the playground page. - Synchronized search state — Derived
aria-expandedfrom the dialog state and reset it when the dialog closes.
gpt-5.6-sol ｜ 𝕏
| const Stream = kind === "compress" ? CompressionStream : DecompressionStream; | ||
| if (typeof Stream !== "function") throw new Error(sharingUnsupported); | ||
| try { | ||
| return new Stream("deflate-raw"); |
There was a problem hiding this comment.
typeof Stream does not protect browsers where CompressionStream or DecompressionStream is not defined, because the conditional expression evaluates the selected global before typeof runs and throws a ReferenceError. This leaves the capability fallback reporting an incidental exception instead of sharingUnsupported; look up the constructors through globalThis (or guard each global before selecting it) so edit sharing, Copy link, and loading a shared hash all use the intended unsupported path.
1 participant
Stacked on #47. Each package becomes its own docs section, the sidebar works like the one on vitehub.dev, and a playground renders every plugin in the browser.
Sidebar
Package pages
Each
docs/pages/<package>.mdis now a folder:/annotate/)/lint/, because the publishedcomark-lintlinks to/lint/#comark0001./annotate/#components-compare,/carousel/#guides-validation, and others) now point at the new pages.Playground
I checked the comark.dev playground first. It loads only its own 14 plugins and can't load ours, so a prefilled link would render
::screenshotas an unknown tag./play/is our own playground:meta.issueslist below the editor.iframewithsrcdoc, so each plugin's inline script runs as it would on a real page.play.jsis 528 kB. vega is a 1.8 MB lazy chunk that loads only when a document has a chart.Checks
pnpm checkpasses. Its two warnings are in an e2e test this PR doesn't change.vp fmt --check,pnpm test(182 tests), andpnpm run doctor(docs lint included) pass.e2e/serve.tsnow sends JS and CSS content types, so the playground's module script loads.🤖 Generated with Claude Code