feat: sort posts by desc

app/api/posts/model.ts

@@ -1,7 +1,7 @@
 type Post = {
   id: string;
   title: string;
-  publishedAt: string;
+  publishedAt: Date;
 };
 
 export type { Post };

app/components/posts/Posts.tsx

@@ -12,9 +12,14 @@ const Posts: FC<Props> = ({ posts }) => {
     <Section title="Posts">
       <div class={postsWrapper}>
         {posts.map((post) => {
+          const publishedAt = post.publishedAt.toLocaleDateString("ja-JP", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+          });
           return (
             <a key={post.id} href={`/${post.id}`} class={postsItem}>
-              <span>{post.publishedAt}</span>
+              <time datetime={publishedAt}>{publishedAt}</time>
               <span class={postsItemTitle}>{post.title}</span>
             </a>
           );

app/routes/posts.tsx

@@ -10,11 +10,13 @@ export default createRoute(async (c) => {
   const rawPosts = import.meta.glob<{ frontmatter: Meta }>("./posts/*.mdx", {
     eager: true,
   });
-  const posts = Object.entries(rawPosts).map(([id, module]) => ({
-    id: id.replace(/\.mdx$/, ""),
-    title: module.frontmatter.title ?? "",
-    publishedAt: module.frontmatter.publishedAt ?? "",
-  }));
+  const posts = Object.entries(rawPosts)
+    .map(([id, module]) => ({
+      id: id.replace(/\.mdx$/, ""),
+      title: module.frontmatter.title ?? "",
+      publishedAt: new Date(module.frontmatter.publishedAt) ?? "",
+    }))
+    .sort((a, b) => b.publishedAt.getTime() - a.publishedAt.getTime());
 
   return c.render(<PostsPresenter posts={posts} />);
 });

app/routes/posts/md_test.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Markdown試し打ち"
-publishedAt: "2024-09-XX"
+publishedAt: "2024/09/14"
 ---
 
 # # Section1

package.json

@@ -10,6 +10,7 @@
     "deploy": "vite build --mode client && vite build && wrangler pages deploy ./dist",
     "lint": "biome lint --write --unsafe ./app",
     "format": "biome format --write ./app package.json biome.json tsconfig.json",
+    "article": "speedymd",
     "prepare": "husky"
   },
   "dependencies": {

speedymd.config.json

@@ -10,7 +10,7 @@
       "required": true
     },
     {
-      "name": "published_at",
+      "name": "publishedAt",
       "type": "text",
       "question": "Please enter `published_at`",
       "placeholder": "2000/01/01",