add recent post in main

docusaurus.config.ts

@@ -23,9 +23,11 @@ const config: Config = {
     locales: ['en'],
   },
 
+  plugins: ['./src/plugins/recent-post'],
+
   presets: [
     [
-      'classic',
+      '@docusaurus/preset-classic',
       {
         docs: {
           sidebarPath: './sidebars.ts',
@@ -42,6 +44,8 @@ const config: Config = {
     ],
   ],
 
+  customFields: {},
+
   themeConfig: {
     colorMode: {
       defaultMode: 'dark',

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "blog",
+  "name": "wanderedtola.blog",
   "version": "0.0.0",
   "private": true,
   "scripts": {

src/pages/index.tsx

@@ -1,10 +1,12 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { usePluginData } from '@docusaurus/useGlobalData';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 import Link from '@docusaurus/Link';
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
+  const { recentPosts }: any = usePluginData('docusaurus-plugin-recent-posts');
 
   return (
     <Layout title={`${siteConfig.title}`} description={`${siteConfig.tagline}`}>
@@ -23,18 +25,20 @@ export default function Home() {
                 <br />
                 공부하며 새로 알게된 정보들은 이곳에 정리하거나&nbsp;
                 <br />
-                <Link to={'https://github.com/WanderedToLa/Awesome-FE-Engineers'}>따로 모아 관리하고</Link>
+                <Link to={'https://github.com/WanderedToLa/aweseom-articles'}>따로 모아 관리하고</Link>
                 <br />
                 WebAssembly기반의 웹 생태계를 주목하고 있습니다.
               </p>
             </header>
             <main className="main">
               <h2 className="post-title">Recent Posts</h2>
               <ul className="post-list-container">
-                <li>
-                  <Link to={'/blog/frontend-observability'}>안전한 프론트엔드 서비스란?</Link>
-                  2024-06-22
-                </li>
+                {recentPosts.map((post) => (
+                  <li key={post.slug}>
+                    <Link to={`/blog/${post.slug}`}>{post.title}</Link>
+                    {post.date}
+                  </li>
+                ))}
               </ul>
             </main>
           </div>

src/plugins/recent-post.js

@@ -0,0 +1,48 @@
+const fs = require('fs');
+const path = require('path');
+const matter = require('gray-matter');
+
+async function createRecentPostsPlugin(context, options) {
+  return {
+    name: 'docusaurus-plugin-recent-posts',
+
+    async loadContent() {
+      const blogDir = path.join(__dirname, '../../blog');
+      const files = fs.readdirSync(blogDir);
+
+      const posts = [];
+
+      files.forEach((file) => {
+        const filePath = path.join(blogDir, file);
+        const stat = fs.statSync(filePath);
+
+        if (stat.isDirectory()) {
+          const indexFilePath = path.join(filePath, 'index.md');
+          if (fs.existsSync(indexFilePath)) {
+            const content = fs.readFileSync(indexFilePath, 'utf-8');
+            const frontMatter = matter(content).data;
+            if (frontMatter.slug && frontMatter.title) {
+              const dateStr = file.split('-').slice(0, 3).join('-');
+
+              posts.push({
+                slug: frontMatter.slug,
+                title: frontMatter.title,
+                date: dateStr,
+              });
+            }
+          }
+        }
+      });
+      posts.sort((a, b) => b.date - a.date);
+
+      return posts.slice(0, 5);
+    },
+
+    async contentLoaded({ content, actions }) {
+      const { setGlobalData } = actions;
+      setGlobalData({ recentPosts: content });
+    },
+  };
+}
+
+module.exports = createRecentPostsPlugin;