feat: Upgrade to Astro 6

- Astro 5.x → Astro 6.1.2
- @astrojs/node 9.x → 10.x
- Content config: src/content/config.ts → src/content.config.ts
- Update to glob loader pattern for content collections
- Replace post.slug with post.id for content loader
- Replace post.render() with render(post)

package.json

@@ -16,11 +16,11 @@
     "db:seed": "astro db seed"
   },
   "dependencies": {
-    "@astrojs/db": "^0.20.0",
-    "@astrojs/node": "^9.5.4",
+    "@astrojs/db": "^0.20.1",
+    "@astrojs/node": "^10.0.4",
     "@astrojs/sitemap": "^3.7.2",
     "@tailwindcss/vite": "^4.2.1",
-    "astro": "^5.17.1",
+    "astro": "^6.1.2",
     "astro-consent": "^1.0.17",
     "better-sqlite3": "^12.8.0",
     "drizzle-orm": "^0.45.1",

src/content.config.ts

@@ -1,7 +1,8 @@
 import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const blog = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
   schema: z.object({
     title: z.string(),
     description: z.string(),

src/pages/blog/[slug].astro

@@ -1,17 +1,17 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog');
   return posts.map(post => ({
-    params: { slug: post.slug },
+    params: { slug: post.id },
     props: { post },
   }));
 }
 
 const { post } = Astro.props;
-const { Content } = await post.render();
+const { Content } = await render(post);
 
 // Map blog slugs to feature images
 const featureImages: Record<string, string> = {
@@ -27,7 +27,7 @@ const featureImages: Record<string, string> = {
   'website-2026-must-have': '/images/blog/website-2026.jpg',
 };
 
-const featureImage = featureImages[post.slug] || '/images/blog/ai-sales-growth.jpg';
+const featureImage = featureImages[post.id] || '/images/blog/ai-sales-growth.jpg';
 
 const formatDate = (date: Date) => {
   return date.toLocaleDateString('th-TH', {
@@ -60,7 +60,7 @@ const schemaData = {
   },
   "mainEntityOfPage": {
     "@type": "WebPage",
-    "@id": `https://www.moreminimore.com/blog/${post.slug}`
+    "@id": `https://www.moreminimore.com/blog/${post.id}`
   }
 };
 
@@ -85,7 +85,7 @@ const breadcrumbSchema = {
       "@type": "ListItem",
       "position": 3,
       "name": post.data.title,
-      "item": `https://www.moreminimore.com/blog/${post.slug}`
+      "item": `https://www.moreminimore.com/blog/${post.id}`
     }
   ]
 };

src/pages/blog/index.astro

@@ -5,7 +5,7 @@ import { getCollection } from 'astro:content';
 export async function getStaticPaths() {
   const posts = await getCollection('blog');
   return posts.map(post => ({
-    params: { slug: post.slug },
+    params: { slug: post.id },
     props: { post },
   }));
 }
@@ -130,7 +130,7 @@ const formatDate = (date: Date) => {
             <!-- Feature Image -->
             <div class="relative h-48 overflow-hidden">
               <img 
-                src={featureImages[post.slug] || '/images/blog/ai-sales-growth.jpg'} 
+                src={featureImages[post.id] || '/images/blog/ai-sales-growth.jpg'} 
                 alt={post.data.title}
                 class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
               />
@@ -147,7 +147,7 @@ const formatDate = (date: Date) => {
                 <span class="text-sm text-gray-600">{formatDate(post.data.pubDate)}</span>
               </div>
               <h2 class="text-xl font-bold mb-3 line-clamp-2 group-hover:text-yellow-600 transition-colors">
-                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+                <a href={`/blog/${post.id}`}>{post.data.title}</a>
               </h2>
               <p class="text-gray-700 mb-4 line-clamp-2">
                 {post.data.description}
@@ -157,7 +157,7 @@ const formatDate = (date: Date) => {
                   <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">#{tag}</span>
                 ))}
               </div>
-              <a href={`/blog/${post.slug}`} class="text-yellow-600 font-medium hover:text-yellow-800 inline-flex items-center gap-2 group-hover:gap-3 transition-all">
+              <a href={`/blog/${post.id}`} class="text-yellow-600 font-medium hover:text-yellow-800 inline-flex items-center gap-2 group-hover:gap-3 transition-all">
                 อ่านเพิ่มเติม →
               </a>
             </div>