Add "New" badge to docs sidebar

[pedromenezes1]

Automatically shows a "New" badge next to recently added components, blocks, and chart pages in the docs sidebar. Badges appear for items added within the last 60 days, determined from git history at build time. No manual upkeep needed.

How it works

• At build time, getComponentBirthDates() scans git history for first-commit dates of component/block source directories and chart doc pages
• Data is injected via Vite define (same pattern as __KUMO_VERSION__, __BUILD_COMMIT__, etc.)
• SidebarNav renders <Badge variant="secondary">New</Badge> next to matching items
• Gracefully falls back to no badges on shallow clones

Files

File	What
astro.config.mjs	Imports helper, injects __KUMO_NEW_ITEMS__ via Vite define
src/lib/component-birth-dates.ts	Scans git history for birth dates within 60-day cutoff
src/lib/is-new-item.ts	Pure function mapping sidebar hrefs to newness
src/components/SidebarNav.tsx	Renders badges in components, blocks, and charts sections

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: docs-only UI feature with no bonk integration
• Tests
  • Tests included/updated
  • Additional testing not necessary because: 15 unit tests cover the build-time helpers; visual verification done locally

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@429

commit: d22455a

[github-actions]

Docs Preview

View docs preview

Commit: 6fcc826

[github-actions]

Visual Regression Report — 33 changed, 4 unchanged

33 screenshot(s) with visual changes:

Button / Basic

264 px (0.26%) changed

Before	After	Diff

Button / Variant: Primary

166 px (0.16%) changed

Before	After	Diff

Button / Variant: Secondary

323 px (0.32%) changed

Before	After	Diff

Button / Variant: Ghost

101 px (0.1%) changed

Before	After	Diff

Button / Variant: Outline

155 px (0.15%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

629 px (0.62%) changed

Before	After	Diff

Button / With Icon

432 px (0.43%) changed

Before	After	Diff

Button / Icon Only

70 px (0.07%) changed

Before	After	Diff

Button / Loading State

494 px (0.49%) changed

Before	After	Diff

Button / Disabled State

117 px (0.12%) changed

Before	After	Diff

Button / Title

515 px (0.51%) changed

Before	After	Diff

Dialog / Dialog With Actions

138 px (0.14%) changed

Before	After	Diff

Dialog / Dialog Basic

114 px (0.11%) changed

Before	After	Diff

Dialog / Dialog Alert

744 px (0.73%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

225 px (0.22%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

299 px (0.29%) changed

Before	After	Diff

Select / Select Sizes

663 px (0.36%) changed

Before	After	Diff

Select / Select Without Label

160 px (0.16%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select Placeholder

418 px (0.41%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Custom Rendering

413 px (0.41%) changed

Before	After	Diff

Select / Select Loading

2,117 px (1.05%) changed

Before	After	Diff

Select / Select Multiple

801 px (0.79%) changed

Before	After	Diff

Select / Select Complex

1,412 px (1.19%) changed

Before	After	Diff

Select / Select Disabled Options

508 px (0.5%) changed

Before	After	Diff

Select / Select Grouped

346 px (0.34%) changed

Before	After	Diff

Select / Select Grouped With Disabled

450 px (0.44%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

2,027 px (0.01%) changed

Before	After	Diff

4 screenshot(s) unchanged

• Button / Variant: Destructive
• Button / Sizes
• Dialog / Dialog With Combobox
• Select / Select Disabled Items

---

Generated by Kumo Visual Regression