Upgrades Astro to 5.1 and its dependencies (#293)

* Upgrades Astro to 5.1 and dependencies

* Use ubuntu-24.04 for test.yml

* Update to node v20

* Use auto in ddev for nodejs_version so it uses .nvmrc

* Render author information

---------

Co-authored-by: Randy Fay <[email protected]>
Co-authored-by: Stanislav Zhuk <[email protected]>

.ddev/config.yaml

@@ -9,7 +9,8 @@ additional_fqdns: []
 use_dns_when_possible: true
 composer_version: "2"
 web_environment: []
-nodejs_version: "20"
+# nodejs_version auto reads from the .nvmrc
+nodejs_version: "auto"
 omit_containers: ["db"]
 disable_upload_dirs_warning: true
 web_extra_exposed_ports:

.github/workflows/test.yml

@@ -17,7 +17,7 @@ env:
 jobs:
   build:
     timeout-minutes: 15
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.nvmrc

@@ -1 +1 @@
-v18.16.0
+v20

package.json

@@ -24,8 +24,8 @@
     "@tailwindcss/typography": "^0.5.10",
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.8",
-    "astro": "^4.5.10",
-    "astro-rehype-relative-markdown-links": "^0.15.0",
+    "astro": "^5.1.0",
+    "astro-rehype-relative-markdown-links": "^0.17.3",
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.0",
     "autoprefixer": "^10.4.16",

src/components/BlogPostCard.astro

@@ -3,18 +3,19 @@
  * A single card used to represent a blog post. Should probably be placed in a flex grid.
  */
 import type { CollectionEntry } from "astro:content"
+import { render } from "astro:content"
 import { Picture } from 'astro:assets'
 interface Props {
   post: CollectionEntry<"blog">
 }
 
-import { getEntryBySlug } from "astro:content"
+import { getEntry } from "astro:content"
 import { getSlug, formatDate, getCategoryUrl } from "../lib/api"
 
 const { post } = Astro.props
-const { remarkPluginFrontmatter } = await post.render()
+const { remarkPluginFrontmatter } = await render(post)
 
-const author = await getEntryBySlug("authors", getSlug(post.data.author))
+const author = await getEntry("authors", getSlug(post.data.author))
 const authorImage = author.data.avatarUrl ?? null
 
 const hasFeatureImage =
@@ -61,7 +62,7 @@ const firstCategory = post.data.categories.length
           {firstCategory}
         </a>
       </p>
-      <a href={`/blog/${post.slug}`} class="block mt-2">
+      <a href={`/blog/${post.id}`} class="block mt-2">
         <p class="text-xl font-semibold text-gray-900 dark:text-white">
           {post.data.title}
         </p>
@@ -71,7 +72,7 @@ const firstCategory = post.data.categories.length
       {
         authorImage && (
           <div class="flex-shrink-0">
-            <a href={`/blog/author/${author.slug}`}>
+            <a href={`/blog/author/${author.id}`}>
               <span class="sr-only">{post.data.author}</span>
               <img
                 class="h-10 w-10 rounded-full"
@@ -84,7 +85,7 @@ const firstCategory = post.data.categories.length
       }
       <div class={authorImage ? `ml-3` : ``}>
         <p class="text-sm font-medium text-gray-900 dark:text-white">
-          <a href={`/blog/author/${author.slug}`} class="hover:underline">
+          <a href={`/blog/author/${author.id}`} class="hover:underline">
             {post.data.author}
           </a>
         </p>

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

@@ -1,6 +1,7 @@
 import { defineCollection, z } from "astro:content"
 import fs2 from "fs"
-import { glob } from "glob"
+import { glob as oldglob } from "glob"
+import { glob as contentGlob } from "astro/loaders"
 
 const allowedCategories = [
   "Announcements",
@@ -18,7 +19,7 @@ const allowedCategories = [
  * @returns array of `name` values from author entry frontmatter
  */
 const getAuthorNames = () => {
-  const files = glob.sync(`./src/content/authors/*.md`)
+  const files = oldglob.sync(`./src/content/authors/*.md`)
   const authorNames = files.map((file) => {
     const contents = fs2.readFileSync(file, "utf-8")
     const result = contents.match(new RegExp("name: (.*)"))
@@ -37,6 +38,10 @@ const getAuthorNames = () => {
  */
 
 const authorCollection = defineCollection({
+  loader: contentGlob({
+    pattern: "**/[^_]*.md",
+    base: "./src/content/authors",
+  }),
   schema: z.object({
     name: z.string(),
     firstName: z.string(),
@@ -45,6 +50,7 @@ const authorCollection = defineCollection({
 })
 
 const blogCollection = defineCollection({
+  loader: contentGlob({ pattern: "**/[^_]*.md", base: "./src/content/blog" }),
   schema: z.object({
     title: z.string(),
     summary: z.string().optional(),

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

@@ -1,5 +1,5 @@
 ---
-import { getCollection, getEntryBySlug } from "astro:content"
+import { getCollection, getEntry, render } from "astro:content"
 import { formatDate, getCategoryUrl, getSlug } from "./../../lib/api"
 import Layout from "./../../layouts/Layout.astro"
 import PostBody from "./../../components/PostBody.astro"
@@ -12,15 +12,15 @@ import { BLOG_DESCRIPTION, GITHUB_URL_WEBSITE } from "src/const"
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog")
   return blogEntries.map((entry) => ({
-    params: { slug: entry.slug },
+    params: { id: entry.id },
     props: { entry },
   }))
 }
 
 const { entry } = Astro.props
-const { Content, remarkPluginFrontmatter } = await entry.render()
+const { Content, remarkPluginFrontmatter } = await render(entry)
 
-const author = await getEntryBySlug("authors", getSlug(entry.data.author))
+const author = await getEntry("authors", getSlug(entry.data.author))
 
 const hasFeatureImage =
   Object.hasOwn(entry.data, "featureImage") &&
@@ -62,11 +62,11 @@ const blogPostSchema = [
       ? entry.data.featureImage.src
       : `/img/og-default.png`,
     keywords: entry.data.categories.join(","),
-    mainEntityOfPage: `${Astro.site}blog/${entry.slug}`,
+    mainEntityOfPage: `${Astro.site}blog/${entry.id}`,
     publisher: {
       "@id": `${Astro.site}#identity`,
     },
-    url: `${Astro.site}blog/${entry.slug}`,
+    url: `${Astro.site}blog/${entry.id}`,
   },
 ]
 ---
@@ -83,10 +83,10 @@ const blogPostSchema = [
       title={entry.data.title}
       date={formatDate(entry.data.pubDate, { month: "long" })}
       author={entry.data.author}
-      authorUrl={`/blog/author/${author.slug}`}
+      authorUrl={`/blog/author/${author.id}`}
       authorAvatar={authorImage}
       readTime={remarkPluginFrontmatter.minutesRead}
-      editUrl={GITHUB_URL_WEBSITE+`/`+entry.slug+`.md`}
+      editUrl={GITHUB_URL_WEBSITE+`/`+entry.id+`.md`}
     />
     {
       hasFeatureImage && shouldDisplayFeatureImage && (
@@ -135,5 +135,5 @@ const blogPostSchema = [
       </div>
     </div>
   </main>
-  <BlogPostFooter activeSlug={entry.slug} />
+  <BlogPostFooter activeSlug={entry.id} />
 </Layout>

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

@@ -1,10 +1,10 @@
 ---
-import { getCollection } from "astro:content"
+import { getCollection, render } from "astro:content"
 import Layout from "../../../layouts/Layout.astro"
 import BlogPostCard from "../../../components/BlogPostCard.astro"
 
 /**
- * Tell Astro to build routes using our author slugs.
+ * Tell Astro to build routes using our author ids.
  * https://docs.astro.build/en/reference/api-reference/#getstaticpaths
  */
 export async function getStaticPaths() {
@@ -19,7 +19,7 @@ export async function getStaticPaths() {
       })
 
     return {
-      params: { slug: author.slug },
+      params: { id: author.id },
       props: {
         author: author,
         posts: authorPosts,
@@ -31,7 +31,7 @@ export async function getStaticPaths() {
 const { author, posts } = Astro.props
 
 const title = `Posts by ${author.data.name}`
-const { Content } = await author.render()
+const { Content } = await render(author)
 ---
 
 <Layout

src/pages/blog/authors.astro

@@ -27,7 +27,7 @@ const title = `Blog Authors`
       {
         activeAuthors.map((author) => (
           <div>
-            <a href={`/blog/author/${author.slug}`}>{author.data.name}</a>
+            <a href={`/blog/author/${author.id}`}>{author.data.name}</a>
           </div>
         ))
       }

src/pages/blog/feed.json.js

@@ -17,8 +17,8 @@ const recentPosts = posts
 
 const feedItems = recentPosts.map((post) => {
   return {
-    id: `${blogUrl}/${post.slug}`,
-    url: `${blogUrl}/${post.slug}`,
+    id: `${blogUrl}/${post.id}`,
+    url: `${blogUrl}/${post.id}`,
     title: post.data.title,
     content_html: sanitizeHtml(marked.parse(post.body)),
   }