Remove Jekyll cruft, update search and plugins to use Eleventy variables

Author: contolini

.eleventy.js

@@ -4,6 +4,8 @@ import yaml from 'js-yaml';
 import fs from 'fs';
 import path from 'path';
 
+const ICON_REGEX = /{%\s+include\s+["']?\/?icons\/([\w-]+)\.svg["']?\s+%}/g;
+
 export default function (eleventyConfig) {
   // Get baseurl from environment or use default
   const baseurl = process.env.BASEURL || '/design-system';
@@ -48,20 +50,23 @@ export default function (eleventyConfig) {
     return url.startsWith('/') ? baseurl + url : baseurl + '/' + url;
   });
 
-  eleventyConfig.addFilter('markdownify', function (content) {
+  const renderIcons = (content) => {
     if (!content) return '';
     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);
+    return content.replace(ICON_REGEX, (match, icon) => {
+      const iconPath = path.join(iconsDir, `${icon}.svg`);
+      if (!fs.existsSync(iconPath)) return match;
+      return fs.readFileSync(iconPath, { encoding: 'utf8', flag: 'r' }).trim();
+    });
+  };
+
+  eleventyConfig.addFilter('render_icons', function (content) {
+    return renderIcons(content);
+  });
+
+  eleventyConfig.addFilter('markdownify', function (content) {
+    if (!content) return '';
+    return md.render(renderIcons(content));
   });
 
   // Custom collection for pages by section
@@ -97,7 +102,7 @@ export default function (eleventyConfig) {
     },
   });
 
-  // Custom permalink computation matching Jekyll plugin behavior
+  // Custom permalinks
   eleventyConfig.addGlobalData('eleventyComputed', {
     permalink: (data) => {
       // Skip if permalink is already set
@@ -132,8 +137,7 @@ export default function (eleventyConfig) {
   });
 
   // Add date filters
-  eleventyConfig.addFilter('date', function (date, format) {
-    // Simple date formatting - you can use a library like luxon for more complex formatting
+  eleventyConfig.addFilter('date', function (date) {
     if (!date) return '';
     const d = new Date(date);
     return d.toISOString();

.eleventyignore

@@ -10,8 +10,6 @@ TERMS.md
 CODE_OF_CONDUCT.md
 CONTRIBUTING.md
 HISTORY.md
-Gemfile
-Gemfile.lock
 esbuild
 packages
 scripts

.gitignore

@@ -85,6 +85,3 @@ docs/fonts/
 docs/_site
 .lighthouseci
 .sass-cache
-**/.jekyll-cache/
-.jekyll-metadata
-Gemfile.lock

CONTRIBUTING.md

@@ -34,7 +34,7 @@ here's what you'd do:
 1. `cd design-system`
 1. `git checkout main && git pull` to ensure you're on the latest changes (this step is not necessary when cloning for the first time).
 1. `yarn install` to install dependencies and set up [workspaces](https://yarnpkg.com/lang/en/docs/workspaces/)
-1. `yarn after-install` to copy assets and configure Ruby dependencies.
+1. `yarn after-install` to copy assets.
 1. `git checkout -b button-fix` to create a new branch for your changes.
 1. Edit file(s) in `/packages/cfpb-design-system/src/components/cfpb-buttons` however you want.
 1. Copy `/packages/cfpb-design-system/` into `node_modules/@cfpb/cfpb-design-system/` in your consumerfinance.gov or other repo.
@@ -213,4 +213,5 @@ Example of a valid JSON token file structure for our project.
     }
   },
 ```
+
 Figma emits JSON color that adears to the [w3c design token spec](https://www.designtokens.org/tr/drafts/color/#format). Editors can supply only hex values, srgb int or srgb float while ignoring the Figma specifc metadata.

Gemfile

@@ -4,17 +4,17 @@
 
     {% assign variations_count = 0 %}
     // This is an inline script attached to the window so that we can utilize
-    // jekyll's liquid variables, such as site.pages.
+    // Eleventy's liquid variables, such as site.pages.
     window.searchStore = {
-        {% for page in site.pages %}
+        {% for page in collections.all %}
 
         {% comment %} Exclude search page itself from results. {% endcomment %}
-        {% if url == 'search/index' %} {% continue %} {% endif %}
+        {% if page.url == 'search/index' %} {% continue %} {% endif %}
 
-        '{{ url | slugify }}': {
+        '{{ page.url | slugify }}': {
 
             // Cycle through the variation fields of this page.
-            {% for variation_group in variation_groups %}
+            {% for variation_group in page.data.variation_groups %}
                 // Determine the maximum number of variations present overall.
                 {% if variation_group.variations.size > variations_count %}
                     {% assign variations_count = variation_group.variations | size  %}
@@ -28,14 +28,14 @@
             {% endfor %}
 
 
-            'title': '{{ title | escape }}',
-            'description': {{ page.description | markdownify | strip_html | url_encode | jsonify }},
-            'use_cases': {{ page.use_cases | markdownify | strip_html | url_encode | jsonify }},
-            'guidelines': {{ page.guidelines | markdownify | strip_html | url_encode | jsonify }},
-            'behavior': {{ page.behavior | markdownify | strip_html | url_encode | jsonify }},
-            'accessibility': {{ page.accessibility | markdownify | strip_html | url_encode | jsonify }},
-            'research': {{ page.research | markdownify | strip_html | url_encode | jsonify }},
-            'related_items': {{ page.related_items | markdownify | strip_html | url_encode | jsonify }},
+            'title': "{{ page.data.title | escape }}",
+            'description': {{ page.data.description | markdownify | strip_html | url_encode | jsonify }},
+            'use_cases': {{ page.data.use_cases | markdownify | strip_html | url_encode | jsonify }},
+            'guidelines': {{ page.data.guidelines | markdownify | strip_html | url_encode | jsonify }},
+            'behavior': {{ page.data.behavior | markdownify | strip_html | url_encode | jsonify }},
+            'accessibility': {{ page.data.accessibility | markdownify | strip_html | url_encode | jsonify }},
+            'research': {{ page.data.research | markdownify | strip_html | url_encode | jsonify }},
+            'related_items': {{ page.data.related_items | markdownify | strip_html | url_encode | jsonify }},
             'url': '{{ url | escape }}'
         }
         {% unless forloop.last %},{% endunless %}

docs/_includes/search-scripts.html

@@ -1,4 +1,4 @@
-<form id="search-form" action="{{ site.baseurl }}/search" method="get">
+<form id="search-form" action="{{ site.baseurl }}/search/" method="get">
     <cfpb-form-search id="search-box" form="search-form" name="searchQuery">
         <ul>
             <li><a href="/design-system/components/alerts">Alerts</a></li>

docs/_includes/search.html

@@ -133,7 +133,7 @@ <h3>
             <!-- Live code example -->
             {% if variation_code_snippet and variation_code_snippet != '' %}
             <div class="a-live__code">
-                {{ variation_code_snippet }}
+                {{ variation_code_snippet | render_icons }}
             </div>
             {% endif %}
 

docs/_includes/variation-content.html

@@ -6,8 +6,7 @@
   {% include "sidebar.html" %}
 
   <div class="ds-content">
-    {% include "variation-content.html" %} {% if page.variation_groups.size > 0
-    %}
+    {% include "variation-content.html" %} {% if variation_groups.size > 0 %}
 
     <div class="o-editor" id="toggle-details">
       <a class="a-btn" href="#" title="Show all details">