feat: add icon option for pages/groups#18
Conversation
Greptile SummaryThis PR adds an optional
Confidence Score: 3/5The backend data-flow changes are clean, but the icon rendering approach in the sidebar bundles the entire lucide-react icon set on the client side — this should be resolved before merging to a production docs site. The plumbing across types.ts, content.ts, tree.ts, and site.ts is solid and mirrors established patterns. The sidebar-tree-view.tsx change introduces a dynamic icon lookup against the full icons export from lucide-react, meaning every icon in the library ends up in the client bundle regardless of how many are actually used. This is a meaningful regression for a documentation site where JS bundle size directly affects page load. src/components/sidebar-tree-view.tsx needs the most attention — the icon import strategy should be revisited. src/bach/breadcrumbs.ts is worth a second look to decide whether iconMap belongs in its interface at all. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Page/Group Config] -->|icon field| B[buildCollectionsSidebarData]
B -->|iconMap| C[buildSidebarTree]
C -->|iconMap| D[buildPages]
D -->|SidebarCategoryNode.icon| E[sidebar-tree-view.tsx]
D -->|SidebarArticleNode.icon| E
E -->|name lookup| F[icons from lucide-react]
F -->|Icon component| G[Rendered TreeIcon]
H[Frontmatter icon field] -->|docsSchema| I[buildSidebarEntryMap]
I -->|iconMap.set| B
J[buildBreadcrumbs] -->|iconMap passed| K[searchPagesForBreadcrumbs]
K -->|buildPages for firstChildHref only| L[findFirstHref]
L -->|href string| M[Breadcrumb label+href]
K -.->|icon unused in output| M
|
| import { icons } from 'lucide-react' | ||
| import { Badge } from '@/components/ui/badge' | ||
| import { cn } from '@/lib/utils' | ||
| import { hasActiveChild, isPathActive } from '@/bach/nav' | ||
| import type { SidebarCategoryNode, SidebarNode } from '@/bach/types' | ||
|
|
||
| function TreeIcon({ name }: { name: string }) { | ||
| const Icon = icons[name as keyof typeof icons] | ||
| if (!Icon) return null | ||
| return <Icon className="h-4 w-4 shrink-0" /> |
There was a problem hiding this comment.
Entire icon library bundled due to dynamic key lookup
import { icons } from 'lucide-react' pulls in the entire icon map (~1400+ components). Because the lookup is a runtime string key (icons[name as keyof typeof icons]), bundlers like Vite/Rollup cannot tree-shake unused icons — every icon ships to the client even if only two or three are ever referenced. For a documentation site sidebar this could add hundreds of KB to the JS bundle. A common alternative is to use a lazy-load registry or restrict the allowed icon set to named imports that the bundler can prune.
Adds an icon option to the group config type and page frontmatter.