WIP first pass of hover glossary

11ty/eleventy.config.js

@@ -11,6 +11,7 @@ const dateFilters = require("./filters/dates.js");
 const timestampFilters = require("./filters/timestamp.js");
 const patternPreview = require("./shortcodes/patternPreview.js");
 const renderRelatedPatterns = require("./shortcodes/renderRelatedPatterns.js");
+const renderPatternText = require("./shortcodes/renderPatternText.js");
 const patternListing = require("./shortcodes/patternListing.js");
 
 module.exports = (eleventyConfig) => {
@@ -80,6 +81,7 @@ module.exports = (eleventyConfig) => {
   // Shortcodes
   eleventyConfig.addShortcode("patternPreview", patternPreview);
   eleventyConfig.addShortcode("renderRelatedPatterns", renderRelatedPatterns);
+  eleventyConfig.addShortcode("renderPatternText", renderPatternText);
   eleventyConfig.addShortcode("patternListing", patternListing);
 
   // Layout aliases

11ty/shortcodes/renderPatternText.js

@@ -0,0 +1,35 @@
+const fs = require("fs");
+const path = require("path");
+const YAML = require("yaml");
+
+module.exports = (content) => {
+  const list = YAML.parse(
+    fs.readFileSync(
+      path
+        .join(__dirname, "..", "..", "dots-patterns", "glossary", "list.yml")
+        .toString(),
+      "utf8"
+    )
+  );
+  let glossaryRegex = "(?:s";
+  const definitionByWord = {};
+
+  list.forEach((row) => {
+    if (row.word.length > 0) {
+      glossaryRegex += row.word;
+      definitionByWord[row.word.toLowerCase()] = row;
+      definitionByWord[`${row.word.toLowerCase()}s`] = row;
+    }
+    glossaryRegex += "[s|s]|";
+  });
+
+  glossaryRegex = glossaryRegex.slice(0, glossaryRegex.length - 1);
+  glossaryRegex += ")";
+
+  const re = new RegExp(glossaryRegex, "ig");
+  return content.replace(re, (match) => {
+    const def = definitionByWord[match];
+    if (!def) return match;
+    return ` <span class="glossary">${match}</span><span class="glossary-definition">${def.definition}</span>`;
+  });
+};