Astro v6 (#683)

AlexanderKaran · web-flow · commit 18b3a1d9a843 · 2026-01-21T20:22:52.000+08:00
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20' # LTS version
+          node-version: '24' # LTS version
 
       # Install pnpm (version from package.json packageManager field)
       - name: Install pnpm
diff --git a/.github/workflows/check-tool-links.yml b/.github/workflows/check-tool-links.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version: '24'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -45,5 +45,4 @@ export default defineConfig({
   adapter: netlify(),
   site: 'https://openapi.tools',
   trailingSlash: 'never',
-  prefetch: true,
 });
diff --git a/netlify.toml b/netlify.toml
@@ -3,7 +3,7 @@
   publish = "dist"
 
 [build.environment]
-  NODE_VERSION = "20"
+  NODE_VERSION = "24"
 
 [build.processing.html]
   pretty_urls = false
diff --git a/package.json b/package.json
@@ -22,11 +22,11 @@
   },
   "dependencies": {
     "@algolia/autocomplete-core": "^1.19.4",
-    "@astrojs/check": "^0.9.6",
-    "@astrojs/netlify": "^6.6.3",
-    "@astrojs/react": "^4.4.2",
-    "@astrojs/rss": "^4.0.14",
-    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/check": "0.9.6-beta.1",
+    "@astrojs/netlify": "7.0.0-beta.5",
+    "@astrojs/react": "5.0.0-beta.1",
+    "@astrojs/rss": "4.0.15-beta.1",
+    "@astrojs/sitemap": "3.6.1-beta.2",
     "@astrojs/ts-plugin": "^1.10.6",
     "@headlessui/react": "^2.2.9",
     "@markdoc/markdoc": "^0.5.4",
@@ -37,8 +37,8 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@sindresorhus/slugify": "^3.0.0",
     "@tanstack/react-table": "^8.21.3",
-    "astro": "^5.16.6",
-    "astro-seo": "^0.8.4",
+    "astro": "6.0.0-beta.1",
+    "astro-seo": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -57,7 +57,7 @@
     "sharp": "^0.34.0",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.3.0",
-    "zod": "^3.23.8"
+    "zod": "^4.3.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import posthog from 'posthog-js';
-import type { Category } from 'src/content/config';
+import type { Category } from 'src/content.config';
 
 import generateUrlWithUTM from '@/utils/generateUrlWithUTM';
 
diff --git a/src/components/SponsorBanner.astro b/src/components/SponsorBanner.astro
@@ -1,6 +1,6 @@
 ---
 // SponsorBanner.astro
-import type { BannerSponsor } from 'src/content/config';
+import type { BannerSponsor } from 'src/content.config';
 
 import generateUrlWithUTM from '@/utils/generateUrlWithUTM';
 
diff --git a/src/components/ToolBadge.tsx b/src/components/ToolBadge.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import type { Badge } from '@/content/config';
+import type { Badge } from '@/content.config';
 
 interface ToolBadgeProps {
   badge: Badge;
diff --git a/src/components/table/Columns.tsx b/src/components/table/Columns.tsx
@@ -1,5 +1,5 @@
 import { type ColumnDef } from '@tanstack/react-table';
-import type { Category, Tool } from 'src/content/config';
+import type { Category, Tool } from 'src/content.config';
 import { isSponsorshipActive } from 'src/utils/sponsorship';
 
 import { getDeviconClassName } from '@/utils/languageUtils';
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -1,15 +1,17 @@
 // 1. Import utilities from `astro:content`
-import { defineCollection, reference, z } from 'astro:content';
+import { defineCollection, reference } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
 
-import { icons } from '../components/Icon';
+import { icons } from './components/Icon';
 
 const iconNames = Object.keys(icons);
 
 const BannerSponsorSchema = z.object({
   name: z.string(),
   description: z.string(),
   ctaText: z.string().max(20), // 20 characters max
-  ctaUrl: z.string().url(),
+  ctaUrl: z.url(),
 });
 
 export type BannerSponsor = z.infer<typeof BannerSponsorSchema>;
@@ -42,9 +44,9 @@ const ToolSchema = z.object({
   name: z.string(),
   description: z.string(),
   categories: z.array(reference('categories')),
-  languages: z.record(z.boolean()).optional(),
-  link: z.string().url().optional(),
-  repo: z.string().url().optional(),
+  languages: z.record(z.string(), z.boolean()).optional(),
+  link: z.url().optional(),
+  repo: z.url().optional(),
   oasVersions: z
     .object({
       v2: z.boolean().optional(),
@@ -64,7 +66,7 @@ const ToolSchema = z.object({
     .array(
       z.object({
         title: z.string(),
-        url: z.string().url(),
+        url: z.url(),
         date: z.date(),
       })
     )
@@ -74,7 +76,7 @@ const ToolSchema = z.object({
       z.object({
         startDate: z.date(),
         endDate: z.date().optional(), // when sponsorship period ended
-        url: z.string().url().optional(), // optionally override default link while sponsored
+        url: z.url().optional(), // optionally override default link while sponsored
         testimonial: z.string().optional(), // optionally include a testimonial
       })
     )
@@ -114,27 +116,30 @@ export type CollectionFilters = z.infer<typeof CollectionFiltersSchema>;
 
 // 2. Define your collection(s)
 const bannerSponsorsCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.md', base: './src/content/banner-sponsors' }),
   schema: BannerSponsorSchema,
 });
 
 const categoriesCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.md', base: './src/content/categories' }),
   schema: CategorySchema,
 });
 
 const badgesCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.md', base: './src/content/badges' }),
   schema: BadgeSchema,
 });
 
 const toolsCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.md', base: './src/content/tools' }),
   schema: ToolSchema,
 });
 
 const curatedCollectionsCollection = defineCollection({
-  type: 'content',
+  loader: glob({
+    pattern: '**/*.md',
+    base: './src/content/curated-collections',
+  }),
   schema: CollectionSchema,
 });
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -59,7 +59,7 @@ const categories: NavigationItems = [
     title: 'Collections',
     links: allCollections.map((collection) => ({
       title: collection.data.name,
-      href: `/collections/${collection.slug}`,
+      href: `/collections/${collection.id}`,
       description: collection.data.description,
     })),
   },
@@ -69,7 +69,7 @@ const categories: NavigationItems = [
       .sort((a, b) => a.data.name.localeCompare(b.data.name))
       .map((category) => ({
         title: category.data.name,
-        href: `/categories/${category.slug}`,
+        href: `/categories/${category.id}`,
         description: category.data.description,
       })),
   },
diff --git a/src/pages/categories/[...slug].astro b/src/pages/categories/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import type { GetStaticPaths } from 'astro';
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection, getEntry, render } from 'astro:content';
 
 import { FilterableToolsList } from '@/components/filters/FilterableToolsList';
 import Link from '@/components/Link';
