refactor: code refactor

.gitignore

@@ -4,6 +4,3 @@ node_modules
 /build
 /public/build
 .env
-
-# TODO: remove the following line
-posts/*.mdx

app/routes/blog._index/EmptyState.tsx

@@ -1,6 +1,6 @@
 export function EmptyState() {
   return (
-    <div className="mt-5 flex flex-col items-center">
+    <div className="mt-5 mx-5 flex flex-col items-center">
       <div className="mb-5 font-bold">
         I haven't post anything yet! So here's a pic of my cat
       </div>

app/routes/blog._index/Post.tsx

@@ -3,11 +3,11 @@ import { Link } from "@remix-run/react";
 type PostProps = {
   filename: string;
   title: string;
-  publishedAt: string;
+  published: string;
   description: string | null;
 };
 
-export function Post({ title, description, filename, publishedAt }: PostProps) {
+export function Post({ title, description, filename, published }: PostProps) {
   return (
     <div className="mx-5 md:mx-0 md:w-1/2 lg:w-1/3">
       <div className="p-5 border-gray-600 border-2 rounded-lg">
@@ -17,7 +17,7 @@ export function Post({ title, description, filename, publishedAt }: PostProps) {
               {title}
             </span>
             <span className="ml-2">{`(${new Date(
-              publishedAt
+              published
             ).toLocaleDateString()})`}</span>
           </div>
           {description && (

app/utils/posts.server.ts

@@ -6,15 +6,17 @@ import codeHikeTheme from "shiki/themes/one-dark-pro.json";
 type FrontMatter = {
   title: string;
   description: string;
-  publishedAt: string;
+  published: string;
 };
 
 export const getMdxFile = async (file: string) => {
   return bundleMDX<FrontMatter>({
     source: (await readFile(`./posts/${file}.mdx`)).toString(),
-    mdxOptions() {
+    mdxOptions(options) {
       return {
+        rehypePlugins: [...(options.rehypePlugins ?? [])],
         remarkPlugins: [
+          ...(options.remarkPlugins ?? []),
           [
             remarkCodeHike,
             {
@@ -36,7 +38,7 @@ export const findPosts = async () => {
     filename: string;
   })[] = [];
   for (const file of files.filter((file) => file.endsWith(".mdx"))) {
-    const { frontmatter } = await bundleMDX({
+    const { frontmatter } = await bundleMDX<FrontMatter>({
       source: (await readFile(`./posts/${file}`)).toString(),
       mdxOptions() {
         return {
@@ -59,11 +61,11 @@ export const findPosts = async () => {
       filename: file.replace(".mdx", ""),
       description: frontmatter.description,
       title: frontmatter.title,
-      publishedAt: frontmatter.publishedAt,
+      published: frontmatter.published,
     });
   }
 
   return posts.sort((a, b) =>
-    new Date(a.publishedAt) > new Date(b.publishedAt) ? -1 : 1
+    new Date(a.published) > new Date(b.published) ? -1 : 1
   );
 };

posts/helloworld.mdx

@@ -0,0 +1,18 @@
+---
+title: Hello, world
+published: 2023-03-15
+description: The hello world post
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+```c
+int main(int argc, char** argv) {
+  return 0;
+}
+```