Upgrade to Astro 5

Author: alex-snezhko

package-lock.json

@@ -13,16 +13,16 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/svelte": "^5.4.0",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/svelte": "^7.0.1",
+    "@astrojs/tailwind": "^5.1.3",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
     "@grain/stdlib": "^0.6.5",
     "@netlify/functions": "^2.8.2",
     "@wasmer/wasi": "^1.2.2",
     "algoliasearch": "^4.23.3",
     "assert": "^2.1.0",
-    "astro": "^4.16.13",
+    "astro": "^5.0.3",
     "buffer": "^6.0.3",
     "constants-browserify": "^1.0.0",
     "events": "^3.3.0",
@@ -40,7 +40,7 @@
     "readable-stream": "^4.5.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^4.2.14",
+    "svelte": "^5.8.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",

package.json

@@ -43,11 +43,11 @@ const { entry } = Astro.props;
   </div>
   <div class="lg:flex lg:items-stretch bg-color-background-bright dark:bg-gray-variant-80 rounded-lg p-4 lg:p-8 drop-shadow-xl">
     <div class="p-0 lg:p-6 lg:w-5/12">
-      <h1 class="text-2xl font-bold mb-5"><a href={`/blog/${entry.slug}`}>{entry.data.title}</a></h1>
+      <h1 class="text-2xl font-bold mb-5"><a href={`/blog/${entry.id}`}>{entry.data.title}</a></h1>
       <BlogAuthor entry={entry} imgClass="w-12 h-12" nameClass="text-lg" />
       <p class="my-4">{entry.data.subtitle}</p>
       <p class="[mask-image:linear-gradient(180deg,#000_60%,transparent)] my-4 text-color-dim h-24 overflow-hidden">{entry.body}...</p>
-      <a href={`/blog/${entry.slug}`} class="font-medium text-purple-50 hover:text-purple-70">
+      <a href={`/blog/${entry.id}`} class="font-medium text-purple-50 hover:text-purple-70">
         Read more
         <ChevronRightIcon class="inline-block w-4 mb-0.5" />
       </a>

src/components/BlogHero.astro

@@ -11,7 +11,7 @@ const { entry } = Astro.props;
 ---
 
 <div class="flex flex-col drop-shadow-sm border rounded-lg border-gray-10 dark:border-color-background-bright dark:bg-color-dim-3 overflow-hidden">
-  <a href={`/blog/${entry.slug}`} class="grow flex flex-col">
+  <a href={`/blog/${entry.id}`} class="grow flex flex-col">
     <Image
       src={entry.data.cover}
       alt={entry.data.coverAttribution ?? `${entry.data.title} thumbnail`}

src/components/BlogThumbnail.astro

@@ -1,11 +1,11 @@
 ---
 interface Props {
-  slug: string;
+  id: string;
 }
 
-const { slug } = Astro.props;
+const { id } = Astro.props;
 
-const href = `/docs/${slug}`;
+const href = `/docs/${id}`;
 const isCurrentPage = new URL(Astro.request.url).pathname === href;
 ---
 

src/components/DocLink.astro

@@ -1,9 +1,10 @@
 ---
+import type { CollectionEntry } from "astro:content";
 import DocLink from "./DocLink.astro";
 
 interface Props {
   title: string | null;
-  entries: { slug: string, data: { title?: string | undefined } }[]
+  entries: CollectionEntry<"docs">[]
 }
 
 const { title, entries } = Astro.props;
@@ -13,5 +14,5 @@ const { title, entries } = Astro.props;
   <h2 class="text-xl font-semibold mt-6 mb-2">{title}</h2>
 )}
 <div class="border-l-2 border-color-dim-3">
-  {entries.map(x => <DocLink slug={x.slug}>{x.data.title}</DocLink>)}
+  {entries.map(x => <DocLink id={x.id}>{x.data.title}</DocLink>)}
 </div>

