Add a very basic markdown component

Author: emilos

test/ui/markdown/index.js

@@ -0,0 +1,16 @@
+const { Markdown } = require("../../../ui")
+
+module.exports = () => {
+  return Markdown(`
+        # h1
+        ## h2
+        ### h3
+        #### h4
+        ##### h5
+        ###### h6
+        
+        paragraph
+
+        > blockquote
+    `)
+}

test/ui/markdown/index.test.js

@@ -0,0 +1,16 @@
+const test = require("node:test")
+const assert = require("node:assert")
+const { compile } = require("../../..")
+
+test("renders children", async () => {
+  const { template } = await compile(__dirname)
+  const html = template()
+  assert(html.includes("<h1>h1</h1>"))
+  assert(html.includes("<h2>h2</h2>"))
+  assert(html.includes("<h3>h3</h3>"))
+  assert(html.includes("<h4>h4</h4>"))
+  assert(html.includes("<h5>h5</h5>"))
+  assert(html.includes("<h6>h6</h6>"))
+  assert(html.includes("<p>paragraph</p>"))
+  assert(html.includes("<blockquote>blockquote</blockquote>"), html)
+})

ui/index.js

@@ -3,11 +3,13 @@ const Container = require("./container")
 const Grid = require("./grid")
 const Group = require("./group")
 const Stack = require("./stack")
+const Markdown = require("./markdown")
 
 module.exports = {
   Center,
   Container,
   Grid,
   Group,
   Stack,
+  Markdown,
 }

ui/markdown/index.js

@@ -0,0 +1,40 @@
+const { component, H1, H2, H3, H4, H5, H6, P, Blockquote } = require("../..")
+
+function Markdown(params, children) {
+  if (typeof children === "string") {
+    const lines = children
+      .trim()
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean)
+
+    return lines.map((line) => {
+      if (line.startsWith("# ")) {
+        const text = line.substring(2)
+        return H1(text)
+      } else if (line.startsWith("## ")) {
+        const text = line.substring(3)
+        return H2(text)
+      } else if (line.startsWith("### ")) {
+        const text = line.substring(4)
+        return H3(text)
+      } else if (line.startsWith("#### ")) {
+        const text = line.substring(5)
+        return H4(text)
+      } else if (line.startsWith("##### ")) {
+        const text = line.substring(6)
+        return H5(text)
+      } else if (line.startsWith("###### ")) {
+        const text = line.substring(7)
+        return H6(text)
+      } else if (line.startsWith("> ")) {
+        const text = line.substring(2)
+        return Blockquote(text)
+      }
+
+      return P(line)
+    })
+  }
+}
+
+module.exports = component(Markdown)