@@ -20,7 +20,7 @@ import { isModern } from '@/utils/versionFilters';
 export const getStaticPaths: GetStaticPaths = async () => {
   const categories = await getCollection('categories');
   return categories.map((category) => ({
-    params: { slug: category.slug },
+    params: { slug: category.id },
     props: { category },
   }));
 };
@@ -33,7 +33,7 @@ if (!category) {
   throw new Error(`No category found for slug ${slug}`);
 }
 
-const { Content } = await category.render();
+const { Content } = await render(category);
 
 // Note: category.id includes .md extension, but tool category references don't
 const categoryIdWithoutExt = category.id.replace(/\.md$/, '');
@@ -90,7 +90,7 @@ const tools = [...sponsoredTools, ...nonSponsoredTools];
 const toolsData = tools.map((tool) => ({
   category: category.data,
   tool: tool.data,
-  slug: tool.slug,
+  slug: tool.id,
 }));
 ---
 
@@ -128,7 +128,7 @@ const toolsData = tools.map((tool) => ({
           url: `https://openapi.tools/categories/${slug}`,
           tools: tools.map((t) => ({
             name: t.data.name,
-            url: `https://openapi.tools/tools/${t.slug}`,
+            url: `https://openapi.tools/tools/${t.id}`,
           })),
         })
       )}