src/components/DocLinkGroup.astro

@@ -8,10 +8,10 @@ import DocsSwitchPageLink from "./DocsSwitchPageLink.astro";
 import TypographyContainer from "./TypographyContainer.astro";
 import NewsletterSignup from "./NewsletterSignup.astro";
 import Footer from "./Footer.astro";
-import { docsCollections, sortEntries } from "../utils/docsCollections";
+import { docsCollections, sectionAndSortEntries } from "../utils/docsCollections";
 import BarsIcon from "./icons/BarsIcon.astro";
 
-const docsEntries = await getCollection("docs", x => !x.slug.includes("/runtime/"));
+const docsEntries = await getCollection("docs", x => !x.id.includes("/runtime/"));
 
 const sidebarClass = "fixed overflow-auto w-[calc(var(--container-width)/5)] xl:w-[calc(var(--container-width)/6)] top-[3.5rem] h-[calc(100vh-3.5rem)] py-14";
 
@@ -53,7 +53,7 @@ const { data, section, headings, prev, next } = Astro.props;
   <h1 class="text-2xl font-semibold mb-4">Grain Docs</h1>
 
   {docsCollections.map(coll => (
-    <DocLinkGroup title={coll.title} entries={sortEntries(docsEntries.filter((x: any) => x.slug.startsWith(coll.slugPrefix))).map(x => x.collectionEntry)} />
+    <DocLinkGroup title={coll.title} entries={sectionAndSortEntries(docsEntries.filter((x: any) => x.id.startsWith(coll.slugPrefix))).map(x => x.collectionEntry)} />
   ))}
 </div>
 
@@ -63,7 +63,7 @@ const { data, section, headings, prev, next } = Astro.props;
       <h1 class="text-3xl font-semibold mb-4">Grain Docs</h1>
 
       {docsCollections.map(coll => (
-        <DocLinkGroup title={coll.title} entries={sortEntries(docsEntries.filter((x: any) => x.slug.startsWith(coll.slugPrefix))).map(x => x.collectionEntry)} />
+        <DocLinkGroup title={coll.title} entries={sectionAndSortEntries(docsEntries.filter((x: any) => x.id.startsWith(coll.slugPrefix))).map(x => x.collectionEntry)} />
       ))}
     </div>
 

src/components/DocsEntry.astro

