reconfirmed library versions and jsx running

replaced tsx with jsx due to issue in @types/react for jsx-runtime
wip: testing remark; trying to downgrade some libs
2024-05-10 09:22:44 +10:00 · 2024-05-09 23:30:57 +10:00 · 2024-05-09 22:31:01 +10:00
8 changed files with 1444 additions and 8 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+DUMMY_HTML_DIR=./development-test-data-dir/
--- a/.gitignore
+++ b/.gitignore
@ -27,7 +27,8 @@ yarn-debug.log*
 yarn-error.log*

 # local env files
-.env.development
+.env.local
+.env.development.local

 # vercel
 .vercel
--- a/app/mark/page.jsx
+++ b/app/mark/page.jsx
@ -0,0 +1,37 @@
+import { unified } from 'unified';
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeHighlight from "rehype-highlight";
+import rehypeReact from "rehype-react";
+import * as prod from 'react/jsx-runtime';
+
+import { readFile } from 'node:fs/promises';
+
+async function markPostString() {
+    let path = ""
+    if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
+        path = process.env.DUMMY_HTML_DIR + "test1.md";
+    }
+    return await readFile(path, "utf-8")
+}
+
+
+export default async function Mark() {
+    let content = await markPostString();
+    let result = unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype)
+        .use(rehypeSanitize)
+        .use(rehypeHighlight)
+        .use(rehypeReact, {
+            Fragment: prod.Fragment,
+            jsx: prod.jsx,
+            jsxs: prod.jsxs,
+        })
+        .processSync(content)
+
+    return result.result;
+}
--- a/app/post/[slug]/page.tsx
+++ b/app/post/[slug]/page.tsx
@ -25,16 +25,14 @@ const options: HTMLReactParserOptions = {
 export default async function Post({ params }: { params: { slug: string } }) {
  let content;

-  const dummySlug = await DummyPostSlug();
+  const dummySlug = 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 (
--- a/components/dummyPost.tsx
+++ b/components/dummyPost.tsx
@ -1,13 +1,21 @@
-import { promises as fsp } from 'fs'
+import { readFile } from 'node:fs/promises';
+
+export async function MarkPostString() {
+    let path = ""
+    if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
+        path = process.env.DUMMY_HTML_DIR + "test1.md";
+    }
+    return await readFile(path, "utf-8")
+}

 export async function DummyPostString() {
    let path = ""
    if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
        path = process.env.DUMMY_HTML_DIR + "test1.html";
    }
-    return await fsp.readFile(path, "utf-8")
+    return await readFile(path, "utf-8")
 }

-export async function DummyPostSlug() {
+export function DummyPostSlug() {
    return "dummy-post"
 }
--- a/dummies/test1.md
+++ b/dummies/test1.md
@ -0,0 +1,15 @@
+# Post Title
+
+## Introduction
+
+Hi there! Do you see me?
+
+```go
+import "fmt"
+
+func main() {
+    fmt.Println("hello world")
+}
+```
+
+That's the `hello world` code!
--- a/package.json
+++ b/package.json
@ -26,10 +26,19 @@
    "postcss": "8.4.30",
    "react": "18.3.1",
    "react-dom": "18.3.1",
+    "react-remark": "^2.1.0",
    "redis": "^4.6.13",
+    "rehype-highlight": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
    "sharp": "^0.33.3",
    "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "unified": "^11.0.4"
  },
  "devDependencies": {
    "prettier": "3.0.3"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Suyono	15b7b30b08	reconfirmed library versions and jsx running	2024-05-10 09:22:44 +10:00
Suyono	d709f6657a	replaced tsx with jsx due to issue in @types/react for jsx-runtime	2024-05-09 23:30:57 +10:00
Suyono	0ca7a97d26	wip: testing remark; trying to downgrade some libs	2024-05-09 22:31:01 +10:00