Upgrade to Astro v5 (#1144)

[Upgrade guide here](https://docs.astro.build/en/guides/upgrade-to/v5/#updating-existing-collections)
- Renamed src/content/config.ts to src/content.config.ts
- Updated collection declarations to be explicit and use loaders
- Renamed all instances of 'slug' to 'id'
- Fixed broken draft page functionality to use 'prod' instead of
  'production'

Test plan:
- Confirm guides, collections and api docs render with no visual
  regressions

package.json

@@ -11,15 +11,15 @@
     "integration": "vitest --watch=false --config vitest.integration.config.js"
   },
   "devDependencies": {
-    "@astrojs/markdoc": "^0.11.5",
-    "@astrojs/tailwind": "^5.1.1",
-    "@astrojs/vue": "^4.5.2",
+    "@astrojs/markdoc": "0.12.1",
+    "@astrojs/tailwind": "5.1.3",
+    "@astrojs/vue": "5.0.1",
     "@babel/eslint-parser": "^7.14.7",
     "@eslint/js": "^9.10.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@headlessui/vue": "^1.6.0",
     "@tailwindcss/typography": "^0.5.15",
-    "astro": "^4.16.7",
+    "astro": "5.0.3",
     "astro-expressive-code": "^0.38.3",
     "eslint": "^9.10.0",
     "eslint-plugin-astro": "^1.2.4",

src/components/Navigation.vue

@@ -43,7 +43,7 @@
                 <a
                   role="menuitem"
                   class="block py-2 pl-6 text-xs text-gray-600"
-                  :href="`${navigationChild.path}#${navigationGrandchild.slug}`"
+                  :href="`${navigationChild.path}#${navigationGrandchild.id}`"
                 >
                   {{ navigationGrandchild.text }}
                 </a>

src/components/TocNav.vue

@@ -13,17 +13,17 @@
     <ol class="mt-4">
       <li
         v-for="heading in visibleHeadings"
-        :key="heading.slug"
+        :key="heading.id"
       >
         <a
-          :href="`#${heading.slug}`"
+          :href="`#${heading.id}`"
           class="flex truncate border-l-2 text-sm p-squish-2 hover:border-content-primary hover:text-content-primary"
           :class="[
-            visibleHeadingId === heading.slug ?
+            visibleHeadingId === heading.id ?
               'border-brand-accent text-content-primary':
               'text-content-tertiary'
           ]"
-          @click="handleTocClick(heading.slug)"
+          @click="handleTocClick(heading.id)"
         >
           <span
             :class="{

src/content.config.ts

@@ -0,0 +1,53 @@
+import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const guides = defineCollection({
+  loader: glob({ pattern: '**/*.mdoc', base: "./src/content/guides" }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    img: z.string().optional(),
+    draft: z.boolean().optional().default(false),
+    nav: z.object({
+      title: z.string().optional(),
+      path: z.string(),
+      order: z.number(),
+    }),
+  }),
+});
+
+const connections = defineCollection({
+  loader: glob({ pattern: '**/*.mdoc', base: "./src/content/connections" }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    img: z.string().optional(),
+    draft: z.boolean().optional().default(false),
+    nav: z.object({
+      title: z.string().optional(),
+      path: z.string(),
+      order: z.number(),
+    }),
+  }),
+});
+
+const api = defineCollection({
+  loader: glob({ pattern: '**/*.mdoc', base: "./src/content/api" }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    img: z.string().optional(),
+    draft: z.boolean().optional().default(false),
+    nav: z.object({
+      title: z.string().optional(),
+      path: z.string(),
+      order: z.number(),
+    }),
+  }),
+});
+
+export const collections = {
+  guides,
+  connections,
+  api,
+};

src/layouts/BaseLayout.astro

@@ -3,7 +3,6 @@ import AppShell from '../components/AppShell.astro';
 import MessagesBubbleDouble from '../components/icons/MessagesBubbleDouble.vue';
 import Footer from '../components/Footer.astro';
 import '../assets/css/tailwind.css';