@@ -14,7 +14,7 @@ const { entry, isPrev } = Astro.props;
 ---
 
 {entry ? (
-  <a href={`/docs/${entry.slug}`} class="no-underline text-sm md:text-base">
+  <a href={`/docs/${entry.id}`} class="no-underline text-sm md:text-base">
     {isPrev ? (
       <ChevronRightIcon class={`${chevronClass} rotate-180`} />
       <b class={textClass}>{entry.data.title}</b>

src/components/DocsSwitchPageLink.astro

@@ -9,7 +9,7 @@ const { heading } = Astro.props;
 ---
 
 <li class="my-1.5">
-  <a href={"#" + heading.slug}>
+  <a href={"#" + heading.id}>
     {heading.text}
   </a>
   {heading.subheadings.length > 0 && (

src/components/TableOfContentsHeading.astro

@@ -1,7 +1,8 @@
 import { z, defineCollection } from "astro:content";
+import { glob } from "astro/loaders";
 
 const blogCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/*.md", base: "./src/content/blog"}),
   schema: ({ image }) => z.object({
     title: z.string(),
     subtitle: z.string(),
@@ -14,7 +15,7 @@ const blogCollection = defineCollection({
 });
 
 const docsCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/*.md", base: "./src/content/docs"}),
   schema: z.object({
     title: z.string().optional(),
   }),

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

@@ -1,21 +1,21 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import BlogEntry from "../../components/BlogEntry.astro";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog");
   return blogEntries.map(entry => ({
-    params: { post: entry.slug },
+    params: { post: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
-<Layout title={`Grain Blog | ${entry.slug}`}>
+<Layout title={`Grain Blog | ${entry.id}`}>
 	<BlogEntry entry={entry}>
     <Content />
   </BlogEntry>

src/pages/blog/[post].astro

@@ -1,14 +1,14 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import DocsEntry from "../../components/DocsEntry.astro";
-import { sortEntries } from "../../utils/docsCollections";
+import { sectionAndSortEntries } from "../../utils/docsCollections";
 
 export async function getStaticPaths() {
-  const docsEntries = sortEntries(await getCollection("docs", x => !x.slug.includes("/runtime/")));
+  const docsEntries = sectionAndSortEntries(await getCollection("docs", x => !x.id.includes("/runtime/")));
 
   return docsEntries.map((entry, i) => ({
-    params: { slug: entry.collectionEntry.slug },
+    params: { slug: entry.collectionEntry.id },
     props: {
       entry: entry.collectionEntry,
       section: entry.section,
@@ -19,7 +19,7 @@ export async function getStaticPaths() {
 }
 
 const { entry, section, prev, next } = Astro.props;
-const { Content, headings } = await entry.render();
+const { Content, headings } = await render(entry);
 ---
 
 <Layout title={`Grain Docs | ${entry.data.title}`} inDocs excludeFooter>

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

@@ -5,7 +5,7 @@ import { init, WASI } from "@wasmer/wasi";
 import { tailCall, bulkMemory } from "wasm-feature-detect";
 import graincUrl from "../../public/grainc.bc.mjs?url";
 
-const graincPromise = import(graincUrl);
+const graincPromise = import(/* @vite-ignore */graincUrl);
 
 globalThis.Buffer = Buffer;
 

src/playground/compiler.js

@@ -1,5 +1,5 @@
 export interface HeirarchicalHeading {
-  slug: string;
+  id: string;
   text: string;
   subheadings: HeirarchicalHeading[];
 }

src/types.d.ts

@@ -29,16 +29,16 @@ export const docsCollections: DocsCollection[] = [
   },
 ];
 
-export function sortEntries(docsEntries: CollectionEntry<"docs">[]): DocsEntry[] {
+export function sectionAndSortEntries(docsEntries: CollectionEntry<"docs">[]): DocsEntry[] {
   return docsEntries.toSorted((x, y) => {
-    if (x.slug.startsWith("stdlib") && y.slug.startsWith("stdlib")) {
-      return Number(y.slug.includes("pervasives")) - Number(x.slug.includes("pervasives"));
+    if (x.id.startsWith("stdlib") && y.id.startsWith("stdlib")) {
+      return Number(y.id.includes("pervasives")) - Number(x.id.includes("pervasives"));
     }
 
-    return docsCollections.findIndex(coll => x.slug.startsWith(coll.slugPrefix))
-      - docsCollections.findIndex(coll => y.slug.startsWith(coll.slugPrefix))
+    return docsCollections.findIndex(coll => x.id.startsWith(coll.slugPrefix))
+      - docsCollections.findIndex(coll => y.id.startsWith(coll.slugPrefix))
   }).map(collectionEntry => ({
     collectionEntry,
-    section: docsCollections.find(coll => collectionEntry.slug.startsWith(coll.slugPrefix))!.title
+    section: docsCollections.find(coll => collectionEntry.id.startsWith(coll.slugPrefix))!.title
   }));
 }

src/utils/docsCollections.ts

@@ -1,4 +1,5 @@
-const { fontFamily } = require("tailwindcss/defaultTheme");
+import { fontFamily } from "tailwindcss/defaultTheme";
+import tailwindTypography from "@tailwindcss/typography";
 
 /** @type {import("tailwindcss").Config} */
 export default {
@@ -98,6 +99,6 @@ export default {
     },
 	},
 	plugins: [
-    require("@tailwindcss/typography"),
+    tailwindTypography,
   ],
 }