chore: final layout

app/components/Link.tsx

@@ -1,11 +0,0 @@
-import { Link as RemixLink } from "@remix-run/react";
-
-type LinkProps = React.PropsWithChildren<{ to: string }>;
-
-export function Link({ to, children }: LinkProps) {
-  return (
-    <RemixLink to={to} className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
-      {children}
-    </RemixLink>
-  );
-}

app/components/Post.tsx

@@ -13,7 +13,7 @@ export function Post({ title, description, id, createdAt }: PostProps) {
       <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">
+            <span className="text-[#ffff00] hover:text-[#e6c2bf] md:text-2xl">
               {title}
             </span>
             <span className="ml-2">{`(${new Date(
@@ -21,7 +21,7 @@ export function Post({ title, description, id, createdAt }: PostProps) {
             ).toLocaleDateString()})`}</span>
           </div>
           {description && (
-            <div className="mt-5 italic text-xl max-w-3xl text-center">
+            <div className="mt-5 italic md:text-xl max-w-3xl text-center">
               {description}
             </div>
           )}

app/components/Title.tsx

@@ -0,0 +1,7 @@
+export function Title({ children }: React.PropsWithChildren) {
+  return (
+    <div className="mt-5 mx-5 lg:mx-0 text-xl sm:text-3xl text-[#ffff00] font-bold">
+      <span>{children}</span>
+    </div>
+  );
+}

app/hooks/useMatch.ts

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

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>
+      <Title>{post.title}</Title>
-      <div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
+      <div className="m-3 mt-10 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
-      <div className="m-3 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 { EmptyState } from "../components/EmptyState";
-import { Post } from "./Post";
+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>
+      <Title>Here I blog about whatever get my attention</Title>
-      <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>
       {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/utils/posts.server.ts

@@ -3,8 +3,8 @@ import { readFile } from "fs/promises";
 import { bundleMDX } from "mdx-bundler";
 import codeHikeTheme from "shiki/themes/one-dark-pro.json";
 
-export const getMdxFile = async (path: string) => {
+export const getMdxFile = async (fileName: string) => {
-  const source = await readFile(path);
+  const source = await readFile(`posts/${fileName}`);
   return bundleMDX({
     source: source.toString(),
     mdxOptions() {

prisma/schema.prisma

@@ -11,7 +11,7 @@ model Post {
   id          String   @id @default(cuid())
   title       String
   description String?
-  path        String
+  fileName    String
   isPublic    Boolean  @default(false)
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt

tsconfig.json

@@ -3,7 +3,7 @@
     "remix.env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "app/routes/blog_.$id.tsx"
+    "app/routes/blog.$id.tsx"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],