Migrate content collections

Author: nojaf

bun.lockb

@@ -12,7 +12,7 @@
     "lint": "bunx --bun prettier . --check"
   },
   "dependencies": {
-    "@astrojs/react": "3.6.2",
+    "@astrojs/react": "4.0.0",
     "@iconify-json/bi": "^1.2.1",
     "@iconify-json/cil": "^1.2.1",
     "@iconify-json/fluent": "^1.2.7",
@@ -28,7 +28,7 @@
     "@iconify-json/uiw": "^1.2.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "astro": "4.16.13",
+    "astro": "5.0.1",
     "astro-icon": "1.1.2",
     "astro-purgecss": "4.8.0",
     "autoprefixer": "^10.4.20",

package.json

@@ -1,7 +1,10 @@
-// 1. Import utilities from `astro:content`
+// 1. Import utilities from `astro:content`
 import { z, defineCollection } from "astro:content";
+import { glob } from 'astro/loaders';
+
 // 2. Define your collection(s)
 const testimonialCollection = defineCollection({
+  loader: glob({ pattern: '**\/[^_]*.md', base: "./src/content/testimonials" }),
   schema: ({ image }) =>
     z.object({
       title: z.string(),
@@ -13,6 +16,7 @@ const testimonialCollection = defineCollection({
 });
 
 const sessionCollection = defineCollection({
+  loader: glob({ pattern: '**\/[^_]*.md', base: "./src/content/sessions" }),
   schema: ({ image }) => {
     return z.object({
       title: z.string(),
@@ -32,6 +36,7 @@ const sessionCollection = defineCollection({
 });
 
 const blogCollection = defineCollection({
+  loader: glob({ pattern: '**\/[^_]*.md', base: "./src/content/blog" }),
   schema: ({ image }) => {
     return z.object({
       title: z.string(),

src/content/config.ts renamed to src/content.config.ts

@@ -1,9 +1,9 @@
 ---
+id: david-schaefer
 title: David Schaefer
 preview: Each one, teach one
-isDraft: true
 author: David Schaefer
-slug: david-schaefer
+isDraft: true
 profilePicture: "../../images/authors/DavidSchaefer.jpg"
 ---
 

src/content/testimonials/DavidSchaefer.md

@@ -1,9 +1,9 @@
 ---
+id: edgar-gonzalez
 title: Edgar Gonzalez
 preview: I went from zero to hero in no time
-isDraft: true
 author: Edgar Gonzalez
-slug: edgar-gonzalez
+isDraft: true
 profilePicture: "../../images/authors/EdgarGonzalez.jpg"
 ---
 

src/content/testimonials/EdgarGonzalez.md

@@ -1,9 +1,9 @@
 ---
+id: florian-verdonck
 title: Florian Verdonck
 preview: Open-source heavily influenced my career
-isDraft: true
 author: Florian Verdonck
-slug: florian-verdonck
+isDraft: true
 profilePicture: "../../images/authors/FlorianVerdonck.jpg"
 ---
 

src/content/testimonials/FlorianVerdonck.md

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 
 export async function getStaticPaths() {
@@ -9,14 +9,14 @@ export async function getStaticPaths() {
     const prevTestimonial = testimonialsEntries.at(
       (index - 1) % testimonialsEntries.length,
     );
-    const prevLink = prevTestimonial && prevTestimonial.slug;
+    const prevLink = prevTestimonial && prevTestimonial.id;
     const nextTestimonial = testimonialsEntries.at(
       (index + 1) % testimonialsEntries.length,
     );
-    const nextLink = nextTestimonial && nextTestimonial.slug;
+    const nextLink = nextTestimonial && nextTestimonial.id;
 
     return {
-      params: { slug: entry.slug },
+      params: { id: entry.id },
       props: {
         entry,
         prevLink,
@@ -28,7 +28,8 @@ export async function getStaticPaths() {
 }
 
 const { entry, prevLink, nextLink, color } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
+console.log(entry);
 const { title, author, profilePicture } = entry.data;
 const pageTitle = `Testimonial of ${title}`;
 const mainTitle = pageTitle;

src/pages/testimonials/[...slug].astro renamed to src/pages/testimonials/[...id].astro

@@ -2,6 +2,7 @@
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
     "strictNullChecks": true,
+    "allowJs": true, // required, and included with all Astro templates
     "types": ["astro/client"],
     "jsx": "react-jsx",
     "jsxImportSource": "react"