WIP to migrate to Astro 5 content layer API

Fixes: #1611

Author: albertchae

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/download/DownloadAccordion.astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 
 const { family = 'nix' } = Astro.props;
 const accordionId = `download-${family}-accordion`;
@@ -13,7 +13,7 @@ let downloadOptions = (await getCollection('download')).filter(
   <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,68 @@
+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' }),
+});
+
+// research is a 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' }),
+});
+
+// The following collections have been auto-generated: blog, community, download, explore, landing, landing-features, learning-manuals, menus, research, sponsors, 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/community.astro

@@ -422,7 +422,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 +432,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 +461,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]
+              .filter((team) => team.id.split('_')[1] === 'foundation-board')[0]
               .data.members.map((member) => (
                 <li class="mb-1">
                   {member.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,7 +10,7 @@ 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');
 posts
@@ -20,7 +20,7 @@ posts
     return dateA > dateB ? -1 : 1;
   })
   .filter((p) => {
-    return p.slug.split('/')?.[0] === 'announcements';
+    return p.id.split('/')?.[0] === 'announcements';
   })
   .reverse();
 ---
@@ -77,7 +77,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,13 @@
 ---
-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');
 
 const learningFeatures = [
   {
@@ -96,7 +96,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>