Img optimizations to blog route and library badges

content-collections.ts

@@ -1,7 +1,26 @@
 import { defineCollection, defineConfig } from '@content-collections/core'
+import { libraryIds } from '~/libraries/libraries'
 import { normalizeRedirectFrom } from '~/utils/redirects'
 import { z } from 'zod'
 
+const libraryIdSet = new Set<string>(libraryIds)
+const libraryListSchema = z.string().refine(
+  (value) => {
+    const libraries = value
+      .split(',')
+      .map((library) => library.trim())
+      .filter(Boolean)
+
+    return (
+      libraries.length > 0 &&
+      libraries.every((library) => libraryIdSet.has(library))
+    )
+  },
+  {
+    message: `Expected comma-separated library ids: ${libraryIds.join(', ')}`,
+  },
+)
+
 const posts = defineCollection({
   name: 'posts',
   directory: './src/blog',
@@ -12,6 +31,7 @@ const posts = defineCollection({
     draft: z.boolean().optional(),
     excerpt: z.string(),
     authors: z.string().array(),
+    library: libraryListSchema.optional(),
     content: z.string(),
     redirect_from: z.string().array().optional(),
   }),

src/blog/ag-grid-partnership.md

@@ -2,6 +2,7 @@
 title: TanStack Table + Ag-Grid Partnership
 published: 2022-06-17
 excerpt: AG Grid is now the official TanStack Table open-source partner. Together we'll educate the ecosystem about the differences between the two libraries and when to choose which.
+library: table
 authors:
   - Tanner Linsley
   - Niall Crosby

src/blog/announcing-tanstack-form-v1.md

@@ -2,6 +2,7 @@
 title: Announcing TanStack Form v1
 published: 2025-03-03
 excerpt: The first stable version of TanStack Form is live and ready for production. We support five frameworks at launch — React, Vue, Angular, Solid, and Lit.
+library: form
 authors:
   - Corbin Crutchley
 ---

src/blog/announcing-tanstack-query-v4.md

@@ -2,6 +2,7 @@
 title: Announcing TanStack Query v4
 published: 2022-07-14
 excerpt: The next version of TanStack Query is here. The rebranding and monorepo restructuring finally allows us to bring the joy of react-query to other frameworks like Vue, Svelte, and Solid.
+library: query
 authors:
   - Dominik Dorfmeister
 ---

src/blog/announcing-tanstack-query-v5.md

@@ -2,6 +2,7 @@
 title: Announcing TanStack Query v5
 published: 2023-10-17
 excerpt: After 91 alpha releases, 35 betas, and 16 release candidates, TanStack Query v5.0.0 is finally here — smaller, better, and more intuitive than ever.
+library: query
 authors:
   - Dominik Dorfmeister
 ---

src/blog/announcing-tanstack-start-v1.md

@@ -2,6 +2,7 @@
 title: TanStack Start v1 Release Candidate
 published: 2025-09-23
 excerpt: TanStack Start has officially reached a v1.0 Release Candidate. This is the build we expect to ship as 1.0, pending your final feedback, docs polish, and a few last-mile fixes.
+library: start
 authors:
   - Tanner Linsley
 ---

src/blog/debug-logging-for-tanstack-ai.md

@@ -2,6 +2,7 @@
 title: 'One Flag, Every Chunk: Debug Logging Lands in TanStack AI'
 published: 2026-04-22
 excerpt: "Your AI pipeline is a black box: a missing chunk, a middleware that doesn't fire, a tool call with mystery args. TanStack AI now ships pluggable, category-toggleable debug logging across every activity and adapter. Flip one flag and the pipeline prints itself."
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/from-docs-to-agents.md

@@ -2,6 +2,7 @@
 title: 'Introducing TanStack Intent: Ship Agent Skills with your npm Packages'
 published: 2026-03-04
 excerpt: Your docs are good. Your types are solid. Your agent still gets it wrong. TanStack Intent lets you ship agent skills alongside your npm packages so AI tools actually know how to use your library.
+library: intent
 authors:
   - Sarah Gerrard
   - Kyle Mathews

src/blog/generation-hooks.md

@@ -2,6 +2,7 @@
 title: 'Generation Hooks: Type-Safe AI Beyond Chat'
 published: 2026-03-11
 excerpt: Chat is just the beginning. Your AI app needs image generation, text-to-speech, transcription, and more. TanStack AI now ships generation hooks — a unified set of React hooks for every non-chat AI activity.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/how-we-test-tanstack-ai-across-7-providers.md

@@ -3,6 +3,7 @@ title: 'How We Test TanStack AI Across 7 Providers on Every PR'
 published: 2026-04-13
 draft: false
 excerpt: "TanStack AI runs 147 deterministic E2E tests across 7 LLM providers in under 2 minutes. Here's the testing infrastructure that makes it possible."
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/react-server-components.md

@@ -3,6 +3,7 @@ title: 'React Server Components Your Way'
 published: 2026-04-13
 draft: false
 excerpt: RSCs are genuinely exciting — smaller bundles, streaming UI, moving heavy work off the client — but existing implementations force you into a one-size-fits-all pattern. What if you could fetch, cache, and compose them on your own terms?
+library: start
 authors:
   - Manuel Schiller
   - Tanner Linsley

src/blog/search-params-are-state.md

@@ -2,6 +2,7 @@
 title: Search Params Are State
 published: 2025-06-03
 excerpt: Search params are global, serializable, and shareable — but in most apps they're hacked together with string parsing and brittle utils. They deserve to be treated as first-class state.
+library: router
 authors:
   - Tanner Linsley
 ---

src/blog/tanstack-ai-alpha-2.md

@@ -2,6 +2,7 @@
 title: 'TanStack AI Alpha 2: Every Modality, Better APIs, Smaller Bundles'
 published: 2025-12-19
 excerpt: Two weeks since the first alpha and we've prototyped through 5-6 internal architectures. Alpha 2 brings every modality, better APIs, and smaller bundles.
+library: ai
 authors:
   - Alem Tuzlak
   - Jack Herrington

src/blog/tanstack-ai-alpha-your-ai-your-way.md

@@ -2,6 +2,7 @@
 title: 'TanStack AI Alpha: Your AI, Your Way'
 published: 2025-12-04
 excerpt: The current AI landscape has a problem — pick a framework, pick a cloud provider, and suddenly you're locked in. TanStack AI is a framework-agnostic toolkit built for developers who want control.
+library: ai
 authors:
   - Jack Herrington
   - Alem Tuzlak

src/blog/tanstack-ai-audio-generation.md

@@ -2,6 +2,7 @@
 title: 'TanStack AI Just Learned to Compose Music'
 published: 2026-04-24
 excerpt: TanStack AI adds a new generateAudio activity with streaming, plus fal and Gemini Lyria adapters for music, sound effects, text-to-speech, and transcription. One typed API, any provider.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/tanstack-ai-code-mode.md

@@ -2,6 +2,7 @@
 title: 'Code Mode: Let Your AI Write Programs, Not Just Call Tools'
 published: 2026-04-08
 excerpt: One tool call at a time is the bottleneck. TanStack AI Code Mode lets the LLM write and execute TypeScript programs in secure sandboxes, composing your tools with loops, conditionals, and Promise.all in a single shot.
+library: ai
 authors:
   - Jack Herrington
   - Alem Tuzlak

src/blog/tanstack-ai-lazy-tool-discovery.md

@@ -2,6 +2,7 @@
 title: 'Lazy Tool Discovery: Scaling AI Tool Systems Without Drowning in Tokens'
 published: 2026-03-12
 excerpt: Every tool definition costs tokens and eats into the context window. Past a certain point it actually makes the model worse. Today we're shipping lazy tool discovery in TanStack AI.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/tanstack-ai-middleware.md

@@ -2,6 +2,7 @@
 title: 'TanStack AI Just Got Middleware — And It Changes Everything'
 published: 2026-03-12
 excerpt: Your chat endpoint starts simple, then you need logging, filtering, caching, rate limiting, and suddenly it's a 200-line monster. TanStack AI now ships a first-class middleware system.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/tanstack-ai-realtime-voice-chat.md

@@ -2,6 +2,7 @@
 title: 'Talk to Your AI: Realtime Voice Chat in TanStack AI'
 published: 2026-03-12
 excerpt: Text-based chat is table stakes. TanStack AI now ships first-class support for realtime voice conversations — real voice, real time, with the AI hearing you, thinking, and responding naturally.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/tanstack-ai-the-ai-function-postmortem.md

@@ -2,6 +2,7 @@
 title: 'The ai() Function That Almost Was'
 published: 2025-12-26
 excerpt: We spent eight days building an API we had to kill. One function to rule them all, one function to control all adapters, one function to make it all typesafe — here's what happened.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/tanstack-ai-why-we-split-the-adapters.md

@@ -2,6 +2,7 @@
 title: 'TanStack AI: Why We Split the Adapters'
 published: 2026-01-02
 excerpt: Instead of one monolithic adapter that does everything, we split into smaller adapters each in charge of a single functionality. Here's why that architectural change matters.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md

@@ -2,6 +2,7 @@
 title: Stop Re-Rendering. TanStack DB, the Embedded Client Database for TanStack Query
 published: 2025-07-30
 excerpt: Your React dashboard shouldn't grind to a halt because one TODO gets checked. TanStack DB is a client-side database powered by differential dataflow that plugs into your existing useQuery calls.
+library: db
 authors:
   - Kyle Mathews
   - Sam Willis

src/blog/tanstack-db-0.5-query-driven-sync.md

@@ -2,6 +2,7 @@
 title: TanStack DB 0.5 .  Query-Driven Sync
 published: 2025-11-12
 excerpt: Your component's query is now the API call. No custom endpoint, no GraphQL resolver, no backend change. TanStack DB 0.5 introduces query-driven sync that eliminates the glue code between your UI and your data.
+library: db
 authors:
   - Sam Willis
   - Kevin De Porre

src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md

@@ -3,6 +3,7 @@ title: TanStack DB 0.6 Now Includes Persistence, Offline Support, and Hierarchic
 excerpt: TanStack DB 0.6 adds SQLite-backed persistence across runtimes, hierarchical includes for projecting normalized data into UI-shaped trees, reactive effects, virtual props for sync state, and more.
 published: 2026-03-25
 draft: false
+library: db
 authors:
   - Sam Willis
   - Kevin De Porre

src/blog/tanstack-router-route-matching-tree-rewrite.md

@@ -2,6 +2,7 @@
 title: How we accidentally made route matching more performant by aiming for correctness
 published: 2025-11-18
 excerpt: A rewrite aimed at fixing edge cases in route matching accidentally delivered a 20,000x performance improvement. Route matching is no longer bottlenecked by the number of routes in your application.
+library: router
 authors:
   - Florian Pellet
 ---

src/blog/tanstack-router-signal-graph.md

@@ -4,6 +4,7 @@ authors:
   - Florian Pellet
 title: "TanStack Router's New Reactive Core: A Signal Graph"
 excerpt: TanStack Router now uses a granular signal graph as its reactive core. State is derived from that graph, which narrows change propagation and makes client-side navigation faster in our benchmarks.
+library: router
 ---
 
 ![veins of emerald as a signal graph embedded in the rock of a tropical island](/blog-assets/tanstack-router-signal-graph/header.jpg)

src/blog/tanstack-router-typescript-performance.md

@@ -2,6 +2,7 @@
 title: A milestone for TypeScript Performance in TanStack Router
 published: 2024-09-17
 excerpt: TanStack Router pushes the boundaries on type-safe routing, but large route trees can slow down the editor. Here's how we achieved a major milestone in TypeScript performance.
+library: router
 authors:
   - Christopher Horobin
 ---

src/blog/tanstack-start-5x-ssr-throughput.md

@@ -5,6 +5,7 @@ authors:
   - Florian Pellet
 title: '5x SSR Throughput: Profiling SSR Hot Paths in TanStack Start'
 excerpt: 'How profiling under sustained load uncovered SSR hot paths in TanStack Start and led to a 5.5x throughput gain by removing unnecessary server-side work.'
+library: start
 ---
 
 ![A flamegraph island in the tanstack universe](/blog-assets/tanstack-start-5x-ssr-throughput/header.png)

src/blog/tanstack-start-solid-v2.md

@@ -2,6 +2,7 @@
 title: 'Solid 2.0 Beta Support in TanStack Router, Start, and Query'
 published: 2026-04-10
 excerpt: TanStack Router, Start, and Query now support the Solid 2.0 beta, so you can try Solid's next major release in real applications today.
+library: router, start, query
 authors:
   - Brenley Dueck
   - Birk Skyum

src/blog/type-safe-provider-tools-tanstack-ai.md

@@ -2,6 +2,7 @@
 title: 'Your AI Tool Calls Should Fail at Compile Time, Not in Production'
 published: 2026-04-22
 excerpt: Provider tools like web search and code execution are supported on some models and silently ignored on others. TanStack AI now gates them per model at the type level, so incompatible pairings fail at compile time instead of in production.
+library: ai
 authors:
   - Alem Tuzlak
 ---

src/blog/who-owns-the-tree.md

@@ -3,6 +3,7 @@ title: 'Who Owns the Tree? RSC as a Protocol, Not an Architecture'
 published: 2026-04-28
 draft: false
 excerpt: RSC is usually framed as a single architecture where the server owns the tree. But it's also a protocol, and the protocol supports more than one composition model. The overlooked question is who owns the tree.
+library: start
 authors:
   - Tanner Linsley
 redirect_from:

src/blog/why-tanstack-start-and-router.md

@@ -2,6 +2,7 @@
 title: Why choose TanStack Start and Router?
 published: 2024-12-03
 excerpt: The frameworks we choose can make or break our developer experience. Here's why TanStack Start and Router offer a compelling alternative for building modern web applications.
+library: start, router
 authors:
   - Tanner Linsley
 ---

src/blog/why-tanstack-start-is-ditching-adapters.md

@@ -2,6 +2,7 @@
 title: Why TanStack Start is Ditching Adapters
 published: 2024-11-22
 excerpt: Every cloud environment has its own quirky incantations to get things working. We're dropping custom adapters in TanStack Start and building on Nitro instead — here's why.
+library: start
 authors:
   - Tanner Linsley
 ---

src/routes/blog.index.tsx

@@ -11,10 +11,12 @@ import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 import { RssIcon } from 'lucide-react'
+import { findLibrary, type LibrarySlim } from '~/libraries'
 import { LibrariesWidget } from '~/components/LibrariesWidget'
 import { partners } from '~/utils/partners'
 import { PartnersRail, RightRail } from '~/components/RightRail'
 import { RecentPostsWidget } from '~/components/RecentPostsWidget'
+import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 
 type BlogFrontMatter = {
   slug: string
@@ -23,6 +25,24 @@ type BlogFrontMatter = {
   excerpt: string
   headerImage: string | undefined
   authors: string[]
+  library: string | undefined
+}
+
+function isLibrarySlim(
+  library: LibrarySlim | undefined,
+): library is LibrarySlim {
+  return library !== undefined
+}
+
+function getBlogLibraries(library: string | undefined) {
+  if (!library) {
+    return []
+  }
+
+  return library
+    .split(',')
+    .map((libraryId) => findLibrary(libraryId.trim()))
+    .filter(isLibrarySlim)
 }
 
 const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
@@ -43,6 +63,7 @@ const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
         excerpt: post.excerpt,
         headerImage: post.headerImage,
         authors: post.authors,
+        library: post.library,
       }
     })
 
