From 1f8e15b5acb4f14a0c1e60f8972b7762dae61a21 Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Mon, 11 May 2026 12:47:25 -0500
Subject: [PATCH 1/3] feat: blog post filters by author and new blog post entry
 page per library

---
 src/components/BlogAuthorFilter.tsx          |  57 +++++
 src/components/BlogCard.tsx                  |  86 ++++++++
 src/components/DocsLayout.tsx                |   4 +
 src/images/author-fallback.svg               |   5 +
 src/libraries/maintainers.ts                 |  11 +-
 src/routeTree.gen.ts                         |  22 ++
 src/routes/$libraryId/$version.docs.blog.tsx | 111 ++++++++++
 src/routes/blog.index.tsx                    | 209 +++++++++----------
 src/utils/authors.ts                         |   7 +
 src/utils/blog.ts                            |  36 ++++
 10 files changed, 429 insertions(+), 119 deletions(-)
 create mode 100644 src/components/BlogAuthorFilter.tsx
 create mode 100644 src/components/BlogCard.tsx
 create mode 100644 src/images/author-fallback.svg
 create mode 100644 src/routes/$libraryId/$version.docs.blog.tsx
 create mode 100644 src/utils/authors.ts

diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx
new file mode 100644
index 000000000..66baf758a
--- /dev/null
+++ b/src/components/BlogAuthorFilter.tsx
@@ -0,0 +1,57 @@
+import { Select, type SelectOption } from '~/components/Select'
+import { findMaintainerByAuthorName } from '~/utils/authors'
+import authorFallbackAvatar from '~/images/author-fallback.svg'
+
+const ALL_AUTHORS_VALUE = 'all'
+
+function getAuthorAvatar(name: string): string {
+  return findMaintainerByAuthorName(name)?.avatar ?? authorFallbackAvatar
+}
+
+type BlogAuthorFilterProps = {
+  authors: string[]
+  selected: string | undefined
+  onSelect: (author: string | undefined) => void
+  className?: string
+}
+
+export function BlogAuthorFilter({
+  authors,
+  selected,
+  onSelect,
+  className,
+}: BlogAuthorFilterProps) {
+  const available: SelectOption[] = [
+    { label: 'All authors', value: ALL_AUTHORS_VALUE },
+    ...authors.map((name) => ({
+      label: name,
+      value: name,
+      logo: getAuthorAvatar(name),
+    })),
+  ]
+
+  // If the URL has an author that isn't in the post list, surface it anyway
+  // so the trigger renders and the user can still reset to "All authors".
+  if (
+    selected &&
+    selected !== ALL_AUTHORS_VALUE &&
+    !authors.includes(selected)
+  ) {
+    available.push({
+      label: selected,
+      value: selected,
+      logo: getAuthorAvatar(selected),
+    })
+  }
+
+  return (
+    <Select
+      className={className}
+      selected={selected ?? ALL_AUTHORS_VALUE}
+      available={available}
+      onSelect={(option) =>
+        onSelect(option.value === ALL_AUTHORS_VALUE ? undefined : option.value)
+      }
+    />
+  )
+}
diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx
new file mode 100644
index 000000000..43a3dd91f
--- /dev/null
+++ b/src/components/BlogCard.tsx
@@ -0,0 +1,86 @@
+import { Link } from '@tanstack/react-router'
+import { Card } from '~/components/Card'
+import {
+  formatAuthors,
+  formatPublishedDate,
+  getBlogLibraries,
+} from '~/utils/blog'
+import { getNetlifyImageUrl } from '~/utils/netlifyImage'
+
+export type BlogCardPost = {
+  slug: string
+  title: string
+  published: string
+  excerpt: string
+  headerImage: string | undefined
+  authors: string[]
+  library: string | undefined
+}
+
+type BlogCardProps = {
+  post: BlogCardPost
+  showLibraryBadges?: boolean
+}
+
+export function BlogCard({ post, showLibraryBadges = true }: BlogCardProps) {
+  const { slug, title, published, excerpt, headerImage, authors, library } =
+    post
+  const blogLibraries = showLibraryBadges ? getBlogLibraries(library) : []
+
+  return (
+    <Card
+      as={Link}
+      to="/blog/$"
+      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((blogLibrary) => (
+            <div
+              key={blogLibrary.id}
+              className={`rounded-md px-2 py-1 text-xs font-black uppercase shadow-sm ${blogLibrary.bgStyle} ${blogLibrary.badgeTextStyle ?? 'text-white'}`}
+            >
+              {blogLibrary.name.replace('TanStack ', '')}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {headerImage ? (
+        <div className="aspect-video overflow-hidden bg-gray-100 dark:bg-gray-800">
+          <img
+            src={getNetlifyImageUrl(headerImage)}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="w-full h-full object-cover"
+          />
+        </div>
+      ) : null}
+      <div className="p-4 md:p-8 flex flex-col gap-4 flex-1 justify-between">
+        <div>
+          <div className="text-lg font-extrabold">{title}</div>
+          <div className="text-xs italic font-light mt-1">
+            by {formatAuthors(authors)}
+            {published ? (
+              <time dateTime={published} title={formatPublishedDate(published)}>
+                {' '}
+                on {formatPublishedDate(published)}
+              </time>
+            ) : null}
+          </div>
+          {excerpt ? (
+            <p className="text-sm mt-4 text-gray-600 dark:text-gray-400 leading-7 line-clamp-4">
+              {excerpt}
+            </p>
+          ) : null}
+        </div>
+        <div>
+          <div className="text-blue-500 uppercase font-black text-sm">
+            Read More
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
index 9335ddc29..84ef7a89c 100644
--- a/src/components/DocsLayout.tsx
+++ b/src/components/DocsLayout.tsx
@@ -438,6 +438,10 @@ const useMenuConfig = ({
         label: 'Home',
         to: '..',
       },
+      {
+        label: 'Blog',
+        to: '/$libraryId/$version/docs/blog',
+      },
       ...(frameworks.length > 1
         ? [
             {
diff --git a/src/images/author-fallback.svg b/src/images/author-fallback.svg
new file mode 100644
index 000000000..68e26a8e0
--- /dev/null
+++ b/src/images/author-fallback.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <rect width="24" height="24" fill="#e5e7eb" />
+  <circle cx="12" cy="9.5" r="3.5" fill="#9ca3af" />
+  <path d="M4.5 21a7.5 7.5 0 0 1 15 0Z" fill="#9ca3af" />
+</svg>
diff --git a/src/libraries/maintainers.ts b/src/libraries/maintainers.ts
index dcc4f8aa0..083f8ae2c 100644
--- a/src/libraries/maintainers.ts
+++ b/src/libraries/maintainers.ts
@@ -71,7 +71,7 @@ export const allMaintainers: Maintainer[] = [
     github: 'crutchcorn',
     creatorOf: ['form'],
     maintainerOf: ['store', 'config'],
-    frameworkExpertise: ['react', 'solid', 'vue', 'angular'],
+    frameworkExpertise: ['react', 'solid', 'vue', 'angular', 'lit'],
     specialties: ['Forms', 'Validation', 'State Management'],
     social: {
       twitter: 'https://x.com/crutchcorn',
@@ -98,14 +98,15 @@ export const allMaintainers: Maintainer[] = [
     avatar: 'https://github.com/kevinvandy.png',
     github: 'kevinvandy',
     creatorOf: ['pacer', 'hotkeys'],
-    maintainerOf: ['table'],
+    maintainerOf: ['table', 'store'],
     contributorOf: ['virtual'],
     consultantOf: ['query'],
     frameworkExpertise: ['react', 'preact', 'solid'],
-    specialties: ['Tables', 'Data Grids', 'Dashboards'],
+    specialties: ['Data Grids', 'Performance', 'Dashboards'],
     social: {
       twitter: 'https://x.com/kevinvancott',
       bluesky: 'https://bsky.app/profile/kevinvancott.dev',
+      linkedIn: 'https://www.linkedin.com/in/kevinthomasvancott',
       website: 'https://kevinvancott.dev',
     },
     workshopsAvailable: true,
@@ -135,7 +136,7 @@ export const allMaintainers: Maintainer[] = [
     },
   },
   {
-    name: 'Chris Horobin',
+    name: 'Christopher Horobin',
     isCoreMaintainer: true,
     avatar: 'https://github.com/chorobin.png',
     github: 'chorobin',
@@ -167,6 +168,7 @@ export const allMaintainers: Maintainer[] = [
   },
   {
     name: 'Alem Tuzlak',
+    isCoreMaintainer: true,
     avatar: 'https://github.com/AlemTuzlak.png',
     github: 'AlemTuzlak',
     creatorOf: ['ai', 'devtools'],
@@ -334,6 +336,7 @@ export const allMaintainers: Maintainer[] = [
       'https://cdn.bsky.app/img/avatar/plain/did:plc:gtnigsmgu7jyrc4tnkvn62qw/bafkreiceysbj4o6jrbbniudtwj3tcsns6rvwcxyjsqiaumeojurwbkki5a@jpeg',
     github: 'riccardoperra',
     maintainerOf: ['table'],
+    contributorOf: ['devtools', 'hotkeys', 'pacer'],
     frameworkExpertise: ['angular', 'solid'],
     specialties: [],
     social: {
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 95491a9d5..ca6a34ad8 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -144,6 +144,7 @@ import { Route as LibraryIdVersionDocsChar123Char125DotmdRouteImport } from './r
 import { Route as LibraryIdVersionDocsNpmStatsRouteImport } from './routes/$libraryId/$version.docs.npm-stats'
 import { Route as LibraryIdVersionDocsContributorsRouteImport } from './routes/$libraryId/$version.docs.contributors'
 import { Route as LibraryIdVersionDocsCommunityResourcesRouteImport } from './routes/$libraryId/$version.docs.community-resources'
+import { Route as LibraryIdVersionDocsBlogRouteImport } from './routes/$libraryId/$version.docs.blog'
 import { Route as LibraryIdVersionDocsSplatRouteImport } from './routes/$libraryId/$version.docs.$'
 import { Route as LibraryIdVersionDocsFrameworkIndexRouteImport } from './routes/$libraryId/$version.docs.framework.index'
 import { Route as ApiAuthCliStatusTicketIdRouteImport } from './routes/api/auth/cli/status.$ticketId'
@@ -843,6 +844,12 @@ const LibraryIdVersionDocsCommunityResourcesRoute =
     path: '/community-resources',
     getParentRoute: () => LibraryIdVersionDocsRoute,
   } as any)
+const LibraryIdVersionDocsBlogRoute =
+  LibraryIdVersionDocsBlogRouteImport.update({
+    id: '/blog',
+    path: '/blog',
+    getParentRoute: () => LibraryIdVersionDocsRoute,
+  } as any)
 const LibraryIdVersionDocsSplatRoute =
   LibraryIdVersionDocsSplatRouteImport.update({
     id: '/$',
@@ -1011,6 +1018,7 @@ export interface FileRoutesByFullPath {
   '/table/$version/': typeof TableVersionIndexRoute
   '/virtual/$version/': typeof VirtualVersionIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/blog': typeof LibraryIdVersionDocsBlogRoute
   '/$libraryId/$version/docs/community-resources': typeof LibraryIdVersionDocsCommunityResourcesRoute
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/npm-stats': typeof LibraryIdVersionDocsNpmStatsRoute
@@ -1145,6 +1153,7 @@ export interface FileRoutesByTo {
   '/table/$version': typeof TableVersionIndexRoute
   '/virtual/$version': typeof VirtualVersionIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/blog': typeof LibraryIdVersionDocsBlogRoute
   '/$libraryId/$version/docs/community-resources': typeof LibraryIdVersionDocsCommunityResourcesRoute
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/npm-stats': typeof LibraryIdVersionDocsNpmStatsRoute
@@ -1290,6 +1299,7 @@ export interface FileRoutesById {
   '/table/$version/': typeof TableVersionIndexRoute
   '/virtual/$version/': typeof VirtualVersionIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/blog': typeof LibraryIdVersionDocsBlogRoute
   '/$libraryId/$version/docs/community-resources': typeof LibraryIdVersionDocsCommunityResourcesRoute
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/npm-stats': typeof LibraryIdVersionDocsNpmStatsRoute
@@ -1436,6 +1446,7 @@ export interface FileRouteTypes {
     | '/table/$version/'
     | '/virtual/$version/'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/blog'
     | '/$libraryId/$version/docs/community-resources'
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/npm-stats'
@@ -1570,6 +1581,7 @@ export interface FileRouteTypes {
     | '/table/$version'
     | '/virtual/$version'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/blog'
     | '/$libraryId/$version/docs/community-resources'
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/npm-stats'
@@ -1714,6 +1726,7 @@ export interface FileRouteTypes {
     | '/table/$version/'
     | '/virtual/$version/'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/blog'
     | '/$libraryId/$version/docs/community-resources'
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/npm-stats'
@@ -2774,6 +2787,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryIdVersionDocsCommunityResourcesRouteImport
       parentRoute: typeof LibraryIdVersionDocsRoute
     }
+    '/$libraryId/$version/docs/blog': {
+      id: '/$libraryId/$version/docs/blog'
+      path: '/blog'
+      fullPath: '/$libraryId/$version/docs/blog'
+      preLoaderRoute: typeof LibraryIdVersionDocsBlogRouteImport
+      parentRoute: typeof LibraryIdVersionDocsRoute
+    }
     '/$libraryId/$version/docs/$': {
       id: '/$libraryId/$version/docs/$'
       path: '/$'
@@ -2828,6 +2848,7 @@ declare module '@tanstack/react-router' {
 
 interface LibraryIdVersionDocsRouteChildren {
   LibraryIdVersionDocsSplatRoute: typeof LibraryIdVersionDocsSplatRoute
+  LibraryIdVersionDocsBlogRoute: typeof LibraryIdVersionDocsBlogRoute
   LibraryIdVersionDocsCommunityResourcesRoute: typeof LibraryIdVersionDocsCommunityResourcesRoute
   LibraryIdVersionDocsContributorsRoute: typeof LibraryIdVersionDocsContributorsRoute
   LibraryIdVersionDocsNpmStatsRoute: typeof LibraryIdVersionDocsNpmStatsRoute
@@ -2842,6 +2863,7 @@ interface LibraryIdVersionDocsRouteChildren {
 
 const LibraryIdVersionDocsRouteChildren: LibraryIdVersionDocsRouteChildren = {
   LibraryIdVersionDocsSplatRoute: LibraryIdVersionDocsSplatRoute,
+  LibraryIdVersionDocsBlogRoute: LibraryIdVersionDocsBlogRoute,
   LibraryIdVersionDocsCommunityResourcesRoute:
     LibraryIdVersionDocsCommunityResourcesRoute,
   LibraryIdVersionDocsContributorsRoute: LibraryIdVersionDocsContributorsRoute,
diff --git a/src/routes/$libraryId/$version.docs.blog.tsx b/src/routes/$libraryId/$version.docs.blog.tsx
new file mode 100644
index 000000000..1cb1f160b
--- /dev/null
+++ b/src/routes/$libraryId/$version.docs.blog.tsx
@@ -0,0 +1,111 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import * as v from 'valibot'
+import { ArrowLeft } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { DocContainer } from '~/components/DocContainer'
+import { DocTitle } from '~/components/DocTitle'
+import { BlogCard } from '~/components/BlogCard'
+import { BlogAuthorFilter } from '~/components/BlogAuthorFilter'
+import { getLibrary, type LibraryId } from '~/libraries'
+import { getDistinctAuthors, getPostsForLibrary } from '~/utils/blog'
+
+const searchSchema = v.object({
+  author: v.fallback(v.optional(v.string()), undefined),
+})
+
+export const Route = createFileRoute('/$libraryId/$version/docs/blog')({
+  validateSearch: searchSchema,
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { libraryId } = Route.useParams()
+  const { author } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const library = getLibrary(libraryId as LibraryId)
+
+  const posts = getPostsForLibrary(libraryId as LibraryId)
+  const authors = getDistinctAuthors(posts)
+
+  const filteredPosts = author
+    ? posts.filter((post) => post.authors.includes(author))
+    : posts
+
+  return (
+    <DocContainer>
+      <div
+        className={twMerge(
+          'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[1200px]',
+        )}
+      >
+        <div
+          className={twMerge('flex overflow-auto flex-col w-full p-4 lg:p-6')}
+        >
+          <Link
+            to="/blog"
+            className="inline-flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to all posts
+          </Link>
+
+          <DocTitle>{library.name} Blog</DocTitle>
+          <p className="text-gray-600 dark:text-gray-400 mt-2">
+            Posts about {library.name}.
+          </p>
+
+          {authors.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-3 mt-6">
+              <label
+                htmlFor="docs-blog-author-filter"
+                className="text-sm font-medium text-gray-600 dark:text-gray-400"
+              >
+                Author
+              </label>
+              <div id="docs-blog-author-filter" className="w-64 max-w-full">
+                <BlogAuthorFilter
+                  authors={authors}
+                  selected={author}
+                  onSelect={(nextAuthor) =>
+                    navigate({
+                      search: () => ({ author: nextAuthor }),
+                      replace: true,
+                    })
+                  }
+                />
+              </div>
+            </div>
+          ) : null}
+
+          <section className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
+            {filteredPosts.map((post) => (
+              <BlogCard
+                key={post.slug}
+                post={{
+                  slug: post.slug,
+                  title: post.title,
+                  published: post.published,
+                  excerpt: post.excerpt,
+                  headerImage: post.headerImage,
+                  authors: post.authors,
+                  library: post.library,
+                }}
+                showLibraryBadges={false}
+              />
+            ))}
+          </section>
+
+          {filteredPosts.length === 0 ? (
+            <div className="text-center text-gray-600 dark:text-gray-400 py-12">
+              {posts.length === 0
+                ? `No blog posts yet for ${library.name}.`
+                : `No posts found${author ? ` by ${author}` : ''}.`}
+            </div>
+          ) : null}
+
+          <div className="h-12" />
+        </div>
+      </div>
+    </DocContainer>
+  )
+}
diff --git a/src/routes/blog.index.tsx b/src/routes/blog.index.tsx
index ea4e59458..c41fb7555 100644
--- a/src/routes/blog.index.tsx
+++ b/src/routes/blog.index.tsx
@@ -1,49 +1,24 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { Card } from '~/components/Card'
-import {
-  formatAuthors,
-  formatPublishedDate,
-  getPublishedPosts,
-} from '~/utils/blog'
+import * as v from 'valibot'
+import { BlogCard, type BlogCardPost } from '~/components/BlogCard'
+import { BlogAuthorFilter } from '~/components/BlogAuthorFilter'
+import { getDistinctAuthors, getPublishedPosts } from '~/utils/blog'
 
 import { Footer } from '~/components/Footer'
 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 { libraries, type LibrarySlim } from '~/libraries'
 import { LibrariesWidget } from '~/components/LibrariesWidget'
+import { Card } from '~/components/Card'
 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
-  title: string
-  published: string
-  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 searchSchema = v.object({
+  author: v.fallback(v.optional(v.string()), undefined),
+})
 
 const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
   async () => {
@@ -66,17 +41,12 @@ const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
         library: post.library,
       }
     })
-
-    // return json(frontMatters, {
-    //   headers: {
-    //     'Cache-Control': 'public, max-age=300, s-maxage=3600',
-    //   },
-    // })
   },
 )
 
 export const Route = createFileRoute('/blog/')({
   staleTime: Infinity,
+  validateSearch: searchSchema,
   loader: () => fetchFrontMatters(),
   notFoundComponent: () => <PostNotFound />,
   component: BlogIndex,
@@ -89,10 +59,30 @@ export const Route = createFileRoute('/blog/')({
   }),
 })
 
+function getLibrariesWithPosts(posts: BlogCardPost[]): LibrarySlim[] {
+  const ids = new Set<string>()
+  for (const post of posts) {
+    if (!post.library) continue
+    for (const id of post.library.split(',')) {
+      ids.add(id.trim())
+    }
+  }
+  return libraries.filter((lib) => ids.has(lib.id))
+}
+
 function BlogIndex() {
-  const frontMatters = Route.useLoaderData() as BlogFrontMatter[]
+  const frontMatters = Route.useLoaderData() as BlogCardPost[]
+  const { author } = Route.useSearch()
+  const navigate = Route.useNavigate()
   const activePartners = partners.filter((d) => d.status === 'active')
 
+  const authors = getDistinctAuthors(frontMatters)
+  const librariesWithPosts = getLibrariesWithPosts(frontMatters)
+
+  const filteredPosts = author
+    ? frontMatters.filter((post) => post.authors.includes(author))
+    : frontMatters
+
   return (
     <div className="flex flex-col max-w-full min-h-screen">
       <div className="flex-1 flex w-full mb-16">
@@ -116,82 +106,71 @@ function BlogIndex() {
                 The latest news and blog posts from TanStack
               </p>
             </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,
-                  library,
-                }) => {
-                  const blogLibraries = getBlogLibraries(library)
 
-                  return (
-                    <Card
-                      key={slug}
-                      as={Link}
-                      to="/blog/$"
-                      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={getNetlifyImageUrl(headerImage)}
-                            alt=""
-                            loading="lazy"
-                            decoding="async"
-                            className="w-full h-full object-cover"
-                          />
-                        </div>
-                      ) : null}
-                      <div className="p-4 md:p-8 flex flex-col gap-4 flex-1 justify-between">
-                        <div>
-                          <div className="text-lg font-extrabold">{title}</div>
-                          <div className="text-xs italic font-light mt-1">
-                            by {formatAuthors(authors)}
-                            {published ? (
-                              <time
-                                dateTime={published}
-                                title={formatPublishedDate(published)}
-                              >
-                                {' '}
-                                on {formatPublishedDate(published)}
-                              </time>
-                            ) : null}
-                          </div>
-                          {excerpt ? (
-                            <p className="text-sm mt-4 text-gray-600 dark:text-gray-400 leading-7 line-clamp-4">
-                              {excerpt}
-                            </p>
-                          ) : null}
-                        </div>
-                        <div>
-                          <div className="text-blue-500 uppercase font-black text-sm">
-                            Read More
-                          </div>
-                        </div>
-                      </div>
-                    </Card>
-                  )
-                },
-              )}
+            <section className="space-y-6">
+              <div className="flex flex-wrap items-center gap-3">
+                <label
+                  htmlFor="blog-author-filter"
+                  className="text-sm font-medium text-gray-600 dark:text-gray-400"
+                >
+                  Author
+                </label>
+                <div id="blog-author-filter" className="w-64 max-w-full">
+                  <BlogAuthorFilter
+                    authors={authors}
+                    selected={author}
+                    onSelect={(nextAuthor) =>
+                      navigate({
+                        search: () => ({ author: nextAuthor }),
+                        replace: true,
+                      })
+                    }
+                  />
+                </div>
+              </div>
+
+              {librariesWithPosts.length ? (
+                <div>
+                  <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
+                    Browse by library
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {librariesWithPosts.map((library) => (
+                      <Link
+                        key={library.id}
+                        to="/$libraryId/$version/docs/blog"
+                        params={{
+                          libraryId: library.id,
+                          version: 'latest',
+                        }}
+                        className={`inline-flex items-center rounded-md px-3 py-1.5 text-xs font-black uppercase shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${library.bgStyle} ${library.badgeTextStyle ?? 'text-white'}`}
+                      >
+                        {library.name.replace('TanStack ', '')}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+            </section>
+
+            <section className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+              {filteredPosts.map((post) => (
+                <BlogCard key={post.slug} post={post} />
+              ))}
             </section>
+
+            {filteredPosts.length === 0 ? (
+              <div className="text-center text-gray-600 dark:text-gray-400 py-8">
+                No posts found
+                {author ? (
+                  <>
+                    {' '}
+                    by <span className="font-medium">{author}</span>
+                  </>
+                ) : null}
+                .
+              </div>
+            ) : null}
           </div>
         </div>
         <RightRail breakpoint="md">
diff --git a/src/utils/authors.ts b/src/utils/authors.ts
new file mode 100644
index 000000000..9ce5630ab
--- /dev/null
+++ b/src/utils/authors.ts
@@ -0,0 +1,7 @@
+import { allMaintainers, type Maintainer } from '~/libraries/maintainers'
+
+export function findMaintainerByAuthorName(
+  name: string,
+): Maintainer | undefined {
+  return allMaintainers.find((maintainer) => maintainer.name === name)
+}
diff --git a/src/utils/blog.ts b/src/utils/blog.ts
index 8ba4732a5..a5d215486 100644
--- a/src/utils/blog.ts
+++ b/src/utils/blog.ts
@@ -1,4 +1,5 @@
 import { allPosts, type Post } from 'content-collections'
+import { findLibrary, type LibraryId, type LibrarySlim } from '~/libraries'
 
 const listJoiner = new Intl.ListFormat('en-US', {
   style: 'long',
@@ -49,3 +50,38 @@ export function getPublishedPosts(): Post[] {
     .filter((post) => !post.draft && isPublishedDateReleased(post.published))
     .sort((a, b) => b.published.localeCompare(a.published))
 }
+
+function isLibrarySlim(
+  library: LibrarySlim | undefined,
+): library is LibrarySlim {
+  return library !== undefined
+}
+
+export function getBlogLibraries(library: string | undefined): LibrarySlim[] {
+  if (!library) {
+    return []
+  }
+
+  return library
+    .split(',')
+    .map((libraryId) => findLibrary(libraryId.trim()))
+    .filter(isLibrarySlim)
+}
+
+export function getPostsForLibrary(libraryId: LibraryId): Post[] {
+  return getPublishedPosts().filter((post) =>
+    getBlogLibraries(post.library).some((lib) => lib.id === libraryId),
+  )
+}
+
+export function getDistinctAuthors(
+  posts: ReadonlyArray<{ authors: string[] }>,
+): string[] {
+  const authors = new Set<string>()
+  for (const post of posts) {
+    for (const author of post.authors) {
+      authors.add(author)
+    }
+  }
+  return [...authors].sort((a, b) => a.localeCompare(b))
+}

From 1fb7903401df8032a065adf0464c93cdf91cdec4 Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Mon, 11 May 2026 13:31:01 -0500
Subject: [PATCH 2/3] pr feedback

---
 src/components/BlogAuthorFilter.tsx | 142 +++++++++++++++++++++-------
 src/libraries/maintainers.ts        |   5 +-
 2 files changed, 113 insertions(+), 34 deletions(-)

diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx
index 66baf758a..8a8da1e41 100644
--- a/src/components/BlogAuthorFilter.tsx
+++ b/src/components/BlogAuthorFilter.tsx
@@ -1,9 +1,15 @@
-import { Select, type SelectOption } from '~/components/Select'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownTrigger,
+} from '~/components/Dropdown'
 import { findMaintainerByAuthorName } from '~/utils/authors'
 import authorFallbackAvatar from '~/images/author-fallback.svg'
 
-const ALL_AUTHORS_VALUE = 'all'
-
 function getAuthorAvatar(name: string): string {
   return findMaintainerByAuthorName(name)?.avatar ?? authorFallbackAvatar
 }
@@ -21,37 +27,107 @@ export function BlogAuthorFilter({
   onSelect,
   className,
 }: BlogAuthorFilterProps) {
-  const available: SelectOption[] = [
-    { label: 'All authors', value: ALL_AUTHORS_VALUE },
-    ...authors.map((name) => ({
-      label: name,
-      value: name,
-      logo: getAuthorAvatar(name),
-    })),
-  ]
-
-  // If the URL has an author that isn't in the post list, surface it anyway
-  // so the trigger renders and the user can still reset to "All authors".
-  if (
-    selected &&
-    selected !== ALL_AUTHORS_VALUE &&
-    !authors.includes(selected)
-  ) {
-    available.push({
-      label: selected,
-      value: selected,
-      logo: getAuthorAvatar(selected),
-    })
-  }
+  // Ignore URL values that don't correspond to a real author in the list.
+  const activeAuthor =
+    selected && authors.includes(selected) ? selected : undefined
 
   return (
-    <Select
-      className={className}
-      selected={selected ?? ALL_AUTHORS_VALUE}
-      available={available}
-      onSelect={(option) =>
-        onSelect(option.value === ALL_AUTHORS_VALUE ? undefined : option.value)
-      }
-    />
+    <div className={twMerge('w-full', className)}>
+      <Dropdown>
+        <DropdownTrigger>
+          <button
+            type="button"
+            className={twMerge(
+              'relative w-full flex items-center gap-2 rounded-md py-1.5 px-2 text-left text-sm cursor-pointer transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+              activeAuthor
+                ? 'bg-blue-50 dark:bg-blue-950/40 ring-1 ring-blue-500/50 text-blue-700 dark:text-blue-200'
+                : 'hover:bg-gray-500/10',
+            )}
+          >
+            <span
+              className={twMerge(
+                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden flex-shrink-0',
+                activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
+              )}
+            >
+              <img
+                height={20}
+                width={20}
+                src={
+                  activeAuthor
+                    ? getAuthorAvatar(activeAuthor)
+                    : authorFallbackAvatar
+                }
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </span>
+            <span className="truncate font-medium flex-1">
+              {activeAuthor ?? 'All authors'}
+            </span>
+            <span className="flex items-center pr-1">
+              <ChevronsUpDown
+                className="h-4 w-4 opacity-40"
+                aria-hidden="true"
+              />
+            </span>
+          </button>
+        </DropdownTrigger>
+        <DropdownContent
+          align="start"
+          className="max-h-80 overflow-auto min-w-[16rem]"
+        >
+          <DropdownItem
+            onSelect={() => onSelect(undefined)}
+            className={twMerge(
+              'pr-8 relative',
+              !activeAuthor
+                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 font-medium'
+                : 'font-normal',
+            )}
+          >
+            <span className="truncate">All authors</span>
+            {!activeAuthor ? (
+              <Check
+                className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
+                aria-hidden="true"
+              />
+            ) : null}
+          </DropdownItem>
+          {authors.length > 0 ? <DropdownSeparator /> : null}
+          {authors.map((name) => {
+            const isSelected = activeAuthor === name
+            return (
+              <DropdownItem
+                key={name}
+                onSelect={() => onSelect(name)}
+                className={twMerge(
+                  'pr-8 pl-2 relative',
+                  isSelected
+                    ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 font-medium'
+                    : 'font-normal',
+                )}
+              >
+                <img
+                  height={20}
+                  width={20}
+                  src={getAuthorAvatar(name)}
+                  alt=""
+                  className="w-5 h-5 rounded object-cover flex-shrink-0"
+                />
+                <span className="truncate">{name}</span>
+                {isSelected ? (
+                  <Check
+                    className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
+                    aria-hidden="true"
+                  />
+                ) : null}
+              </DropdownItem>
+            )
+          })}
+        </DropdownContent>
+      </Dropdown>
+    </div>
   )
 }
diff --git a/src/libraries/maintainers.ts b/src/libraries/maintainers.ts
index 366367cb3..e41cb02e5 100644
--- a/src/libraries/maintainers.ts
+++ b/src/libraries/maintainers.ts
@@ -38,9 +38,11 @@ export const allMaintainers: Maintainer[] = [
       'ranger',
       'store',
       'pacer',
+      'cli',
       'mcp',
       'react-charts',
     ],
+    maintainerOf: ['intent'],
     frameworkExpertise: ['react', 'solid'],
     specialties: ['Architecture', 'Core API', 'Documentation'],
     social: {
@@ -162,7 +164,7 @@ export const allMaintainers: Maintainer[] = [
     isCoreMaintainer: true,
     avatar: 'https://github.com/KyleAMathews.png',
     github: 'KyleAMathews',
-    creatorOf: ['db'],
+    creatorOf: ['db', 'intent'],
     frameworkExpertise: ['react'],
     specialties: ['Sync Engines'],
   },
@@ -306,6 +308,7 @@ export const allMaintainers: Maintainer[] = [
     name: 'Sarah Gerrard',
     avatar: 'https://github.com/ladybluenotes.png',
     github: 'ladybluenotes',
+    creatorOf: ['intent'],
     contributorOf: [
       'ai',
       'config',

From 58c7a64b16f4db7c607c3422c1312255ab981549 Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Mon, 11 May 2026 13:34:29 -0500
Subject: [PATCH 3/3] fix select lint error

---
 src/components/shop/ui/Select.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/shop/ui/Select.tsx b/src/components/shop/ui/Select.tsx
index 50b63d00b..dc98ffcb1 100644
--- a/src/components/shop/ui/Select.tsx
+++ b/src/components/shop/ui/Select.tsx
@@ -94,12 +94,13 @@ export function ShopSelect({
   }
 
   return (
-    <div className={twMerge('relative', className)} onKeyDown={onKeyDown}>
+    <div className={twMerge('relative', className)}>
       <button
         ref={triggerRef}
         type="button"
         aria-haspopup="listbox"
         aria-expanded={open}
+        onKeyDown={onKeyDown}
         onClick={() => {
           setOpen((o) => !o)
           if (!open) setFocused(value ?? options[0]?.value ?? null)