implement content collections

.gitignore

@@ -3,6 +3,7 @@ node_modules
 /.cache
 /build
 /public/*.json
+/.content-collections
 
 # Local env files
 .env

app/routes/blog.tsx

@@ -0,0 +1,17 @@
+import { Link } from "@remix-run/react"
+import { allPosts } from "content-collections"
+
+export default function BlogPage() {
+  return (
+    <ul>
+      {allPosts.map(post => (
+        <li key={post._meta.path}>
+          <Link to={`/blog/${post._meta.path}`} unstable_viewTransition>
+            <h3>{post.title}</h3>
+            <p>{post.description}</p>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}

content-collections.ts

@@ -0,0 +1,15 @@
+import { defineCollection, defineConfig } from "@content-collections/core"
+
+const posts = defineCollection({
+  name: "posts",
+  directory: "content/posts",
+  include: "**/*.md",
+  schema: z => ({
+    title: z.string(),
+    description: z.string(),
+  }),
+})
+
+export default defineConfig({
+  collections: [posts],
+})

content/posts/hello-world.md

@@ -0,0 +1,9 @@
+---
+title: "Hello world"
+description: "This is my first post!"
+---
+
+# Hello world
+
+This is my first post!
+... rest of the content

package.json

@@ -64,6 +64,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.1",
+    "@content-collections/core": "^0.6.0",
+    "@content-collections/remix-vite": "^0.1.1",
     "@remix-run/dev": "^2.10.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",

tsconfig.json

@@ -23,7 +23,8 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./app/*"]
+      "~/*": ["./app/*"],
+      "content-collections": ["./.content-collections/generated"]
     },
 
     // Vite takes care of building everything, not tsc.

vite.config.ts

@@ -3,12 +3,13 @@ import { installGlobals } from "@remix-run/node"
 import { vercelPreset } from "@vercel/remix/vite"
 import { defineConfig } from "vite"
 import tsconfigPaths from "vite-tsconfig-paths"
+import contentCollections from "@content-collections/remix-vite"
 
 installGlobals()
 
 export default defineConfig({
   ssr: {
     noExternal: ["tailwind-merge", "remix-utils"],
   },
-  plugins: [tsconfigPaths(), remix({ presets: [vercelPreset()] })],
+  plugins: [tsconfigPaths(), remix({ presets: [vercelPreset()] }), contentCollections()],
 })