Support Astro 6 (#1534)

Author: arbaev

.changeset/support-astro-6.md

@@ -0,0 +1,5 @@
+---
+'@keystatic/astro': minor
+---
+
+Add support for Astro 6 in `peerDependencies`

dev-projects/astro-content/astro.config.mjs

@@ -1,12 +1,18 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';
+import tailwindcss from '@tailwindcss/vite';
 import sitemap from '@astrojs/sitemap';
 import markdoc from '@astrojs/markdoc';
+import node from '@astrojs/node';
 import keystatic from '@keystatic/astro';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://example.com',
-  integrations: [tailwind(), react(), sitemap(), markdoc(), keystatic()],
+  output: 'server',
+  adapter: node({ mode: 'standalone' }),
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  integrations: [react(), sitemap(), markdoc(), keystatic()],
 });

dev-projects/astro-content/package.json

@@ -11,19 +11,19 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/markdoc": "^0.12.9",
-    "@astrojs/node": "^9.0.2",
-    "@astrojs/react": "^4.2.0",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^6.0.0",
+    "@astrojs/markdoc": "^1.0.3",
+    "@astrojs/node": "^10.0.5",
+    "@astrojs/react": "^5.0.3",
+    "@astrojs/sitemap": "^3.7.2",
     "@keystatic/astro": "workspace:^",
     "@keystatic/core": "workspace:^",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.2.3",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "astro": "^5.2.5",
+    "astro": "^6.1.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^4.2.3"
   }
 }

…ects/astro-content/src/content/config.ts …ects/astro-content/src/content.config.tsdev-projects/astro-content/src/content/config.ts renamed to dev-projects/astro-content/src/content.config.ts dev-projects/astro-content/src/content/config.ts renamed to dev-projects/astro-content/src/content.config.ts

@@ -1,7 +1,9 @@
 // @ts-ignore
 import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const blog = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdoc}', base: './src/content/blog' }),
   // Type-check frontmatter using a schema
   schema: z.object({
     title: z.string(),

dev-projects/astro-content/src/content/blog/markdown-style-guide.mdoc

@@ -39,7 +39,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 #### Output
 
-![blog placeholder](../../../public/blog-placeholder-about.jpg)
+![blog placeholder](/favicon.svg)
 
 ## Blockquotes
 

dev-projects/astro-content/src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/global.css';
+
 interface Props {
   title: string;
 }

dev-projects/astro-content/src/pages/blog/[...slug].astro

@@ -1,18 +1,20 @@
 ---
-import { CollectionEntry, getCollection } from 'astro:content';
+import { type CollectionEntry, getCollection, render } from 'astro:content';
 import BlogPost from '../../layouts/BlogPost.astro';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const posts = await getCollection('blog');
   return posts.map(post => ({
-    params: { slug: post.slug },
+    params: { slug: post.id },
     props: post,
   }));
 }
 type Props = CollectionEntry<'blog'>;
 
 const post = Astro.props;
-const { Content } = await post.render();
+const { Content } = await render(post);
 ---
 
 <BlogPost {...post.data}>

dev-projects/astro-content/src/pages/blog/index.astro

@@ -6,6 +6,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import { getCollection } from 'astro:content';
 import FormattedDate from '../../components/FormattedDate.astro';
 
+export const prerender = true;
+
 const posts = (await getCollection('blog')).sort(
   (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
 );
@@ -24,7 +26,7 @@ const posts = (await getCollection('blog')).sort(
           {
             posts.map(post => (
               <li class="text-center">
-                <a href={`/blog/${post.slug}/`} class="group">
+                <a href={`/blog/${post.id}/`} class="group">
                   <img
                     width={720}
                     height={360}

dev-projects/astro-content/src/styles/global.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';