From 27faac00e32d6c652e85e02a3c57d915c11299b4 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Mon, 1 Jul 2024 12:46:10 +0200
Subject: [PATCH] feat(components): :sparkles: add new `Markdown` component

---
 .vscode/settings.json         |  3 ++-
 components/Markdown.tsx       | 31 +++++++++++++++++++++++++++++++
 routes/membres/[id]/index.tsx | 15 +--------------
 3 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 components/Markdown.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 188ebab..8f31af9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -36,7 +36,8 @@
 		"api",
 		"ux",
 		"route",
-		"frontend"
+		"frontend",
+		"components"
 	],
 	"[ignore]": {
 		"editor.defaultFormatter": "foxundermoon.shell-format"
diff --git a/components/Markdown.tsx b/components/Markdown.tsx
new file mode 100644
index 0000000..ada8c5a
--- /dev/null
+++ b/components/Markdown.tsx
@@ -0,0 +1,31 @@
+import { SignalLike } from '$fresh/src/types.ts'
+import { render, RenderOptions } from 'gfm'
+
+export type MarkdownTheme = 'light' | 'dark' | 'auto'
+export function Markdown(
+    { children, theme, options }: {
+        children?: SignalLike<string> | string
+        theme?: SignalLike<MarkdownTheme> | MarkdownTheme
+        options?: RenderOptions
+    },
+) {
+    return (
+        <div
+            class='markdown-body'
+            data-color-mode={typeof theme === 'string'
+                ? theme
+                : theme?.value ?? 'auto'}
+            data-light-theme='light'
+            data-dark-theme='dark'
+            dangerouslySetInnerHTML={{
+                __html: render(
+                    typeof children === 'string'
+                        ? children
+                        : children?.value ?? '',
+                    options,
+                ),
+            }}
+        >
+        </div>
+    )
+}
diff --git a/routes/membres/[id]/index.tsx b/routes/membres/[id]/index.tsx
index 8b2c81d..203ff92 100644
--- a/routes/membres/[id]/index.tsx
+++ b/routes/membres/[id]/index.tsx
@@ -1,19 +1,6 @@
 import { PageProps } from '$fresh/server.ts'
+import { Markdown } from '../../../components/Markdown.tsx'
 import { MemberCard, memberMock } from '../../../components/MemberCard.tsx'
-import { CSS, render as renderMd } from 'gfm'
-
-function Markdown({ children }: { children: string }) {
-	return (
-		<>
-			<style dangerouslySetInnerHTML={{ __html: CSS }}></style>
-			<div
-				class='markdown-body'
-				dangerouslySetInnerHTML={{ __html: renderMd(children) }}
-			>
-			</div>
-		</>
-	)
-}
 
 const db = [
 	'julien.oculi',