Add ::component support

config/index.js

@@ -9,7 +9,9 @@ require("dotenv").config();
 module.exports = (eleventyConfig) => {
   const env = process.env.NODE_ENV || "development";
   // enables JSX-based templates and components
-  eleventyConfig.addPlugin(require("eleventy-hast-jsx").plugin);
+  eleventyConfig.addPlugin(require("eleventy-hast-jsx").plugin, {
+    componentsDir: "components",
+  });
   // minify and/or format HTML, purge unused CSS in production
   eleventyConfig.addPlugin(require("./minify"));
 
@@ -24,7 +26,11 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addExtension("md", {
     async compile(inputContent, inputPath) {
       let result = import("./markdown.mjs").then(({ render }) =>
-        render(inputContent, inputPath)
+        render(
+          inputContent,
+          inputPath,
+          eleventyConfig[require("eleventy-hast-jsx").renderComponent]
+        )
       );
       return () => result;
     },

config/markdown.mjs

@@ -2,7 +2,6 @@
 import fs from "node:fs";
 import path from "node:path";
 
-import { map } from "unist-util-map";
 import { unified } from "unified";
 
 import rehypeParse from "rehype-parse";
@@ -35,9 +34,17 @@ const processorToString = processor
   // convert the HTML nodes to an HTML string
   .use(rehypeStringify, { allowDangerousHtml: true });
 
-/** @param {string} str */
-export async function render(str, path) {
-  const file = await processorToString.process({ value: str, path });
+/**
+ * @param {string} str
+ * @param {string} path
+ * @param {import("eleventy-hast-jsx").RenderComponent} renderComponent
+ */
+export async function render(str, path, renderComponent) {
+  const file = await processorToString.process({
+    value: str,
+    path,
+    data: { renderComponent },
+  });
   return file.value.toString("utf8");
 }
 
@@ -226,6 +233,20 @@ function directivesPlugin() {
         });
       }
 
+      // component: run eleventy-hast-jsx
+      if (node.type === "leafDirective" && node.name === "component") {
+        if (node.children.length !== 1 || node.children[0].type !== "text") {
+          throw new Error(`Expected a component name`);
+        }
+        const name = node.children[0].value;
+        return file.data
+          .renderComponent(name, node.attributes)
+          .then((renderedHtml) => ({
+            type: "html",
+            value: renderedHtml,
+          }));
+      }
+
       // otherwise, return the node unchanged
       return node;
     });
@@ -358,3 +379,20 @@ function findPrefix(paragraph) {
     }),
   };
 }
+
+// Copied from unist-util-map to make it async
+function map(tree, mapFunction) {
+  return preorder(tree, null, null);
+
+  async function preorder(node, index, parent) {
+    const newNode = Object.assign({}, await mapFunction(node, index, parent));
+
+    if ("children" in node) {
+      newNode.children = await Promise.all(
+        node.children.map((child, index) => preorder(child, index, node))
+      );
+    }
+
+    return newNode;
+  }
+}

package.json

@@ -27,7 +27,7 @@
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
     "dotenv": "^16.0.3",
-    "eleventy-hast-jsx": "^0.3.1",
+    "eleventy-hast-jsx": "^0.3.4",
     "fast-glob": "^3.2.12",
     "hast-util-to-html": "^8.0.3",
     "listify": "^1.0.3",
@@ -50,7 +50,6 @@
     "subset-font": "^2.0.0",
     "title": "^3.5.3",
     "unified": "^10.1.2",
-    "unist-util-map": "^3.1.2",
     "vfile": "^5.3.6",
     "yaml": "^2.1.3"
   },

pages/index.md

@@ -6,7 +6,7 @@ summary = "Are you a Brown University undergraduate, grad student, or employee?
 
 **[Commencement Schedule 2023 →](/commencement/)**
 
-{% component "Carousel", folder="homepage" %}
+::component[Carousel]{folder="homepage"}
 
 ## Why join the band?