feat(registry): add diff-viewer and kbd components + docs polish#16
Merged
feat(registry): add diff-viewer and kbd components + docs polish#16
Conversation
Top-level /changelog route showing all components in reverse-chronological order, derived from docsNav dateAdded fields and registry descriptions. - Timeline layout with date headers and component cards - Theme-aware screenshots (switches dark/light with site theme) - Grouped by date, links to each component's docs page - Category badges per entry - Backfilled dateAdded on all existing nav items - Zero maintenance — updates automatically when new components are added
- Move changelog to /docs/changelog (inside docs layout) - Blog-style layout with date headers, descriptions, screenshots - Auto-derives entries from docsNav dateAdded + registry descriptions - Theme-aware images (dark/light based on site theme) - Add Changelog to sidebar and header nav - Fix CopyPromptButton height to match AiCopyButton - Remove ProductHunt button from navbar
… token cleanup - Consolidate ChangelogImage + ComponentCardPreviewImage into shared ThemeImage - Fix CLS on card preview placeholder (h-[140px] → aspect-[2/1]) - Add focus-visible:ring-2 ring-ring/50 to all interactive elements - Add global prefers-reduced-motion reset + useReducedMotion for sidebar - Replace animate-bounce with motion-safe:animate-pulse on scroll indicator - Replace hardcoded #ff4f00 badge color with ring token - Normalize shadow-xs → shadow-sm on variant grid cells - Normalize container border-radius to rounded-xl - Add hover:border-foreground/20 to prev/next nav cards - Add hover:bg-muted to theme toggle button - Set --ring to orange (oklch 0.67 0.22 37.41) in light/dark themes - Reduce --radius from 0.625rem to 0.375rem - Tighten radius scale steps (2px increments) - Remove grid background and red border from requirements card
…s, registry add step - Rewrite installation page using Stepper component (dogfooding) - Add registry add step with components.json snippet - Add manual setup, without-shadcn, and MCP integration sections - Add compact prop to docs CodeBlock (hides header, floating copy button) - Convert Product Hunt token setup to use Stepper
Hides the header bar and floats the copy button inside the code area.
Code diff viewer with line numbers and add/remove coloring. Supports unified and split layouts via layout prop. Accepts oldCode/newCode strings or a pre-computed patch. Dependencies: diff (jsdiff)
Keyboard shortcut keys rendered as styled keycaps.
Three visual profiles: flat, raised, sculpted.
12 built-in color schemes inspired by popular keycap sets
(dolch, olivia, botanical, laser, mizu, dracula, etc.).
Custom { bg, text, border } color prop for full control.
Includes KbdCombo helper for multi-key shortcuts.
Interactive playground on docs page.
jal-co
force-pushed
the
feat/diff-viewer
branch
from
dbef6da to
1f28ed3
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
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.
New Components:
diff-viewerandkbd+ Docs PolishWhat changed
This PR adds two new registry components and a comprehensive docs-site polish pass.
New: Diff Viewer
Code diff viewer with line numbers and add/remove coloring. Supports unified (single column) and split (side-by-side) layouts. Accepts
oldCode/newCodestrings or a pre-computedpatchstring. Depends ondiff(jsdiff, zero deps).New: Kbd
Keyboard shortcut keys rendered as styled keycaps. Three visual profiles — flat, raised, sculpted — inspired by real keycap shapes. 12 built-in color schemes inspired by popular keycap sets (dolch, olivia, botanical, laser, mizu, dracula, etc.) plus custom
{ bg, text, border }support. IncludesKbdCombohelper and an interactive playground.Registry: CodeBlock compact prop
New
compactprop on both the registry and docs CodeBlock — hides the header bar, floats the copy button inside the code area.Docs polish (10 items)
ChangelogImage+ComponentCardPreviewImage→ sharedThemeImageh-[140px]→aspect-[2/1])focus-visible:ring-2 ring-ring/50to all interactive docs elementsprefers-reduced-motionreset +useReducedMotionfor sidebaranimate-bouncewithmotion-safe:animate-pulse#ff4f00badge color withringtokenshadow-xs→shadow-sm, container border-radius torounded-xlhover:border-foreground/20to prev/next nav +hover:bg-mutedto theme toggle--ringto orange, reduced--radiusfrom 0.625rem to 0.375remgap-8→gap-4across all 17 component pagesDocs: Installation page rewrite
registry addstep withcomponents.jsonsnippetChecklist
Diff Viewer
registry/diff-viewer/registry.jsonentrypnpm registry:buildandpnpm buildpassKbd
registry/kbd/registry.jsonentrypnpm registry:buildandpnpm buildpassScreenshots
Notes
languageprop is accepted in the type but syntax highlighting is not yet implemented — planned as a follow-up.gap-8→gap-4substitution.