Upgrade to Astro 5

astro.config.mjs

@@ -13,7 +13,7 @@ import cssnano from "cssnano";
 
 // https://astro.build/config
 export default defineConfig({
-  output: "hybrid",
+  output: "static",
   adapter: cloudflare({
     imageService: "compile",
   }),

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/cloudflare": "12.0.1",
-    "@astrojs/markdoc": "^0.12.1",
+    "@astrojs/markdoc": "^0.12.3",
     "@astrojs/react": "^4.1.0",
     "@astrojs/sitemap": "^3.2.1",
     "@axe-core/playwright": "^4.10.1",

src/content/config.ts → src/content.config.ts

@@ -1,10 +1,11 @@
+import { glob } from "astro/loaders";
 import { z, defineCollection, reference } from "astro:content";
 import type { RoughAnnotationType } from "rough-notation/lib/model";
 import type { NamesakeColor } from "~/data/colors";
 
 export const collections = {
   authors: defineCollection({
-    type: "data",
+    loader: glob({ pattern: "**/[^_]*.yaml", base: "./src/content/authors" }),
     schema: ({ image }) =>
       z.object({
         name: z.string(),
@@ -22,7 +23,7 @@ export const collections = {
   }),
 
   pages: defineCollection({
-    type: "content",
+    loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/pages" }),
     schema: ({ image }) =>
       z.object({
         title: z.string(),
@@ -39,7 +40,7 @@ export const collections = {
   }),
 
   posts: defineCollection({
-    type: "content",
+    loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/posts" }),
     schema: ({ image }) =>
       z.object({
         title: z.string(),
@@ -59,7 +60,7 @@ export const collections = {
   }),
 
   partners: defineCollection({
-    type: "data",
+    loader: glob({ pattern: "**/[^_]*.yaml", base: "./src/content/partners" }),
     schema: ({ image }) =>
       z.object({
         name: z.string(),
@@ -70,7 +71,7 @@ export const collections = {
   }),
 
   press: defineCollection({
-    type: "data",
+    loader: glob({ pattern: "**/[^_]*.yaml", base: "./src/content/press" }),
     schema: ({ image }) =>
       z.object({
         title: z.string(),

src/data/colors.ts

@@ -1,6 +1,6 @@
 type Color = {
+  id: string;
   name: string;
-  slug: string;
   hex: string;
   forText?: boolean;
 };
@@ -17,44 +17,44 @@ export type NamesakeColor =
 
 export const colors: Record<NamesakeColor, Color> = {
   purple: {
+    id: "purple",
     name: "Namesake Purple",
-    slug: "purple",
     hex: "#CDA5EF",
   },
   pink: {
+    id: "pink",
     name: "Pastel Pink",
-    slug: "pink",
     hex: "#ECADD4",
   },
   blue: {
+    id: "blue",
     name: "Pastel Blue",
-    slug: "blue",
     hex: "#96C7F2",
   },
   yellow: {
+    id: "yellow",
     name: "Pastel Yellow",
-    slug: "yellow",
     hex: "#ECDD85",
   },
   green: {
+    id: "green",
     name: "Pastel Green",
-    slug: "green",
     hex: "#97CF9C",
   },
   brown: {
+    id: "brown",
     name: "Pastel Brown",
-    slug: "brown",
     hex: "#DDB896",
   },
   black: {
+    id: "black",
     name: "Photocopy Black",
-    slug: "black",
     hex: "#111111",
     forText: true,
   },
   white: {
+    id: "white",
     name: "Photocopy White",
-    slug: "white",
     hex: "#E1E1E1",
     forText: true,
   },

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

@@ -1,5 +1,5 @@
 ---
-import { getCollection, type CollectionEntry } from "astro:content";
+import { getCollection, type CollectionEntry, render } from "astro:content";
 
 import ProseLayout from "~/layouts/ProseLayout.astro";
 
@@ -11,14 +11,14 @@ export async function getStaticPaths() {
   const pages = await getCollection("pages");
 
   return pages.map((page) => ({
-    params: { slug: page.slug },
-    props: { page },
+    params: { id: page.id },
+    props: page,
   }));
 }
 
 const { page } = Astro.props;
-const { data, render } = page;
-const { Content } = await render();
+const { data } = page;
+const { Content } = await render(page);
 ---
 
 <ProseLayout

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

@@ -2,7 +2,12 @@
 import { Image } from "astro:assets";
 import ProseLayout from "~/layouts/ProseLayout.astro";
 
-import { getCollection, getEntries, type CollectionEntry } from "astro:content";
+import {
+  getCollection,
+  getEntries,
+  type CollectionEntry,
+  render,
+} from "astro:content";
 
 export interface Props {
   post: CollectionEntry<"posts">;
@@ -12,15 +17,15 @@ export async function getStaticPaths() {
   const posts = await getCollection("posts");
 
   return posts.map((post) => ({
-    params: { slug: post.slug },
-    props: { post },
+    params: { id: 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 authors = await getEntries(data.authors);
 ---

src/pages/blog/index.astro

@@ -28,7 +28,7 @@ const posts = await getCollection("posts");
               authors={authorsNames}
               title={post.data.title}
               date={post.data.publishDate}
-              url={`/blog/${post.slug}`}
+              url={`/blog/${post.id}`}
               description={post.data.description}
               image={
                 post.data.image

src/pages/brand-assets/_components/Swatches.astro

@@ -18,7 +18,7 @@ import { colors } from "~/data/colors";
           <div class="buttons">
             <button
               class="button swatch-toggle"
-              data-name={color.slug}
+              data-name={color.id}
               data-color={color.hex}
               title={`Use ${color.name} for site background`}
             >