Add Content Collections for the blog page

burnmaniac · burnmaniac · commit a0c0bb37dcf5 · 2025-05-01T22:48:08.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -20,3 +20,7 @@ yarn.lock
 dist
 .vscode/
 .env.local
+
+# Content Collections generated files
+.content-collections
+
diff --git a/app.config.ts b/app.config.ts
@@ -1,5 +1,6 @@
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { defineConfig } from '@tanstack/start/config'
+import contentCollections from "@content-collections/vinxi";
 import tsConfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
@@ -9,6 +10,7 @@ export default defineConfig({
   vite: {
     plugins: [
       tsConfigPaths(),
+      contentCollections(),
       (() => {
         const replacements = [
           // replace `throw Error(p(418))` with `console.error(p(418))`
diff --git a/app/blog/ag-grid-partnership.md b/app/blog/ag-grid-partnership.md
@@ -1,6 +1,6 @@
 ---
 title: TanStack Table + Ag-Grid Partnership
-published: 6/17/2022
+published: 2022-06-17
 authors:
   - Tanner Linsley
   - Niall Crosby
diff --git a/app/blog/announcing-tanstack-form-v1.md b/app/blog/announcing-tanstack-form-v1.md
@@ -1,6 +1,6 @@
 ---
 title: Announcing TanStack Form v1
-published: 03/03/2025
+published: 2025-03-03
 authors:
   - Corbin Crutchley
 ---
diff --git a/app/blog/announcing-tanstack-query-v4.md b/app/blog/announcing-tanstack-query-v4.md
@@ -1,6 +1,6 @@
 ---
 title: Announcing TanStack Query v4
-published: 7/14/2022
+published: 2022-07-14
 authors:
   - Dominik Dorfmeister
 ---
diff --git a/app/blog/announcing-tanstack-query-v5.md b/app/blog/announcing-tanstack-query-v5.md
@@ -1,6 +1,6 @@
 ---
 title: Announcing TanStack Query v5
-published: 10/17/2023
+published: 2023-10-17
 authors:
   - Dominik Dorfmeister
 ---
diff --git a/app/blog/netlify-partnership.md b/app/blog/netlify-partnership.md
@@ -1,6 +1,6 @@
 ---
 title: TanStack + Netlify Partnership
-published: 3/18/2025
+published: 2025-03-18
 authors:
   - Tanner Linsley
 ---
diff --git a/app/blog/tanstack-router-typescript-performance.md b/app/blog/tanstack-router-typescript-performance.md
@@ -1,6 +1,6 @@
 ---
 title: A milestone for TypeScript Performance in TanStack Router
-published: 09/17/2024
+published: 2024-09-17
 authors:
   - Christopher Horobin
 ---
diff --git a/app/blog/why-tanstack-start-and-router.md b/app/blog/why-tanstack-start-and-router.md
@@ -1,6 +1,6 @@
 ---
 title: Why choose TanStack Start and Router?
-published: 12/03/2024
+published: 2024-12-03
 authors:
   - Tanner Linsley
 ---
diff --git a/app/blog/why-tanstack-start-is-ditching-adapters.md b/app/blog/why-tanstack-start-is-ditching-adapters.md
@@ -1,6 +1,6 @@
 ---
 title: Why TanStack Start is Ditching Adapters
-published: 11/22/2024
+published: 2024-11-22
 authors:
   - Tanner Linsley
 ---
diff --git a/app/routes/_libraries/blog.index.tsx b/app/routes/_libraries/blog.index.tsx
@@ -1,63 +1,28 @@
-import { Link, createFileRoute, notFound } from '@tanstack/react-router'
+import { Link, createFileRoute } from '@tanstack/react-router'
 
-import { formatAuthors, getPostList } from '~/utils/blog'
+import { formatAuthors } from '~/utils/blog'
 import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
 import { format } from 'date-fns'
 import { Footer } from '~/components/Footer'
-import { extractFrontMatter, fetchRepoFile } from '~/utils/documents.server'
 import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/start'
+import { allPosts } from "content-collections";
 import { setHeaders } from 'vinxi/http'
 
 const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
   async () => {
-    const postInfos = getPostList()
-
-    const frontMatters = await Promise.all(
-      postInfos.map(async (info) => {
-        const filePath = `app/blog/${info.id}.md`
-
-        const file = await fetchRepoFile(
-          'tanstack/tanstack.com',
-          'main',
-          filePath
-        )
-
-        if (!file) {
-          throw notFound()
-        }
-
-        const frontMatter = extractFrontMatter(file)
-
-        setHeaders({
-          'cache-control': 'public, max-age=0, must-revalidate',
-          'cdn-cache-control':
-            'max-age=300, stale-while-revalidate=300, durable',
-          'Netlify-Vary': 'query=payload',
-        })
-
-        return [
-          info.id,
-          {
-            title: frontMatter.data.title,
-            published: frontMatter.data.published,
-            excerpt: frontMatter.excerpt,
-            authors: frontMatter.data.authors as Array<string> | undefined,
-          },
-        ] as const
-      })
-    )
-
-    return frontMatters.sort((a, b) => {
-      if (!a[1].published) {
-        return 1
-      }
+    setHeaders({
+      'cache-control': 'public, max-age=0, must-revalidate',
+      'cdn-cache-control':
+        'max-age=300, stale-while-revalidate=300, durable',
+      'Netlify-Vary': 'query=payload',
+    })
 
-      return (
-        new Date(b[1].published || 0).getTime() -
-        new Date(a[1].published || 0).getTime()
-      )
+    return allPosts.map(post => {
+      return post;
+    }).sort((a, b) => {
+      return new Date(b.published).getTime() -  new Date(a.published).getTime()
     })
 
     // return json(frontMatters, {
@@ -94,11 +59,11 @@ function BlogIndex() {
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
           {frontMatters.map(
-            ([id, { title, published, excerpt, authors = [] }]) => {
+            ({ _meta: {path}, title, published, excerpt, authors = [] }) => {
               return (
                 <Link
-                  key={id}
-                  to={`${id}`}
+                  key={path}
+                  to={`${path}`}
                   className={`flex flex-col gap-4 justify-between
                   border-2 border-transparent rounded-lg p-4 md:p-8
                   transition-all bg-white/100 dark:bg-gray-800
diff --git a/app/utils/blog.ts b/app/utils/blog.ts
@@ -1,32 +1,3 @@
-export function getPostList() {
-  return [
-    {
-      id: 'announcing-tanstack-form-v1',
-    },
-    {
-      id: 'announcing-tanstack-query-v5',
-    },
-    {
-      id: 'announcing-tanstack-query-v4',
-    },
-    {
-      id: 'ag-grid-partnership',
-    },
-    {
-      id: 'tanstack-router-typescript-performance',
-    },
-    {
-      id: 'why-tanstack-start-is-ditching-adapters',
-    },
-    {
-      id: 'why-tanstack-start-and-router',
-    },
-    {
-      id: 'netlify-partnership',
-    },
-  ]
-}
-
 export function formatAuthors(authors: Array<string>) {
   if (!authors.length) {
     return 'TanStack'
diff --git a/content-collections.ts b/content-collections.ts
@@ -0,0 +1,24 @@
+import { defineCollection, defineConfig } from "@content-collections/core";
+import { extractFrontMatter } from '~/utils/documents.server'
+
+const posts = defineCollection({
+  name: "posts",
+  directory: "app/blog",
+  include: "**/*.md",
+  transform: ({ content, ...rest }) => {
+    return {
+      ...rest,
+      ...extractFrontMatter(content),
+    }
+  },
+  schema: (z) => ({
+    title: z.string(),
+    published: z.string().date(),
+    authors: z.string().array()
+  }),
+
+});
+
+export default defineConfig({
+  collections: [posts],
+});
diff --git a/package.json b/package.json
@@ -75,6 +75,8 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@content-collections/core": "^0.8.2",
+    "@content-collections/vinxi": "^0.1.0",
     "@shikijs/transformers": "^1.10.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
