-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
$slug.tsx
28 lines (23 loc) · 907 Bytes
/
$slug.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import type { LoaderFunction } from "remix";
import { useLoaderData, json } from "remix";
import { getPost } from "~/models/post.server";
import type { Post } from "~/models/post.server";
import invariant from "tiny-invariant";
import { marked } from "marked";
type LoaderData = { post: Post; html: string };
export const loader: LoaderFunction = async ({ params }) => {
invariant(params.slug, `params.slug is required`);
const post = await getPost(params.slug);
invariant(post, `Post not found: ${params.slug}`);
const html = marked(post.markdown);
return json<LoaderData>({ post, html });
};
export default function PostSlug() {
const { post, html } = useLoaderData() as LoaderData;
return (
<main className="mx-auto max-w-4xl">
<h1 className="my-6 border-b-2 text-center text-3xl">{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: html }} />
</main>
);
}