perf(docs): lazy-load search and highlight code at build time#6732
Draft
FarhanAliRaza wants to merge 5 commits into
Draft
perf(docs): lazy-load search and highlight code at build time#6732FarhanAliRaza wants to merge 5 commits into
FarhanAliRaza wants to merge 5 commits into
Conversation
Add accessible names to icon-only controls (copy-code, clear-input, search) and card overlay links, mark the feedback thumbs as a labeled group, and make the mobile nav overlay a real button. Defer mounting the ~276 KB Inkeep widget (and its Google Fonts stylesheet) until the user activates search: render a lightweight placeholder trigger that mirrors the widget styling to avoid layout shift, forward Cmd/Ctrl+K to it, and mount the real widget with its controlled modal starting open so the same interaction opens search.
A React-rendered inline <script> tag does not execute on client navigation, so Cmd/Ctrl+K never opened search before the widget mounted and the placeholder always showed the Mac glyph. Move the shortcut forwarder and platform-aware hint correction into a useEffect so they run reliably on mount; non-Mac platforms now show "Ctrl K".
Inkeep's base styles give the inner <kbd> keys a monospace font stack,
so the shortcut hint visibly changed font and width ("Ctrl K" ->
monospace "CtrlK") when the real widget replaced the placeholder. Make
the keys inherit the wrapper's font, and mirror the widget's two-key
2px-gap markup in the placeholder so the handoff is pixel-identical.
Contributor
Greptile SummaryThis PR reduces initial docs hydration work and adds build-time code highlighting. The main changes are:
Confidence Score: 5/5This looks safe to merge.
Important Files Changed
Reviews (2): Last reviewed commit: "perf(docs): highlight literal code block..." | Re-trigger Greptile |
Merging this PR will not alter performance
Comparing Footnotes
|
Discover literal docs code blocks during a production prepass, render them through a pinned Shiki runtime, and embed the cached HTML in the final prerendered pages. Keep development and dynamic code paths on the existing client component.
ef6bc93 to
11e22c4
Compare
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.
Summary
Production builds still use the normal
reflex exportpath and normal eager React hydration. There is no performance selector, deferred-hydration bootloader, event replay, or Lighthouse matrix in this PR.Build behavior
StaticShikiPluginowns the production flow:Dynamic code blocks and local development retain the existing client-side behavior.
Validation
reflex exportcompleted successfully with no wrapper command or feature flags383 passed, 1 skippedin the docs test suite24 passedin the focused static-Shiki regression suiteuv run ruff check .uv run ruff format --check .uv run pyright reflex testsuv run pre-commit run --all-filesreflex-site-sharedwheel and verified the generator plus frozen runtime files are includedTradeoffs