Upgrade to Astro v5 (#25)

* updated packages

* updated TypeScript configuration, renamed ViewTransitions, updated fonts

* added loaders, handle content layer basic changes

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the "Ovidius" theme will be documented in this file.
 
+## 0.1.0
+
+- upgraded to Astro v5
+
 ## 0.0.2
 
 - improved blog document outline

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ovidius-astro-theme",
     "type": "module",
-    "version": "0.0.2",
+    "version": "0.1.0",
     "scripts": {
         "dev": "astro dev",
         "start": "astro dev",
@@ -10,16 +10,17 @@
         "astro": "astro"
     },
     "dependencies": {
-        "@astrojs/mdx": "^3.1.8",
-        "@astrojs/rss": "^4.0.9",
+        "@astrojs/mdx": "^4.0.3",
+        "@astrojs/rss": "^4.0.10",
         "@astrojs/sitemap": "^3.2.1",
-        "@astrojs/tailwind": "^5.1.2",
-        "astro": "^4.16.7",
-        "tailwindcss": "^3.4.14"
+        "@astrojs/tailwind": "^5.1.4",
+        "@fontsource-variable/figtree": "^5.1.1",
+        "astro": "^5.1.1",
+        "tailwindcss": "^3.4.17"
     },
     "devDependencies": {
         "@tailwindcss/typography": "^0.5.15",
-        "prettier": "^3.3.3",
-        "prettier-plugin-tailwindcss": "^0.6.8"
+        "prettier": "^3.4.2",
+        "prettier-plugin-tailwindcss": "^0.6.9"
     }
 }

src/components/BaseHead.astro

@@ -1,4 +1,5 @@
 ---
+import figtreeWoff2 from '@fontsource-variable/figtree/files/figtree-latin-wght-normal.woff2?url';
 import siteConfig from '../data/site-config';
 import '../styles/global.css';
 
@@ -41,10 +42,7 @@ function formatCanonicalURL(url: string | URL) {
 <meta name="generator" content={Astro.generator} />
 
 <!-- Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400..700;1,400..700&display=swap" />
-<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet" />
+<link rel="preload" as="font" type="font/woff2" href={figtreeWoff2} crossorigin="anonymous" />
 
 <!-- Low Priority Global Metadata -->
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

src/components/FeaturedPostPreview.astro

@@ -23,12 +23,12 @@ const { title, publishDate, updatedDate, featureImage, excerpt } = post.data;
                 )
             }
         </div>
-        <h2 class="text-3xl font-bold text-slate-900 sm:text-4xl md:text-5xl"><a href={`/blog/${post.slug}/`}>{title}</a></h2>
+        <h2 class="text-3xl font-bold text-slate-900 sm:text-4xl md:text-5xl"><a href={`/blog/${post.id}/`}>{title}</a></h2>
     </header>
     {
         featureImage?.src && (
             <figure class="max-w-6xl mx-auto my-6 sm:my-8">
-                <a href={`/blog/${post.slug}/`}>
+                <a href={`/blog/${post.id}/`}>
                     <img class="w-full rounded-md" src={featureImage.src} loading="lazy" decoding="async" alt={featureImage.alt || ''} />
                 </a>
             </figure>
@@ -44,7 +44,7 @@ const { title, publishDate, updatedDate, featureImage, excerpt } = post.data;
     <div class="max-w-3xl mx-auto mt-8">
         <a
             class="inline-flex justify-center items-center gap-1.5 bg-primary text-white px-8 py-2.5 font-semibold rounded-full transition duration-300 hover:shadow-button"
-            href={`/blog/${post.slug}/`}
+            href={`/blog/${post.id}/`}
         >
             Continue Reading
         </a>

src/components/PostPreview.astro

@@ -29,12 +29,12 @@ const { title, publishDate, updatedDate, featureImage, excerpt, isFeatured } = p
                 )
             }
         </div>