@@ -97,7 +118,17 @@ function BlogIndex() {
             </header>
             <section className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
               {frontMatters.map(
-                ({ slug, title, published, excerpt, headerImage, authors }) => {
+                ({
+                  slug,
+                  title,
+                  published,
+                  excerpt,
+                  headerImage,
+                  authors,
+                  library,
+                }) => {
+                  const blogLibraries = getBlogLibraries(library)
+
                   return (
                     <Card
                       key={slug}
@@ -106,10 +137,22 @@ function BlogIndex() {
                       params={{ _splat: slug } as never}
                       className="relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-sm hover:border-blue-500"
                     >
+                      {blogLibraries.length ? (
+                        <div className="absolute right-3 top-3 z-10 flex flex-wrap justify-end gap-1">
+                          {blogLibraries.map((library) => (
+                            <div
+                              key={library.id}
+                              className={`rounded-md px-2 py-1 text-xs font-black uppercase shadow-sm ${library.bgStyle} ${library.badgeTextStyle ?? 'text-white'}`}
+                            >
+                              {library.name.replace('TanStack ', '')}
+                            </div>
+                          ))}
+                        </div>
+                      ) : null}
                       {headerImage ? (
                         <div className="aspect-video overflow-hidden bg-gray-100 dark:bg-gray-800">
                           <img
-                            src={headerImage}
+                            src={getNetlifyImageUrl(headerImage)}
                             alt=""
                             loading="lazy"
                             decoding="async"