Repository navigation
fix(docs): paint the landing tabs before hydration and clear hydration mismatches - #415
Merged
Merged
Conversation
Reka positions the tabs' indicator in the browser, so the server's HTML has none. Until then Nuxt UI draws a pill behind the active trigger with the color's default, bg-inverted, which made a black block over "For humans" and "pnpm" until the app hydrated. That pill now gets the indicator's look.
@vite-hub/docs marks an HTML-only block inside a paragraph, such as a comments suggestion, as inline. The site's own ComarkHtml ignored that and drew a div, which ends the paragraph in the server's HTML, so the comments pages logged a hydration mismatch. It also wrote blockProps as a "[object Object]" attribute.
An HTML parser drops a newline right after <pre>. A cast whose screen starts with a blank line lost it in server HTML and got it back once Vue hydrated, which /cast logged as a mismatch. The first newline now goes in a span.
comark-chips turns a link into a chip, which draws as a link. The references plugin then linked `comarkdown/comark#525` inside it, a link inside a link, which the HTML parser splits. /remark-to-comark/testing logged a hydration mismatch from it.
The annotate examples pointed at /pond.png, /pond-before.png, and /pond-after.png, and the xref ones at relative files, none of which exist, so their previews showed broken images and 404s. They now use a drawn pond (pond.svg), the same pond with a fence (pond-fence.svg), and the dashboard image. chips/invalid-avatar keeps its 404, which is the point of that example.
|
The workflow's GitHub's error |
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. |
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: |
Closed
Contributor
Latest result Pull request merged. Final answersSession Pull request merged. |
Merged
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.
Before it hydrates, the landing paints a black block over "For humans" and "pnpm", and ten pages log "Hydration completed but contains mismatches." I swept all 413 pages in the sitemap with headless Chromium.
bg-inverted, and:ui="segmented"only restyled the indicator. The fallback pill now gets the indicator's look./comments, 7 Doctor pages).@vite-hub/docsmarks a suggestion inside a paragraph asinline, but the site's ownComarkHtml.vueignored that and drew adiv, which ends the<p>. It now draws aspan, andblockPropsno longer lands on the element as"[object Object]". It usesv-if/v-else, since Vue's SSR dropsv-htmlon<component :is>./cast. An HTML parser drops the newline right after<pre>, so a cast whose screen starts with a blank line lost it on the server and got it back on hydration. comark-cast now writes that first newline in a span./remark-to-comark/testing. comark-chips turns[comarkdown/comark#525](…)into a chip, and the GitHub references plugin then linked the text inside it, which put a link inside a link. References now skipchiplikea./pond.png,/pond-before.pngand/pond-after.png, and the xref ones at relative files. None of them exist, so 29 pages showed a broken image and logged a 404. They now use a drawnpond.svg,pond-fence.svg, and/dashboard.png.chips/invalid-avatarkeeps its 404, since the broken avatar is the point of that example.The header logo and the GitHub button's 4px move come from
@vite-hub/docs, so they're fixed there: vite-hub/vitehub#4151 (logo preload), and the color mode button change in progress in another vitehub PR. The landing canvas is intended: the head script picks the canvas before the first paint, the viewport has a fixed height, and CLS on/is 0.Before/after: https://drop.vitehub.dev/d/vz1sr4fr261n/before-after
What I ran:
pnpm docs:generate(with the vitehubDocsBrandMark.vueand color mode button changes copied intonode_modules), thene2e/serve.tsand the same Chromium sweep over all 413 URLs. Production: 10 pages with mismatches, and 85 failed requests to the site itself on 38 pages. This branch: 0 mismatches, and 20 failed requests on 9 pages: the media examples (/pond-tour.mp4,/spinner.mp4,/roof.mp3), the three/census*.pngonannotate/too-many-annotations, andchips/invalid-avatar./_nuxt/*.jsblocked, the hero tabs show the raised pill in light and dark. The only pixels that still change on hydration are the person and robot icons. My local prerender timed out on Nuxt Icon's 1.5 s fetch for them, and production's HTML has them.vp test run test/doctor.test.ts packages/cast/test packages/github/test packages/ui/test/ui.test.ts: 363 passed. The new cast and ui tests fail onmain.pnpm typecheckpasses.pnpm --filter comark-ui-docs typecheckfails onlanding.starsbecause my locallanding.tsgot no star count from GitHub. I didn't touch that code.vp lintandvp fmt --checkon the changed files pass. I didn't run the fullpnpm ready.Not checked: Safari and Firefox, and the media and census examples, which still need real files.
Prepared with Claude Opus 5.5 in T3 Code.