-        <h2 class="text-3xl font-bold text-slate-900"><a href={`/blog/${post.slug}/`}>{title}</a></h2>
+        <h2 class="text-3xl font-bold text-slate-900"><a href={`/blog/${post.id}/`}>{title}</a></h2>
     </header>
     {
         featureImage?.src && (
             <figure class="post-card-thumbnail mt-6 mb-6 xl:mb-0">
-                <a href={`/blog/${post.slug}/`}>
+                <a href={`/blog/${post.id}/`}>
                     <img class="w-full rounded-md" src={featureImage.src} loading="lazy" decoding="async" alt={featureImage.alt || ''} />
                 </a>
             </figure>

src/components/ReadNextPostPreview.astro

@@ -22,13 +22,13 @@ const { title, publishDate, updatedDate, featureImage } = post.data;
             }
         </div>
         <h3 class="text-2xl font-bold text-slate-900">
-            <a href={`/blog/${post.slug}/`}>{title}</a>
+            <a href={`/blog/${post.id}/`}>{title}</a>
         </h3>
     </header>
     {
         featureImage?.src && (
             <figure class="shrink-0 sm:w-40">
-                <a href={`/blog/${post.slug}/`}>
+                <a href={`/blog/${post.id}/`}>
                     <img class="w-full rounded-md" src={featureImage.src} loading="lazy" decoding="async" alt={featureImage.alt || ''} />
                 </a>
             </figure>

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

@@ -1,4 +1,5 @@
 import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const seoSchema = z.object({
     title: z.string().min(5).max(120).optional(),
@@ -13,6 +14,7 @@ const seoSchema = z.object({
 });
 
 const blog = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
     schema: z.object({
         title: z.string(),
         excerpt: z.string().optional(),
@@ -31,6 +33,7 @@ const blog = defineCollection({
 });
 
 const pages = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/pages' }),
     schema: z.object({
         title: z.string(),
         featureImage: z

src/layouts/BaseLayout.astro

@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro';
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
@@ -13,7 +13,7 @@ const { ...head } = Astro.props;
 <html lang="en" class="antialiased break-words">
     <head>
         <BaseHead {...head} />
-        <ViewTransitions />
+        <ClientRouter />
     </head>
     <body class="bg-white text-slate-700">
         <div class="flex flex-col min-h-screen">

src/layouts/NoHeaderLayout.astro

@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro';
 import Footer from '../components/Footer.astro';
 
@@ -12,7 +12,7 @@ const { ...head } = Astro.props;
 <html lang="en" class="antialiased break-words">
     <head>
         <BaseHead {...head} />
-        <ViewTransitions />
+        <ClientRouter />
     </head>
     <body class="bg-white text-slate-700">
         <div class="flex flex-col min-h-screen">

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

@@ -1,21 +1,21 @@
 ---
-import { type CollectionEntry, getCollection } from 'astro:content';
+import { type CollectionEntry, getCollection, render } from 'astro:content';
 import { type Image } from '../data/site-config';
 import BaseLayout from '../layouts/BaseLayout.astro';
 
 export async function getStaticPaths() {
     const pages = await getCollection('pages');
     return pages.map((page) => {
         return {
-            params: { slug: page.slug },
+            params: { id: page.id },
             props: { page }
         };
     });
 }
 
 const { page } = Astro.props as { page: CollectionEntry<'pages'> };
 const { title, featureImage, seo } = page.data;
-const { Content } = await page.render();
+const { Content } = await render(page);
 let socialImage: Image | undefined;
 if (featureImage?.src) {
     socialImage = featureImage;

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

@@ -1,5 +1,5 @@
 ---
-import { type CollectionEntry, getCollection } from 'astro:content';
+import { type CollectionEntry, getCollection, render } from 'astro:content';
 import { type Image } from '../../data/site-config';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import FormattedDate from '../../components/FormattedDate.astro';
@@ -11,7 +11,7 @@ export async function getStaticPaths() {
     const posts = (await getCollection('blog')).sort(sortPostsByDateDesc);
     const postCount = posts.length;
     return posts.map((post, index) => ({
-        params: { slug: post.slug },
+        params: { id: post.id },
         props: {
             post,
             prevPost: index + 1 !== postCount ? posts[index + 1] : null,
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
 const { href } = Astro.url;
 const { post, prevPost, nextPost } = Astro.props as { post: CollectionEntry<'blog'>; prevPost: CollectionEntry<'blog'>; nextPost: CollectionEntry<'blog'> };
 const { title, publishDate, updatedDate, featureImage, excerpt, isFeatured, seo } = post.data;
-const { Content } = await post.render();
+const { Content } = await render(post);
 let socialImage: Image | undefined;
 if (featureImage?.src) {
     socialImage = featureImage;

src/pages/rss.xml.js

@@ -12,7 +12,7 @@ export async function GET(context) {
         items: posts.map((item) => ({
             title: item.data.title,
             description: item.data.excerpt,
-            link: `/blog/${item.slug}/`,
+            link: `/blog/${item.id}/`,
             pubDate: item.data.publishDate.setUTCHours(0)
         }))
     });

src/styles/global.css

@@ -1,3 +1,6 @@
+@import '@fontsource-variable/figtree';
+@import '@fontsource-variable/figtree/wght-italic.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.cjs

@@ -3,6 +3,9 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
     content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
     theme: {
+        fontFamily: {
+            sans: ['Figtree Variable', 'Georgia', ...defaultTheme.fontFamily.sans]
+        },
         extend: {
             boxShadow: {
                 button: '0 0 1px 6px rgb(var(--color-primary) / 0.175)',
@@ -11,9 +14,6 @@ module.exports = {
             colors: {
                 primary: 'rgb(var(--color-primary) / <alpha-value>)'
             },
-            fontFamily: {
-                sans: ['Figtree', ...defaultTheme.fontFamily.sans]
-            },
             typography: (theme) => ({
                 DEFAULT: {
                     css: {

tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
   "compilerOptions": {
     "strictNullChecks": true
   }
-}
+}