jsx, part 1

components/Footer.jsx

@@ -0,0 +1,57 @@
+const { createElement } = require("eleventy-hast-jsx");
+const Icon = require("./Icon.jsx");
+
+module.exports = () => (
+  <footer class="mt-auto border-top" style="padding-block: 2rem">
+    <div
+      class="container d-flex align-items-center flex-column flex-md-row"
+      style="max-width: 900px"
+    >
+      <a
+        href="/"
+        class="me-2 mb-2 mb-md-0 text-muted text-decoration-none lh-1"
+      >
+        <img
+          src="/assets/elrod.png"
+          alt="Homepage"
+          height="30"
+          style="filter: grayscale(1); opacity: 0.8"
+        />
+      </a>
+
+      <div class="mb-3 mb-md-0 text-secondary text-center">
+        ©&nbsp;1967–present Brown&nbsp;University&nbsp;Band
+      </div>
+
+      <ul class="nav list-unstyled justify-content-center justify-content-md-end d-flex flex-fill">
+        <li class="ms-md-4">
+          <a
+            class="link-secondary"
+            href="https://twitter.com/BrownUBandStand"
+            aria-label="Twitter"
+          >
+            <Icon name="twitter" />
+          </a>
+        </li>
+        <li class="ms-5 ms-md-4">
+          <a
+            class="link-secondary"
+            href="https://instagram.com/brownbandstagram/"
+            aria-label="Instagram"
+          >
+            <Icon name="instagram" />
+          </a>
+        </li>
+        <li class="ms-5 ms-md-4">
+          <a
+            class="link-secondary"
+            href="https://facebook.com/BrownBand"
+            aria-label="Facebook"
+          >
+            <Icon name="facebook" />
+          </a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+);

components/Icon.jsx

@@ -0,0 +1,23 @@
+const { createElement } = require("eleventy-hast-jsx");
+const { readFileSync } = require("node:fs");
+const path = require("node:path");
+
+const allIcons = [
+  ...readFileSync(
+    path.join(path.dirname(__dirname), "assets", "icons.svg"),
+    "utf-8"
+  )
+    // parsing SVG with regex. shame on me.
+    .matchAll(/<symbol[^>]+id="(?<name>[^"]+)"/g),
+].map((i) => i.groups.name);
+
+module.exports = ({ name, size = 24 }) => {
+  if (!allIcons.includes(name)) {
+    throw new ReferenceError(`Unknown icon '${name}'`);
+  }
+  return (
+    <svg class="icon" width={size} height={size}>
+      <use href={`/assets/icons.svg#${name}`} />
+    </svg>
+  );
+};

components/Nav.jsx

