wip: move workstation

2023-10-21 10:17:10 +11:00
parent 08db8ef124
commit 6d3dab582a
11 changed files with 760 additions and 6 deletions
--- a/app/dbcheck/page.tsx
+++ b/app/dbcheck/page.tsx
@@ -0,0 +1,21 @@
+import { promisePool } from "@/backend/db";
+import {RowDataPacket} from "mysql2";
+
+async function query() {
+    try {
+        const [rows, fields] = await promisePool.query<RowDataPacket[]>('select slug from post limit 1;')
+        return(rows[0]['slug'] as string)
+    } catch (e) {
+        console.log(e)
+        return('something went wrong')
+    }
+}
+
+export default async function DbCheck() {
+    return(
+        <div className={`flex flex-col`}>
+            <p>Env: { process.env.MYSQL_HOST }</p>
+            <p>Result: { await query() }</p>
+        </div>
+    )
+}
--- a/app/fonts.ts
+++ b/app/fonts.ts
@@ -1,4 +1,4 @@
-import { Raleway, Syne, Questrial } from "next/font/google";
+import { Raleway, Syne, Questrial, Nunito_Sans } from "next/font/google";

 export const raleway = Raleway({
    subsets: ['latin'],
@@ -14,4 +14,10 @@ export const questrial = Questrial({
    subsets: ['latin'],
    display: "swap",
    weight: ['400'],
-})
+})
+
+export const nunito_sans = Nunito_Sans({
+    subsets: ['latin'],
+    display: "swap",
+    }
+)
--- a/app/post/[slug]/page.tsx
+++ b/app/post/[slug]/page.tsx
@@ -1,3 +1,65 @@
-export default function Post({ params }: { params: { slug: string } }) {
-  return <div>My Post: {params.slug}</div>;
+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>
+  );
 }