Migrate to Astro 5 content layer API

astro.config.mjs

@@ -26,9 +26,6 @@ export default defineConfig({
       start_url: "/",
     }
   })],
-  legacy: {
-    collections: true, // TODO: migrate to Content Layer API
-  },
   markdown: {
     shikiConfig: {
       theme: syntaxTheme,

src/components/pages/blog/BlogListEntry.astro

@@ -5,7 +5,7 @@ const { post } = Astro.props;
 ---
 
 <article
-  data-category={post.slug.split('/')[0]}
+  data-category={post.id.split('/')[0]}
   class="font-light"
   aria-hidden="false"
 >

src/components/pages/download/DownloadAccordion.astro

@@ -1,19 +1,19 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 
 const { family = 'nix' } = Astro.props;
 const accordionId = `download-${family}-accordion`;
 
-let downloadOptions = (await getCollection('download')).filter(
-  (option) => option.data.family === family,
-);
+let downloadOptions = (await getCollection('download'))
+  .sort((a, b) => a.id.localeCompare(b.id))
+  .filter((option) => option.data.family === family);
 ---
 
 <div id={accordionId} class="download-accordion">
   <div class="download-accordion-menu">
     {
       downloadOptions.map(async (option) => {
-        const { Content } = await option.render();
+        const { Content } = await render(option);
         const needsInstallInfix =
           option.data.family === 'nix' && option.data.platform !== 'more';
         const optionId = `${option.data.family}-${needsInstallInfix ? 'install-' : ''}${option.data.platform}`;

src/content.config.ts

@@ -0,0 +1,66 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const blog = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/blog' }),
+});
+
+const community = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.yaml', base: './src/content/community' }),
+});
+
+const download = defineCollection({
+  loader: glob({
+    pattern: '**/[^_]*.{md,mdx}',
+    base: './src/content/download',
+  }),
+});
+
+const explore = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.yaml', base: './src/content/explore' }),
+});
+
+const landing = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.yaml', base: './src/content/landing' }),
+});
+
+const landingFeatures = defineCollection({
+  loader: glob({
+    pattern: '**/[^_]*.{md,mdx}',
+    base: './src/content/landing-features',
+  }),
+});
+
+const learningManuals = defineCollection({
+  loader: glob({
+    pattern: '**/[^_]*.{md,mdx}',
+    base: './src/content/learning-manuals',
+  }),
+});
+
+const menus = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.yaml', base: './src/content/menus' }),
+});
+
+// TODO get `research` from astro collection instead of hardcoded json
+
+const sponsors = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.yaml', base: './src/content/sponsors' }),
+});
+
+const teams = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/teams' }),
+});
+
+export const collections = {
+  blog,
+  community,
+  download,
+  explore,
+  landing,
+  landingFeatures,
+  learningManuals,
+  menus,
+  sponsors,
+  teams,
+};

src/lib/utils.js

@@ -3,11 +3,11 @@ import MarkdownIt from 'markdown-it';
 export function generatePathFromPost(post, attachBlog = true) {
   const postDate = new Date(post.data.date);
   return `/${attachBlog ? 'blog/' : ''}${
-    post.slug.split('/')[0] +
+    post.id.split('/')[0] +
     '/' +
     postDate.getFullYear() +
     '/' +
-    post.slug.split('/').pop().split('_').pop()
+    post.id.split('/').pop().split('_').pop()
   }`;
 }
 

src/pages/blog/[category].astro

