Img optimizations to blog route and library badges

[LadyBluenotes]

Summary by CodeRabbit

• New Features
  • Blog posts now support optional library association metadata.
  • Blog cards display library badges when associated with AI, Router, Form, Query, Start, DB, or other libraries.
  • Blog index enhanced to resolve and visualize library relationships.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	7564e7b
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/69f913a08804a10008544daa
😎 Deploy Preview	https://deploy-preview-889--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 36 (🔴 down 21 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
🤖 Make changes	Run an agent on this branch

---

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 28c06056-0985-4621-93c6-02c4029101d1

📥 Commits

Reviewing files that changed from the base of the PR and between 63d81b8 and 7564e7b.

📒 Files selected for processing (34)

• content-collections.ts
• src/blog/ag-grid-partnership.md
• src/blog/announcing-tanstack-form-v1.md
• src/blog/announcing-tanstack-query-v4.md
• src/blog/announcing-tanstack-query-v5.md
• src/blog/announcing-tanstack-start-v1.md
• src/blog/debug-logging-for-tanstack-ai.md
• src/blog/from-docs-to-agents.md
• src/blog/generation-hooks.md
• src/blog/how-we-test-tanstack-ai-across-7-providers.md
• src/blog/react-server-components.md
• src/blog/search-params-are-state.md
• src/blog/tanstack-ai-alpha-2.md
• src/blog/tanstack-ai-alpha-your-ai-your-way.md
• src/blog/tanstack-ai-audio-generation.md
• src/blog/tanstack-ai-code-mode.md
• src/blog/tanstack-ai-lazy-tool-discovery.md
• src/blog/tanstack-ai-middleware.md
• src/blog/tanstack-ai-realtime-voice-chat.md
• src/blog/tanstack-ai-the-ai-function-postmortem.md
• src/blog/tanstack-ai-why-we-split-the-adapters.md
• src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md
• src/blog/tanstack-db-0.5-query-driven-sync.md
• src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md
• src/blog/tanstack-router-route-matching-tree-rewrite.md
• src/blog/tanstack-router-signal-graph.md
• src/blog/tanstack-router-typescript-performance.md
• src/blog/tanstack-start-5x-ssr-throughput.md
• src/blog/tanstack-start-solid-v2.md
• src/blog/type-safe-provider-tools-tanstack-ai.md
• src/blog/who-owns-the-tree.md
• src/blog/why-tanstack-start-and-router.md
• src/blog/why-tanstack-start-is-ditching-adapters.md
• src/routes/blog.index.tsx

---

📝 Walkthrough

Walkthrough

Added an optional library field to the posts collection schema with validation for comma-separated library IDs. Updated 30 blog posts with library metadata tags. Modified the blog index page to fetch, resolve, and display library badges for each post.

Changes

Blog Library Tagging and Display

Layer / File(s)	Summary
Schema Validation content-collections.ts	New libraryListSchema validates optional library field as comma-separated IDs from libraryIds, with trimming and custom error handling. Schema for posts collection includes library: libraryListSchema.optional().
Blog Post Metadata src/blog/*.md (30 files)	Each blog post frontmatter receives a library field (e.g., library: ai, library: query, library: router, library: start, library: db, library: table, library: form, library: intent) specifying associated TanStack library. Examples: announcing-tanstack-query-v4.md, tanstack-ai-middleware.md, tanstack-router-signal-graph.md, tanstack-start-solid-v2.md, etc.
Blog Index Integration src/routes/blog.index.tsx	Front-matter shape extended with optional library string. New helpers isLibrarySlim and getBlogLibraries() parse CSV library IDs and resolve them via findLibrary to LibrarySlim results. Blog cards conditionally render library badge overlays. Header image URLs now use getNetlifyImageUrl(headerImage). Imports added for findLibrary and LibrarySlim.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

Hop, hop, the libraries now shine,
Each blog post tagged with what's divine,
From ai to query, start and more,
Badges bloom on every door! 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: image optimizations via Netlify URL conversion and addition of library badge functionality to the blog route.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 img-optim

---

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

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