chore: final layout

app/routes/blog.$id.tsx

@@ -2,10 +2,15 @@ import type { LoaderArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client";
 import React from "react";
-import { Link } from "~/components/Link";
+import { Title } from "~/components/Title";
 import { findPost } from "~/models/posts.server";
 import { getMdxFile } from "~/utils/posts.server";
 
+export const handle = {
+  to: "/blog",
+  text: "Go Back",
+};
+
 export const loader = async ({ params }: LoaderArgs) => {
   const id = params.id;
   if (id == null) {
@@ -17,20 +22,20 @@ export const loader = async ({ params }: LoaderArgs) => {
     throw new Response(null, { status: 404 });
   }
 
-  const { code } = await getMdxFile(post.path);
+  const { code } = await getMdxFile(post.fileName);
   return { post, code };
 };
 
 export default function () {
   const { post, code } = useLoaderData<typeof loader>();
   const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
+
   return (
-    <div className="h-fit mb-5 w-full flex flex-col items-center">
-      <Link to="/blog">Go Back</Link>
-      <div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
-      <div className="m-3 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
+    <>
+      <Title>{post.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>
-    </div>
+    </>
   );
 }

app/routes/blog._index.tsx

@@ -1,8 +1,13 @@
 import { useLoaderData } from "@remix-run/react";
-import { Link } from "~/components/Link";
+import { Title } from "~/components/Title";
 import { findPosts } from "~/models/posts.server";
-import { EmptyState } from "./EmptyState";
-import { Post } from "./Post";
+import { EmptyState } from "../components/EmptyState";
+import { Post } from "../components/Post";
+
+export const handle = {
+  to: "/",
+  text: "Home",
+};
 
 export const loader = async () => {
   return findPosts();
@@ -11,11 +16,8 @@ export const loader = async () => {
 export default function () {
   const posts = useLoaderData<typeof loader>();
   return (
-    <div className="h-fit w-full flex flex-col items-center">
-      <Link to="/">Home</Link>
-      <div className="mt-5 mx-5 sm:mx-0 md:text-3xl text-[#ffff00] font-bold">
-        <span>Here I blog about whatever get my attention</span>
-      </div>
+    <>
+      <Title>Here I blog about whatever get my attention</Title>
       {posts.length > 0 ? (
         <div className="mt-10 w-full flex flex-col items-center space-y-5">
           {posts.map((post, i) => (
@@ -25,6 +27,6 @@ export default function () {
       ) : (
         <EmptyState />
       )}
-    </div>
+    </>
   );
 }

app/routes/blog.tsx

@@ -0,0 +1,19 @@
+import { Link, Outlet } from "@remix-run/react";
+import { useMatch } from "~/hooks/useMatch";
+
+export default function () {
+  const { handle } = useMatch();
+  return (
+    <div className="h-fit w-full flex flex-col items-center">
+      {handle && (
+        <Link
+          className="mt-5 hover:text-[#e6c2bf] text-xl font-bold"
+          to={handle.to}
+        >
+          {handle.text}
+        </Link>
+      )}
+      <Outlet />
+    </div>
+  );
+}

app/routes/blog/EmptyState.tsx

@@ -1,10 +0,0 @@
-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/Post.tsx

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