@@ -10,7 +10,7 @@ export async function getStaticPaths() {
   const blogEntries = await getCollection('blog');
 
   const filteredEntries = blogEntries.reduce((groups, entry) => {
-    const category = entry.slug.split('/')[0];
+    const category = entry.id.split('/')[0];
     if (!groups[category]) {
       groups[category] = {
         params: {

src/pages/blog/[category]/[year].astro

@@ -10,7 +10,7 @@ export async function getStaticPaths() {
   const blogEntries = await getCollection('blog');
 
   const filteredEntries = blogEntries.reduce((groups, entry) => {
-    const category = entry.slug.split('/')[0];
+    const category = entry.id.split('/')[0];
     const postYear = new Date(entry.data.date).getFullYear();
     if (!groups[category + postYear]) {
       groups[category + postYear] = {

src/pages/blog/[category]/[year]/[id].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import Container from '../../../../components/layout/Container.astro';
 import PageHeader from '../../../../components/layout/PageHeader.astro';
 import Layout from '../../../../layouts/Layout.astro';
@@ -8,16 +8,16 @@ export async function getStaticPaths() {
   const blogEntries = await getCollection('blog');
   return blogEntries.map((entry) => ({
     params: {
-      category: entry.slug.split('/')[0],
+      category: entry.id.split('/')[0],
       year: new Date(entry.data.date).getFullYear(),
-      id: entry.slug.split('/').pop().split('_').pop(),
+      id: entry.id.split('/').pop().split('_').pop(),
     },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
 <Layout title=`${entry.data.title} | Blog`>

src/pages/community.astro

@@ -16,6 +16,8 @@ import Layout from '../layouts/Layout.astro';
 const meetups = await getEntry('community', 'meetups');
 const teams = await getCollection('teams');
 
+teams.sort((a, b) => a.id.localeCompare(b.id));
+
 const nixcons = [
   {
     title: 'NixCon 2024 - Berlin',
@@ -422,7 +424,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           teams.map((team) => (
             <li class="flex grow basis-72 flex-col items-center gap-2 text-center text-white md:items-start md:text-left [&>a]:inline-block">
               <img
-                src={`/images/teams/${team.slug.split('_')[1]}.svg`}
+                src={`/images/teams/${team.id.split('_')[1]}.svg`}
                 alt={`${team.data.name} Logo`}
                 class="h-24"
               />
@@ -432,7 +434,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
               </p>
               <Button
                 color="green"
-                href={'/community/teams/' + team.slug.split('_')[1]}
+                href={'/community/teams/' + team.id.split('_')[1]}
               >
                 Read more
               </Button>
@@ -461,9 +463,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
         <ul class="mx-auto mt-2 list-disc pl-8 md:w-72 md:pl-10">
           {
             teams
-              .filter(
-                (team) => team.slug.split('_')[1] === 'foundation-board',
-              )[0]
+              .find((team) => team.id.split('_')[1] === 'foundation-board')
               .data.members.map((member) => (
                 <li class="mb-1">
                   {member.name}

src/pages/community/teams/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 
 import Container from '../../../components/layout/Container.astro';
 import PageHeader from '../../../components/layout/PageHeader.astro';
@@ -9,13 +9,13 @@ import Layout from '../../../layouts/Layout.astro';
 export async function getStaticPaths() {
   const teamEntries = await getCollection('teams');
   return teamEntries.map((entry) => ({
-    params: { slug: entry.slug.split('_')[1] },
+    params: { slug: entry.id.split('_')[1] },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
 <Layout title={entry.data.name}>

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection, getEntry, render } from 'astro:content';
 import Container from '../components/layout/Container.astro';
 import Button from '../components/ui/Button.astro';
 import NixosSearchInput from '../components/ui/NixosSearchInput.astro';
@@ -10,17 +10,20 @@ import Asciinema from '../components/ui/Asciinema.astro';
 import Banner from '../components/ui/Banner.astro';
 import InlineSVG from '../components/util/InlineSVG.astro';
 
-const landingFeatures = await getCollection('landing-features');
+const landingFeatures = await getCollection('landingFeatures');
 const demos = await getEntry('landing', 'demos');
 const posts = await getCollection('blog');
+
+landingFeatures.sort((a, b) => a.id.localeCompare(b.id));
+
 posts
   .sort((a, b) => {
     const dateA = new Date(a.data.date);
     const dateB = new Date(b.data.date);
     return dateA > dateB ? -1 : 1;
   })
   .filter((p) => {
-    return p.slug.split('/')?.[0] === 'announcements';
+    return p.id.split('/')?.[0] === 'announcements';
   })
   .reverse();
 ---
@@ -77,7 +80,7 @@ posts
     <Container class="grid gap-8 md:grid-cols-3 md:gap-4">
       {
         landingFeatures.map(async (feature) => {
-          const { Content } = await feature.render();
+          const { Content } = await render(feature);
           return (
             <div class="flex flex-col text-center">
               <InlineSVG

src/pages/learn.astro

@@ -1,13 +1,15 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import Container from '../components/layout/Container.astro';
 import Divider from '../components/layout/Divider.astro';
 import PageHeader from '../components/layout/PageHeader.astro';
 import Button from '../components/ui/Button.astro';
 import NixosSearchInput from '../components/ui/NixosSearchInput.astro';
 import InlineSVG from '../components/util/InlineSVG.astro';
 import Layout from '../layouts/Layout.astro';
-const learningManuals = await getCollection('learning-manuals');
+const learningManuals = await getCollection('learningManuals');
+
+learningManuals.sort((a, b) => a.id.localeCompare(b.id));
 
 const learningFeatures = [
   {
@@ -96,7 +98,7 @@ const learningResources = [
   <Container class="grid items-start gap-4 py-16 md:grid-cols-3">
     {
       learningManuals.map(async (manual) => {
-        const { Content } = await manual.render();
+        const { Content } = await render(manual);
         return (
           <div class="border-0.5 border-nix-blue-darker flex flex-col items-center justify-start gap-4 rounded-2xl p-4">
             <article>