Issue #468: Upgrade to Astro 6

.github/workflows/github-pages.yml

@@ -15,9 +15,9 @@ jobs:
       contents: write
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Install, build, and upload your site
-        uses: withastro/action@v2
+        uses: withastro/action@v6
         with:
           path: astro
 
@@ -30,11 +30,11 @@ jobs:
         working-directory: astro
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: "npm"
           cache-dependency-path: astro/package-lock.json
       - run: npm ci
@@ -56,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5

astro/package.json

@@ -11,23 +11,24 @@
     "astro:check": "astro check --tsconfig tsconfig.json"
   },
   "dependencies": {
-    "@astrojs/mdx": "4.3.13",
-    "@astrojs/netlify": "^6.6.4",
-    "@astrojs/rss": "4.0.15",
-    "@astrojs/sitemap": "3.7.0",
+    "@astrojs/mdx": "^5.0.6",
+    "@astrojs/netlify": "^7.0.10",
+    "@astrojs/rss": "^4.0.18",
+    "@astrojs/sitemap": "^3.7.3",
     "@fontsource-variable/archivo": "5.0.19",
     "@fontsource-variable/atkinson-hyperlegible-next": "^5.2.6",
     "@iconify-json/bi": "1.1.23",
     "@iconify-json/cib": "1.1.8",
     "@iconify-json/simple-icons": "1.2.67",
     "@plausible-analytics/tracker": "0.4.4",
-    "astro": "^5.18.1",
+    "astro": "^6.3.8",
     "astro-icon": "1.1.5",
-    "astro-lazy-youtube-embed": "0.5.4",
-    "astro-og-canvas": "0.5.6",
+    "astro-lazy-youtube-embed": "0.5.5",
+    "astro-og-canvas": "0.11.1",
     "astro-robots-txt": "1.0.0",
     "bootstrap": "5.3.8",
     "lodash-es": "^4.18.1",
+    "@popperjs/core": "^2.11.8",
     "sanitize-html": "2.13.0",
     "sass": "1.77.5"
   },

astro/src/components/CollaboratorList.astro

@@ -1,16 +1,16 @@
 ---
+import { getCollection, type CollectionEntry } from "astro:content";
+import { isEmpty } from "lodash-es";
+
 interface Props {
-  items?: Array<object>;
+  items?: Array<CollectionEntry<"collaborators">>;
 }
 
 const { items = [] } = Astro.props;
+const collaborators : Array<CollectionEntry<"collaborators">> =
+  !isEmpty(items) ? items : await getCollection("collaborators");
 
 import { Image } from "astro:assets";
-import { getCollection } from "astro:content";
-import { isEmpty } from "lodash-es";
-
-const collaborators =
-  !isEmpty(items) ? items : await getCollection("collaborators");
 ---
 
 <ul class="list-inline list-unstyled text-center collab-list rounded-2">

astro/src/components/ImageHeading.astro

@@ -2,10 +2,11 @@
 import { flatMap } from "lodash-es";
 
 import { getHeroThemeCssRules, type HeroThemeType } from "@lib/hero-image";
+type HTMLTag = keyof astroHTML.JSX.DefinedIntrinsicElements;
 
 interface Props {
   image: HeroThemeType;
-  element?: string;
+  element?: HTMLTag;
   fluid?: boolean;
 }
 

astro/src/components/TeamVignette.astro

@@ -5,11 +5,13 @@ import { Icon } from "astro-icon/components";
 
 type MemberProp = string | NonNullable<CollectionEntry<"staff">>;
 type TeamMemberData = CollectionEntry<"staff">["data"];
