feat(components): add new Markdown component

This commit is contained in:
Julien Oculi 2024-07-01 12:46:10 +02:00
parent e91b1b7a19
commit 27faac00e3
3 changed files with 34 additions and 15 deletions

View file

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

31
components/Markdown.tsx Normal file
View file

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

View file

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