feat: add Markdown handling to Entry template

src/components/CodeBlock.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react"
+import hljs from "highlight.js"
+import "highlight.js/styles/atom-one-dark.css" // or any theme you prefer
+
+export default function CodeBlock({ children, className }) {
+	const codeRef = useRef(null)
+
+	useEffect(() => {
+		if (codeRef.current) {
+			hljs.highlightElement(codeRef.current)
+		}
+	}, [children, className])
+
+	return (
+		<pre>
+			<code ref={codeRef} className={className}>
+				{children}
+			</code>
+		</pre>
+	)
+}

src/templates/Entry.tsx

@@ -1,6 +1,88 @@
 import { useParams } from "react-router"
 import Page from "./Page"
+import { useQuery } from "@tanstack/react-query"
+import api from "@/api/eolas-api"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import CodeBlock from "@/components/CodeBlock"
+import remarkMath from "remark-math"
+import rehypeKatex from "rehype-katex"
+import "katex/dist/katex.min.css"
+
 export default function Entry() {
    const { entry } = useParams()
-   return <Page titleComponent={<span>{entry?.replace(/_/g, " ")}</span>} />
+
+   const { data, isLoading } = useQuery({
+      queryKey: [`entry_${entry}`],
+      queryFn: () => api.get(`/entries/${entry}`).then((res) => res.data),
+   })
+
+   return (
+      <Page
+         titleComponent={<span>{entry?.replace(/_/g, " ")}</span>}
+         pageBody={<EntryBody body={data?.body} />}
+      />
+   )
+}
+
+const EntryBody = ({ body }) => {
+   console.log(body)
+   return (
+      <div className="max-w-2xl mt-10">
+         <ReactMarkdown
+            remarkPlugins={[remarkGfm, remarkMath]}
+            rehypePlugins={[rehypeKatex]}
+            components={{
+               h1: () => null,
+               h2: ({ children }) => (
+                  <h2 className="scroll-m-20 font-semibold mt-8 mb-4 first:mt-0">{children}</h2>
+               ),
+               h3: ({ children }) => (
+                  <h3 className="scroll-m-20 font-semibold mt-8 mb-4 first:mt-0">{children}</h3>
+               ),
+               h4: ({ children }) => (
+                  <h4 className="scroll-m-20 font-semibold mt-8 mb-4 first:mt-0">{children}</h4>
+               ),
+               p: ({ children }) => <p className="leading-[1.5] mb-4 mt-4">{children}</p>,
+               ul: ({ children }) => <ul className="list-disc ml-10 mb-4 space-y-1">{children}</ul>,
+               ol: ({ children }) => (
+                  <ol className="list-decimal ml-10 mb-4 space-y-1">{children}</ol>
+               ),
+               a: ({ href, children }) => (
+                  <a href={href} target="_blank" rel="noopener noreferrer">
+                     {children}
+                  </a>
+               ),
+               table: ({ children }) => <table className="w-full mb-4 text-sm">{children}</table>,
+               tr: ({ children }) => <tr className="even:bg-muted m-0 border-t p-0">{children}</tr>,
+               th: ({ children }) => (
+                  <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                     {children}
+                  </th>
+               ),
+               td: ({ children }) => (
+                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                     {children}
+                  </td>
+               ),
+               blockquote: ({ children }) => (
+                  <blockquote className="mt-4 border-l-2 pl-6 text-muted-foreground">
+                     {children}
+                  </blockquote>
+               ),
+               pre: ({ children }) => {
+                  const child = children.props
+                  return <CodeBlock className={child.className}>{child.children}</CodeBlock>
+               },
+               code: ({ children }) => (
+                  <code className="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+                     {children}
+                  </code>
+               ),
+            }}
+         >
+            {body}
+         </ReactMarkdown>
+      </div>
+   )
 }