boxwood 2.4.4 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/grid/index.js

@@ -24,13 +24,18 @@ function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
     }),
     ...(typeof columns === "object" &&
       Object.keys(columns).reduce((object, key) => {
+        const value =
+          typeof columns[key] === "number"
+            ? `repeat(${columns[key]}, 1fr)`
+            : columns[key]
         if (key === "default") {
-          object["grid-template-columns"] = columns[key]
+          object["grid-template-columns"] = value
         } else if (typeof key === "string") {
-          const value =
+          const maxWidth =
             BREAKPOINTS[key] || (key.endsWith("px") ? key : `${key}px`)
-          object[`@media (max-width: ${value})`] = {
-            "grid-template-columns": columns[key],
+
+          object[`@media (max-width: ${maxWidth})`] = {
+            "grid-template-columns": value,
           }
         }
         return object

package/ui/index.js

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

package/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)