Update to Astro 5 🌟.

gmarty · Jan 25, 2025 · 0490961 · 0490961
1 parent 9e4fc7c
commit 0490961
Show file tree

Hide file tree

Showing 53 changed files with 1,342 additions and 596 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,14 +27,14 @@
   },
   "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",
+    "@astrojs/tailwind": "^5.1.5",
     "@fontsource/onest": "^5.1.0",
     "@justinribeiro/lite-youtube": "^1.5.0",
-    "astro": "^4.16.6",
+    "astro": "^5.1.9",
     "astro-compress": "^2.3.3",
     "astro-meta-tags": "^0.3.1",
     "astro-robots-txt": "^1.0.0",

diff --git a/src/components/BaseHead.astro b/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')

diff --git a/src/components/Footer.astro b/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,

diff --git a/src/components/Tag.astro b/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>
diff --git a/src/components/ViewTransitionsLogic.astro b/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)
 ---
 

diff --git a/src/consts.ts b/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' },

diff --git a/src/content/config.ts → src/content.config.ts b/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(),

diff --git a/src/content/authors/default.mdx → src/data/authors/default.mdx b/src/content/authors/default.mdx → src/data/authors/default.mdx
diff --git a/src/content/blog/always-bet-on-semantic.md → src/data/blog/always-bet-on-semantic.md b/src/content/blog/always-bet-on-semantic.md → src/data/blog/always-bet-on-semantic.md
diff --git a/...blog/augmented-reality-computer-vision.md → ...blog/augmented-reality-computer-vision.md b/...blog/augmented-reality-computer-vision.md → ...blog/augmented-reality-computer-vision.md
diff --git a/...tent/blog/binary-data-and-universal-js.md → ...data/blog/binary-data-and-universal-js.md b/...tent/blog/binary-data-and-universal-js.md → ...data/blog/binary-data-and-universal-js.md
diff --git a/...todon-bot-with-node-and-github-actions.md → ...todon-bot-with-node-and-github-actions.md b/...todon-bot-with-node-and-github-actions.md → ...todon-bot-with-node-and-github-actions.md
diff --git a/...uilding-a-syntactic-translation-engine.md → ...uilding-a-syntactic-translation-engine.md b/...uilding-a-syntactic-translation-engine.md → ...uilding-a-syntactic-translation-engine.md
diff --git a/...ilding-a-voice-assistant-in-javascript.md → ...ilding-a-voice-assistant-in-javascript.md b/...ilding-a-voice-assistant-in-javascript.md → ...ilding-a-voice-assistant-in-javascript.md
diff --git a/...blog/cross-browser-generator-functions.md → ...blog/cross-browser-generator-functions.md b/...blog/cross-browser-generator-functions.md → ...blog/cross-browser-generator-functions.md
diff --git a/src/content/blog/dont-optimise-javascript.md → src/data/blog/dont-optimise-javascript.md b/src/content/blog/dont-optimise-javascript.md → src/data/blog/dont-optimise-javascript.md
diff --git a/...log/experimenting-with-serverless-apps.md → ...log/experimenting-with-serverless-apps.md b/...log/experimenting-with-serverless-apps.md → ...log/experimenting-with-serverless-apps.md
diff --git a/src/content/blog/experimenting-with-vr.md → src/data/blog/experimenting-with-vr.md b/src/content/blog/experimenting-with-vr.md → src/data/blog/experimenting-with-vr.md
diff --git a/...blog/firefox-os-the-device-storage-api.md → ...blog/firefox-os-the-device-storage-api.md b/...blog/firefox-os-the-device-storage-api.md → ...blog/firefox-os-the-device-storage-api.md
diff --git a/.../blog/follow-up-on-navigator-languages.md → .../blog/follow-up-on-navigator-languages.md b/.../blog/follow-up-on-navigator-languages.md → .../blog/follow-up-on-navigator-languages.md
diff --git a/...nt/blog/generating-generator-functions.md → ...ta/blog/generating-generator-functions.md b/...nt/blog/generating-generator-functions.md → ...ta/blog/generating-generator-functions.md
diff --git a/...t/blog/google-play-music-on-firefox-os.md → ...a/blog/google-play-music-on-firefox-os.md b/...t/blog/google-play-music-on-firefox-os.md → ...a/blog/google-play-music-on-firefox-os.md
diff --git a/...-and-geometric-snippets-for-javascript.md → ...-and-geometric-snippets-for-javascript.md b/...-and-geometric-snippets-for-javascript.md → ...-and-geometric-snippets-for-javascript.md
diff --git a/...uilt-a-translation-engine-in-a-weekend.md → ...uilt-a-translation-engine-in-a-weekend.md b/...uilt-a-translation-engine-in-a-weekend.md → ...uilt-a-translation-engine-in-a-weekend.md
diff --git a/src/content/blog/how-to-organise-a-meetup.md → src/data/blog/how-to-organise-a-meetup.md b/src/content/blog/how-to-organise-a-meetup.md → src/data/blog/how-to-organise-a-meetup.md
diff --git a/...content/blog/i-wrote-for-mozilla-hacks.md → src/data/blog/i-wrote-for-mozilla-hacks.md b/...content/blog/i-wrote-for-mozilla-hacks.md → src/data/blog/i-wrote-for-mozilla-hacks.md
diff --git a/...s-svelte-still-the-fastest-of-them-all.md → ...s-svelte-still-the-fastest-of-them-all.md b/...s-svelte-still-the-fastest-of-them-all.md → ...s-svelte-still-the-fastest-of-them-all.md
diff --git a/.../blog/japanese-keyboard-for-firefox-os.md → .../blog/japanese-keyboard-for-firefox-os.md b/.../blog/japanese-keyboard-for-firefox-os.md → .../blog/japanese-keyboard-for-firefox-os.md
diff --git a/...ent/blog/landscapes-in-virtual-reality.md → ...ata/blog/landscapes-in-virtual-reality.md b/...ent/blog/landscapes-in-virtual-reality.md → ...ata/blog/landscapes-in-virtual-reality.md
diff --git a/...mozilla-iot-meetup-london-october-2016.md → ...mozilla-iot-meetup-london-october-2016.md b/...mozilla-iot-meetup-london-october-2016.md → ...mozilla-iot-meetup-london-october-2016.md
diff --git a/src/content/blog/polyfilling-generators.md → src/data/blog/polyfilling-generators.md b/src/content/blog/polyfilling-generators.md → src/data/blog/polyfilling-generators.md
diff --git a/...ent/blog/privacy-and-google-analytics+.md → ...ata/blog/privacy-and-google-analytics+.md b/...ent/blog/privacy-and-google-analytics+.md → ...ata/blog/privacy-and-google-analytics+.md
diff --git a/src/content/blog/software-gamepad.md → src/data/blog/software-gamepad.md b/src/content/blog/software-gamepad.md → src/data/blog/software-gamepad.md
diff --git a/...ntent/blog/the-ideal-blogging-workflow.md → src/data/blog/the-ideal-blogging-workflow.md b/...ntent/blog/the-ideal-blogging-workflow.md → src/data/blog/the-ideal-blogging-workflow.md
diff --git a/src/content/blog/the-physical-web.md → src/data/blog/the-physical-web.md b/src/content/blog/the-physical-web.md → src/data/blog/the-physical-web.md
diff --git a/...m-of-user-language-lists-in-javascript.md → ...m-of-user-language-lists-in-javascript.md b/...m-of-user-language-lists-in-javascript.md → ...m-of-user-language-lists-in-javascript.md
diff --git a/...blog/tokenization-is-the-mother-of-nlp.md → ...blog/tokenization-is-the-mother-of-nlp.md b/...blog/tokenization-is-the-mother-of-nlp.md → ...blog/tokenization-is-the-mother-of-nlp.md
diff --git a/...ent/blog/welsh-keyboard-for-firefox-os.md → ...ata/blog/welsh-keyboard-for-firefox-os.md b/...ent/blog/welsh-keyboard-for-firefox-os.md → ...ata/blog/welsh-keyboard-for-firefox-os.md
diff --git a/src/content/slash/Films.md → src/data/slash/Films.md b/src/content/slash/Films.md → src/data/slash/Films.md
diff --git a/src/content/tags/default.mdx → src/data/tags/default.mdx b/src/content/tags/default.mdx → src/data/tags/default.mdx
diff --git a/src/layouts/AuthorLayout.astro b/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}

diff --git a/src/layouts/ListLayout.astro b/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 })}
                       >

diff --git a/src/layouts/ListWithTagsLayout.astro b/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>

diff --git a/src/layouts/PostLayout.astro b/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,8 @@ const articleOgDetails = {
   cover: post.data.cover,
 }
 
-const { Content, headings } = await post.render()
+const { Content, headings } = await render(post)
+console.log(headings)
 ---
 
 <RootLayout
@@ -219,7 +221,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 +233,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 +251,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>

diff --git a/src/layouts/SimplePostLayout.astro b/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>

diff --git a/src/pages/[...slug].astro → src/pages/[...id].astro b/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}>

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,11 +1,14 @@
 ---
-import { getEntry } from 'astro:content'
+import { getEntry, render } from 'astro:content'
 import AuthorLayout from '@/layouts/AuthorLayout.astro'
 
 const author = await getEntry('authors', 'default')
-const { Content } = await author.render()
+if (!author) {
+  throw new Error('Could not find default author.')
+}
+const { Content } = await render(author)
 ---
 
-<AuthorLayout content={author.data} slug={author.slug}>
+<AuthorLayout content={author.data} id={author.id}>
   <Content />
 </AuthorLayout>