wip: completed the content, move on to post cover etc

app/mark/page.tsx

@@ -2,7 +2,7 @@ import { unified } from 'unified';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import remarkRehype, { Options as RemarkRehypeOptions } from 'remark-rehype';
-import rehypeSanitize from 'rehype-sanitize';
+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';
@@ -10,33 +10,112 @@ import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import { MarkPostString } from '@/components/dummyPost';
 import { raleway, roboto, nunito } from "@/app/fonts";
 import rehypeRaw from "rehype-raw";
+import Image from "next/image";
 
 export default async function Mark() {
     let content = await MarkPostString();
     let result = await unified()
-        .use(remarkParse)
-        .use(remarkGfm)
-        .use(remarkRehype, { allowDangerousHtml: true } as RemarkRehypeOptions)
-        .use(rehypeRaw)
-        .use(rehypeSanitize)
-        .use(rehypeHighlight, {
-            languages: all,
-        } as RehypeHighlightOptions)
-        .use(rehypeReact, {
-            Fragment: Fragment,
-            jsx: jsx,
-            jsxs: jsxs,
-            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`} />
+      .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://${process.env.ASSETS_DOMAIN}/broken-image.svg`;
+            } else {
+              src = props.src;
             }
-        } as RehypeReactOptions)
-        .process(content);
+
+            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;
 }