work on markdown styling

.vscode/launch.json

@@ -11,7 +11,7 @@
         "name": "Next.js: debug client-side",
         "type": "pwa-chrome",
         "request": "launch",
-        "url": "http://localhost:3000"
+        "url": "http://localhost:3000/the-great-cook-up-website"
       },
       {
         "name": "Next.js: debug full stack",

app/[recipe]/page.tsx

@@ -1,6 +1,8 @@
-import Link from 'next/link'
+//import Link from 'next/link'
 import { getFileList } from '../../services/github'
-import { marked } from 'marked'
+//import { marked } from 'marked'
+//import Markdown from 'marked-react'
+import { RecipeClient } from '../components/recipe-client'
 
 export async function generateStaticParams() {
   const files = await getFileList()
@@ -13,16 +15,10 @@ export async function generateStaticParams() {
 export default async function Recipe(props : any) {
   const url = `https://raw.githubusercontent.com/bit-shift-io/the-great-cook-up/main/${props.params.recipe}.md`
   const data = await fetch(url).then(r => r.text())
-  const tokens = marked.lexer(data)
-  const html = marked.parser(tokens)
+  //const tokens = marked.lexer(data)
+  //const html = marked.parser(tokens)
 
   return (
-    <main className="flex-grow justify-center items-center">
-      <Link href="/">
-        &#8592; Back
-      </Link>
-
-      <div dangerouslySetInnerHTML={{__html: html}}/>
-    </main>
+    <RecipeClient markdown={data}/>
   )
 }

app/components/recipe-client.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import Link from 'next/link'
+import Markdown, { ReactRenderer } from 'marked-react'
+import { ReactNode } from 'react';
+
+// https://marked.js.org/using_pro#renderer
+const renderer : Partial<ReactRenderer> = {
+    heading(children: ReactNode, level: HeadingLevels) {
+        return (
+            <h1 className="text-red-300">
+              {children}
+            </h1>
+        )
+    },
+
+    list(children: ReactNode, ordered: boolean) {
+        return (
+            <li className="text-blue-300">
+              {children}
+            </li>
+        )
+    },
+
+    paragraph(children: ReactNode) {
+        return (
+            <p className="text-green-300">
+              {children}
+            </p>
+        )
+    },
+
+    link(href: string, text: ReactNode) {
+        return (
+            <a className="text-yellow-300" href={href}>
+              {text}
+            </a>
+        )
+    }
+};
+
+
+export function RecipeClient(props : any) {
+  return (
+    <main className="flex-grow justify-center items-center">
+      <Link href="/">
+        &#8592; Back
+      </Link>
+
+      <Markdown value={props.markdown} renderer={renderer} />
+    </main>
+  )
+}

package.json

@@ -14,7 +14,7 @@
     "clsx": "^2.0.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.294.0",
-    "marked": "^11.0.0",
+    "marked-react": "^2.0.0",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",