Migrate content collections to all use loaders (#1964)

Author: delucis

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

@@ -1,7 +1,7 @@
 import { defineCollection } from 'astro:content';
 import { file, glob } from 'astro/loaders';
 import { z } from 'astro/zod';
-import authors from '../data/authors/authors.json';
+import authors from './data/authors/authors.json';
 
 export const IntegrationCategories = new Map([
 	['recent', 'Recently Added'],
@@ -53,6 +53,7 @@ export const collections = {
 				.strict(),
 	}),
 	blog: defineCollection({
+		loader: glob({ base: './src/content/blog', pattern: '*.mdx' }),
 		schema: z.object({
 			title: z.string().describe('The blog post title.'),
 			description: z
@@ -101,6 +102,7 @@ export const collections = {
 		}),
 	}),
 	caseStudies: defineCollection({
+		loader: glob({ base: './src/content/caseStudies', pattern: '*.mdx' }),
 		schema: z
 			.object({
 				seo: seoSchema.optional(),
@@ -119,6 +121,7 @@ export const collections = {
 			.transform((study) => ({ ...study, isCaseStudy: true })),
 	}),
 	integrations: {
+		loader: glob({ base: './src/content/integrations', pattern: '*.md' }),
 		schema: z.object({
 			name: z.string().describe('Name of the package as it is published to NPM'),
 			title: z
@@ -140,6 +143,7 @@ export const collections = {
 		}),
 	},
 	pages: defineCollection({
+		loader: glob({ base: './src/content/pages', pattern: '**/*.md' }),
 		schema: ({ image }) =>
 			z.discriminatedUnion('pageLayout', [
 				z.object({
@@ -157,9 +161,11 @@ export const collections = {
 			]),
 	}),
 	partials: {
+		loader: glob({ base: './src/content/partials', pattern: '*.md' }),
 		schema: z.object({}),
 	},
 	quotes: {
+		loader: glob({ base: './src/content/quotes', pattern: '*.md' }),
 		schema: z.object({
 			author: z.object({
 				handle: z.string(),
@@ -173,7 +179,13 @@ export const collections = {
 		}),
 	},
 	showcase: defineCollection({
-		type: 'data',
+		loader: glob({
+			base: './src/content/showcase',
+			pattern: '*.yml',
+			// Showcase filenames are based on the site URL, and we don’t want Astro to strip out periods,
+			// so we just remove the file extension and otherwise do nothing.
+			generateId: ({ entry }) => entry.split('.').slice(0, -1).join('.'),
+		}),
 		schema: ({ image }) =>
 			z.object({
 				title: z

src/helpers/integrations.ts

@@ -1,5 +1,5 @@
 import { type CollectionEntry, getCollection } from 'astro:content';
-import { IntegrationCategories } from '~/content/config.js';
+import { IntegrationCategories } from '~/content.config.js';
 import type { MapKeys } from './types.ts';
 
 interface IntegrationOptions {

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

@@ -1,22 +1,22 @@
 ---
 import { Image } from 'astro:assets';
-import { type CollectionEntry, getCollection } from 'astro:content';
+import { type CollectionEntry, getCollection, render } from 'astro:content';
 import MainLayout from '~/layouts/MainLayout.astro';
 
 export async function getStaticPaths() {
 	const pages = await getCollection('pages');
 
 	return pages.map((page) => {
 		return {
-			params: { slug: page.slug },
+			params: { slug: page.id },
 			props: { page },
 		};
 	});
 }
 
 const { page } = Astro.props as { page: CollectionEntry<'pages'> };
 const { seo, pageLayout } = page.data;
-const { Content } = await page.render();
+const { Content } = await render(page);
 ---
 
 <MainLayout {...seo}>

src/pages/_components/LatestBlogPostLink.astro

@@ -13,7 +13,7 @@ const latestBlogPost = blogPostsWithBanner
 {
 	latestBlogPost && (
 		<PillLink
-			href={`/blog/${latestBlogPost.slug}/`}
+			href={`/blog/${latestBlogPost.id}/`}
 			title={latestBlogPost.data.homepageLink!.title}
 			subtitle={latestBlogPost.data.homepageLink!.subtitle}
 		/>

src/pages/blog/[...page].astro

@@ -35,7 +35,7 @@ const featuredPosts = [
 	'netlify-official-deployment-partner',
 	'2023-web-framework-performance-report',
 ]
-	.map((slug) => allPosts.find((post) => post.slug === slug))
+	.map((slug) => allPosts.find((post) => post.id === slug))
 	.filter(Boolean) as CollectionEntry<'blog'>[];
 ---
 
@@ -65,7 +65,7 @@ const featuredPosts = [
 							<li>
 								<a
 									class="body link-underline border-astro-pink-light text-lg text-astro-pink-light"
-									href={`/blog/${post.slug}/`}
+									href={`/blog/${post.id}/`}
 									data-astro-prefetch
 								>
 									{post?.data.title}

src/pages/blog/[slug].astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets';
-import { type CollectionEntry, getCollection, getEntry } from 'astro:content';
+import { type CollectionEntry, getCollection, getEntry, render } from 'astro:content';
 import { format } from 'date-fns';
 import Avatar from '~/components/Avatar.astro';
 import { resolveCoverImage, resolveSocialImage } from '~/content/blog/_resolveImage.js';
@@ -17,15 +17,15 @@ export async function getStaticPaths() {
 	const blog = await getCollection('blog');
 
 	return blog.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: { post },
 	}));
 }
 
 const { post } = Astro.props;
 
-const { data, render } = post;
-const { Content } = await render();
+const { data } = post;
+const { Content } = await render(post);
 
 const coverImage = await resolveCoverImage(post);
 const socialImage = await resolveSocialImage(post);

src/pages/blog/_components/BlogLinkCard.astro

@@ -24,7 +24,7 @@ const base = post.collection === 'caseStudies' ? 'case-studies' : 'blog';
 	{image && <Image src={image} alt="" width="1000" />}
 	<div class="px-4 py-6 flex flex-col gap-4">
 		<a
-			href={`/${base}/${post.slug}/`}
+			href={`/${base}/${post.id}/`}
 			class="text-pretty heading-4 md:heading-3 text-white no-underline outline-none after:absolute after:inset-0"
 		>
 			{post.data.title}

src/pages/blog/_components/BlogPostPreview.astro

@@ -6,7 +6,7 @@ import { resolveCoverImage } from '~/content/blog/_resolveImage.js';
 export type Props = {
 	isCaseStudy: boolean;
 	post: {
-		slug: string;
+		id: string;
 		data: {
 			title: string;
 			description: string;
@@ -24,7 +24,7 @@ const image = await resolveCoverImage(post);
 
 <article
 	class="relative border border-astro-gray-500 bg-astro-gray-600 p-4 outline-astro-pink-light transition-transform duration-300 ease-out focus-within:outline hover:scale-[1.03]"
-	aria-labelledby={post.slug}
+	aria-labelledby={post.id}
 >
 	<header>
 		<time class="code text-astro-gray-200" datetime={post.data.publishDate.toISOString()}>
@@ -48,9 +48,9 @@ const image = await resolveCoverImage(post);
 	</div>
 
 	<div class="mt-6 grid gap-x-16 gap-y-4 md:grid-cols-2">
-		<h3 class="heading-4 md:heading-3" id={post.slug}>
+		<h3 class="heading-4 md:heading-3" id={post.id}>
 			<a
-				href={isCaseStudy ? `/case-studies/${post.slug}/` : `/blog/${post.slug}/`}
+				href={isCaseStudy ? `/case-studies/${post.id}/` : `/blog/${post.id}/`}
 				data-astro-prefetch
 				class="outline-none after:absolute after:inset-0"
 			>

src/pages/case-studies/[slug].astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets';
-import { type CollectionEntry, getCollection, getEntry } from 'astro:content';
+import { type CollectionEntry, getCollection, getEntry, render } from 'astro:content';
 import { format } from 'date-fns';
 import houstonWink from '~/assets/houston_wink.webp';
 import Avatar from '~/components/Avatar.astro';
@@ -14,15 +14,15 @@ export type Props = {
 export async function getStaticPaths() {
 	const items = await getCollection('caseStudies');
 	return items.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: { post },
 	}));
 }
 
 const { post } = Astro.props;
 
-const { data, render } = post;
-const { Content } = await render();
+const { data } = post;
+const { Content } = await render(post);
 
 const socialImage = await resolveSocialImage(post);
 

src/pages/case-studies/_components/CaseStudyCard.astro

@@ -4,7 +4,7 @@ import { resolveCoverImage } from '~/content/blog/_resolveImage.js';
 
 export type Props = {
 	post: {
-		slug: string;
+		id: string;
 		data: {
 			title: string;
 			description: string;
@@ -21,7 +21,7 @@ const image = await resolveCoverImage(post);
 
 <article
 	class="relative border border-astro-gray-500 bg-astro-gray-600 p-4 pt-0 outline-astro-pink-light transition-transform duration-300 ease-out focus-within:outline hover:scale-[1.03]"
-	aria-labelledby={post.slug}
+	aria-labelledby={post.id}
 >
 	<div class="-mx-4">
 		{
@@ -39,9 +39,9 @@ const image = await resolveCoverImage(post);
 	</div>
 
 	<div class="mt-6 flex flex-col gap-x-16 gap-y-4">
-		<h2 class="heading-4 md:heading-3" id={post.slug}>
+		<h2 class="heading-4 md:heading-3" id={post.id}>
 			<a
-				href={`/case-studies/${post.slug}/`}
+				href={`/case-studies/${post.id}/`}
 				data-astro-prefetch
 				class="outline-none after:absolute after:inset-0"
 			>