fix: use parser to render about page content

inclusive-design · Jan 6, 2025 · 958b0f4 · 958b0f4
1 parent a275d04
commit 958b0f4
Show file tree

Hide file tree

Showing 10 changed files with 304 additions and 29 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -2,6 +2,7 @@ import { EleventyRenderPlugin } from "@11ty/eleventy";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
 import fluidPlugin from "eleventy-plugin-fluid";
 import footnotesPlugin from "eleventy-plugin-footnotes";
+import parse from "./src/assets/scripts/parse.js";
 
 export default function eleventy(eleventyConfig) {
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
@@ -29,6 +30,8 @@ export default function eleventy(eleventyConfig) {
         });
     });
 
+    eleventyConfig.addTransform("parse", parse);
+
     eleventyConfig.addPassthroughCopy({
         "src/admin/config.yml": "admin/config.yml"
     });

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "cross-env": "^7.0.3",
     "debug": "^4.3.5",
     "husky": "^9.0.11",
+    "linkedom": "^0.18.6",
     "lint-staged": "^15.2.7",
     "markdownlint-cli2": "^0.15.0",
     "markdownlint-config-fluid": "^0.1.5",

diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
@@ -1,10 +1,5 @@
 {% extends "layouts/base.njk" %}
 
 {% block content %}
-{% for key, value in sections %}
-<section>
-    <h2>{{ key }}</h2>
-    <p>{{ value }}</p>
-</section>
-{% endfor %}
+{{ content | safe }}
 {% endblock %}
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -8,15 +8,14 @@
   {% include "partials/global/scripts.njk" %}
 </head>
 <body>
+  <main>
     {% include "partials/global/header.njk" %}
     {% include "partials/components/navigation.njk" %}
     {% from "partials/components/card.macro.njk" import card %}
     {% if hasBanner %}
     <div class="banner bg-{{ bannerBgColor }}">
       <div class="banner__text">
-        <div class="banner__title">
-          {{ bannerTitle | safe }}
-        </div>
+        <h1>{{ bannerTitle | safe }}</h1>
         {{ bannerBody }}
       </div>
       {% if bannerImage %}
@@ -28,7 +27,6 @@
     {% endif %}
     {% block content %}{% endblock %}
     {% if collections['projects_' + lang] %}
-    {% set cardImage = "yes" %}
     <section class="display">
       <div class="display__title">
         <h2>Projects</h2>
@@ -88,6 +86,7 @@
       </div>
     </section>
     {% endif %}
-    {% include "partials/global/footer.njk" %}
+  </main>
+  {% include "partials/global/footer.njk" %}
 </body>
 </html>
diff --git a/src/_includes/partials/global/scripts.njk b/src/_includes/partials/global/scripts.njk
@@ -1,2 +1,5 @@
 {% uioScripts %}
 <script type="text/javascript" src="/assets/scripts/app.js" defer></script>
+{% if page.fileSlug === "about" %}
+<script type="text/javascript" src="/assets/scripts/parse.js" defer></script>
+{% endif %}
diff --git a/src/assets/scripts/parse.js b/src/assets/scripts/parse.js
@@ -0,0 +1,36 @@
+import { parseHTML } from "linkedom";
+
+export default (value, outputPath) => {
+    if (outputPath && outputPath.includes(".html")) {
+        const { document } = parseHTML(value);
+        if (document) {
+            const main = document.getElementsByTagName("main");
+            const updatedMain = document.createElement("main");
+            let section = document.createElement("section");
+
+            if (main[0]?.children) {
+                for (const element of main[0].children) {
+                    if (element.tagName === "H2" && element.classList?.length === 0) {
+                        if (section.children.length > 0) {
+                            updatedMain.append(section);
+                            section = document.createElement("section");
+                        }
+                        section.append(element);
+                    } else if (element.tagName === "P" && element.classList?.length === 0) {
+                        section.append(element);
+                    } else {
+                        if (section.children.length > 0) {
+                            updatedMain.append(section);
+                        }
+                        updatedMain.append(element);
+                    }
+                }
+                main[0].replaceWith(updatedMain);
+            }
+
+            return "<!DOCTYPE html>\r\n" + document.documentElement?.outerHTML;
+        }
+    }
+
+    return value;
+};