fixes

app/components/LinkWrapper.tsx

@@ -1,6 +1,6 @@
 export function LinkWrapper({ children }: React.PropsWithChildren) {
   return (
-    <div className="flex flex-col items-center">
+    <div className="">
       <div className="mt-5 hover:text-[#e6c2bf] font-bold">{children}</div>
     </div>
   );

app/components/PostPreview.tsx

@@ -11,14 +11,12 @@ export function PostPreview({
 }: SerializeFrom<Post>) {
   const formattedDate = useFormattedDate(published);
   return (
-    <div className="w-full sm:w-4/5 md:w-3/4 lg:w-2/3 xl:w-1/3">
+    <div className="">
       <Link to={filename}>
-        <div className="space-y-4 py-3 text-center font-bold border-gray-600 border-2 rounded-lg">
+        <div className="py-3 font-bold">
           <div className="text-[#ffff00]">{title}</div>
           <div>{description}</div>
-          <div>
-            <time>{formattedDate}</time>
-          </div>
+          <time className="text-sm">{formattedDate}</time>
         </div>
       </Link>
     </div>

app/components/Title.tsx

@@ -1,9 +1,7 @@
 export function Title({ children }: React.PropsWithChildren) {
   return (
-    <div className="mt-5 flex flex-col items-center">
-      <div className="text-[#ffff00] font-bold">
-        <span>{children}</span>
-      </div>
+    <div className="mt-5">
+      <h1 className="text-[#ffff00] text-2xl font-bold">{children}</h1>
     </div>
   );
 }

app/hooks/useFormattedDate.ts

@@ -2,5 +2,5 @@ export function useFormattedDate(_date: string) {
   const date = new Date(_date);
   const month = date.getUTCMonth().toString().padStart(2, "0");
   const monthDate = date.getUTCDate().toString().padStart(2, "0");
-  return `${date.getUTCFullYear()}/${month}/${monthDate}`;
+  return `${date.getUTCFullYear()}-${month}-${monthDate}`;
 }

app/hooks/useMatch.ts

@@ -1,14 +0,0 @@
-import { useMatches } from "@remix-run/react";
-
-export function useMatch() {
-  const matches = useMatches();
-  const { handle, ...rest } = matches[matches.length - 1];
-
-  if (handle == null) {
-    throw new Error(`handle is missing for ${rest.pathname}`);
-  }
-
-  return { handle, ...rest } as unknown as typeof rest & {
-    handle: { to: string; text: string };
-  };
-}

app/routes/blog.$file.tsx

@@ -57,12 +57,18 @@ export default function Post() {
 
   return (
     <>
+      <header>
         <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">
+        <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>
   );

package.json

@@ -8,7 +8,8 @@
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc",
     "lint": "biome lint",
-    "format": "biome format --write"
+    "format": "biome format --write",
+    "routes": "remix routes"
   },
   "dependencies": {
     "@code-hike/mdx": "0.9.0",