Merge pull request #633 from microsoft/docs/changelog-pages-site

docs: add changelog site published to GitHub Pages

Author: MuyangAmigo

.github/workflows/publish-changelog.yml

@@ -0,0 +1,61 @@
+name: Publish Changelog Site
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'WHATS_NEW.md'
+      - 'site/**'
+      - '.github/workflows/publish-changelog.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+# Allow one publish at a time; queued runs wait so the live site always
+# reflects the newest commit rather than a cancelled mid-deploy state.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        working-directory: site
+        run: npm install --no-audit --no-fund
+
+      - name: Build changelog site
+        working-directory: site
+        run: npm run build
+
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: site/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

site/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

site/README.md

@@ -0,0 +1,33 @@
+# Changelog site
+
+A static changelog page generated from [`WHATS_NEW.md`](../WHATS_NEW.md) and published to
+GitHub Pages by [`publish-changelog.yml`](../.github/workflows/publish-changelog.yml).
+
+`WHATS_NEW.md` stays the single source of truth — edit releases there, never in this folder.
+
+## Local development
+
+```bash
+cd site
+npm install
+npm run build      # writes site/dist
+npx http-server dist -p 8099 -c-1
+```
+
+`site/dist` and `site/node_modules` are git-ignored; the site is built in CI on every push.
+
+## How it works
+
+- `build.mjs` splits `WHATS_NEW.md` on each `## Version <version> - <date>` heading, renders
+  each release body with [marked](https://marked.js.org/), and emits a single `index.html`
+  with a version sidebar.
+- `assets/styles.css` and `assets/app.js` are copied verbatim into `dist`. The script adds
+  filtering (press `/` to focus), scroll-spy nav highlighting, and a light/dark toggle.
+- `### Added` / `Changed` / `Fixed` / `Removed` / `Deprecated` / `Security` headings inside a
+  release become summary chips; other headings render normally.
+- A `.nojekyll` marker is emitted so Pages serves the output as-is.
+
+## One-time repository setup
+
+In **Settings → Pages**, set **Source** to **GitHub Actions**. The workflow then deploys on
+every push to `main` that touches `WHATS_NEW.md` or `site/`, and via **Run workflow**.

site/assets/app.js

@@ -0,0 +1,155 @@
+(function () {
+  'use strict';
+
+  var THEME_KEY = 'foundry-toolkit-changelog-theme';
+  var root = document.documentElement;
+  var toggle = document.getElementById('theme-toggle');
+  var icon = toggle ? toggle.querySelector('[data-theme-icon]') : null;
+  var search = document.getElementById('search');
+  var results = document.getElementById('results');
+  var navEmpty = document.getElementById('nav-empty');
+  var contentEmpty = document.getElementById('content-empty');
+  var releases = Array.prototype.slice.call(document.querySelectorAll('.release'));
+  var navItems = Array.prototype.slice.call(document.querySelectorAll('.nav__item'));
+
+  // Theme
+
+  function applyTheme(theme) {
+    root.setAttribute('data-theme', theme);
+    if (icon) {
+      icon.textContent = theme === 'dark' ? '☀' : '☾';
+    }
+    if (toggle) {
+      toggle.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+    }
+  }
+
+  function readStoredTheme() {
+    try {
+      return window.localStorage.getItem(THEME_KEY);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  var stored = readStoredTheme();
+  var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  applyTheme(stored || (prefersDark ? 'dark' : 'light'));
+
+  if (toggle) {
+    toggle.addEventListener('click', function () {
+      var next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      applyTheme(next);
+      try {
+        window.localStorage.setItem(THEME_KEY, next);
+      } catch (error) {
+        /* Storage can be blocked; the theme still applies for this page view. */
+      }
+    });
+  }
+
+  // Filtering
+
+  var searchIndex = releases.map(function (release) {
+    return {
+      element: release,
+      id: release.id,
+      text: (release.textContent || '').toLowerCase(),
+    };
+  });
+
+  function filter(query) {
+    var normalized = query.trim().toLowerCase();
+    var matchedIds = {};
+    var matches = 0;
+
+    searchIndex.forEach(function (entry) {
+      var isMatch = normalized === '' || entry.text.indexOf(normalized) !== -1;
+      entry.element.hidden = !isMatch;
+      if (isMatch) {
+        matchedIds[entry.id] = true;
+        matches += 1;
+      }
+    });
+
+    navItems.forEach(function (item) {
+      item.hidden = !matchedIds[item.getAttribute('data-target')];
+    });
+
+    document.querySelectorAll('.nav__group').forEach(function (group) {
+      var visible = group.querySelectorAll('.nav__item:not([hidden])').length;
+      group.hidden = visible === 0;
+    });
+
+    if (navEmpty) {
+      navEmpty.hidden = matches !== 0;
+    }
+    if (contentEmpty) {
+      contentEmpty.hidden = matches !== 0;
+    }
+    if (results) {
+      results.hidden = normalized === '';
+      results.textContent =
+        matches === 1 ? '1 matching release' : matches + ' matching releases';
+    }
+  }
+
+  if (search) {
+    search.addEventListener('input', function () {
+      filter(search.value);
+    });
+
+    // Restore a filter that survived a reload (e.g. browser form restoration).
+    if (search.value) {
+      filter(search.value);
+    }
+  }
+
+  document.addEventListener('keydown', function (event) {
+    if (event.key === '/' && search && document.activeElement !== search) {
+      event.preventDefault();
+      search.focus();
+    }
+  });
+
+  // Active release highlighting
+
+  function setActive(id) {
+    navItems.forEach(function (item) {
+      item.classList.toggle('is-active', item.getAttribute('data-target') === id);
+    });
+  }
+
+  if ('IntersectionObserver' in window && releases.length > 0) {
+    var visible = new Set();
+    var observer = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            visible.add(entry.target.id);
+          } else {
+            visible.delete(entry.target.id);
+          }
+        });
+
+        for (var i = 0; i < releases.length; i += 1) {
+          if (visible.has(releases[i].id)) {
+            setActive(releases[i].id);
+            return;
+          }
+        }
+      },
+      { rootMargin: '-96px 0px -60% 0px', threshold: 0 },
+    );
+
+    releases.forEach(function (release) {
+      observer.observe(release);
+    });
+  }
+
+  if (window.location.hash) {
+    setActive(window.location.hash.slice(1));
+  } else if (releases.length > 0) {
+    setActive(releases[0].id);
+  }
+})();