wip: moved the content loader

app/mark/page.tsx

@@ -1,121 +1,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, { 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 { MarkPostString } from '@/components/dummyPost';
-import { raleway, roboto, nunito } from "@/app/fonts";
+import { content } from '@/components/post';
-import rehypeRaw from "rehype-raw";
-import Image from "next/image";
 
 export default async function Mark() {
-    let content = await MarkPostString();
+    let postContent = await MarkPostString();
-    let result = await unified()
+    return content(postContent);
-      .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;
-            }
-
-            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;
 }

app/page.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import { getAssetsDomain } from "@/backend/env"
 import { raleway, syne, questrial } from "@/app/fonts";
 
 export default function Home() {
@@ -7,7 +8,7 @@ export default function Home() {
       <div className={`flex flex-col`}>
         <div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
           <Image
-              src={`https://${process.env.ASSETS_DOMAIN}/placeholder.webp`}
+              src={`https://${getAssetsDomain()}/placeholder.webp`}
               alt={`blog cover`}
               className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
               width={1581}
@@ -31,7 +32,7 @@ export default function Home() {
                 className={`flex flex-row max-w-4xl items-center`}
             >
               <Image
-                  src={`https://${process.env.ASSETS_DOMAIN}/pthumb.webp`}
+                  src={`https://${getAssetsDomain()}/pthumb.webp`}
                   alt="post thumbnail"
                   width={454}
                   height={341}

app/post/[slug]/page.tsx

@@ -1,3 +1,6 @@
+import { getPost } from '@/backend/post';
+import { content } from '@/components/post'
+
 export default async function Post({ params }: { params: { slug: string } }) {
   // let content;
   //
@@ -17,5 +20,6 @@ export default async function Post({ params }: { params: { slug: string } }) {
   // </div>
   // );
 
-  return(<></>);
+  let postContent :string = await getPost(params.slug);
+  return(content(postContent));
 }

backend/env.ts

@@ -1,3 +1,11 @@
+export function getAssetsDomain(): string {
+    if (typeof process.env.ASSETS_DOMAIN === 'undefined') {
+        throw new Error("missing env ASSETS_DOMAIN");
+    }
+
+    return process.env.ASSETS_DOMAIN;
+}
+
 export function getMysqlHost(): string {
     if (typeof process.env.MYSQL_HOST === 'undefined') {
         throw new Error("missing env MYSQL_HOST")

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;
+}