refactor: migrate content

Author: korosuke613

.gitignore

@@ -25,3 +25,4 @@ Thumbs.db
 build/
 
 .env
+.astro/

.vscode/settings.json

@@ -32,5 +32,8 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "terminal.integrated.defaultProfile.linux": "zsh"
+  "terminal.integrated.defaultProfile.linux": "zsh",
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  }
 }

src/components/Content.tsx

@@ -1,27 +1,27 @@
 import type { MarkdownHeading } from 'astro';
+import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import type { ReactNode } from 'react';
 
 import { EditGitHub } from '@/components/EditGitHub';
 import { Toc } from '@/components/Toc';
-import type { IArticleFrontmatter } from '@/types/IArticleFrontmatter';
 import { AppConfig } from '@/utils/AppConfig';
 
 type IContentProps = {
-  content: IArticleFrontmatter;
+  content: CollectionEntry<'posts'>;
   headings: MarkdownHeading[];
   children: ReactNode;
 };
 
 const Content: React.FC<IContentProps> = (props: IContentProps) => {
   return (
     <div className="mx-auto mt-5 max-w-prose">
-      {props.content.imgSrc && (
+      {props.content.data.imgSrc && (
         <div className="aspect-w-3 aspect-h-2">
           <img
             className="h-full w-full rounded-lg object-cover object-center"
-            src={path.join(AppConfig.base, props.content.imgSrc)}
-            alt={props.content.imgAlt}
+            src={path.join(AppConfig.base, props.content.data.imgSrc)}
+            alt={props.content.data.imgAlt}
             loading="lazy"
           />
         </div>

src/components/ContentHeader.tsx

@@ -1,12 +1,12 @@
+import type { CollectionEntry } from 'astro:content';
 import { format } from 'date-fns';
 
-import type { IArticleFrontmatter } from '@/types/IArticleFrontmatter';
 import type { Tags } from '@/utils/Tag';
 
 import { Tag } from './Tag';
 
 type IContentHeaderProps = {
-  content: IArticleFrontmatter;
+  content: CollectionEntry<'posts'>;
   author: string;
   tags: Tags;
   contentCategory: string;
@@ -15,12 +15,12 @@ type IContentHeaderProps = {
 export const ContentHeader = (props: IContentHeaderProps) => (
   <>
     <h1 id="contents_header" className="text-center text-3xl font-bold">
-      {props.content.title.replace('\\n', '')}
+      {props.content.data.title.replace('\\n', '')}
     </h1>
 
     <div className="mt-2 text-center text-sm text-gray-400">
       By {props.author} on{' '}
-      {format(new Date(props.content.pubDate), 'LLL d, yyyy')}
+      {format(new Date(props.content.data.pubDate), 'LLL d, yyyy')}
     </div>
 
     <div className="mt-4 flex flex-wrap justify-center gap-2">

src/components/EditGitHub.tsx

@@ -1,15 +1,15 @@
+import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import { BsGithub } from 'react-icons/bs/index';
 
-import type { IArticleFrontmatter } from '@/types/IArticleFrontmatter';
 import { AppConfig } from '@/utils/AppConfig';
 
 type IEditGitHubProps = {
-  content: IArticleFrontmatter;
+  content: CollectionEntry<'posts'>;
 };
 
 export const EditGitHub = (props: IEditGitHubProps) => {
-  if (props.content.url === undefined) {
+  if (props.content.id === undefined) {
     return <></>;
   }
 
@@ -19,14 +19,14 @@ export const EditGitHub = (props: IEditGitHubProps) => {
     'main',
     'src',
     'pages',
-    props.content.url
+    props.content.id
   );
 
   return (
     <div className="flex justify-end">
       <a
         style={{ height: 'fit-content' }}
-        href={`https://${url}.md`}
+        href={`https://${url}`}
         target="_blank"
         rel="noopener noreferrer"
       >

src/components/PostCard.tsx

@@ -1,30 +1,34 @@
 import { format } from 'date-fns';
 import path from 'path';
 
-import type { IContent } from '@/types/IArticleFrontmatter';
+import type { IPost } from '@/types/IArticleFrontmatter';
 import { AppConfig } from '@/utils/AppConfig';
 import { transformTitleForContentCard } from '@/utils/StringWidth';
 import type { Tags } from '@/utils/Tag';
 
 import { Tag } from './Tag';
 
 type IPostCardProps = {
-  instance: IContent;
+  instance: IPost;
   contentCategory: string;
   tags: Tags;
 };
 
 export const PostCard = (props: IPostCardProps) => {
-  const contentPath = props.instance.url;
+  const contentPath = path.join(
+    '/',
+    props.instance.collection,
+    props.instance.slug
+  );
 
   return (
     <div className="relative overflow-hidden rounded-md bg-slate-800">
       <div className="aspect-w-16 aspect-h-9">
-        {props.instance.frontmatter.imgSrc && (
+        {props.instance.data.imgSrc && (
           <img
             className="h-full w-full object-cover object-center"
-            src={path.join(AppConfig.base, props.instance.frontmatter.imgSrc)}
-            alt={props.instance.frontmatter.imgSrc}
+            src={path.join(AppConfig.base, props.instance.data.imgSrc)}
+            alt={props.instance.data.imgSrc}
             loading="lazy"
           />
         )}
@@ -35,7 +39,7 @@ export const PostCard = (props: IPostCardProps) => {
           <div className="py-1.5 px-3">
             <a href={contentPath}>
               <div>
-                {transformTitleForContentCard(props.instance.frontmatter.title)
+                {transformTitleForContentCard(props.instance.data.title)
                   .split('\\n')
                   .map((t) => (
                     <span key={t} className="text-lg font-bold">
@@ -44,16 +48,13 @@ export const PostCard = (props: IPostCardProps) => {
                     </span>
                   ))}
                 <span className="align-middle text-xs text-gray-300	">
-                  {format(
-                    new Date(props.instance.frontmatter.pubDate),
-                    'LLL d, yyyy'
-                  )}
+                  {format(new Date(props.instance.data.pubDate), 'LLL d, yyyy')}
                 </span>
               </div>
             </a>
             <div className="mt-1 flex flex-wrap gap-2">
-              {props.instance.frontmatter.tags &&
-                props.instance.frontmatter.tags.map((tagName) => (
+              {props.instance.data.tags &&
+                props.instance.data.tags.map((tagName) => (
                   <Tag
                     key={tagName}
                     name={tagName}

src/components/PostGallery.tsx

@@ -1,20 +1,20 @@
-import type { IContent } from '@/types/IArticleFrontmatter';
+import type { IPost } from '@/types/IArticleFrontmatter';
 import type { Tags } from '@/utils/Tag';
 
 import { PostCard } from './PostCard';
 
 type IRecentPostsProps = {
   tags: Tags;
   contentCategory: string;
-  postList: IContent[];
+  postList: IPost[];
 };
 
 export const PostGallery = (props: IRecentPostsProps) => {
   return (
     <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
       {props.postList.map((elt) => (
         <PostCard
-          key={elt.url}
+          key={elt.id}
           instance={elt}
           tags={props.tags}
           contentCategory={props.contentCategory}

src/content/config.ts

@@ -0,0 +1,18 @@
+import { defineCollection, z } from 'astro:content';
+
+const postCollection = defineCollection({
+  schema: z.object({
+    title: z.string(),
+    description: z.string().nullable().optional(),
+    pubDate: z.date(),
+    tags: z.array(z.string()),
+    order: z.number().optional(),
+    imgSrc: z.string().optional(),
+    imgAlt: z.string().optional(),
+    draft: z.boolean().optional(),
+  }),
+});
+
+export const collections = {
+  posts: postCollection,
+};

src/pages/posts/20170930_etrobocon2017.md …/content/posts/20170930_etrobocon2017.mdsrc/pages/posts/20170930_etrobocon2017.md renamed to src/content/posts/20170930_etrobocon2017.md src/pages/posts/20170930_etrobocon2017.md renamed to src/content/posts/20170930_etrobocon2017.md

@@ -1,5 +1,5 @@
 ---
-layout: '@/templates/BasePost.astro'
+
 title: ETロボコン2017 に参加しました
 description: ロボコンの話
 pubDate: 2017-09-30T00:00:00Z
@@ -8,7 +8,7 @@ tags:
   - 大学
 ---
 
-片山徹郎研究室のメンバーで参加しました。九州南地区大会で敗北。
+片山徹郎研究室のメンバーで参加しました。九州南地区大会で敗北。aaa
 
 - [ETロボコン2017大会 | ETロボコン](https://www.etrobo.jp/2017archive)
 - [korosuke613/etrobocon2017: ETロボコン2017](https://github.com/korosuke613/etrobocon2017)

src/pages/posts/20171001_senmon.md src/content/posts/20171001_senmon.mdsrc/pages/posts/20171001_senmon.md renamed to src/content/posts/20171001_senmon.md

@@ -1,5 +1,5 @@
 ---
-layout: '@/templates/BasePost.astro'
+
 title: 専門教育入門セミナーT 2017\nin 片山（徹）研
 description: 授業の話
 pubDate: 2017-10-01T00:00:00Z