1 files changed, 116 insertions, 0 deletions
diff --git a/docs/src/app/ui/markdown.gleam b/docs/src/app/ui/markdown.gleam
new file mode 100644
index 0000000..8bc00da
--- /dev/null
+++ b/docs/src/app/ui/markdown.gleam
@@ -0,0 +1,116 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/int
+import gleam/list
+import lustre/attribute
+import lustre/element.{Element}
+import lustre/element/html
+
+// MARKDOWN ELEMENTS -----------------------------------------------------------
+
+pub fn code(src: String) -> Element(msg) {
+  html.pre([], [html.code([], [element.text(src)])])
+}
+
+pub fn emphasis(content: List(Element(msg))) {
+  html.em([], content)
+}
+
+pub fn heading(
+  depth: Int,
+  title: String,
+  tags: List(String),
+  id: String,
+) -> Element(msg) {
+  let depth = int.min(depth, 3)
+  let tags = list.map(tags, heading_tag)
+
+  case depth {
+    1 ->
+      html.h1(
+        [attribute.class("flex items-center justify-between"), attribute.id(id)],
+        [
+          heading_title(title, id),
+          html.p([attribute.class("flex gap-4")], tags),
+        ],
+      )
+    2 ->
+      html.h2(
+        [
+          attribute.class("flex items-center justify-between border-t"),
+          attribute.id(id),
+        ],
+        [
+          heading_title(title, id),
+          html.p([attribute.class("flex gap-4")], tags),
+        ],
+      )
+    3 ->
+      html.h3(
+        [attribute.class("flex items-center justify-between"), attribute.id(id)],
+        [
+          heading_title(title, id),
+          html.p([attribute.class("flex gap-2")], tags),
+        ],
+      )
+  }
+}
+
+fn heading_title(title: String, href: String) -> Element(msg) {
+  html.span(
+    [attribute.class("group")],
+    [
+      element.text(title),
+      html.a(
+        [
+          attribute.href("#" <> href),
+          attribute.class("pl-2 text-gray-200 opacity-0 transition-opacity"),
+          attribute.class("group-hover:underline group-hover:opacity-100"),
+        ],
+        [element.text("#")],
+      ),
+    ],
+  )
+}
+
+fn heading_tag(tag: String) -> Element(msg) {
+  html.span(
+    [
+      attribute.class(
+        "px-2 py-1 text-xs text-gray-700 border border-gray-200 rounded",
+      ),
+    ],
+    [element.text(tag)],
+  )
+}
+
+pub fn inline_code(src: String) -> Element(msg) {
+  html.code([], [element.text(src)])
+}
+
+pub fn link(href: String, content: List(Element(msg))) -> Element(msg) {
+  html.a([attribute.href(href)], content)
+}
+
+pub fn list(ordered: Bool, items: List(Element(msg))) -> Element(msg) {
+  case ordered {
+    True -> html.ol([], items)
+    False -> html.ul([], items)
+  }
+}
+
+pub fn list_item(content: List(Element(msg))) -> Element(msg) {
+  html.li([], content)
+}
+
+pub fn paragraph(content: List(Element(msg))) -> Element(msg) {
+  html.p([], content)
+}
+
+pub fn strong(content: List(Element(msg))) -> Element(msg) {
+  html.strong([], content)
+}
+
+pub fn text(content: String) -> Element(msg) {
+  element.text(content)
+}