Replace the react-liquid icon injection hack with an esbuild module

Author: contolini

.eleventy.js

@@ -2,6 +2,7 @@ import slugify from 'slugify';
 import markdownIt from 'markdown-it';
 import yaml from 'js-yaml';
 import fs from 'fs';
+import path from 'path';
 
 export default function (eleventyConfig) {
   // Get baseurl from environment or use default
@@ -49,7 +50,18 @@ export default function (eleventyConfig) {
 
   eleventyConfig.addFilter('markdownify', function (content) {
     if (!content) return '';
-    return md.render(content);
+    const iconsDir = path.resolve('docs/_includes/icons');
+    const withIcons = content.replace(
+      /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
+      (match, icon) => {
+        const iconPath = path.join(iconsDir, `${icon}.svg`);
+        if (!fs.existsSync(iconPath)) return match;
+        return fs
+          .readFileSync(iconPath, { encoding: 'utf8', flag: 'r' })
+          .trim();
+      },
+    );
+    return md.render(withIcons);
   });
 
   // Custom collection for pages by section

docs/assets/js/admin/widgets/ReactLiquid.js

@@ -4,6 +4,7 @@ import { Liquid } from 'liquidjs';
 import { marked } from 'marked';
 import slugifyLib from 'slugify';
 import { encode } from 'html-entities';
+import icons from 'cfpb-icons';
 
 const engine = new Liquid({ dynamicPartials: false });
 
@@ -15,7 +16,11 @@ engine.registerFilter('slugify', (val) => {
 });
 engine.registerFilter('markdownify', (val) => {
   if (!val) return '';
-  return marked.parse(val);
+  const withIcons = val.replace(
+    /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
+    (match, icon) => icons[`${icon}.svg`] || match,
+  );
+  return marked.parse(withIcons);
 });
 
 engine.registerFilter('xml_escape', (val) => {
@@ -38,8 +43,35 @@ export default function ReactLiquid({ template, data }) {
   const [html, setHtml] = useState('');
 
   useEffect(() => {
+    const replaceIconsInValue = (value) => {
+      if (typeof value === 'string') {
+        return value.replace(
+          /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
+          (match, icon) => icons[`${icon}.svg`] || match,
+        );
+      }
+      if (Array.isArray(value)) {
+        return value.map((item) => replaceIconsInValue(item));
+      }
+      if (value && typeof value === 'object') {
+        return Object.fromEntries(
+          Object.entries(value).map(([key, val]) => [
+            key,
+            replaceIconsInValue(val),
+          ]),
+        );
+      }
+      return value;
+    };
+
+    const dataWithIcons = replaceIconsInValue(data);
+    const templateWithIcons = template.replace(
+      /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
+      (match, icon) => icons[`${icon}.svg`] || match,
+    );
+
     engine
-      .parseAndRender(template, data)
+      .parseAndRender(templateWithIcons, dataWithIcons)
       .then((rendered) => setHtml(rendered))
       .catch((err) => {
         console.error('Liquid rendering error:', err);

docs/assets/js/admin/widgets/pagePreviewTemplate.js

@@ -8,13 +8,6 @@ import {
 import Tabs from '../../../../assets/js/tabs.js';
 import template from '../../../../_includes/variation-content.html';
 
-// react-liquid (https://github.com/aquibm/react-liquid/) isn't able to `include` other files so we
-// replace instances of {% include icons/XXXXX.svg %} with the inlined SVG
-const templateWithIcons = template.replace(
-  /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
-  (match, icon) => import(`../../../../_includes/icons/${icon}.svg`),
-);
-
 export default class Preview extends Component {
   constructor(props) {
     super(props);
@@ -55,7 +48,7 @@ export default class Preview extends Component {
       // TODO: We're breaking some a11y here by making the whole page clickable.
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div ref={this.containerRef} onClick={(event) => this.handleClick(event)}>
-        <ReactLiquid template={templateWithIcons} data={data} html />
+        <ReactLiquid template={template} data={data} html />
       </div>
     );
   }

docs/special-pages/home.md

@@ -141,4 +141,4 @@ All content, apart from CFPB trademarked properties, has been released as open s
 
   <h4 class="h5">Trademark notice</h4>
 
-## <p>The CFPB’s logo and the standard characters Consumer Financial Protection Bureau, CFPB, Know Before You Owe, and Money as You Grow are registered trademarks owned by the CFPB. Nothing on this website shall be construed as granting any license to use any trademark displayed on the website without the express written permission of the CFPB. Your use of these registered trademarks must comply with intellectual property laws. You may not use the CFPB trademarks to state or imply an association with or endorsement of your goods, services, or activities, nor in any manner that infringes upon the CFPB trademarks. Requests to use the CFPB trademarks should be made to the Office of the General Counsel, <a href="mailto:cfpb_ip@cfpb.gov">cfpb_ip@cfpb.gov</a>.</p>
+  <p>The CFPB’s logo and the standard characters Consumer Financial Protection Bureau, CFPB, Know Before You Owe, and Money as You Grow are registered trademarks owned by the CFPB. Nothing on this website shall be construed as granting any license to use any trademark displayed on the website without the express written permission of the CFPB. Your use of these registered trademarks must comply with intellectual property laws. You may not use the CFPB trademarks to state or imply an association with or endorsement of your goods, services, or activities, nor in any manner that infringes upon the CFPB trademarks. Requests to use the CFPB trademarks should be made to the Office of the General Counsel, <a href="mailto:cfpb_ip@cfpb.gov">cfpb_ip@cfpb.gov</a>.</p>

esbuild/plugins/plugin-esbuild-liquid.js

@@ -1,4 +1,5 @@
 import fs from 'fs';
+import path from 'path';
 
 const pluginEsbuildLiquid = {
   name: 'liquid',
@@ -12,11 +13,49 @@ const pluginEsbuildLiquid = {
       };
     });
 
+    build.onResolve({ filter: /^cfpb-icons$/ }, () => {
+      return {
+        path: 'cfpb-icons',
+        namespace: 'icons-map',
+      };
+    });
+
+    build.onLoad({ filter: /.*/, namespace: 'icons-map' }, () => {
+      const iconsDir = path.resolve(process.cwd(), 'docs/_includes/icons');
+      const files = fs.existsSync(iconsDir) ? fs.readdirSync(iconsDir) : [];
+      const icons = {};
+
+      for (const file of files) {
+        if (!file.endsWith('.svg')) continue;
+        const iconPath = path.join(iconsDir, file);
+        icons[file] = fs
+          .readFileSync(iconPath, { encoding: 'utf8', flag: 'r' })
+          .trim();
+      }
+
+      return {
+        contents: `export default ${JSON.stringify(icons)};`,
+        loader: 'js',
+      };
+    });
+
     build.onLoad({ filter: /.*\.html$/, namespace: 'liquid' }, async (args) => {
       let contents = fs
         .readFileSync(args.path, { encoding: 'utf8', flag: 'r' })
         .trim();
 
+      const iconsDir = path.resolve(process.cwd(), 'docs/_includes/icons');
+      contents = contents.replace(
+        /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
+        (match, icon) => {
+          const iconPath = path.join(iconsDir, `${icon}.svg`);
+          if (!fs.existsSync(iconPath)) return match;
+          return fs
+            .readFileSync(iconPath, { encoding: 'utf8', flag: 'r' })
+            .trim();
+        },
+      );
+
       if (build.initialOptions && build.initialOptions.minify) {
         contents = contents
           .replace(/>[\r\n ]+</g, '><')