Cupcake/app/routes/page.tsx

42 lines
1.2 KiB
TypeScript

import Article from "~/components/common/article";
import { siteTitle } from "~/utils";
import type { Route } from "./+types/page";
export function meta({ loaderData }: Route.MetaArgs) {
return [
{ title: loaderData ? siteTitle(loaderData.data.title) : "404" },
{ name: "description", content: loaderData?.data.desc },
];
}
export async function loader({ params }: Route.LoaderArgs) {
const slug = params["*"];
const page = (await fetch(
`https://paul.ren/api/page/get?slug=${slug}&html`,
).then((res) => res.json())) as API.Response<API.Page.IPageData>;
if (page.status === "Failed") {
throw new Response("Not Found", { status: 404 });
}
return page;
}
export default function DynamicPage({ loaderData }: Route.ComponentProps) {
const page = loaderData;
return (
<main className="px-2 py-24 max-w-4xl mx-auto">
<section className="mb-12">
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
<p className="text-center opacity-60">{page.data.desc}</p>
</section>
<section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200">
<Article html={page.data.content} />
</section>
</main>
);
}