fixes

app/routes/blog.$file.tsx

@@ -57,12 +57,18 @@ export default function Post() {
 
   return (
     <>
-      <Title>{title}</Title>
-      <div className="text-center">
-        <time>{formattedDate}</time>
-      </div>
-      <div className="flex flex-col items-center">
-        <div className="space-y-5 sm:w-full sm:px-5 lg:w-5/6 xl:w-2/3">
+      <header>
+        <Title>{title}</Title>
+        <span>
+          <time>{formattedDate}</time>·
+          <Link to="/blog" className="hover:text-[#ffff00]">
+            Go Back
+          </Link>
+        </span>
+      </header>
+
+      <main>
+        <div className="space-y-5">
           <div className=" prose-blockquote:bg-[#282c34] prose-blockquote:border-l-4 prose-blockquote:border-[#21252b] prose-blockquote:px-2 prose-blockquote:py-2 prose-blockquote:rounded-r">
             <div className="prose-h2:text-[#ffff00] prose-h2:font-bold prose-h2:text-2xl">
               <div className="prose-code:px-1 prose-code:py-0.5 prose-code:bg-[#282c34] prose-code:text-[#d6d6d6] prose-code:rounded prose-code:font-mono">
@@ -85,7 +91,7 @@ export default function Post() {
             </Link>
           </div>
         </div>
-      </div>
+      </main>
     </>
   );
 }

app/routes/blog._index.tsx

@@ -1,13 +1,9 @@
-import { useLoaderData } from "@remix-run/react";
+import { Link, useLoaderData } from "@remix-run/react";
+import { LinkWrapper } from "~/components/LinkWrapper";
 import { PostPreview } from "~/components/PostPreview";
 import { Title } from "~/components/Title";
 import { findPosts } from "~/utils/posts.server";
 
-export const handle = {
-  to: "/",
-  text: "Home",
-};
-
 export const loader = () => {
   return findPosts();
 };
@@ -17,8 +13,11 @@ export default function Blog() {
 
   return (
     <>
+      <LinkWrapper>
+        <Link to="/">Home</Link>
+      </LinkWrapper>
       <Title>Here I blog about whatever get my attention</Title>
-      <div className="mt-5 flex flex-col items-center space-y-5">
+      <div className="mt-5">
         {posts.map((post) => (
           <PostPreview {...post} key={post.title} />
         ))}

app/routes/blog.tsx

@@ -1,8 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link } from "@remix-run/react";
 import { Outlet } from "react-router-dom";
-import { LinkWrapper } from "~/components/LinkWrapper";
-import { useMatch } from "~/hooks/useMatch";
 
 export const meta: MetaFunction = () => {
   return [
@@ -21,13 +18,8 @@ export const meta: MetaFunction = () => {
 };
 
 export default function BlogLayout() {
-  const { handle } = useMatch();
-
   return (
-    <div className="space-y-6 px-2">
-      <LinkWrapper>
-        <Link to={handle.to}>{handle.text}</Link>
-      </LinkWrapper>
+    <div className="space-y-6 max-w-3xl mx-auto">
       <Outlet />
     </div>
   );