Update to Astro 5 🌟.

package.json

@@ -27,23 +27,22 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.8",
-    "@astrojs/rss": "^4.0.9",
+    "@astrojs/mdx": "^4.0.7",
+    "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/solid-js": "^4.4.2",
-    "@astrojs/tailwind": "^5.1.2",
-    "@fontsource/onest": "^5.1.0",
-    "@justinribeiro/lite-youtube": "^1.5.0",
-    "astro": "^4.16.6",
-    "astro-compress": "^2.3.3",
+    "@astrojs/solid-js": "^5.0.4",
+    "@astrojs/tailwind": "^5.1.5",
+    "@fontsource/onest": "^5.1.1",
+    "@justinribeiro/lite-youtube": "^1.6.0",
+    "astro": "^5.1.9",
+    "astro-compress": "^2.3.6",
     "astro-meta-tags": "^0.3.1",
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.4",
-    "solid-js": "^1.9.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/typography": "^0.5.16",
     "tailwindcss": "^3.4.14"
   },
   "overrides": {

src/components/BaseHead.astro

@@ -36,6 +36,9 @@ const {
 
 // The default author is the site creator.
 const author = await getEntry('authors', 'default')
+if (!author) {
+  throw new Error('Could not find default author.')
+}
 const fediverse = author.data.mastodon || author.data.pixelfed
 
 const locale = t('siteMetadata.language')

src/components/Footer.astro

@@ -4,6 +4,9 @@ import SocialIcon from '@/components/social-icons/index.astro'
 import Link from './Link.astro'
 
 const author = await getEntry('authors', 'default')
+if (!author) {
+  throw new Error('Could not find default author.')
+}
 const {
   name,
   // email,

src/components/Tag.astro

@@ -4,16 +4,16 @@ import { type CollectionEntry, getEntry } from 'astro:content'
 
 interface Props {
   tag?: CollectionEntry<'tags'>
-  slug?: CollectionEntry<'tags'>['slug']
+  id?: CollectionEntry<'tags'>['id']
 }
 let TagProp = Astro.props.tag
 
-if (!TagProp && Astro.props.slug) {
-  TagProp = await getEntry('tags', Astro.props.slug)
+if (!TagProp && Astro.props.id) {
+  TagProp = await getEntry('tags', Astro.props.id)
 }
-const { slug, data } = TagProp!
+const { id, data } = TagProp!
 ---
 
-<Link href={`/tags/${slug}`} class="mr-3 text-sm font-medium themed-link">
+<Link href={`/tags/${id}`} class="mr-3 text-sm font-medium themed-link">
   {data.name}
 </Link>

src/components/ViewTransitionsLogic.astro

@@ -7,7 +7,7 @@ import { NAVIGATION, ITEMS_PER_PAGE } from '@/consts'
 const navIndices = NAVIGATION.map(({ href }) => href)
 const postIndices = await getCollection('blog', excludeDrafts)
   .then(sortBlogPosts)
-  .then((posts) => posts.map(({ slug }) => slug))
+  .then((posts) => posts.map(({ id }) => id))
 const postPages = Math.ceil(postIndices.length / ITEMS_PER_PAGE)
 ---
 

src/consts.ts

@@ -103,7 +103,7 @@ export const ENABLE_VIEW_TRANSITIONS = true
  You should add translations for these in src/i18n/ui.ts or use as is.
  */
 export const NAVIGATION = [
-  { href: '/', title: 'nav.home' },
+  { href: '/', title: 'nav.blog' },
   // { href: '/posts', title: 'nav.blog' },
   // { href: "/tags", title: "nav.tags" },
   { href: '/apps', title: 'nav.apps' },

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

@@ -1,8 +1,9 @@
 import { defineCollection, reference, z } from 'astro:content'
+import { glob } from 'astro/loaders'
 import { POST_METADATA } from '@/consts.ts'
 
 const authors = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/data/authors' }),
   schema: z.object({
     name: z.string(),
     avatar: z.string().optional(),
@@ -23,7 +24,7 @@ const authors = defineCollection({
 })
 
 const blog = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/data/blog' }),
   schema: ({ image }) =>
     z.object({
       title: z.string(),
@@ -43,7 +44,7 @@ const blog = defineCollection({
 })
 
 const tags = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/data/tags' }),
   schema: z.object({
     name: z.string(),
     description: z.string(),
@@ -56,7 +57,7 @@ const tags = defineCollection({
 // Slash pages will be rendered as top pages:
 // e.g. `src/content/slash/Films.md` => `https://gu.illau.me/films`
 const slash = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/data/slash' }),
   schema: z.object({
     title: z.string(),
     description: z.string(),

src/layouts/AuthorLayout.astro

@@ -13,7 +13,7 @@ const t = useTranslations()
 
 interface Props {
   content: CollectionEntry<'authors'>['data']
-  slug: string
+  id: string
 }
 
 const {
@@ -37,13 +37,13 @@ const {
 const authorPosts = await getCollection('blog', (entry) => {
   return (
     excludeDrafts(entry) &&
-    entry.data.authors.some((author) => author.slug === Astro.props.slug)
+    entry.data.authors.some((author) => author.id === Astro.props.id)
   )
 })
   .then(sortBlogPosts)
   .then((posts) => {
     return posts.slice(0, ITEMS_PER_PAGE).map((post) => {
-      return { title: post.data.title, slug: post.slug }
+      return { title: post.data.title, id: post.id }
     })
   })
 ---
@@ -121,10 +121,10 @@ const authorPosts = await getCollection('blog', (entry) => {
               {t('layouts.authorLayout.latestPosts')}
             </h2>
             <ul class="space-y-4 mt-4">
-              {authorPosts.map(({ slug, title }) => (
+              {authorPosts.map(({ id, title }) => (
                 <li>
                   <Link
-                    href={`/posts/${slug}`}
+                    href={`/posts/${id}`}
                     class="text-gray-900 dark:text-gray-100 hover:text-gray-500 dark:hover:text-gray-400"
                   >
                     {title}

src/layouts/ListLayout.astro

@@ -43,7 +43,7 @@ const hasDefaultSlot = Astro.slots.has('default')
       {
         page.data.map((post) => {
           const {
-            slug,
+            id,
             data: { title, description },
           } = post
           return (
@@ -54,15 +54,15 @@ const hasDefaultSlot = Astro.slots.has('default')
                   <div>
                     <h2 class="text-2xl font-bold leading-8 tracking-tight">
                       <Link
-                        href={`/posts/${slug}`}
+                        href={`/posts/${id}`}
                         class="text-gray-900 dark:text-primary-100"
                       >
                         {title}
                       </Link>
                     </h2>
                     <!--<div class="flex flex-wrap">
-                      {tags.map(({ slug }) => (
-                        <Tag slug={slug} />
+                      {tags.map(({ id }) => (
+                        <Tag id={id} />
                       ))}
                     </div>-->
                   </div>
@@ -71,7 +71,7 @@ const hasDefaultSlot = Astro.slots.has('default')
                   </div>
                   <div class="text-base font-medium leading-6">
                       <Link
-                        href={`/posts/${post.slug}`}
+                        href={`/posts/${post.id}`}
                         class="themed-link"
                         aria-label={t('pages.home.readMoreAbout', { title })}
                       >

src/layouts/ListWithTagsLayout.astro

@@ -24,9 +24,9 @@ interface Props {
 const tags = await getCollection('tags')
 const posts = await getCollection('blog', excludeDrafts).then(sortBlogPosts)
 
-const tagCount = (slug: CollectionEntry<'tags'>['slug']) => {
+const tagCount = (id: CollectionEntry<'tags'>['id']) => {
   if (!posts) return 0
-  return posts.filter((post) => post.data.tags.some((tag) => tag.slug === slug))
+  return posts.filter((post) => post.data.tags.some((tag) => tag.id === id))
     .length
 }
 
@@ -66,22 +66,22 @@ const isBlogPage = Astro.url.pathname.startsWith('/posts')
           }
           <ul>
             {
-              tags.map(({ slug, data }) => (
+              tags.map(({ id, data }) => (
                 <li class="my-3">
-                  {isCurrentPath(`/tag/${slug}`) ? (
+                  {isCurrentPath(`/tag/${id}`) ? (
                     <h3 class="inline py-2 px-3 text-sm font-bold text-gray-500 dark:text-gray-300">
-                      {`${data.name} (${tagCount(slug)})`}
+                      {`${data.name} (${tagCount(id)})`}
                     </h3>
                   ) : (
                     <>
                       <Link
-                        href={`/tags/${slug}`}
+                        href={`/tags/${id}`}
                         class="py-2 pl-3 text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100"
                         aria-label={`View posts tagged ${data.name}`}
                       >
                         {`${data.name}`}
                       </Link>
-                      <span class="text-gray-900 dark:text-gray-100">{`(${tagCount(slug)})`}</span>
+                      <span class="text-gray-900 dark:text-gray-100">{`(${tagCount(id)})`}</span>
                     </>
                   )}
                 </li>
@@ -94,7 +94,7 @@ const isBlogPage = Astro.url.pathname.startsWith('/posts')
         <ul>
           {
             page.data.map(
-              ({ slug, data: { date, title, description, tags } }) => (
+              ({ id, data: { date, title, description, tags } }) => (
                 <li class="py-5">
                   <article class="space-y-2 flex flex-col xl:space-y-0">
                     <dl>
@@ -109,15 +109,15 @@ const isBlogPage = Astro.url.pathname.startsWith('/posts')
                       <div>
                         <h2 class="text-2xl font-bold leading-8 tracking-tight">
                           <Link
-                            href={`/posts/${slug}`}
+                            href={`/posts/${id}`}
                             class="text-gray-900 dark:text-primary-100"
                           >
                             {title}
                           </Link>
                         </h2>
                         <div class="flex flex-wrap">
-                          {tags.map(({ slug }) => (
-                            <Tag slug={slug} />
+                          {tags.map(({ id }) => (
+                            <Tag id={id} />
                           ))}
                         </div>
                       </div>

src/layouts/PostLayout.astro

@@ -5,6 +5,7 @@ import PageTitle from '../components/PageTitle.astro'
 import Link from '../components/Link.astro'
 import RootLayout from './RootLayout.astro'
 import { type CollectionEntry, getEntries } from 'astro:content'
+import { render } from 'astro:content'
 import FormattedDate from '../components/FormattedDate.astro'
 // import Tag from '../components/Tag.astro'
 import ScrollTopAndComments from '@/solid/ScrollTopAndComments.tsx'
@@ -41,7 +42,7 @@ const articleOgDetails = {
   cover: post.data.cover,
 }
 
-const { Content, headings } = await post.render()
+const { Content, headings } = await render(post)
 ---
 
 <RootLayout
@@ -219,7 +220,7 @@ const { Content, headings } = await post.render()
                           {t('layouts.postLayout.nextPost')}
                         </h2>
                         <div class="themed-link">
-                          <Link href={`/posts/${prev.slug}`}>
+                          <Link href={`/posts/${prev.id}`}>
                             {prev.data.title}
                           </Link>
                         </div>
@@ -231,7 +232,7 @@ const { Content, headings } = await post.render()
                           {t('layouts.postLayout.previousPost')}
                         </h2>
                         <div class="themed-link">
-                          <Link href={`/posts/${next.slug}`}>
+                          <Link href={`/posts/${next.id}`}>
                             {next.data.title}
                           </Link>
                         </div>
@@ -249,7 +250,7 @@ const { Content, headings } = await post.render()
                     <ul class="flex flex-wrap gap-2 xl:space-x-0 xl:space-y-0">
                       {related.map((post) => (
                         <li class="themed-link">
-                          <Link href={`/posts/${post.slug}`}>
+                          <Link href={`/posts/${post.id}`}>
                             {post.data.title}
                           </Link>
                         </li>

src/layouts/SimplePostLayout.astro

@@ -4,6 +4,7 @@ import PageTitle from '../components/PageTitle.astro'
 import Link from '../components/Link.astro'
 import RootLayout from './RootLayout.astro'
 import { type CollectionEntry, getEntries } from 'astro:content'
+import { render } from 'astro:content'
 import FormattedDate from '../components/FormattedDate.astro'
 import ScrollTopAndComments from '@/solid/ScrollTopAndComments.tsx'
 import PostCover from '../components/PostCover.astro'
@@ -39,7 +40,7 @@ const articleOgDetails = {
   cover: post.data.cover,
 }
 
-const { Content, headings } = await post.render()
+const { Content, headings } = await render(post)
 ---
 
 <RootLayout
@@ -152,7 +153,7 @@ const { Content, headings } = await post.render()
               prev && (
                 <div class="pt-4 xl:pt-8">
                   <Link
-                    href={`/posts/${prev.slug}`}
+                    href={`/posts/${prev.id}`}
                     class="themed-link"
                     aria-label={t('layouts.postLayout.nextPost', {
                       title: prev.data.title,
@@ -167,7 +168,7 @@ const { Content, headings } = await post.render()
               next && (
                 <div class="pt-4 xl:pt-8">
                   <Link
-                    href={`/posts/${next.slug}`}
+                    href={`/posts/${next.id}`}
                     class="themed-link"
                     aria-label={t('layouts.postLayout.previousPost', {
                       title: next.data.title,
@@ -187,7 +188,7 @@ const { Content, headings } = await post.render()
                   <ul class="flex flex-wrap gap-2 xl:space-x-0 xl:space-y-0">
                     {related.map((post) => (
                       <li class="themed-link">
-                        <Link href={`/posts/${post.slug}`}>
+                        <Link href={`/posts/${post.id}`}>
                           {post.data.title}
                         </Link>
                       </li>

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

@@ -1,18 +1,18 @@
 ---
-import { getCollection } from 'astro:content'
+import { getCollection, render } from 'astro:content'
 import RootLayout from '@/layouts/RootLayout.astro'
 
 export const getStaticPaths = async () => {
   const pages = await getCollection('slash')
   if (!pages) return []
   return pages.map((post) => ({
-    params: { slug: post.slug },
+    params: { id: post.id },
     props: { post },
   }))
 }
 
 const { title, description } = Astro.props.post.data
-const { Content } = await Astro.props.post.render()
+const { Content } = await render(Astro.props.post)
 ---
 
 <RootLayout {title} {description}>