@@ -0,0 +1,110 @@
+const { createElement } = require("eleventy-hast-jsx");
+
+const findPage = (id, all) => all.find((p) => p.filePathStem === "/" + id);
+
+module.exports = ({ site, quote, nav, all, currentURL }) => (
+  <>
+    <link rel="stylesheet" href="/assets/css/navbar-colors.css" />
+    <link rel="stylesheet" href="/assets/css/nav.css" />
+
+    <nav class="navbar navbar-expand-md navbar-brown">
+      <div class="container-lg">
+        <div class="col-lg-1 col-xl-2"></div>
+        <div
+          class="col-md-12 col-lg-10 col-xl-9 d-flex align-items-center justify-content-between"
+          style="flex-wrap: inherit"
+        >
+          <a
+            class="navbar-brand mb-2 mb-md-0 me-0 me-md-4 d-flex align-items-center"
+            href="/"
+          >
+            <img
+              class="me-2"
+              src="/assets/elrod.png"
+              width="50"
+              height="50"
+              alt=""
+            />
+            <div class="d-flex flex-column">
+              <span style="font-weight: 500">{site.title}</span>
+              <em class="header-quote">{quote.random()}</em>
+            </div>
+          </a>
+          <ul class="navbar-nav bg-brown3 flex-sm-row">
+            {nav.map((item, index) => (
+              <li class="nav-item dropdown mx-sm-3 mx-md-1">
+                <button
+                  class={
+                    "nav-link dropdown-toggle bg-transparent border-0" +
+                    (item.content.some(
+                      (ch) =>
+                        !ch.disabled &&
+                        !ch.heading &&
+                        findPage(ch, all).url === currentURL
+                    )
+                      ? " active"
+                      : "")
+                  }
+                  style="outline: 0"
+                  id={`dropdownMenuLink-${index}`}
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  {item.title}
+                </button>
+
+                <ul
+                  class="dropdown-menu dropdown-menu-brown rounded-3 sm-shadow-brown mx-3 mx-sm-0"
+                  aria-labelledby={`dropdownMenuLink-${index}`}
+                >
+                  {item.content.map((link) => {
+                    if (link.heading) {
+                      return (
+                        <>
+                          <li>
+                            <hr class="dropdown-divider" />
+                          </li>
+                          <li>
+                            <h6 class="dropdown-header">{link.heading}</h6>
+                          </li>
+                        </>
+                      );
+                    } else if (link.disabled) {
+                      return (
+                        <li class="dropdown-item disabled">{link.disabled}</li>
+                      );
+                    } else {
+                      const page = findPage(link, all);
+                      return (
+                        <li>
+                          <a
+                            class={
+                              "dropdown-item" +
+                              (page.url === currentURL ? " active" : "")
+                            }
+                            href={page.url}
+                          >
+                            {page.data.title}
+                          </a>
+                        </li>
+                      );
+                    }
+                  })}
+                </ul>
+              </li>
+            ))}
+            <li class="nav-item mx-sm-3 mx-md-1">
+              <a
+                href="/contact/"
+                class="nav-link {{lookup (find-page 'contact') 'active'}}"
+              >
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-lg-1"></div>
+      </div>
+    </nav>
+  </>
+);

components/Toc.jsx

@@ -0,0 +1,31 @@
+const { createElement } = require("eleventy-hast-jsx");
+
+const TocList = ({ items }) => (
+  <ul>
+    {items.map((item) => (
+      <li>
+        <a href={`#${item.id}`}>{item.value}</a>
+        {item.children ? <TocList items={item.children} /> : <></>}
+      </li>
+    ))}
+  </ul>
+);
+
+module.exports = ({ toc }) => (
+  <>
+    <link rel="stylesheet" href="/assets/css/toc.css" />
+
+    <section class="toc">
+      <div>
+        <h2 class="d-none d-lg-block" style="font-size: 1.1em">
+          <span class="px-1 bg-body position-relative rounded-pill">
+            Contents
+          </span>
+        </h2>
+        <nav id="tocNav" class="collapse d-lg-block">
+          <TocList items={toc} />
+        </nav>
+      </div>
+    </section>
+  </>
+);

components/TocButton.jsx

@@ -0,0 +1,15 @@
+const { createElement } = require("eleventy-hast-jsx");
+
+module.exports = () => (
+  <button
+    class="toc-btn btn btn-sm btn-secondary d-lg-none dropdown-toggle m-1"
+    style="float: right"
+    type="button"
+    data-bs-toggle="collapse"
+    data-bs-target="#tocNav"
+    aria-expanded="false"
+    aria-controls="tocNav"
+  >
+    Contents
+  </button>
+);

config/index.js

@@ -17,6 +17,8 @@ module.exports = (eleventyConfig) => {
     render: (str) => import("./markdown.mjs").then(({ render }) => render(str)),
   });
 
+  eleventyConfig.addPlugin(require("eleventy-hast-jsx").plugin);
+
   /**
    * Data
    */

eleventy.config.js

@@ -18,7 +18,7 @@ module.exports = (eleventyConfig) => {
    * Data
    */
   // set the default layout
-  eleventyConfig.addGlobalData("layout", "page.hbs");
+  eleventyConfig.addGlobalData("layout", "page.jsx");
   // set the domain of the media bucket
   eleventyConfig.addGlobalData(
     "recordings_url",