Webpage: automate changelog page generation and navigation integration

.github/workflows/gh-pages-deploy.yml

@@ -41,6 +41,9 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
+      - name: Sync changelog page
+        run: pnpm run changelog
+
       - name: Build website
         run: pnpm build
 

website/docusaurus.config.ts

@@ -62,7 +62,7 @@ const config: Config = {
         hashed: true,
         indexDocs: true,
         indexBlog: false,
-        indexPages: false,
+        indexPages: true,
         docsRouteBasePath: "/",
         searchBarShortcutHint: false,
       },
@@ -93,6 +93,11 @@ const config: Config = {
           label: "Gallery",
           position: "left",
         },
+        {
+          to: "changelog",
+          label: "Changelog",
+          position: "left",
+        },
         {
           href: "https://malpenzibo.github.io/ashell/dev-guide/",
           label: "Developer Guide",
@@ -146,6 +151,10 @@ const config: Config = {
         {
           title: "More",
           items: [
+            {
+              label: "Changelog",
+              to: "/changelog",
+            },
             {
               label: "GitHub",
               href: "https://github.com/MalpenZibo/ashell",

website/package.json

@@ -12,6 +12,7 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
+    "changelog": "node scripts/sync-changelog.mjs",
     "typecheck": "tsc"
   },
   "dependencies": {

website/scripts/sync-changelog.mjs

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+// Generates website/src/pages/changelog.md from the repository CHANGELOG.md.
+// CHANGELOG.md is maintained automatically by the pre-release workflow, so the
+// website page stays in sync by running this script (pnpm run changelog).
+// Each release is rendered as a collapsible card, newest first, with the
+// latest release expanded by default.
+// Usage: node scripts/sync-changelog.mjs
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const SOURCE = join(ROOT, "CHANGELOG.md");
+const TARGET = join(ROOT, "website", "src", "pages", "changelog.md");
+const REPO = "MalpenZibo/ashell";
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function formatDate(iso) {
+  const [year, month, day] = iso.split("-").map(Number);
+  if (!year || !month || !day) {
+    return iso;
+  }
+  return `${MONTHS[month - 1]} ${day}, ${year}`;
+}
+
+let content = readFileSync(SOURCE, "utf8");
+
+// MDX treats <https://...> autolinks as JSX elements; convert them to
+// regular markdown links so the page renders correctly.
+content = content.replace(/<(https?:\/\/[^>\s]+)>/g, "[$1]($1)");
+
+const headingRegex = /^## \[([\w.\-]+)\](?: - (\d{4}-\d{2}-\d{2}))?$/gm;
+const releases = [];
+let match;
+while ((match = headingRegex.exec(content)) !== null) {
+  releases.push({
+    tag: match[1],
+    date: match[2] ?? "",
+    start: match.index,
+    end: headingRegex.lastIndex,
+  });
+}
+
+const sections = releases.map((release, index) => {
+  const next = releases[index + 1];
+  const body = content.slice(release.end, next ? next.start : undefined).trim();
+  const open = index === 0 ? " open" : "";
+  return [
+    `<details className="changelogRelease"${open}>`,
+    `<summary><span className="changelogVersion">${release.tag}</span><span className="changelogDate">${formatDate(release.date)}</span></summary>`,
+    "",
+    body,
+    "",
+    `[View on GitHub](https://github.com/${REPO}/releases/tag/${release.tag})`,
+    "",
+    "</details>",
+    "",
+  ].join("\n");
+});
+
+const page = [
+  "---",
+  "title: Changelog",
+  "description: Release notes for ashell",
+  "hide_table_of_contents: true",
+  "---",
+  "",
+  "# Changelog",
+  "",
+  "Release notes for ashell.",
+  "",
+  ...sections,
+].join("\n");
+
+writeFileSync(TARGET, page);
+console.log(
+  `Synced CHANGELOG.md -> website/src/pages/changelog.md (${releases.length} releases)`,
+);

website/src/css/custom.css

@@ -57,6 +57,47 @@ html[data-theme="dark"] {
   margin-bottom: 16px;
 }
 
+.changelogRelease.alert {
+  --ifm-alert-background-color: var(--ifm-background-surface-color);
+  --ifm-alert-background-color-highlight: var(--ifm-color-emphasis-200);
+  --ifm-alert-foreground-color: var(--ifm-font-color-base);
+  --ifm-alert-border-color: var(--ifm-color-emphasis-300);
+  --ifm-alert-border-left-width: 1px;
+  --ifm-alert-padding-vertical: 0;
+  --ifm-alert-padding-horizontal: 1rem;
+  --ifm-link-color: var(--ifm-color-primary);
+  --ifm-link-hover-color: var(--ifm-color-primary-dark);
+}
+
+.changelogRelease > summary {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  padding: 0.875rem 0 0.875rem 1rem;
+  font-weight: 600;
+}
+
+.changelogRelease > summary::before {
+  top: 50%;
+  margin-top: calc(var(--docusaurus-details-summary-arrow-size) * -0.5);
+}
+
+.changelogRelease[open] {
+  padding-bottom: 0.5rem;
+}
+
+.changelogVersion {
+  font-size: 1.05em;
+}
+
+.changelogDate {
+  margin-left: auto;
+  font-weight: 400;
+  font-size: 0.9em;
+  color: var(--ifm-color-emphasis-600);
+}
+
 @media screen and (max-width: 996px) {
   .theme-doc-version-badge {
     margin-bottom: revert;