refactor: code refactor

app/routes/_index.tsx

@@ -5,11 +5,13 @@ import {
   FaKey,
   FaLinkedin,
   FaMastodon,
+  FaStackOverflow,
   FaTelegramPlane,
   FaTwitter,
 } from "react-icons/fa";
 import { IconContext } from "react-icons/lib";
 import { MdEmail } from "react-icons/md";
+import { LinkWrapper } from "~/components/LinkWrapper";
 
 export default function Index() {
   return (
@@ -21,38 +23,41 @@ export default function Index() {
             <span className="animate-blink">|</span>
           </div>
           <nav className="pt-5 flex justify-center flex-wrap">
-            <IconContext.Provider value={{ color: "yellow", size: "2em" }}>
-              <a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
+            <IconContext.Provider
+              value={{ color: "yellow", className: "p-2", size: "3em" }}
+            >
+              <a rel="me" href="https://mastodon.uno/@nullndr">
                 <FaMastodon />
               </a>
-              <a href="https://t.me/nullndr" className="p-2">
+              <a href="https://t.me/nullndr">
                 <FaTelegramPlane />
               </a>
-              <a href="https://gitlab.com/nullndr" className="p-2">
+              <a href="https://gitlab.com/nullndr">
                 <FaGitlab />
               </a>
-              <a href="https://github.com/nullndr" className="p-2">
+              <a href="https://github.com/nullndr">
                 <FaGithub />
               </a>
-              <a href="https://twitter.com/nullndr" className="p-2">
+              <a href="https://twitter.com/nullndr">
                 <FaTwitter />
               </a>
-              <a href="mailto: nullndr@duck.com" className="p-2">
+              <a href="mailto: nullndr@duck.com">
                 <MdEmail />
               </a>
-              <a href="https://linkedin.com/in/nullndr" className="p-2">
+              <a href="https://linkedin.com/in/nullndr">
                 <FaLinkedin />
               </a>
-              <a href="/key.pub" download={true} className="p-2">
+              <a href="https://stackoverflow.com/users/10503039/nullndr">
+                <FaStackOverflow />
+              </a>
+              <a href="/key.pub" download={true}>
                 <FaKey />
               </a>
             </IconContext.Provider>
           </nav>
-          <div className="pt-5 flex flex-col items-center text-xl">
-            <Link to="/blog" className="hover:text-[#e6c2bf] font-bold">
-              Blog
-            </Link>
-          </div>
+          <LinkWrapper>
+            <Link to="/blog">Blog</Link>
+          </LinkWrapper>
         </div>
       </div>
     </div>

app/routes/blog.$name.tsx

@@ -2,6 +2,7 @@ import type { LoaderArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client";
 import React from "react";
+import { BlogWrapper } from "~/components/BlogWrapper";
 import { Title } from "~/components/Title";
 import { getMdxFile } from "~/utils/posts.server";
 
@@ -29,9 +30,11 @@ export default function () {
   return (
     <>
       <Title>{title}</Title>
-      <div className="mx-3 py-10 sm:mx-0 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
-        <MdxComponent />
-      </div>
+      <BlogWrapper>
+        <div className="dark:prose-invert prose-a:no-underline prose-a:font-bold prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]">
+          <MdxComponent />
+        </div>
+      </BlogWrapper>
     </>
   );
 }

app/routes/blog._index/Post.tsx

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

app/routes/blog._index/route.tsx

@@ -9,7 +9,7 @@ export const handle = {
   text: "Home",
 };
 
-export const loader = async () => {
+export const loader = () => {
   return findPosts();
 };
 
@@ -19,11 +19,7 @@ export default function () {
     <>
       <Title>Here I blog about whatever get my attention</Title>
       {posts.length > 0 ? (
-        <div className="py-10 w-full sm:flex sm:flex-col sm:items-center space-y-5">
-          {posts.map((post, i) => (
-            <Post {...post} key={i} />
-          ))}
-        </div>
+        posts.map((post, i) => <Post {...post} key={i} />)
       ) : (
         <EmptyState />
       )}

app/routes/blog/route.tsx

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

app/routes/blog/useMatch.ts

@@ -2,5 +2,11 @@ import { useMatches } from "@remix-run/react";
 
 export function useMatch() {
   const matches = useMatches();
-  return matches[matches.length - 1];
+  const { handle, ...rest } = matches[matches.length - 1];
+
+  if (handle == null) {
+    throw new Error("Bruh");
+  }
+
+  return { handle, ...rest};
 }