+type TeamName = keyof TeamMemberData["roles"];
+type HTMLTag = keyof astroHTML.JSX.DefinedIntrinsicElements;
 
 interface Props {
   member: MemberProp;
-  role?: string | boolean;
-  element?: string;
+  role?: TeamName | boolean;
+  element?: HTMLTag;
   left?: boolean;
   highlightName?: boolean;
   firstNameOnly?: boolean;
@@ -52,7 +54,7 @@ async function getTeamMemberData(member: MemberProp): Promise<TeamMemberData> {
 
 const memberData: TeamMemberData = await getTeamMemberData(member);
 const { name, cited, roles, photo, links } = memberData;
-const teamName = typeof role === "boolean" ? "default" : role;
+const teamName: TeamName  = typeof role === "boolean" ? "default" : role;
 const title = role && roles[teamName];
 
 function getDisplayName({ first, middle, last }: Names) {

astro/src/components/Testimonial.astro

@@ -3,11 +3,13 @@ import { getEntry, render } from "astro:content";
 import { Icon } from "astro-icon/components";
 import TeamVignette from "./TeamVignette.astro";
 
+type HTMLTag = keyof astroHTML.JSX.DefinedIntrinsicElements;
+
 interface Props {
   id: string;
   quotes?: boolean;
   text?: string;
-  element?: string;
+  element?: HTMLTag;
 }
 
 const { id, quotes = false, element = "div", text = undefined } = Astro.props;

astro/src/components/forms/TextField.astro

@@ -1,4 +1,7 @@
 ---
+type InputTypeAttribute = astroHTML.JSX.DefinedIntrinsicElements["input"]["type"];
+type InputPlaceholderAttribute = astroHTML.JSX.DefinedIntrinsicElements["input"]["placeholder"];
+
 export interface Props {
   /** Unique id for input */
   id: string;
@@ -9,9 +12,9 @@ export interface Props {
   /** Input value */
   value?: string;
   /** Input type (text, email, password, etc.) */
-  type?: string;
+  type?: InputTypeAttribute;
   /** Placeholder text */
-  placeholder?: string;
+  placeholder?: InputPlaceholderAttribute;
   /** Help text below input */
   helpText?: string;
   /** Error text */

astro/src/components/navigation/NavSiteSecondary.astro

@@ -53,8 +53,8 @@ const { "page-nav-id": pageNavId = undefined } = Astro.props;
   //    outline: 1px solid white;
   // }
 
-  @import "src/styles/dark-mode.scss";
-  @import "src/styles/responsive-sizing.scss";
+  @import "/src/styles/dark-mode.scss";
+  @import "/src/styles/responsive-sizing.scss";
 
   .navbar {
     min-width: 320px;

astro/src/content.config.ts

@@ -1,8 +1,10 @@
-import { defineCollection, reference, z } from "astro:content";
+import { defineCollection, reference } from "astro:content";
 import { glob } from "astro/loaders";
+import { z } from 'astro/zod';
 
 import { HeroTheme } from "@lib/hero-image";
 
+
 const atotw = defineCollection({
   loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/atotw" }),
   schema: z.object({
@@ -12,7 +14,7 @@ const atotw = defineCollection({
     who: z.string(),
     benefits: z.string(),
     tags: z.array(z.string()),
-    theme: z.nativeEnum(HeroTheme).optional().default(HeroTheme.notes),
+    theme: z.enum(HeroTheme).optional().default(HeroTheme.notes),
   }),
 });
 
@@ -73,7 +75,7 @@ const collaborators = defineCollection({
     z.object({
       name: z.string(),
       logo: image(),
-      href: z.string().url(),
+      href: z.url(),
       tags: z.array(z.string()),
     }),
 });
@@ -138,10 +140,10 @@ const podcastShows = defineCollection({
       image: image(),
       links: z
         .object({
-          applePodcasts: z.string().url(),
-          podcastIndex: z.string().url(),
-          spotify: z.string().url(),
-          youtube: z.string().url(),
+          applePodcasts: z.url(),
+          podcastIndex: z.url(),
+          spotify: z.url(),
+          youtube: z.url(),
         })
         .partial()
         .optional(),
@@ -165,8 +167,8 @@ const staff = defineCollection({
           image: image(),
           alt: z.string().optional(),
         })
-        .default({
-          // @ts-ignore: String path required.
+        .prefault({
+          // @ts-ignore: Match string of default image
           image: "/src/images/staff/Ta11yCat.png",
           alt: "The Tally Cat has claimed this spot.",
         }),
@@ -191,14 +193,14 @@ const staff = defineCollection({
         .partial(),
       links: z
         .object({
-          email: z.string().email(),
-          facebook: z.string().url(),
-          instagram: z.string().url(),
-          linkedin: z.string().url(),
-          mastodon: z.string().url(),
-          threads: z.string().url(),
-          twitter: z.string().url(),
-          website: z.string().url(),
+          email: z.email(),
+          facebook: z.url(),
+          instagram: z.url(),
+          linkedin: z.url(),
+          mastodon: z.url(),
+          threads: z.url(),
+          twitter: z.url(),
+          website: z.url(),
         })
         .partial()
         .optional(),

astro/src/layouts/TipLayout.astro

@@ -32,7 +32,7 @@ const {
 } = Astro.props;
 
 const { tip = id && (await getEntry("atotw", id)) } = Astro.props;
-if (tip === undefined || isEmpty(tip))
+if (tip === undefined || tip === "")
   throw new Error("Either the 'tip' or the 'id' is required");
 
 const { title = tip?.data.title || "Tip of the Week" } = Astro.props;

astro/src/pages/evaluations/index.astro

@@ -23,7 +23,6 @@ const crumbs: Breadcrumbs = [
 ];
 
 import Branding from "@components/Branding.astro";
-// import CollaboratorList from "@components/CollaboratorList.astro";
 import Column from "@components/Column.astro";
 import ExternalLink from "@components/ExternalLink.astro";
 import FlexColumn from "@components/FlexColumn.astro";

astro/src/pages/images/og/blog/[...id].ts

@@ -8,7 +8,7 @@ const pages = Object.fromEntries(
   collectionEntries.map(({ id, data }) => [id, data]),
 );
 
-export const { getStaticPaths, GET } = OGImageRoute({
+export const { getStaticPaths, GET } = await OGImageRoute({
   param: "id",
   pages: pages,
 

astro/src/pages/images/og/pages/[...name].ts

@@ -3,7 +3,7 @@
 import { OGImageRoute } from "astro-og-canvas";
 import { merge } from "lodash-es";
 
-export const { getStaticPaths, GET } = OGImageRoute({
+export const { getStaticPaths, GET } = await OGImageRoute({
   param: "name",
   pages: {
     daf: {

astro/src/pages/images/og/tips/[...id].ts

@@ -14,7 +14,7 @@ const pages: TipMapping = Object.fromEntries(
   collectionEntries.map(({ id, data }) => [id, data]),
 );
 
-export const { getStaticPaths, GET } = OGImageRoute({
+export const { getStaticPaths, GET } = await OGImageRoute({
   param: "id",
   pages: pages,