fix: docs UX from rune review — tables, 404, root redirect, sidebar scroll, panel pre-paint - #16
Merged
Merged
Conversation
1. Ask AI rendered GFM tables as raw pipe-delimited text. mdBlocks() now detects a header + `---` separator run inside a block and emits a real <table> (inline bold/code in cells, surrounding text preserved); styled under .ac-out in docs + API reference. 2. The 404 page was left-aligned, not centered: .ml-notfound (a flex column) inherited align-items:start from the .docs-shell grid rule, shrinking its children. Set align-items:stretch so .nf fills the width and centers. 3. Root '/' 404'd on docs-only sites with no index page. The catch-all now redirects '/' to the first nav entry (only for the empty slug; every other missing path still 404s). Static-export sites serving public/index.html at '/' are unaffected. Verified live on the rune docs: / -> 307 -> /start/what-is-rune, 404 centered (screenshot), genuine paths still 404; table rendering unit-tested; build green (78 pages).
The '404' uses var(--display) (Schibsted Grotesk) but the heading used var(--serif) (Instrument Serif). Switch .nf-h to the display font (weight 600, matching letter-spacing) so the two read as one lockup.
Two navigation-UX fixes from the rune review: 1. Sidebar scroll — after navigating to a page whose nav link is below the fold, the sidebar rendered scrolled to the top with the active link hidden. DocsSidebar now scrolls *only the sidebar* (never the window) to bring the active link into view, deferred to a rAF so it measures after layout settles. 2. AI panel push — on reload with the panel open, the content/code/tables shrank with a visible 0.26s animation because the body.aichat-open class was added post-hydration. A pre-paint <html data-ai-open> attribute (set by the layout inline script from localStorage) now applies the padding with no transition, so the content renders already-shrunk; React hands off to body.aichat-open in one tick with no value change, so nothing animates. Applies to both the docs shell and the API reference takeover.
oreofeolurin
changed the title
…el open The real cause: the docs shell lives in page.tsx, so it REMOUNTS on every client navigation. On remount AskDock reset to open=false, which stripped body.aichat-open (content expanded to full width), and the old code then re-read localStorage and re-opened — re-applying the push WITH the always-on .26s transition. That expand→animate-shrink on every page change was the flicker. Fix: - Restore the open state in a layout effect (before paint) and add body.aichat-open there directly, so a remount/navigation re-opens the panel with no full-width flash. Falls back to useEffect under SSR. - Gate BOTH the width (padding-right) and panel (transform) transitions behind body.ac-animating, which only an explicit user open/close adds (and removes ~340ms later). Reloads and navigation now apply the push instantly — they physically cannot animate — while user toggles still animate smoothly. - Drop the unmount cleanup that removed body.aichat-open; it thrashed the push across the remount. - Persist the open flag only on real changes (prevOpen ref) so a remount or StrictMode replay can't clobber the saved state with a stale value. - Keep the pre-paint <html data-ai-open> for the first paint of a full load. Verified at 1680px: reload-open renders pre-shrunk (no anim); SPA navigation keeps the panel open with the content column fixed at 794px (no reflow); user close/open still animates. Build green (78 pages).
The 'this page' chip looked like a clickable pill but is a read-only indicator of the answer's grounding scope (set by how the panel was opened). Reworked it into a caption — a 'Grounded in <scope>' line with the book icon, muted prefix, emphasized scope value, transparent background, no border, default cursor, and a title tooltip — so it reads as status, not an action. Docs + API reference.
The label implied answers were scoped to the current page, but retrieval draws on the full docs context, so it was misleading. Removed the indicator (and its now-unused Book glyph + .ac-ctx styles). The underlying context/sectionHint is kept — it still biases grounding when the panel is opened from a section or endpoint — it's just no longer surfaced in the UI.
The Ask AI panel is fixed at top:0, but its header was 54px while the site nav is 61px (a 60px row + 1px border), so the header's bottom divider floated 7px above the nav's. Bumped .ac-head to 61px (60px content + 1px border, border-box) in both the docs and API-reference panels so the two dividers form one continuous line. Verified live: divider gap 54px->61px, now 0.
Drop the border-bottom on .ac-head (docs + API reference) so the Assistant header is borderless and blends into the panel, rather than carrying its own divider line. Height stays 61px so the title still aligns vertically with the site nav.
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
1 participant
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.
Three fixes from the rune dogfood review.
1. Ask AI rendered markdown tables as raw
| pipe | text |mdBlocks()had no table support, so a GFM table came through as literal pipes with<br>line breaks. It now detects a header row followed by a---separator and emits a real<table>— inline bold/codeworks inside cells, and any text around the table stays a paragraph. Styled under.ac-outin both docs + API reference (bordered, scrollable).2. 404 page was left-aligned, not centered
.ml-notfoundis a flex column but inheritedalign-items: startfrom the.docs-shellgrid rule, which shrank its children to content width and left-aligned them. Setalign-items: stretchso.nffills the width and its ownalign-items: centeractually centers the content.3.
/404'd on docs-only sites with no root pageThe catch-all returned
notFound()for/when there's nodocs/index.mdx, so the brand/logo link dead-ended. It now redirects/→ the first nav entry (only for the empty slug; every other missing path still 404s). Guarded so it never loops, and static-export sites servingpublic/index.htmlat/are unaffected.Verified live (rune docs)
GET /→ 307 →/start/what-is-rune;GET /nope→ 404 (preserved)tscclean; production build green (78 pages)Note: I couldn't capture a live table screenshot — the
deepseek-v4-flashmodel hung ~80s on the comparison query (heavy reasoning + large grounding context). The rendering path is the same one the unit test exercises.