-import { getCollection } from '../utils/getCollection';
 
 export function getStaticPaths() {
   return [

src/navigation/Page.js

@@ -18,9 +18,9 @@ class Page {
   }
 
   static fromContent(content) {
-    const { collection, slug, data: frontmatter, headings } = content;
+    const { collection, id, data: frontmatter, headings } = content;
     return new Page({
-      path: `/${collection}/${slug}`,
+      path: `/${collection}/${id}`,
       title: frontmatter.title,
       nav: frontmatter.nav,
       headings,

src/navigation/__tests__/Navigation.test.js

@@ -322,8 +322,8 @@ describe('Navigation', () => {
                 },
               },
               headings: [
-                { depth: 2, slug: 'restrictions', text: 'Restrictions' },
-                { depth: 2, slug: 'pre-auth-flow', text: 'Pre Auth Flow' },
+                { depth: 2, id: 'restrictions', text: 'Restrictions' },
+                { depth: 2, id: 'pre-auth-flow', text: 'Pre Auth Flow' },
               ]
             },
           ],
@@ -343,8 +343,8 @@ describe('Navigation', () => {
                       path: 'Reference/Merchant Integrations',
                     },
                     headings: [
-                      { depth: 2, slug: 'restrictions', text: 'Restrictions' },
-                      { depth: 2, slug: 'pre-auth-flow', text: 'Pre Auth Flow' },
+                      { depth: 2, id: 'restrictions', text: 'Restrictions' },
+                      { depth: 2, id: 'pre-auth-flow', text: 'Pre Auth Flow' },
                     ]
                   }),
                 ],

src/navigation/__tests__/Page.test.js

@@ -5,7 +5,7 @@ describe('Page', () => {
     it('should return page when passed content', () => {
       const content = {
         collection: 'guides',
-        slug: 'farmlands-pos-guide',
+        id: 'farmlands-pos-guide',
         data: {
           title: 'Farmlands POS Integration Guide',
           nav: {

src/navigation/apiNavigation.js

@@ -1,4 +1,5 @@
 import { getCollection } from '../utils/getCollection';
+import { render } from 'astro:content';
 import Navigation from '../navigation/Navigation';
 
 const nav = [
@@ -22,7 +23,7 @@ const nav = [
 
 const collections = await getCollection('api');
 const content = await Promise.all(collections.map(async page => {
-  const { headings } = await page.render();
+  const { headings } = await render(page);
   page.headings = headings.filter(heading => heading.depth === 2);
   return page;
 }));

src/navigation/guideNavigation.js

@@ -1,4 +1,5 @@
 import { getCollection } from '../utils/getCollection';
+import { render } from 'astro:content';
 import Navigation from '../navigation/Navigation';
 
 const nav = [
@@ -15,7 +16,7 @@ const collections = await Promise.all([
 ]);
 
 const content = await Promise.all(collections.map(async page => {
-  const { headings } = await page.render();
+  const { headings } = await render(page);
   page.headings = headings.filter(heading => heading.depth === 2);
   return page;
 }));

src/pages/api/[...slug].astro → src/pages/api/[...id].astro

@@ -1,19 +1,20 @@
 ---
 import { getCollection } from '../../utils/getCollection';
+import { render } from 'astro:content';
 import Prose from '../../components/Prose.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import navigation from '../../navigation/apiNavigation';
 
 export async function getStaticPaths() {
   const api = await getCollection('api');
   return api.map(entry => ({
-    params: { slug: entry.slug },
+    params: { id: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 const previewImg = entry.data.img || '/default-cover.jpg';
 const { title, description } = entry.data;
 ---

src/pages/connections/[...slug].astro → src/pages/connections/[...id].astro

@@ -1,18 +1,19 @@
 ---
 import { getCollection } from '../../utils/getCollection';
+import { render } from 'astro:content';
 import FarmlandsLayout from '../../layouts/FarmlandsLayout.astro';
 import navigation from '../../navigation/guideNavigation';
 
 export async function getStaticPaths() {
   const connections = await getCollection('connections');
   return connections.map(entry => ({
-    params: { slug: entry.slug },
+    params: { id: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 const { title, description, img } = entry.data;
 ---
 <FarmlandsLayout title={title} description={description} img={img} navigation={navigation}>

src/pages/guides/[...slug].astro → src/pages/guides/[...id].astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from '../../utils/getCollection';
+import { render } from 'astro:content';
 import Prose from '../../components/Prose.astro';
 import TocNav from '../../components/TocNav.vue';
 import BaseLayout from '../../layouts/BaseLayout.astro';
@@ -8,13 +9,13 @@ import navigation from '../../navigation/guideNavigation';
 export async function getStaticPaths() {
   const guides = await getCollection('guides');
   return guides.map(entry => ({
-    params: { slug: entry.slug },
+    params: { id: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content, headings } = await entry.render();
+const { Content, headings } = await render(entry);
 const previewImg = entry.data.img || '/default-cover.jpg';
 const { title, description } = entry.data;
 ---

src/pages/index.astro

@@ -2,7 +2,6 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import FeaturedContentCard from '../components/FeaturedContentCard.astro';
 import { getEntry } from 'astro:content';
-import { getCollection } from '../utils/getCollection';
 import navigation from '../navigation/guideNavigation';
 const paymentFlowsGuide = await getEntry('guides', 'payment-flows');
 const farmlandsPortal = await getEntry('guides', 'farmlands-portal');
@@ -40,21 +39,21 @@ const img = '/homepage-preview.png';
         title={paymentFlowsGuide.data.title}
         description={paymentFlowsGuide.data.description}
         img={paymentFlowsGuide.data.img}
-        slug={paymentFlowsGuide.slug}
+        id={paymentFlowsGuide.id}
         type="guide"
       />
       <FeaturedContentCard
         title={farmlandsPortal.data.title}
         description={farmlandsPortal.data.description}
         img={farmlandsPortal.data.img}
-        slug={farmlandsPortal.slug}
+        id={farmlandsPortal.id}
         type="guide"
       />
       <FeaturedContentCard
         title={farmlandsPosIntegrationGuide.data.title}
         description={farmlandsPosIntegrationGuide.data.description}
         img={farmlandsPosIntegrationGuide.data.img}
-        slug={farmlandsPosIntegrationGuide.id}
+        id={farmlandsPosIntegrationGuide.id}
         type="guide"
       />
       <FeaturedContentCard

src/utils/getCollection.js

@@ -2,6 +2,6 @@ import { getCollection as get } from 'astro:content';
 
 export async function getCollection(collection) {
   return await get(collection, ({ data }) => {
-    return import.meta.env.MODE !== 'production' || !data.draft;
+    return import.meta.env.MODE !== 'prod' || !data.draft;
   });
 }