feat: new libraries/framework pages

[KevinVandy]

Summary by CodeRabbit

• New Features

  • Added Alpine as a newly supported framework option.
  • Introduced framework-based library browsing with dedicated pages for each framework.
  • Added framework navigation links displaying library counts per framework.
  • Framework-specific pages now display relevant libraries with breadcrumb navigation and hero sections.

• Chores

  • Updated framework metadata and library support configurations.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	2ff9f90
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/69f16924cfbeb6000933e1fa
😎 Deploy Preview	https://deploy-preview-872--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 52 (🟢 up 14 from production) Accessibility: 90 (no change from production) Best Practices: 83 (🔴 down 9 from production) SEO: 97 (no change from production) PWA: 70 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds Alpine framework support to the TanStack library browser. Changes include introducing Alpine as a new framework option, creating a dynamic route for framework-specific library browsing, implementing utility functions for library filtering and ordering, updating the LibraryCard component to support framework prefixes, and extending framework metadata.

Changes

Cohort / File(s)	Summary
Framework Type System src/libraries/types.ts	Added 'alpine' to the Framework union type to support Alpine as a framework option.
Framework Options & Metadata src/libraries/frameworks.tsx, src/utils/npm-packages.ts	Introduced Alpine framework with logo import, colors, and chart metadata. Reordered Lit option within framework list.
Library Data Updates src/libraries/libraries.ts	Updated TanStack Table's supported frameworks to include Alpine alongside Lit and Qwik with new ordering.
Routing Infrastructure src/routeTree.gen.ts, src/routes/libraries_.$framework.tsx	Generated new dynamic route /libraries/$framework with loader that validates framework, sets document metadata, and renders framework-specific library browsing UI including breadcrumbs, hero section, and filtered library grid.
Library Utilities & Main Page src/routes/-libraries-utils.ts, src/routes/libraries.tsx	Created utility functions for filtering visible libraries, ordering for browse display, and aggregating framework library counts. Refactored main libraries page to use utilities and added framework navigation section with library counts and logo links.
Component Updates src/components/LibraryCard.tsx	Added optional namePrefix prop and implemented framework-prefixed display naming using route parameter, affecting both TanStack and non-TanStack rendering branches.

Sequence Diagram

sequenceDiagram
    actor User
    participant Router
    participant FrameworkPage as Framework Page<br/>(libraries_.$framework)
    participant Utils as Library Utils
    participant UI as Component Render

    User->>Router: Click framework link<br/>(/libraries/alpine)
    Router->>FrameworkPage: Navigate & trigger loader
    FrameworkPage->>FrameworkPage: Validate framework<br/>against frameworkOptions
    FrameworkPage->>Utils: getVisibleLibraries()
    Utils-->>FrameworkPage: Filtered library list
    FrameworkPage->>Utils: getFrameworkLibraryCounts()
    Utils-->>FrameworkPage: Count per framework
    FrameworkPage->>Utils: orderLibrariesForBrowse()
    Utils-->>FrameworkPage: Ordered libraries
    FrameworkPage->>FrameworkPage: Filter by active<br/>framework
    FrameworkPage->>UI: Render hero + nav +<br/>library grid
    UI-->>User: Display framework page<br/>with filtered libraries

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 ✨ A framework so swift, Alpine springs to life,
New routes and utils trim the dev strife,
Library counts bloom where frameworks align,
Cards dance with prefixes in design,
The browser now richer, a forest divine! 🌲

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: new libraries/framework pages' accurately summarizes the main change: introducing new framework-filtered library listing pages that allow users to browse TanStack libraries by specific frameworks.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch libraries-framework-pages

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/libraries/libraries.ts`:
- Around line 322-331: The Table description string is out of sync with the
frameworks list: you added 'alpine' to the frameworks array but didn't include
"Alpine" in the user-facing Table description; update the Table description
string (the card/table copy that references frameworks) to include "Alpine"
alongside Angular, React, Solid, Svelte, Vue, Qwik, Lit and Vanilla so the
displayed text matches the frameworks array (reference the frameworks array and
the Table description string in src/libraries/libraries.ts).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 94758330-af8e-4fd1-8334-bcd7ba756a49

📥 Commits

Reviewing files that changed from the base of the PR and between 03a1d36 and 2ff9f90.

⛔ Files ignored due to path filters (1)

• src/images/alpine-logo.svg is excluded by !**/*.svg

📒 Files selected for processing (9)

• src/components/LibraryCard.tsx
• src/libraries/frameworks.tsx
• src/libraries/libraries.ts
• src/libraries/types.ts
• src/routeTree.gen.ts
• src/routes/-libraries-utils.ts
• src/routes/libraries.tsx
• src/routes/libraries_.$framework.tsx
• src/utils/npm-packages.ts