Roux Components v1

.eleventy.js

@@ -0,0 +1,86 @@
+import lightningcssPlugin from "@11tyrocks/eleventy-plugin-lightningcss";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import markdownItDirective from "markdown-it-directive";
+import previewMarkdownDirective from "./11tyconfig/previewMarkdownDirective.js";
+
+export default function (eleventyConfig) {
+  const now = String(Date.now());
+  eleventyConfig.addShortcode("version", function () {
+    return now;
+  });
+
+  // === IGNORES ===
+  eleventyConfig.ignores.add("site/README.md");
+
+  // === COLLECTIONS ===
+  eleventyConfig.addCollection("component", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("site/component-library/**/*")
+      .sort((a, b) => {
+        return a.data.title.localeCompare(b.data.title);
+      });
+  });
+
+  // === PASSTHROUGH COPY ===
+  // Copy the Roux framework styles to _site
+  eleventyConfig.addPassthroughCopy("src/css/");
+  // Copy site-specific assets to _site
+  eleventyConfig.addPassthroughCopy("site/assets/");
+  // meta icons
+  eleventyConfig.addPassthroughCopy("site/*.ico");
+  eleventyConfig.addPassthroughCopy("site/*.svg");
+  eleventyConfig.addPassthroughCopy("site/*.png");
+  // metadata
+  eleventyConfig.addPassthroughCopy("site/robots.txt");
+
+  // minify CSS with LightningCSS
+  // Process Roux framework CSS, site-specific CSS, and component preview CSS
+  eleventyConfig.addPlugin(lightningcssPlugin, [
+    {
+      src: "src/css/app.css",
+      lightningcssOptions: {
+        minify: true,
+        sourceMap: true,
+        targets: "defaults",
+      },
+    },
+    {
+      src: "site/assets/css/site.css",
+      lightningcssOptions: {
+        minify: true,
+        sourceMap: true,
+        targets: "defaults",
+      },
+    },
+    {
+      src: "site/assets/css/component-preview.css",
+      lightningcssOptions: {
+        minify: true,
+        sourceMap: true,
+        targets: "defaults",
+      },
+    },
+  ]);
+
+  // syntax highlighting for code blocks
+  eleventyConfig.addPlugin(syntaxHighlight, { preAttributes: { tabindex: 0 } });
+
+  // Configure markdown-it with directive support
+  eleventyConfig.amendLibrary("md", (mdLib) => {
+    mdLib.use(markdownItDirective).use(previewMarkdownDirective);
+    return mdLib;
+  });
+
+  const config = {
+    dir: {
+      input: "site",
+      output: "_site",
+    },
+  };
+
+  // support .md and .njk template engines in same files
+  config.markdownTemplateEngine = "njk";
+  config.htmlTemplateEngine = "njk";
+
+  return config;
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,52 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [component_library_2]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build site
+        run: npm run deploy
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "_site"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -0,0 +1,83 @@
+name: Test
+
+on:
+  push:
+
+jobs:
+  html-validate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build site
+        run: npm run build-site
+
+      - name: Validate HTML
+        run: npm run test:html
+
+  a11y:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run a11y tests
+        run: npm run test:a11y
+
+  snapshots:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Set up snapshot cache
+        id: cache
+        uses: actions/cache@v5
+        with:
+          key: cache/${{github.repository}}/${{github.ref}}
+          restore-keys: cache/${{github.repository}}/refs/heads/main
+          path: |
+            tests/snapshots/**/*.png
+            tests/snapshots/**/*.aria.yml
+
+      - name: Initialize snapshots
+        if: ${{steps.cache.outputs.cache-hit != 'true'}}
+        run: npm run update-snapshots
+
+      - name: Run snapshot tests
+        run: npm run test:snapshots
+        continue-on-error: true

.gitignore

@@ -1,3 +1,6 @@
 .DS_Store
 dist
 node_modules
+_site
+test-results
+playwright-report

.htmlvalidate.mjs

@@ -0,0 +1,14 @@
+import { defineConfig } from "html-validate";
+
+export default defineConfig({
+  extends: ["html-validate:recommended"],
+  rules: {
+    // PrismJS for some reason doesn't encode ">" (although it does encode "<")
+    "no-raw-characters": "off",
+    // Prettier currently uses self-closing tags (<img />) instead of void elements (<img>)
+    "void-style": "off",
+    // html-validate package doesn't know that search has a landmark role where aria-label is ok
+    "aria-label-misuse": ["error", { elements: { exclude: ["search"] } }],
+    "no-inline-style": "warn",
+  },
+});

