refactor: code refactor

app/components/Title.tsx

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

app/routes/blog.$file.tsx

@@ -1,7 +1,8 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { Link, useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client/index.js";
 import React from "react";
+import { FaEdit } from "react-icons/fa";
 import { BlogWrapper } from "~/components/BlogWrapper";
 import { Title } from "~/components/Title";
 import { getMdxFile } from "~/utils/posts.server";
@@ -12,12 +13,13 @@ export const handle = {
 };
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
-  const name = params.name;
-  if (name == null) {
+  const file = params.file;
+  if (file == null) {
     throw new Response(null, { status: 400 });
   }
 
-  return getMdxFile(name);
+  const data = await getMdxFile(file);
+  return { ...data, file };
 };
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -47,6 +49,7 @@ export default function () {
   const {
     code,
     frontmatter: { title },
+    file,
   } = useLoaderData<typeof loader>();
   const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
 
@@ -57,6 +60,15 @@ export default function () {
         <div className="dark:prose-invert prose-a:no-underline prose-a:font-bold prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]">
           <MdxComponent />
         </div>
+        <Link
+          to={`https://github.com/nullndr/website/edit/main/posts/${file}.mdx`}
+          className="hover:text-[#ffff00]"
+        >
+          <div className="flex justify-end items-center space-x-2 pb-5">
+            <FaEdit />
+            <div className="font-bold">Typo?</div>
+          </div>
+        </Link>
       </BlogWrapper>
     </div>
   );

posts/helloworld.mdx

@@ -4,15 +4,44 @@ published: 2023-03-15
 description: The hello world post
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Libero id faucibus nisl tincidunt eget nullam non. Viverra suspendisse potenti nullam ac.
+Neque volutpat ac tincidunt vitae semper quis. Libero justo laoreet sit amet cursus sit amet dictum.
+Ante metus dictum at tempor commodo ullamcorper a. Malesuada fames ac turpis egestas sed tempus urna et pharetra.
+Ac tortor vitae purus faucibus ornare. Nunc non blandit massa enim nec dui nunc mattis enim. Ornare arcu odio ut sem.
+Volutpat maecenas volutpat blandit aliquam etiam erat. Arcu felis bibendum ut tristique et egestas quis.
+Quisque sagittis purus sit amet volutpat consequat mauris nunc. Volutpat consequat mauris nunc congue nisi.
+Non sodales neque sodales ut etiam sit amet. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.
+Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Purus non enim praesent elementum facilisis leo.
+Diam quis enim lobortis scelerisque fermentum dui faucibus.
 
 ```c
 int main(int argc, char** argv) {
   return 0;
 }
 ```
+
+Ipsum consequat nisl vel pretium lectus.
+Odio facilisis mauris sit amet massa vitae tortor condimentum.
+Praesent elementum facilisis leo vel. Netus et malesuada fames ac turpis.
+Integer eget aliquet nibh praesent. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum.
+Nisi porta lorem mollis aliquam ut porttitor leo a. Nunc faucibus a pellentesque sit amet porttitor eget.
+Et malesuada fames ac turpis egestas. Egestas quis ipsum suspendisse ultrices. Amet nisl purus in mollis nunc.
+Malesuada pellentesque elit eget gravida cum sociis. Dui ut ornare lectus sit amet est. Cursus sit amet dictum sit amet justo.
+Tristique senectus et netus et malesuada fames ac turpis egestas.
+
+```typescript
+export const loader = async () => {
+  return null;
+}
+```
+
+Bibendum ut tristique et egestas.
+Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod.
+Amet nulla facilisi morbi tempus iaculis urna. Aliquet nibh praesent tristique magna sit amet purus gravida quis.
+Tempor id eu nisl nunc mi ipsum faucibus. Bibendum enim facilisis gravida neque convallis a.
+Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu non odio euismod lacinia at quis.
+Ut pharetra sit amet aliquam id diam maecenas ultricies. Donec et odio pellentesque diam volutpat commodo sed egestas egestas.
+Vitae nunc sed velit dignissim sodales ut eu sem.
+Maecenas sed enim ut sem. Urna id volutpat lacus laoreet non curabitur gravida arcu.
+Nulla porttitor massa id neque. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.