blog-ts/app/post/[slug]/page.tsx

44 lines
1.1 KiB
TypeScript

import { getPost } from "@/backend/post";
import DOMPurify from "dompurify";
import { JSDOM } from "jsdom";
import parse, {
Element,
// domToReact,
HTMLReactParserOptions,
} from "html-react-parser";
import { DummyPostSlug, DummyPostString } from "@/components/dummyPost";
import { handlers } from "@/app/post/[slug]/nodeHandler";
const options: HTMLReactParserOptions = {
replace: (domNode) => {
for (let handler of handlers) {
if (domNode instanceof Element && domNode.attribs) {
let result = handler(domNode)
if (result.match && typeof result.element !== 'undefined') {
return result.element
}
}
}
},
};
export default async function Post({ params }: { params: { slug: string } }) {
let content;
const dummySlug = DummyPostSlug();
if (dummySlug === params.slug) {
content = await DummyPostString();
} else {
content = await getPost(params.slug);
}
content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content);
const elem = parse(content, options);
return (
<div className={`flex flex-col`}>
{elem}
</div>
);
}