Migrate DS from Jekyll to Eleventy

.eleventy.js

@@ -0,0 +1,159 @@
+import slugify from 'slugify';
+import markdownIt from 'markdown-it';
+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';
+
+  // Copy assets
+  eleventyConfig.addPassthroughCopy('docs/assets');
+  eleventyConfig.addPassthroughCopy('docs/images');
+  eleventyConfig.addPassthroughCopy('docs/admin');
+  eleventyConfig.addPassthroughCopy('docs/fonts');
+  eleventyConfig.addPassthroughCopy({ 'docs/dist': 'dist' });
+
+  // Watch for changes
+  eleventyConfig.addWatchTarget('docs/assets/');
+  eleventyConfig.addWatchTarget('docs/dist/');
+
+  // Set up markdown
+  const md = markdownIt({
+    html: true,
+    breaks: true,
+    linkify: true,
+  });
+  eleventyConfig.setLibrary('md', md);
+
+  // Configure Liquid options
+  eleventyConfig.setLiquidOptions({
+    dynamicPartials: true,
+    strictFilters: false,
+  });
+
+  // Add filters
+  eleventyConfig.addFilter('slugify', function (str) {
+    if (!str) return '';
+    return slugify(str, {
+      lower: true,
+      strict: true,
+      remove: /[*+~.()'"!:@]/g,
+    });
+  });
+
+  eleventyConfig.addFilter('relative_url', function (url) {
+    if (!url) return baseurl;
+    return url.startsWith('/') ? baseurl + url : baseurl + '/' + url;
+  });
+
+  const renderIcons = (content) => {
+    if (!content) return '';
+    const iconsDir = path.resolve('docs/_includes/icons');
+    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
+  eleventyConfig.addCollection('pagesBySection', function (collectionApi) {
+    const pages = collectionApi.getFilteredByGlob('docs/pages/**/*.md');
+    const sections = {};
+
+    pages.forEach((page) => {
+      const section = page.data.section || 'other';
+      if (!sections[section]) {
+        sections[section] = [];
+      }
+      sections[section].push(page);
+    });
+
+    return sections;
+  });
+
+  // Add global data
+  const navigationData = yaml.load(
+    fs.readFileSync('docs/_data/side-navigation.yml', 'utf8'),
+  );
+
+  eleventyConfig.addGlobalData('site', {
+    title: 'Design System',
+    name: 'Design System',
+    description: "CFPB's design system",
+    org: 'CFPB',
+    repository: 'cfpb/design-system',
+    baseurl: baseurl,
+    data: {
+      sideNavigation: navigationData,
+    },
+  });
+
+  // Custom permalinks
+  eleventyConfig.addGlobalData('eleventyComputed', {
+    permalink: (data) => {
+      // Skip if permalink is already set
+      if (data.permalink) return data.permalink;
+
+      // Handle homepage
+      if (data.is_homepage) {
+        return '/index.html';
+      }
+
+      const title = data.title;
+      const section = data.section;
+
+      if (!title || !section) {
+        return false; // Use default
+      }
+
+      // Slugify the title
+      const slug = slugify(title, {
+        lower: true,
+        strict: true,
+        remove: /[*+~.()'"!:@]/g,
+      });
+
+      // Look out for section index pages
+      if (section === slug) {
+        return `/${section}/index.html`;
+      }
+
+      return `/${section}/${slug}/index.html`;
+    },
+  });
+
+  // Add date filters
+  eleventyConfig.addFilter('date', function (date) {
+    if (!date) return '';
+    const d = new Date(date);
+    return d.toISOString();
+  });
+
+  return {
+    dir: {
+      input: 'docs',
+      output: 'docs/_site/design-system',
+      includes: '_includes',
+      layouts: '_layouts',
+      data: '_data',
+    },
+    templateFormats: ['html', 'md', 'liquid', 'njk'],
+    htmlTemplateEngine: 'liquid',
+    markdownTemplateEngine: 'liquid',
+    pathPrefix: baseurl + '/',
+  };
+}

.eleventyignore

@@ -0,0 +1,25 @@
+node_modules
+package.json
+webpack.config.js
+yarn.lock
+.git
+.gitignore
+README.md
+LICENSE
+TERMS.md
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+HISTORY.md
+esbuild
+packages
+scripts
+test
+cypress.config.js
+eslint.config.js
+jest.config.js
+lighthouserc.cjs
+netlify.toml
+style-dictionary.config.js
+stylelint.config.js
+svgo.config.js
+cliff.toml

.github/actions/shared-action-setup/action.yml

@@ -7,11 +7,6 @@ runs:
       with:
         node-version: 22
 
-    - name: Set up Ruby for Jekyll
-      uses: ruby/setup-ruby@v1
-      with:
-        ruby-version: 3.4.3
-
     - name: Install dependencies with Yarn
       shell: bash
       run: |

.github/workflows/pr-preview.yml

@@ -0,0 +1,37 @@
+name: Deploy PR Preview
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Shared setup
+        uses: ./.github/actions/shared-action-setup
+
+      - name: Build site
+        run: yarn build-decap
+        env:
+          BASEURL: /design-system/pr-preview/pr-${{ github.event.pull_request.number }}
+
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./docs/_site/design-system/
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto

.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.
@@ -54,7 +54,7 @@ and file a pull request by clicking the link to compare changes across forks.
 ### Updating Documentation
 
 The Design System's website lives in this repository's `docs/` directory and is
-powered by Decap CMS and Jekyll.
+powered by Decap CMS and Eleventy.
 To edit any page of the website, click the edit button at the bottom right of
 the page.
 You'll need to be added as a contributor to this repository in order to
@@ -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.

README.md

@@ -11,7 +11,7 @@ Visit the [getting started section](https://cfpb.github.io/design-system/develop
 The Design System's website is available at https://cfpb.github.io/design-system/.
 It lives in this repository's `docs/` directory
 and is powered by [Decap CMS](https://decapcms.org/)
-and [Jekyll](https://jekyllrb.com/).
+and [Eleventy](https://www.11ty.dev/).
 To edit any page of the website,
 click the edit button at the bottom right of the page.
 You'll need to be added as a contributor to this repository in order to
@@ -30,20 +30,7 @@ npx web-component-analyzer packages/cfpb-design-system/src/elements
 
 ### Running the documentation website locally
 
-The project has a dependency on Ruby because it uses Jekyll. If you do not have Ruby installed, you will need to install it. We recommend using [RVM](https://rvm.io/rvm/install). If you don't have admin access to your machine, try these steps:
-
-```shell
-curl -sSL https://get.rvm.io | bash -s stable --ruby
-brew install openssl
-brew link openssl --force
-rvm get master
-rvm install ruby-3.4.3 -C --with-openssl-dir=$(brew --prefix openssl@3)
-rvm --default use 3.4.3
-gem install eventmachine -- --with-openssl-dir=$(brew --prefix openssl@3)
-bundle install
-```
-
-And then to run the documentation website locally:
+The documentation website is built with Node.js and Eleventy. To run it locally:
 
 ```shell
 git clone https://github.com/cfpb/design-system.git