.prettierignore

@@ -0,0 +1,3 @@
+_site
+# the Prettier Jinja/Nunjucks formatter adds whitespace to the beginning of the file, which causes the XML declaration to be invalid
+site/sitemap.njk

11tyconfig/previewMarkdownDirective.js

@@ -0,0 +1,123 @@
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import matter from "gray-matter";
+
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+const eleventyPrism = syntaxHighlight.pairedShortcode;
+
+export default function previewMarkdownDirective(md) {
+  // Register block directive handler for ::preview
+  md.blockDirectives["preview"] = (params) => {
+    const { state, attrs, directiveStartLine, directiveEndLine } = params;
+
+    if (!attrs?.file) {
+      const token = state.push("html_block", "", 0);
+      token.map = [directiveStartLine, directiveEndLine];
+      token.content = `<p class="error">Preview directive requires a "file" attribute.</p>\n`;
+      return;
+    }
+
+    const { file, id, tall } = attrs;
+
+    let htmlContent;
+    let title;
+    try {
+      // Read the HTML file from the examples directory
+      const __dirname = dirname(fileURLToPath(import.meta.url));
+      const examplePath = join(__dirname, "../site/examples", file);
+      const raw = readFileSync(examplePath, "utf-8");
+      const parsed = matter(raw);
+      htmlContent = parsed.content.trim();
+      title = parsed.data.title;
+    } catch (error) {
+      console.error(`Error reading preview file: ${file}`, error);
+      const token = state.push("html_block", "", 0);
+      token.map = [directiveStartLine, directiveEndLine];
+      token.content = `<p class="error">Could not load preview: ${file}</p>\n`;
+      return;
+    }
+
+    try {
+      const previewId = id || `preview_${directiveStartLine}`;
+      const pathPrefix = ""; // use pathPrefix if the content is served from a subdirectory
+      const isTall = tall === "true";
+
+      const token = state.push("html_block", "", 0);
+      token.map = [directiveStartLine, directiveEndLine];
+      token.content = generatePreviewHtml(
+        previewId,
+        title || "Preview",
+        file,
+        htmlContent,
+        pathPrefix,
+        isTall,
+      );
+    } catch (error) {
+      console.error("Error rendering preview", error);
+      const token = state.push("html_block", "", 0);
+      token.map = [directiveStartLine, directiveEndLine];
+      token.content = `<p class="error">Could not render preview: ${file}</p>\n`;
+    }
+  };
+}
+
+function generatePreviewHtml(id, title, file, htmlContent, pathPrefix, isTall) {
+  const ID = {
+    TAB: {
+      PREVIEW: `tab-preview-${id}`,
+      CODE: `tab-code-${id}`,
+    },
+    PANEL: {
+      PREVIEW: `tabpanel-preview-${id}`,
+      CODE: `tabpanel-code-${id}`,
+    },
+  };
+  return `
+ <div class="component-example${isTall ? " component-example--tall" : ""}">
+  <div role="tablist" aria-labelledby="${id}" class="automatic">
+    <button
+      id="${ID.TAB.PREVIEW}"
+      type="button"
+      role="tab"
+      aria-selected="true"
+      aria-controls="${ID.PANEL.PREVIEW}"
+    >
+      <span class="focus">Preview</span>
+    </button>
+    <button
+      id="${ID.TAB.CODE}"
+      type="button"
+      role="tab"
+      aria-selected="false"
+      aria-controls="${ID.PANEL.CODE}"
+      tabindex="-1"
+    >
+      <span class="focus">Code</span>
+    </button>
+  </div>
+  <div
+    id="${ID.PANEL.PREVIEW}"
+    role="tabpanel"
+    tabindex="0"
+    aria-labelledby="${ID.TAB.PREVIEW}"
+  >
+    <iframe
+      class="component-example__preview-frame"
+      title="${title}"
+      src="${pathPrefix}/examples/${file}"
+    ></iframe>
+  </div>
+  <div
+    id="${ID.PANEL.CODE}"
+    role="tabpanel"
+    tabindex="0"
+    aria-labelledby="${ID.TAB.CODE}"
+  >
+    <div class="component-example__code">
+      ${eleventyPrism(htmlContent, "html", undefined, { preAttributes: { tabindex: 0 } })}
+    </div>
+  </div>
+</div>
+`;
+}