add initial component library examples

.eleventy.js

@@ -0,0 +1,52 @@
+import lightningcssPlugin from "@11tyrocks/eleventy-plugin-lightningcss";
+
+export default function (eleventyConfig) {
+  const now = String(Date.now())
+  eleventyConfig.addShortcode('version', function () {
+    return now
+  })
+
+  // === COLLECTIONS ===
+  eleventyConfig.addCollection("component", function(collectionApi) {
+    return collectionApi.getFilteredByGlob("site/component-library/**/*");
+  });
+
+  // === PASSTHROUGH COPY ===
+    // Copy the entire styles directory to _site
+  eleventyConfig.addPassthroughCopy("src/css/");
+
+  // === WATCH TARGETS ===
+  // Watch CSS files for changes during development
+  eleventyConfig.addWatchTarget("src/css/**/*.css");
+
+  eleventyConfig.addPlugin(lightningcssPlugin, {
+    src: "src/css/app.css",
+
+    lightningcssOptions: {
+      minify: true,
+      sourceMap: true,
+      targets: "defaults"
+    }
+  });
+
+  const config = {
+    dir: {
+      input: "site",
+      output: "_site"
+    }
+  };
+
+  // Set pathPrefix in production for GitHub Pages
+  //
+  // GitHub Pages currently serves this site at 
+  // https://thoughtbot.github.io/roux/,
+  // but this site is built expecting to be at the root `/`.
+  // Therefore, we need to set `pathPrefix` to `/roux/` in production
+  // to serve the site correctly. If we decide to use a custom domain,
+  // we can remove this.
+  if (process.env.SITE_ENV === 'production') {
+    config.pathPrefix = "/roux/";
+  }
+
+  return config;
+}

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

@@ -0,0 +1,52 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ component_library ]
+
+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@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          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

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 dist
 node_modules
+_site