suyono/blog-ts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: test versions of pnpm and nodejs

Browse Source
This commit is contained in:
Suyono 2023-10-22 15:24:59 +11:00
parent 6d3dab582a
commit cf0579023e
1 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/post/[slug]/page.tsx
View File

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