diff --git a/app/components/Title.tsx b/app/components/Title.tsx
index af7db49..97c346a 100644
--- a/app/components/Title.tsx
+++ b/app/components/Title.tsx
@@ -1,6 +1,6 @@
export function Title({ children }: React.PropsWithChildren) {
return (
-
+
{children}
diff --git a/app/routes/blog.$name.tsx b/app/routes/blog.$file.tsx
similarity index 70%
rename from app/routes/blog.$name.tsx
rename to app/routes/blog.$file.tsx
index 43aec81..80afd5d 100644
--- a/app/routes/blog.$name.tsx
+++ b/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 = ({ data }) => {
@@ -47,6 +49,7 @@ export default function () {
const {
code,
frontmatter: { title },
+ file,
} = useLoaderData();
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
@@ -57,6 +60,15 @@ export default function () {
+
+
+
+
Typo?
+
+
);
diff --git a/posts/helloworld.mdx b/posts/helloworld.mdx
index 26d783c..e605379 100644
--- a/posts/helloworld.mdx
+++ b/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;
}
-```
\ No newline at end of file
+```
+
+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.
\ No newline at end of file