76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
|
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";
|
|
|
|
export const handle = {
|
|
to: "/blog",
|
|
text: "Go Back",
|
|
};
|
|
|
|
export const loader = async ({ params }: LoaderFunctionArgs) => {
|
|
const file = params.file;
|
|
if (file == null) {
|
|
throw new Response(null, { status: 400 });
|
|
}
|
|
|
|
const data = await getMdxFile(file);
|
|
return { ...data, file };
|
|
};
|
|
|
|
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
|
if (data == null) {
|
|
return [];
|
|
}
|
|
|
|
const {
|
|
frontmatter: { title, description },
|
|
} = data;
|
|
return [
|
|
{
|
|
title,
|
|
},
|
|
{
|
|
property: "og:title",
|
|
content: title,
|
|
},
|
|
{
|
|
property: "description",
|
|
content: description,
|
|
},
|
|
];
|
|
};
|
|
|
|
export default function () {
|
|
const {
|
|
code,
|
|
frontmatter: { title },
|
|
file,
|
|
} = useLoaderData<typeof loader>();
|
|
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<Title>{title}</Title>
|
|
<BlogWrapper>
|
|
<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>
|
|
);
|
|
}
|