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

66 lines
2.0 KiB
TypeScript

import { getPost } from "@/backend/post";
import DOMPurify from "dompurify";
import { JSDOM } from "jsdom";
import {nunito_sans, raleway} from "@/app/fonts";
import parse, {domToReact, Element, HTMLReactParserOptions} from "html-react-parser";
import { DummyPostSlug, DummyPostString } from "@/components/dummyPost";
const options: HTMLReactParserOptions = {
replace: (domNode) => {
if (domNode instanceof Element && domNode.attribs) {
// console.log(domNode.attribs)
if (domNode.name === 'h1') {
if (domNode.attribs.class === 'title') {
return (
<div className={`flex flex-row justify-stretch`}>
<h1 className={`${raleway.className} mx-auto max-w-4xl text-4xl`}>{domToReact(domNode.children)}</h1>
</div>
)
} else {
return (
<div className={`flex flex-row justify-stretch`}>
<h1 className={`${raleway.className} max-w-4xl mx-auto text-3xl`}>{domToReact(domNode.children)}</h1>
</div>
)
}
} else if (domNode.name === 'h2') {
} else if (domNode.name === 'h3') {
} else if (domNode.name === 'p') {
if (domNode.attribs.class === 'paragraph') {
return (
<div className={`flex flex-row justify-center`}>
<h1 className={`${nunito_sans.className} w-224`}>{domToReact(domNode.children)}</h1>
</div>
)
} else if (domNode.attribs.class === 'code') {
}
}
}
}
}
export default async function Post({ params }: { params: { slug: string } }) {
let content = ""
const dummySlug = await DummyPostSlug()
if (dummySlug === params.slug) {
content = await DummyPostString()
console.log(content)
} else {
content = await getPost(params.slug);
}
content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content);
// console.log(content)
const elem = parse(content, options);
return (
<div className={`flex flex-col`}>
{elem}
</div>
);
}