diff --git a/src/pages/categories/[slug].og.png.ts b/src/pages/categories/[slug].og.png.ts
@@ -12,7 +12,7 @@ type OgRouteParams = {
 
 export async function getStaticPaths() {
   const categories = await getCollection('categories');
-  return categories.map((category) => ({ params: { slug: category.slug } }));
+  return categories.map((category) => ({ params: { slug: category.id } }));
 }
 
 export const GET = async ({ params }: OgRouteParams) => {
diff --git a/src/pages/collections/[...slug].astro b/src/pages/collections/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import type { GetStaticPaths } from 'astro';
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection, getEntry, render } from 'astro:content';
 
 import { FilterableCollectionView } from '@/components/filters/FilterableCollectionView';
 import PageHeader from '@/components/PageHeader.astro';
@@ -12,7 +12,7 @@ import {
   serializeSchema,
 } from '@/utils/structuredData';
 import { isLegacy, isModern } from '@/utils/versionFilters';
-import type { CollectionFilters } from '@/content/config';
+import type { CollectionFilters } from '@/content.config';
 
 // Helper function to filter tools based on collection filters
 function filterTools(
@@ -77,7 +77,7 @@ function filterTools(
 export const getStaticPaths: GetStaticPaths = async () => {
   const curatedCollections = await getCollection('curated-collections');
   return curatedCollections.map((collection) => ({
-    params: { slug: collection.slug },
+    params: { slug: collection.id },
     props: { collection },
   }));
 };
@@ -90,7 +90,7 @@ if (!collection) {
   throw new Error(`No collection found for slug ${slug}`);
 }
 
-const { Content } = await collection.render();
+const { Content } = await render(collection);
 
 // 3. Get all tools and filter them based on collection filters
 const allTools = await getCollection('tools');
@@ -130,7 +130,7 @@ const categoryGroups = categoriesWithTools.map(({ category, tools }) => ({
   description: category.data.description,
   tools: tools.map((tool) => ({
     tool: tool.data,
-    slug: tool.slug,
+    slug: tool.id,
     category: category.data,
   })),
 }));
@@ -170,7 +170,7 @@ const categoryGroups = categoriesWithTools.map(({ category, tools }) => ({
           url: `https://openapi.tools/collections/${slug}`,
           tools: filteredTools.slice(0, 10).map((tool) => ({
             name: tool.data.name,
-            url: `https://openapi.tools/tools/${tool.slug}`,
+            url: `https://openapi.tools/tools/${tool.id}`,
           })),
         })
       )}
diff --git a/src/pages/collections/[slug].og.png.ts b/src/pages/collections/[slug].og.png.ts
@@ -5,7 +5,7 @@ import { html } from 'satori-html';
 import sharp from 'sharp';
 
 import { isLegacy } from '@/utils/versionFilters';
-import type { CollectionFilters } from '@/content/config';
+import type { CollectionFilters } from '@/content.config';
 
 type OgRouteParams = {
   params: {
@@ -50,7 +50,7 @@ function filterTools(
 export async function getStaticPaths() {
   const collections = await getCollection('curated-collections');
   return collections.map((collection) => ({
-    params: { slug: collection.slug },
+    params: { slug: collection.id },
   }));
 }
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -35,7 +35,7 @@ const sortedCategories = allCategories.sort((a, b) =>
       {
         sortedCategories.map((category) => (
           <QuickLink
-            href={`/categories/${category.slug}`}
+            href={`/categories/${category.id}`}
             title={category.data.name}
             body={category.data.description}
           />
diff --git a/src/pages/legacy.astro b/src/pages/legacy.astro
@@ -90,7 +90,7 @@ for (const category of sortedCategories) {
           url: 'https://openapi.tools/legacy',
           tools: legacyTools.slice(0, 10).map((t) => ({
             name: t.data.name,
-            url: `https://openapi.tools/tools/${t.slug}`,
+            url: `https://openapi.tools/tools/${t.id}`,
           })),
         })
       )}
@@ -126,7 +126,7 @@ for (const category of sortedCategories) {
                 (c) => c.id === categoryId
               );
               if (!category) return null;
-              const categorySlug = category.slug;
+              const categorySlug = category.id;
               return (
                 <li>
                   <a
@@ -150,14 +150,14 @@ for (const category of sortedCategories) {
           const toolsData = tools.map((tool) => ({
             category: category.data,
             tool: tool.data,
-            slug: tool.slug,
+            slug: tool.id,
           }));
 
           return (
-            <section id={category.slug} class="mb-12 scroll-mt-20">
+            <section id={category.id} class="mb-12 scroll-mt-20">
               <h2 class="mb-2 text-2xl font-bold text-slate-700/90 dark:text-slate-300">
                 <a
-                  href={`#${category.slug}`}
+                  href={`#${category.id}`}
                   class="hover:text-emerald-600 dark:hover:text-emerald-300"
                 >
                   {category.data.name}
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
@@ -18,7 +18,7 @@ export async function GET(context: APIContext) {
     items: sortedTools.map((tool) => ({
       title: tool.data.name,
       description: tool.data.description,
-      link: `/tools/${tool.slug}`,
+      link: `/tools/${tool.id}`,
       // Note: pubDate omitted as tools don't have creation dates
     })),
     customData: `<language>en-us</language>`,
diff --git a/src/pages/sponsor/index.astro b/src/pages/sponsor/index.astro
@@ -110,7 +110,7 @@ const uniqueSponsors = activeSponsors.filter((tool) => {
           <ul>
             {uniqueSponsors.map((tool) => (
               <li>
-                <Link href={`/tools/${tool.slug}`}>{tool.data.name}</Link>
+                <Link href={`/tools/${tool.id}`}>{tool.data.name}</Link>
                 {tool.data.description && ` - ${tool.data.description}`}
               </li>
             ))}
diff --git a/src/pages/tools/[...slug].astro b/src/pages/tools/[...slug].astro
diff --git a/src/pages/tools/[slug].og.png.ts b/src/pages/tools/[slug].og.png.ts
diff --git a/src/pages/tools/index.astro b/src/pages/tools/index.astro
diff --git a/src/utils/enrichFeaturedArticles.ts b/src/utils/enrichFeaturedArticles.ts
diff --git a/src/utils/generateUrlWithUTM.ts b/src/utils/generateUrlWithUTM.ts
diff --git a/src/utils/sponsorship.ts b/src/utils/sponsorship.ts
diff --git a/src/utils/versionFilters.ts b/src/utils/versionFilters.ts
