Use Content Collections

.gitignore

@@ -1,6 +1,7 @@
 # build output
 dist/
 .output/
+.astro
 
 # dependencies
 node_modules/

astro.config.mjs

@@ -4,7 +4,7 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
-import vercel from '@astrojs/vercel/serverless';
+import vercel from '@astrojs/vercel/static';
 
 // https://astro.build/config
 export default defineConfig({
@@ -16,6 +16,6 @@ export default defineConfig({
       wrap: false,
     },
   },
-  output: 'server',
+  output: 'static',
   adapter: vercel(),
 });

src/content/config.ts

@@ -0,0 +1,15 @@
+import { z, defineCollection } from 'astro:content';
+// 2. Define a schema for each collection you'd like to validate.
+const postsCollection = defineCollection({
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    coverImage: z.string().optional(),
+    description: z.string().optional(),
+  }),
+});
+
+// 3. Export a single `collections` object to register your collection(s)
+export const collections = {
+  posts: postsCollection,
+};

src/pages/posts/2023-01-01-review-2022.md → src/content/posts/2023-01-01-review-2022.md

@@ -1,7 +1,6 @@
 ---
 title: 2022年まとめ
 date: 2023-01-01
-layout: '../../layouts/Post.astro'
 coverImage: '/images/2023-01-01-review-2022-kyoto.JPG'
 ---
 

src/pages/posts/2023-01-13-created-my-blog.md → src/content/posts/2023-01-13-created-my-blog.md

@@ -1,7 +1,6 @@
 ---
 title: ブログを自作した
 date: 2023-01-13
-layout: '../../layouts/Post.astro'
 ---
 
 文章を書くということに対する苦手意識を改善したい、また自分の考えや行動を後から振り返られるようにするべく、ブログの投稿の習慣化を今年の目標にしている。

src/pages/posts/2023-01-15-migrated-from-packer-to-lazy.md → src/content/posts/2023-01-15-migrated-from-packer-to-lazy.md

@@ -1,7 +1,6 @@
 ---
 title: NeoVim のプラグインマネージャーを packer.nvim から lazy.nvim に移行した
 date: 2023-01-15
-layout: '../../layouts/Post.astro'
 ---
 
 最近 lazy.nvim という NeoVim のプラグインマネージャーの存在を知った。

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/Post.astro

@@ -2,24 +2,31 @@
 import { format } from 'date-fns';
 import Layout from './Layout.astro';
 
-const { frontmatter } = Astro.props;
+interface Props {
+  title: string;
+  date: Date;
+  description?: string;
+  coverImage?: string;
+}
+
+const { title, date, description, coverImage } = Astro.props;
 ---
 
 <Layout
-  title={frontmatter.title}
-  description={frontmatter.description}
+  title={title}
+  description={description}
   type="article"
-  coverImage={frontmatter.coverImage}
+  coverImage={coverImage}
 >
   <main>
     <article>
       <header class="block my-10 font-inter">
-        <h1 class="font-bold text-4xl">{frontmatter.title}</h1>
+        <h1 class="font-bold text-4xl">{title}</h1>
         <time
-          datetime={format(new Date(frontmatter.date), 'yyyy-MM-dd')}
+          datetime={format(date, 'yyyy-MM-dd')}
           class="text-sm text-gray-500"
         >
-          {format(new Date(frontmatter.date), 'yyyy-MM-dd')}
+          {format(date, 'yyyy-MM-dd')}
         </time>
       </header>
       <div class="markdown mb-10">

src/pages/index.astro

@@ -3,10 +3,10 @@ import { format } from 'date-fns';
 
 import Layout from '../layouts/Layout.astro';
 
-const posts = (await Astro.glob('../pages/posts/*.md')).sort(
+import { getCollection } from 'astro:content';
+const posts = (await getCollection('posts')).sort(
   (a, b) =>
-    new Date(b.frontmatter.date).valueOf() -
-    new Date(a.frontmatter.date).valueOf()
+    a.data.date.valueOf() - b.data.date.valueOf()
 );
 ---
 
@@ -21,17 +21,17 @@ const posts = (await Astro.glob('../pages/posts/*.md')).sort(
                 <li class="text-lg py-2 font-inter">
                   <time
                     datetime={format(
-                      new Date(post.frontmatter.date),
+                      new Date(post.data.date),
                       'yyyy-MM-dd'
                     )}
                   >
-                    {format(new Date(post.frontmatter.date), 'yyyy-MM-dd')}
+                    {format(new Date(post.data.date), 'yyyy-MM-dd')}
                   </time>
                   <a
-                    href={post.url}
+                    href=`/posts/${post.slug}`
                     class="text-blue-600 hover:text-gray-600 hover:underline"
                   >
-                    {post.frontmatter.title}
+                    {post.data.title}
                   </a>
                 </li>
               </article>

src/pages/posts/[slug].astro

@@ -0,0 +1,18 @@
+---
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const postsEntries = await getCollection('posts');
+  return postsEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+import Post from '../../layouts/Post.astro';
+---
+
+<Post title={entry.data.title} date={entry.data.date} description={entry.data.description} coverImage={entry.data.coverImage} >
+  <Content />
+</Post>

src/pages/rss.xml.js

@@ -1,15 +1,16 @@
 import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
 
-const postImportResult = import.meta.glob('./posts/*.md', { eager: true });
-const posts = Object.values(postImportResult);
-
-export const get = () =>
-  rss({
+export async function get(context) {
+  const posts = await getCollection('posts');
+  return rss({
     title: 'munisystem.dev',
-    site: import.meta.env.SITE,
+    description: "munisystem's blog",
+    site: context.site,
     items: posts.map((post) => ({
-      link: post.url,
-      title: post.frontmatter.title,
-      pubDate: post.frontmatter.pubDate,
+      link: `/posts/${post.slug}`,
+      title: post.data.title,
+      pubDate: post.data.date,
     })),
   });
+}

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "jsx": "react",
-    "types": ["@astrojs/image/client"]
+    "types": ["@astrojs/image/client"],
+    "strictNullChecks": true
   }
 }