diff options
Diffstat (limited to 'docs/src/app/ui/markdown.gleam')
| -rw-r--r-- | docs/src/app/ui/markdown.gleam | 34 |
1 files changed, 27 insertions, 7 deletions
diff --git a/docs/src/app/ui/markdown.gleam b/docs/src/app/ui/markdown.gleam index 8bc00da..5a78d0f 100644 --- a/docs/src/app/ui/markdown.gleam +++ b/docs/src/app/ui/markdown.gleam @@ -2,14 +2,34 @@ import gleam/int import gleam/list -import lustre/attribute -import lustre/element.{Element} +import lustre/attribute.{attribute} +import lustre/element.{Element, element} import lustre/element/html +@external(javascript, "../../markdown.ffi.mjs", "parse_markdown") +pub fn parse(md: String) -> #(List(Element(msg)), List(Element(msg))) + // MARKDOWN ELEMENTS ----------------------------------------------------------- +// +// These are used in the FFI markdown renderer to convert the markdown AST into +// lustre elements. +// -pub fn code(src: String) -> Element(msg) { - html.pre([], [html.code([], [element.text(src)])]) +pub fn code(src: String, hash: String, lang: String) -> Element(msg) { + html.pre( + [attribute.class("not-prose rounded-xl")], + [ + html.code( + [ + attribute("data-hash", hash), + attribute("data-lang", lang), + attribute.class("language-" <> lang), + attribute.style([#("background", "transparent")]), + ], + [element.text(src)], + ), + ], + ) } pub fn emphasis(content: List(Element(msg))) { @@ -31,7 +51,7 @@ pub fn heading( [attribute.class("flex items-center justify-between"), attribute.id(id)], [ heading_title(title, id), - html.p([attribute.class("flex gap-4")], tags), + html.p([attribute.class("flex gap-4 font-sans")], tags), ], ) 2 -> @@ -42,7 +62,7 @@ pub fn heading( ], [ heading_title(title, id), - html.p([attribute.class("flex gap-4")], tags), + html.p([attribute.class("flex gap-4 font-sans")], tags), ], ) 3 -> @@ -50,7 +70,7 @@ pub fn heading( [attribute.class("flex items-center justify-between"), attribute.id(id)], [ heading_title(title, id), - html.p([attribute.class("flex gap-2")], tags), + html.p([attribute.class("flex gap-2 font-sans")], tags), ], ) } |