refactor: code refactor

app/routes/blog.$name.tsx

@@ -3,7 +3,6 @@ import { useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client";
 import React from "react";
 import { Title } from "~/components/Title";
-import { findPost } from "~/models/posts.server";
 import { getMdxFile } from "~/utils/posts.server";
 
 export const handle = {
@@ -12,27 +11,24 @@ export const handle = {
 };
 
 export const loader = async ({ params }: LoaderArgs) => {
-  const id = params.id;
-  if (id == null) {
+  const name = params.name;
+  if (name == null) {
     throw new Response(null, { status: 400 });
   }
 
-  const post = await findPost(id);
-  if (post == null) {
-    throw new Response(null, { status: 404 });
-  }
-
-  const { code } = await getMdxFile(post.fileName);
-  return { post, code };
+  return getMdxFile(name);
 };
 
 export default function () {
-  const { post, code } = useLoaderData<typeof loader>();
+  const {
+    code,
+    frontmatter: { title },
+  } = useLoaderData<typeof loader>();
   const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
 
   return (
     <>
-      <Title>{post.title}</Title>
+      <Title>{title}</Title>
       <div className="m-3 mt-10 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
         <MdxComponent />
       </div>

app/routes/blog._index/EmptyState.tsx

@@ -0,0 +1,10 @@
+export function EmptyState() {
+  return (
+    <div className="mt-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>
+      <img src="/cat.jpg" className="rounded-md" />
+    </div>
+  );
+}

app/routes/blog._index/Post.tsx

@@ -0,0 +1,32 @@
+import { Link } from "@remix-run/react";
+
+type PostProps = {
+  filename: string;
+  title: string;
+  publishedAt: string;
+  description: string | null;
+};
+
+export function Post({ title, description, filename, publishedAt }: 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">
+        <Link to={filename}>
+          <div className="text-center font-bold">
+            <span className="text-[#ffff00] hover:text-[#e6c2bf] md:text-2xl">
+              {title}
+            </span>
+            <span className="ml-2">{`(${new Date(
+              publishedAt
+            ).toLocaleDateString()})`}</span>
+          </div>
+          {description && (
+            <div className="mt-5 italic md:text-xl max-w-3xl text-center">
+              {description}
+            </div>
+          )}
+        </Link>
+      </div>
+    </div>
+  );
+}

app/routes/blog._index/route.tsx

@@ -1,8 +1,8 @@
 import { useLoaderData } from "@remix-run/react";
 import { Title } from "~/components/Title";
-import { findPosts } from "~/models/posts.server";
-import { EmptyState } from "../components/EmptyState";
-import { Post } from "../components/Post";
+import { findPosts } from "~/utils/posts.server";
+import { EmptyState } from "./EmptyState";
+import { Post } from "./Post";
 
 export const handle = {
   to: "/",

app/routes/blog/route.tsx

@@ -1,5 +1,5 @@
 import { Link, Outlet } from "@remix-run/react";
-import { useMatch } from "~/hooks/useMatch";
+import { useMatch } from "./useMatch";
 
 export default function () {
   const { handle } = useMatch();

app/routes/blog/useMatch.ts

@@ -0,0 +1,6 @@
+import { useMatches } from "@remix-run/react";
+
+export function useMatch() {
+  const matches = useMatches();
+  return matches[matches.length - 1];
+}