feat(components): ✨ add new Markdown component

.vscode/settings.json

@@ -36,7 +36,8 @@
 		"api",
 		"ux",
 		"route",
-		"frontend"
+		"frontend",
+		"components"
 	],
 	"[ignore]": {
 		"editor.defaultFormatter": "foxundermoon.shell-format"

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>
+    )
+}

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',