Skip to content

docs: hover-anchor headings + New/Updated sidebar badges#43

Open
abdout wants to merge 1 commit into
docs/shadcn-new-sectionsfrom
docs/shadcn-polish
Open

docs: hover-anchor headings + New/Updated sidebar badges#43
abdout wants to merge 1 commit into
docs/shadcn-new-sectionsfrom
docs/shadcn-polish

Conversation

@abdout
Copy link
Copy Markdown
Contributor

@abdout abdout commented May 18, 2026

Summary

Phase 4 of the shadcn-style docs refresh. Stacked on top of #42. Targets docs/shadcn-new-sections and should be merged after #42 lands. Rebase onto main after that.

Two polish primitives that move kun docs the rest of the way toward shadcn parity without rewiring infrastructure: hover-anchor # next to every section heading, and small New / Updated badges in the sidebar.

Changes

  • src/mdx-components.tsx — extract slugify() helper, add <HeadingAnchor> component, apply to h2/h3/h4. Anchor is opacity-0 and fades in on group-hover or when the link itself receives focus (keyboard-accessible).
  • src/lib/docs.ts (new)PAGES_NEW and PAGES_UPDATED arrays. New entries currently flag the 4 Phase 3 resources pages (FAQ, changelog, theming, CLI). Updated flags the 10 pages templated in Phase 2 / 3.
  • src/components/docs/docs-sidebar.tsxrenderLink reads both arrays and shows an inline badge. New beats Updated if both flagged.

Test plan

  • pnpm docs:check clean (40 / 40 / 0)
  • next build succeeds
  • After merge: hover any h2/h3/h4 — # fades in, click copies URL
  • After merge: sidebar shows "New" badge on the four resources entries and "Updated" on the ten flagged pages
  • After merge: dark mode + RTL spot-check on a flagged page

Out of scope

  • Mobile sidebar via Sheet — deferred because the current <Sidebar collapsible="none"> would need to flip to "offcanvas" plus a layout-level <SidebarTrigger>, and that risks regressing desktop. Splitting into its own PR.
  • Cmd+K search — Fumadocs ships createFromSource for free, but the dialog UI is a real surface area. Separate PR.
  • Redirect 307 → 301 flip — premature. Plan calls for 7 days of monitoring first.

🤖 Generated with Claude Code

Phase 4 polish. Two changes that make the docs feel current and
discoverable without rewiring infrastructure.

- Hover-anchor # next to every h2/h3/h4. Slugify helper extracted so
  ids are stable across renders and consistent across heading levels.
  Anchor is opacity-0 by default and fades in on group-hover or when
  the link itself receives focus (keyboard-accessible).
- src/lib/docs.ts declares PAGES_NEW (4 entries, the Phase 3 resources)
  and PAGES_UPDATED (10 entries, the pages templated in Phase 2 and 3).
- Sidebar renderLink now reads those arrays and shows a small inline
  badge (primary tint for New, muted for Updated). New beats Updated
  if both are flagged.

Why: hover-anchors are the simplest way to give every section a
permanent, copy-able URL. Badges surface what's worth re-reading
without forcing users to scan the changelog.

Deferred: mobile sidebar via Sheet — it needs the shadcn Sidebar
component switched from collapsible="none" to "offcanvas" plus a
layout-level SidebarTrigger, which risks regressing desktop behavior.
Splitting into its own PR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
kun Ready Ready Preview, Comment May 18, 2026 5:51am

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