update: migrate from content.ts to content.config.ts

package.json

@@ -19,7 +19,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@waline/client": "^3.5.6",
     "astro": "^5.5.5",
-    "astro-compress": "^2.3.6",
+    "astro-compress": "^2.3.7",
     "astro-og-canvas": "^0.7.0",
     "astro-robots-txt": "^1.0.0",
     "canvaskit-wasm": "^0.39.1",
@@ -37,7 +37,7 @@
     "@astrojs/check": "^0.9.4",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.13.14",
-    "@types/sanitize-html": "^2.13.0",
+    "@types/sanitize-html": "^2.15.0",
     "@unocss/eslint-plugin": "66.1.0-beta.7",
     "@unocss/preset-attributify": "66.1.0-beta.7",
     "@unocss/reset": "66.1.0-beta.7",

src/components/PostList.astro

@@ -21,7 +21,7 @@ export interface Props {
 
 function getPostPath(post: Post) {
   // Prioritize abbrlink over slug
-  const postPath = post.data.abbrlink || post.slug
+  const postPath = post.data.abbrlink || post.id
   // Add language prefix to URL if current page is in a language subdirectory and not the default language
   return lang && lang !== defaultLocale ? `/${lang}/posts/${postPath}/` : `/posts/${postPath}/`
 }
@@ -40,7 +40,7 @@ function getPostPath(post: Post) {
           class="hover:c-primary"
           lg={isTag ? '' : 'font-medium text-4.5'}
           href={getPostPath(post)}
-          transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
+          transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}
           data-disable-transition-on-theme
         >
           {post.data.title}
@@ -50,7 +50,7 @@ function getPostPath(post: Post) {
       {/* mobile post time */}
       <div
         class="text-3.5 leading-6.875 font-time lg:hidden"
-        transition:name={`time-${post.data.abbrlink || post.slug}-${lang}`}
+        transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
         data-disable-transition-on-theme
       >
         <PostDate
@@ -62,7 +62,7 @@ function getPostPath(post: Post) {
       {/* desktop post time */}
       <div
         class="hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)"
-        transition:name={`time-${post.data.abbrlink || post.slug}`}
+        transition:name={`time-${post.data.abbrlink || post.id}`}
         data-disable-transition-on-theme
       >
         <PostDate

src/content.config.ts

@@ -1,8 +1,9 @@
 import { allLocales } from '@/config'
+import { glob } from 'astro/loaders'
 import { defineCollection, z } from 'astro:content'
 
-// Posts Collection
-const postsCollection = defineCollection({
+const posts = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/posts' }),
   schema: z.object({
     // required
     title: z.string(),
@@ -23,14 +24,11 @@ const postsCollection = defineCollection({
   }),
 })
 
-// About Page
-const aboutCollection = defineCollection({
+const about = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/about' }),
   schema: z.object({
     lang: z.enum(['', ...allLocales]).optional().default(''),
   }),
 })
 
-export const collections = {
-  posts: postsCollection,
-  about: aboutCollection,
-}
+export const collections = { posts, about }

src/pages/[...about].astro

@@ -1,7 +1,7 @@
 ---
 import { defaultLocale, moreLocales } from '@/config'
 import Layout from '@/layouts/Layout.astro'
-import { getCollection } from 'astro:content'
+import { getCollection, render } from 'astro:content'
 
 export async function getStaticPaths() {
   type PathItem = {
@@ -34,7 +34,7 @@ const { lang } = Astro.props
 const allAboutEntries = await getCollection('about')
 const aboutEntry = allAboutEntries.find(entry => entry.data.lang === lang)
   || allAboutEntries.find(entry => entry.data.lang === '')
-const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null }
+const { Content } = aboutEntry ? await render(aboutEntry) : { Content: null }
 ---
 
 <Layout>

src/pages/[...posts_slug].astro

@@ -9,7 +9,7 @@ import { getTagPath } from '@/i18n/path'
 import Layout from '@/layouts/Layout.astro'
 import { checkPostSlugDuplication } from '@/utils/content'
 import { generateDescription } from '@/utils/description'
-import { getCollection } from 'astro:content'
+import { getCollection, render } from 'astro:content'
 
 export async function getStaticPaths() {
   const posts = await getCollection('posts')
@@ -24,7 +24,7 @@ export async function getStaticPaths() {
   // Use a Map to store the relationship between post slugs and their supported languages
   // Set is used to store the supported languages for each post
   const slugToLangsMap = posts.reduce((map, post) => {
-    const slug = post.data.abbrlink || post.slug
+    const slug = post.data.abbrlink || post.id
     const lang = post.data.lang
 
     if (!map.has(slug)) {
@@ -58,7 +58,7 @@ export async function getStaticPaths() {
   posts.forEach((post: CollectionEntry<'posts'>) => {
     // Show drafts in dev mode only
     if (import.meta.env.DEV || !post.data.draft) {
-      const slug = post.data.abbrlink || post.slug
+      const slug = post.data.abbrlink || post.id
       const lang = post.data.lang
 
       if (lang === defaultLocale || lang === '') {
@@ -79,7 +79,7 @@ export async function getStaticPaths() {
     posts.forEach((post: CollectionEntry<'posts'>) => {
       // Process posts with matching language or no language specified
       if ((import.meta.env.DEV || !post.data.draft) && (post.data.lang === lang || post.data.lang === '')) {
-        const slug = post.data.abbrlink || post.slug
+        const slug = post.data.abbrlink || post.id
         paths.push({
           params: { posts_slug: `${lang}/posts/${slug}/` },
           props: {
@@ -97,13 +97,13 @@ export async function getStaticPaths() {
 
 const { post, lang, supportedLangs } = Astro.props
 const description = generateDescription(post, 'meta')
-const { Content, headings, remarkPluginFrontmatter } = await post.render()
+const { Content, headings, remarkPluginFrontmatter } = await render(post)
 ---
 
 <Layout
   postTitle={post.data.title}
   postDescription={description}
-  postSlug={post.slug}
+  postSlug={post.id}
   supportedLangs={supportedLangs}
 >
   <article class="heti mb-12.6">
@@ -113,7 +113,7 @@ const { Content, headings, remarkPluginFrontmatter } = await post.render()
       <!-- Title -->
       <h1 class="post-title">
         <span
-          transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
+          transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}
           data-disable-transition-on-theme
         >
           {post.data.title}
@@ -124,7 +124,7 @@ const { Content, headings, remarkPluginFrontmatter } = await post.render()
     <!-- Date -->
     <div
       class="mb-16.3 block c-primary font-time"
-      transition:name={`time-${post.data.abbrlink || post.slug}-${lang}`}
+      transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
       data-disable-transition-on-theme
     >
       <PostDate

src/pages/og/[...image].ts

@@ -9,7 +9,7 @@ const blogEntries = await getCollection('posts')
 // Convert blog entries into a lookup object with slug as key and title/description as value
 const pages = Object.fromEntries(
   blogEntries.map((post: CollectionEntry<'posts'>) => [
-    post.slug,
+    post.id,
     {
       title: post.data.title,
       description: post.data.description || generateDescription(post, 'og'),

src/utils/content.ts

@@ -1,6 +1,6 @@
 import type { CollectionEntry } from 'astro:content'
 import { defaultLocale } from '@/config'
-import { getCollection } from 'astro:content'
+import { getCollection, render } from 'astro:content'
 
 // Type definitions
 export type Post = CollectionEntry<'posts'> & {
@@ -11,7 +11,7 @@ export type Post = CollectionEntry<'posts'> & {
 
 // Add metadata including reading time to post
 async function addMetaToPost(post: CollectionEntry<'posts'>): Promise<Post> {
-  const { remarkPluginFrontmatter } = await post.render()
+  const { remarkPluginFrontmatter } = await render(post)
   return { ...post, remarkPluginFrontmatter: remarkPluginFrontmatter as { minutes: number } }
 }
 
@@ -26,7 +26,7 @@ export async function checkPostSlugDuplication(posts: CollectionEntry<'posts'>[]
 
   posts.forEach((post) => {
     const lang = post.data.lang
-    const slug = post.data.abbrlink || post.slug
+    const slug = post.data.abbrlink || post.id
 
     if (!slugMap.has(lang)) {
       slugMap.set(lang, new Set())

src/utils/description.ts

@@ -70,5 +70,5 @@ export function generateDescription(
     return post.data.description
 
   const lang = (!post.data.lang || post.data.lang === '') ? defaultLocale : post.data.lang
-  return generateExcerpt(post.body, scene, lang)
+  return generateExcerpt(post.body || '', scene, lang)
 }

src/utils/rss.ts

@@ -48,7 +48,7 @@ export async function generateRSS({ lang }: GenerateRSSOptions = {}) {
       title: post.data.title,
       // Generate URL with language prefix and abbrlink/slug
       link: new URL(
-        `${post.data.lang !== defaultLocale && post.data.lang !== '' ? `${post.data.lang}/` : ''}posts/${post.data.abbrlink || post.slug}/`,
+        `${post.data.lang !== defaultLocale && post.data.lang !== '' ? `${post.data.lang}/` : ''}posts/${post.data.abbrlink || post.id}/`,
         url,
       ).toString(),
       description: generateDescription(post, 'rss'),