wip: moved the content loader

2024-05-30 11:51:21 +10:00
parent ff6886e309
commit 1340f2029a
5 changed files with 139 additions and 120 deletions
--- a/components/post.tsx
+++ b/components/post.tsx
@@ -0,0 +1,120 @@
+import { unified } from 'unified';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype, { Options as RemarkRehypeOptions } from 'remark-rehype';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import rehypeHighlight, { Options as RehypeHighlightOptions } from 'rehype-highlight';
+import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
+import { all } from 'lowlight';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { raleway, roboto, nunito } from "@/app/fonts";
+import rehypeRaw from "rehype-raw";
+import Image from "next/image";
+import { getAssetsDomain } from "@/backend/env";
+
+export async function content(content: string) {
+    let result = await unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype, { allowDangerousHtml: true } as RemarkRehypeOptions)
+        .use(rehypeRaw)
+        .use(rehypeSanitize, {
+            ...defaultSchema,
+            tagNames: [
+                ...(defaultSchema.tagNames || []),
+                'figure',
+                'figcaption',
+            ]
+        })
+        .use(rehypeHighlight, {
+            languages: all,
+        } as RehypeHighlightOptions)
+        .use(rehypeReact, {
+            Fragment: Fragment,
+            jsx: jsx,
+            jsxs: jsxs,
+            passNode: true,
+            components: {
+                h1: (props) => (
+                    <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
+                        {props.children}
+                    </h1>
+                ),
+                h2: (props) => (
+                    <h2 className={`${raleway.className} mx-auto mt-6 w-224 text-3xl`}>
+                        {props.children}
+                    </h2>
+                ),
+                h3: (props) => (
+                    <h3 className={`${raleway.className} mx-auto mt-4 w-224 text-2xl`}>
+                        {props.children}
+                    </h3>
+                ),
+                h4: (props) => (
+                    <h4 className={`${raleway.className} mx-auto mt-3 w-224 text-xl`}>
+                        {props.children}
+                    </h4>
+                ),
+                p: (props) => (
+                    <p className={`${nunito.className} mx-auto mt-2 w-224`}>
+                        {props.children}
+                    </p>
+                ),
+                pre: (props) => (
+                    <div className={`w-224 mx-auto mt-2`}>
+                        <pre>{props.children}</pre>
+                    </div>
+                ),
+                hr: (props) => <hr className={`mx-auto w-224 mt-6`} />,
+                img: (props) => {
+                    let src: string = "";
+                    let alt: string = "";
+
+                    if (typeof props.src === "undefined") {
+                        src = `https://${getAssetsDomain()}/broken-image.svg`;
+                    } else {
+                        src = props.src;
+                    }
+
+                    if (typeof props.alt === "string") {
+                        alt = props.alt;
+                    }
+
+                    if (
+                        typeof props.width === "undefined" ||
+                        typeof props.height === "undefined"
+                    ) {
+                        return (
+                            <Image src={src} alt={alt} className={`mx-auto`} />
+                        );
+                    } else {
+                        return (
+                            <Image
+                                src={src}
+                                alt={alt}
+                                className={`mx-auto`}
+                                width={
+                                    typeof props.width === "string"
+                                        ? parseInt(props.width, 10)
+                                        : props.width
+                                }
+                                height={
+                                    typeof props.height === "string"
+                                        ? parseInt(props.height, 10)
+                                        : props.height
+                                }
+                            />
+                        );
+                    }
+                },
+                figcaption: (props) => (
+                    <figcaption className={`${nunito.className} text-center mb-6`}>
+                        {props.children}
+                    </figcaption>
+                ),
+            },
+        } as RehypeReactOptions)
+        .process(content);
+
+    return result.result;
+}