Migrate to Astro 5 content layer API (#1687)

Fixes: #1611

Following
https://docs.astro.build/en/guides/upgrade-to/v5/#updating-existing-collections,
changes of the same type are grouped into commits


- turn off legacy.collections and define `src/content.config.ts`.
Previously we were getting the content config autogenerated by
directory. This is technically still available as a deprecated feature,
but it wouldn't work for us anyway because it only globs on md/mdx files
  
  ```
Auto-generating collections for folders in "src/content/" that are not
defined as collections.
This is deprecated, so you should define these collections yourself in
"src/content.config.ts".
The following collections have been auto-generated: blog, community,
download, explore, landing, landing-features, learning-manuals, menus,
research, sponsors, teams
  ```

  ```
08:35:29 [WARN] [glob-loader] No files found matching
"**/*{.md,.mdx},!**/_*/**/*{.md,.mdx},!**/_*{.md,.mdx}" in directory
"src/content/community"
08:35:29 [WARN] [glob-loader] No files found matching
"**/*{.md,.mdx},!**/_*/**/*{.md,.mdx},!**/_*{.md,.mdx}" in directory
"src/content/explore"
08:35:29 [WARN] [glob-loader] No files found matching
"**/*{.md,.mdx},!**/_*/**/*{.md,.mdx},!**/_*{.md,.mdx}" in directory
"src/content/landing"
08:35:29 [WARN] [glob-loader] No files found matching
"**/*{.md,.mdx},!**/_*/**/*{.md,.mdx},!**/_*{.md,.mdx}" in directory
"src/content/menus"
08:35:29 [WARN] [glob-loader] No files found matching
"**/*{.md,.mdx},!**/_*/**/*{.md,.mdx},!**/_*{.md,.mdx}" in directory
"src/content/sponsors"
08:35:29 [WARN] [glob-loader] No files found matching
"**/*{.md,.mdx},!**/_*/**/*{.md,.mdx},!**/_*{.md,.mdx}" in directory
"src/content/research"
  ```
- replace slug with id. Did not do the same for
`src/pages/community/teams/[...slug].astro` because it wasn't strictly
necessary and the example in the migration guide has an example with
`[slug]` in the filename getting populated from a collection entry in
`getStaticPaths`

- Switch to the new render() function.
> Entries no longer have a render() method, as they are now serializable
plain objects. Instead, import the render() function from astro:content.

- Manually sort collections when necessary. Previously we were relying
on collection entries being sorted lexicographically from the directory,
but this behavior has now changed. Except for blog entries which are
already being sorted by date, we explicitly sort lexicographically
(using
[`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)
because [array sort wants a comparator function that returns negative, 0
or positive to indicate
order](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

> Sort order of generated collections is non-deterministic and
platform-dependent. This means that if you are calling getCollection(),
the order in which entries are returned may be different than before. If
you need a specific order, you must sort the collection entries
yourself.

---------

Co-authored-by: Albert Chae <[email protected]>

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/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}>