docula 0.40.0 → 0.41.1

package/README.md

@@ -17,6 +17,7 @@
 - [Building Multiple Pages](#building-multiple-pages)
 - [Public Folder](#public-folder)
 - [Announcements](#announcements)
+- [Changelog](#changelog)
 - [Alert, Info, Warn Styling](#alert-info-warn-styling)
 - [Using a Github Token](#using-a-github-token)
 - [Helpers](#helpers)
@@ -272,6 +273,94 @@ You can customize the appearance by overriding the `.announcement` class in your
 
 Simply delete the `announcement.md` file when you no longer need the announcement. The home page will automatically return to its normal layout.
 
+# Changelog
+
+Docula can generate a changelog section for your site from markdown files. This is useful for documenting release notes, updates, and changes to your project in a structured, browsable format.
+
+## Setup
+
+Create a `changelog` folder inside your site directory and add markdown (`.md` or `.mdx`) files for each entry:
+
+```
+site
+├───changelog
+│   ├───2025-01-15-initial-release.md
+│   ├───2025-02-01-new-features.md
+│   └───2025-03-10-bug-fixes.md
+├───logo.svg
+├───favicon.ico
+└───docula.config.mjs
+```
+
+## Entry Format
+
+Each changelog entry is a markdown file with front matter:
+
+```md
+---
+title: "Initial Release"
+date: 2025-01-15
+tag: "Release"
+---
+
+We're excited to announce the initial release! Here's what's included:
+
+- Feature A
+- Feature B
+- Bug fix C
+```
+
+### Front Matter Fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `title` | No | Display title for the entry. Defaults to the filename if not provided. |
+| `date` | Yes | Date of the entry (`YYYY-MM-DD`). Used for sorting (newest first). |
+| `tag` | No | A label displayed as a badge (e.g., `Release`, `Bug Fix`, `Feature`). Gets a CSS class based on its value for styling. |
+
+## File Naming
+
+Files can optionally be prefixed with a date in `YYYY-MM-DD-` format. The date prefix is stripped to create the URL slug:
+
+- `2025-01-15-initial-release.md` → `/changelog/initial-release/`
+- `new-features.md` → `/changelog/new-features/`
+
+## Generated Pages
+
+When changelog entries are found, Docula generates:
+
+- **Changelog listing page** at `/changelog/` — shows all entries sorted by date (newest first) with titles, dates, tags, and content
+- **Individual entry pages** at `/changelog/{slug}/` — a dedicated page for each entry with a back link to the listing
+
+Changelog URLs are also automatically added to the generated `sitemap.xml`.
+
+## Styling
+
+Tags receive a CSS class based on their value (e.g., a tag of `"Bug Fix"` gets the class `changelog-tag-bug-fix`). You can style tags and other changelog elements by overriding these classes in your `variables.css`:
+
+```css
+.changelog-entry {
+  border-bottom: 1px solid var(--border);
+  padding: 1.5rem 0;
+}
+
+.changelog-tag {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+}
+
+.changelog-tag-release {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.changelog-tag-bug-fix {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+```
+
 # Alert, Info, Warn Styling
 
 Docula uses Writr's GitHub-flavored Markdown plugins, including GitHub-style blockquote alerts. Use the alert syntax directly in Markdown:

package/dist/docula.d.ts

@@ -49,6 +49,12 @@ declare class DoculaOptions {
      * Sections
      */
     sections?: DoculaSection[];
+    /**
+     * OpenAPI specification URL for API documentation.
+     * When provided, creates a dedicated /api page
+     * Supports both external URLs (https://...) and relative paths (/openapi.json)
+     */
+    openApiUrl?: string;
     constructor(options?: Record<string, unknown>);
     parseOptions(options: Record<string, any>): void;
 }

package/dist/docula.js

@@ -11,9 +11,7 @@ import updateNotifier from "update-notifier";
 // src/builder.ts
 import fs from "fs";
 import path3 from "path";
-import * as cheerio from "cheerio";
 import { Ecto } from "ecto";
-import he from "he";
 import { Writr } from "writr";
 
 // src/console.ts
@@ -291,6 +289,12 @@ var DoculaOptions = class {
    * Sections
    */
   sections;
+  /**
+   * OpenAPI specification URL for API documentation.
+   * When provided, creates a dedicated /api page
+   * Supports both external URLs (https://...) and relative paths (/openapi.json)
+   */
+  openApiUrl;
   constructor(options) {
     if (options) {
       this.parseOptions(options);
@@ -331,6 +335,9 @@ var DoculaOptions = class {
     if (options.singlePage !== void 0 && typeof options.singlePage === "boolean") {
       this.singlePage = options.singlePage;
     }
+    if (options.openApiUrl) {
+      this.openApiUrl = options.openApiUrl;
+    }
   }
 };
 
@@ -360,7 +367,8 @@ var DoculaBuilder = class {
       templatePath: this.options.templatePath,
       outputPath: this.options.outputPath,
       githubPath: this.options.githubPath,
-      sections: this.options.sections
+      sections: this.options.sections,
+      openApiUrl: this.options.openApiUrl
     };
     doculaData.github = await this.getGithubData(this.options.githubPath);
     doculaData.documents = this.getDocuments(
@@ -372,9 +380,13 @@ var DoculaBuilder = class {
       this.options
     );
     doculaData.hasDocuments = doculaData.documents?.length > 0;
+    const changelogPath = `${doculaData.sitePath}/changelog`;
+    doculaData.changelogEntries = this.getChangelogEntries(changelogPath);
+    doculaData.hasChangelog = doculaData.changelogEntries.length > 0;
     doculaData.templates = await this.getTemplates(
       this.options,
-      doculaData.hasDocuments
+      doculaData.hasDocuments,
+      doculaData.hasChangelog
     );
     await this.buildIndexPage(doculaData);
     await this.buildReleasePage(doculaData);
@@ -383,6 +395,13 @@ var DoculaBuilder = class {
     if (doculaData.hasDocuments) {
       await this.buildDocsPages(doculaData);
     }
+    if (doculaData.openApiUrl) {
+      await this.buildApiPage(doculaData);
+    }
+    if (doculaData.hasChangelog) {
+      await this.buildChangelogPage(doculaData);
+      await this.buildChangelogEntryPages(doculaData);
+    }
     const siteRelativePath = this.options.sitePath;
     if (fs.existsSync(`${siteRelativePath}/favicon.ico`)) {
       await fs.promises.copyFile(
@@ -442,7 +461,7 @@ var DoculaBuilder = class {
     const github = new Github(options);
     return github.getData();
   }
-  async getTemplates(options, hasDocuments) {
+  async getTemplates(options, hasDocuments, hasChangelog = false) {
     const templates = {
       index: "",
       releases: ""
@@ -463,6 +482,18 @@ var DoculaBuilder = class {
       if (documentPage) {
         templates.docPage = documentPage;
       }
+      const apiPage = options.openApiUrl ? await this.getTemplateFile(options.templatePath, "api") : void 0;
+      if (apiPage) {
+        templates.api = apiPage;
+      }
+      const changelogPage = hasChangelog ? await this.getTemplateFile(options.templatePath, "changelog") : void 0;
+      if (changelogPage) {
+        templates.changelog = changelogPage;
+      }
+      const changelogEntryPage = hasChangelog ? await this.getTemplateFile(options.templatePath, "changelog-entry") : void 0;
+      if (changelogEntryPage) {
+        templates.changelogEntry = changelogEntryPage;
+      }
     } else {
       throw new Error(`No template path found at ${options.templatePath}`);
     }
@@ -490,6 +521,17 @@ var DoculaBuilder = class {
   async buildSiteMapPage(data) {
     const sitemapPath = `${data.outputPath}/sitemap.xml`;
     const urls = [{ url: data.siteUrl }, { url: `${data.siteUrl}/releases` }];
+    if (data.openApiUrl && data.templates?.api) {
+      urls.push({ url: `${data.siteUrl}/api` });
+    }
+    if (data.hasChangelog && data.templates?.changelog) {
+      urls.push({ url: `${data.siteUrl}/changelog` });
+      for (const entry of data.changelogEntries ?? []) {
+        urls.push({
+          url: `${data.siteUrl}/changelog/${entry.slug}`
+        });
+      }
+    }
     for (const document of data.documents ?? []) {
       let { urlPath } = document;
       if (urlPath.endsWith("index.html")) {
@@ -574,12 +616,11 @@ var DoculaBuilder = class {
           recursive: true
         });
         const slug = `${data.outputPath}${document.urlPath}`;
-        let documentContent = await this._ecto.renderFromFile(
+        const documentContent = await this._ecto.renderFromFile(
           documentsTemplate,
           { ...data, ...document },
           data.templatePath
         );
-        documentContent = he.decode(documentContent);
         return fs.promises.writeFile(slug, documentContent, "utf8");
       });
       await Promise.all(promises);
@@ -587,6 +628,121 @@ var DoculaBuilder = class {
       throw new Error("No templates found");
     }
   }
+  async buildApiPage(data) {
+    if (!data.openApiUrl || !data.templates?.api) {
+      return;
+    }
+    const apiPath = `${data.outputPath}/api/index.html`;
+    const apiOutputPath = `${data.outputPath}/api`;
+    await fs.promises.mkdir(apiOutputPath, { recursive: true });
+    const apiTemplate = `${data.templatePath}/${data.templates.api}`;
+    const apiContent = await this._ecto.renderFromFile(
+      apiTemplate,
+      { ...data, specUrl: data.openApiUrl },
+      data.templatePath
+    );
+    await fs.promises.writeFile(apiPath, apiContent, "utf8");
+  }
+  getChangelogEntries(changelogPath) {
+    const entries = [];
+    if (!fs.existsSync(changelogPath)) {
+      return entries;
+    }
+    const files = fs.readdirSync(changelogPath);
+    for (const file of files) {
+      const filePath = `${changelogPath}/${file}`;
+      const stats = fs.statSync(filePath);
+      if (stats.isFile() && (file.endsWith(".md") || file.endsWith(".mdx"))) {
+        const entry = this.parseChangelogEntry(filePath);
+        entries.push(entry);
+      }
+    }
+    entries.sort((a, b) => {
+      const dateA = new Date(a.date).getTime();
+      const dateB = new Date(b.date).getTime();
+      if (Number.isNaN(dateA) && Number.isNaN(dateB)) {
+        return 0;
+      }
+      if (Number.isNaN(dateA)) {
+        return 1;
+      }
+      if (Number.isNaN(dateB)) {
+        return -1;
+      }
+      return dateB - dateA;
+    });
+    return entries;
+  }
+  parseChangelogEntry(filePath) {
+    const fileContent = fs.readFileSync(filePath, "utf8");
+    const writr = new Writr(fileContent);
+    const matterData = writr.frontMatter;
+    const markdownContent = writr.body;
+    const fileName = path3.basename(filePath, path3.extname(filePath));
+    const slug = fileName.replace(/^\d{4}-\d{2}-\d{2}-/, "");
+    const isMdx = filePath.endsWith(".mdx");
+    const tag = matterData.tag;
+    const tagClass = tag ? tag.toLowerCase().replace(/\s+/g, "-") : void 0;
+    let dateString = "";
+    if (matterData.date instanceof Date) {
+      dateString = matterData.date.toISOString().split("T")[0];
+    } else if (matterData.date) {
+      dateString = String(matterData.date);
+    }
+    let formattedDate = dateString;
+    const parsedDate = new Date(dateString);
+    if (!Number.isNaN(parsedDate.getTime())) {
+      formattedDate = parsedDate.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+    }
+    return {
+      title: matterData.title ?? fileName,
+      date: dateString,
+      formattedDate,
+      tag,
+      tagClass,
+      slug,
+      content: markdownContent,
+      generatedHtml: new Writr(markdownContent).renderSync({ mdx: isMdx }),
+      urlPath: `/changelog/${slug}/index.html`
+    };
+  }
+  async buildChangelogPage(data) {
+    if (!data.hasChangelog || !data.templates?.changelog) {
+      return;
+    }
+    const changelogOutputPath = `${data.outputPath}/changelog`;
+    const changelogIndexPath = `${changelogOutputPath}/index.html`;
+    await fs.promises.mkdir(changelogOutputPath, { recursive: true });
+    const changelogTemplate = `${data.templatePath}/${data.templates.changelog}`;
+    const changelogContent = await this._ecto.renderFromFile(
+      changelogTemplate,
+      { ...data, entries: data.changelogEntries },
+      data.templatePath
+    );
+    await fs.promises.writeFile(changelogIndexPath, changelogContent, "utf8");
+  }
+  async buildChangelogEntryPages(data) {
+    if (!data.hasChangelog || !data.templates?.changelogEntry || !data.changelogEntries?.length) {
+      return;
+    }
+    const entryTemplate = `${data.templatePath}/${data.templates.changelogEntry}`;
+    const promises = data.changelogEntries.map(async (entry) => {
+      const entryOutputPath = `${data.outputPath}/changelog/${entry.slug}`;
+      await fs.promises.mkdir(entryOutputPath, { recursive: true });
+      const entryContent = await this._ecto.renderFromFile(
+        entryTemplate,
+        { ...data, ...entry, entries: data.changelogEntries },
+        data.templatePath
+      );
+      const entryFilePath = `${entryOutputPath}/index.html`;
+      return fs.promises.writeFile(entryFilePath, entryContent, "utf8");
+    });
+    await Promise.all(promises);
+  }
   generateSidebarItems(data) {
     let sidebarItems = [...data.sections ?? []];
     for (const document of data.documents ?? []) {
@@ -723,6 +879,11 @@ var DoculaBuilder = class {
         urlPath = documentPath.slice(documentsFolderIndex).replace(fileExtension, ".html");
       }
     }
+    if (!this.hasTableOfContents(markdownContent)) {
+      markdownContent = `## Table of Contents
+
+${markdownContent}`;
+    }
     return {
       title: matterData.title,
       navTitle: matterData.navTitle ?? matterData.title,
@@ -732,29 +893,15 @@ var DoculaBuilder = class {
       keywords: matterData.keywords ?? [],
       content: documentContent,
       markdown: markdownContent,
-      generatedHtml: new Writr(markdownContent).renderSync({ mdx: isMdx }),
-      tableOfContents: this.getTableOfContents(markdownContent, isMdx),
+      generatedHtml: new Writr(markdownContent).renderSync({
+        toc: true,
+        mdx: isMdx
+      }),
       documentPath,
       urlPath,
       isRoot
     };
   }
-  getTableOfContents(markdown, isMdx = false) {
-    if (this.hasTableOfContents(markdown)) {
-      return void 0;
-    }
-    markdown = `## Table of Contents
-
-${markdown}`;
-    const html = new Writr(markdown).renderSync({ mdx: isMdx });
-    const $ = cheerio.load(html);
-    const tocTitle = $("h2").first();
-    const tocContent = tocTitle.next("ul").toString();
-    if (tocContent) {
-      return tocTitle.toString() + tocContent;
-    }
-    return void 0;
-  }
   hasTableOfContents(markdown) {
     const normalized = markdown.replace(/\r\n/g, "\n");
     const atxHeading = /^#{1,6}\s*(table of contents|toc)\s*$/im;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docula",
-  "version": "0.40.0",
+  "version": "0.41.1",
   "description": "Beautiful Website for Your Projects",
   "type": "module",
   "main": "./dist/docula.js",
@@ -11,26 +11,15 @@
       "import": "./dist/docula.js"
     }
   },
-  "repository": "https://github.com/jaredwray/docula.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jaredwray/docula.git"
+  },
   "author": "Jared Wray <me@jaredwray.com>",
   "engines": {
     "node": ">=20"
   },
   "license": "MIT",
-  "scripts": {
-    "clean": "rimraf ./dist ./coverage ./node_modules ./package-lock.json ./yarn.lock ./pnpm-lock.yaml ./site/README.md ./site/dist",
-    "build": "pnpm generate-init-file && rimraf ./dist && tsup src/docula.ts --format esm --dts --clean",
-    "lint": "biome check --write --error-on-warnings",
-    "lint:ci": "biome check --error-on-warnings",
-    "test": "pnpm lint && vitest run --coverage",
-    "test:ci": "pnpm lint:ci && vitest run --coverage",
-    "generate-init-file": "tsx scripts/generate-init-file.ts",
-    "website:build": "rimraf ./site/README.md && node bin/docula.mjs build -s ./site -o ./site/dist",
-    "website:serve": "rimraf ./site/README.md && node bin/docula.mjs serve -s ./site -o ./site/dist",
-    "website:build:mega": "rimraf ./test/fixtures/mega-page-site/dist && node bin/docula.mjs build -s ./test/fixtures/mega-page-site",
-    "website:serve:mega": "rimraf ./test/fixtures/mega-page-site/dist && node bin/docula.mjs serve -s ./test/fixtures/mega-page-site",
-    "prepare": "pnpm build"
-  },
   "keywords": [
     "static-site-generator",
     "static-site",
@@ -48,38 +37,50 @@
     "handlebars"
   ],
   "bin": {
-    "docula": "./bin/docula.mjs"
+    "docula": "./bin/docula.js"
   },
   "dependencies": {
-    "@cacheable/net": "^2.0.4",
-    "cheerio": "^1.1.2",
-    "ecto": "^4.7.1",
+    "@cacheable/net": "^2.0.5",
+    "ecto": "^4.8.2",
     "feed": "^5.2.0",
-    "he": "^1.2.0",
     "jiti": "^2.6.1",
     "serve-handler": "^6.1.6",
     "update-notifier": "^7.3.1",
-    "writr": "^5.0.1"
+    "writr": "^5.0.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.9",
+    "@biomejs/biome": "^2.4.2",
     "@types/express": "^5.0.6",
-    "@types/he": "^1.2.3",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.2.3",
     "@types/serve-handler": "^6.1.4",
     "@types/update-notifier": "^6.0.8",
-    "@vitest/coverage-v8": "^4.0.16",
-    "dotenv": "^17.2.3",
-    "rimraf": "^6.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "dotenv": "^17.3.1",
+    "rimraf": "^6.1.3",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.18"
   },
   "files": [
     "dist",
     "template",
     "bin"
-  ]
-}
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist ./coverage ./node_modules ./package-lock.json ./yarn.lock ./pnpm-lock.yaml ./site/README.md ./site/dist",
+    "build": "pnpm generate-init-file && rimraf ./dist && tsup src/docula.ts --format esm --dts --clean",
+    "lint": "biome check --write --error-on-warnings",
+    "lint:ci": "biome check --error-on-warnings",
+    "test": "pnpm lint && vitest run --coverage",
+    "test:ci": "pnpm lint:ci && vitest run --coverage",
+    "generate-init-file": "tsx scripts/generate-init-file.ts",
+    "website:build": "rimraf ./site/README.md && node bin/docula.js build -s ./site -o ./site/dist",
+    "website:serve": "rimraf ./site/README.md && node bin/docula.js serve -s ./site -o ./site/dist",
+    "website:build:mega": "rimraf ./test/fixtures/mega-page-site/dist && node bin/docula.js build -s ./test/fixtures/mega-page-site",
+    "website:serve:mega": "rimraf ./test/fixtures/mega-page-site/dist && node bin/docula.js serve -s ./test/fixtures/mega-page-site",
+    "website:build:changelog": "rimraf ./test/fixtures/changelog-site/dist && node bin/docula.js build -s ./test/fixtures/changelog-site",
+    "website:serve:changelog": "rimraf ./test/fixtures/changelog-site/dist && node bin/docula.js serve -s ./test/fixtures/changelog-site"
+  }
+}

package/template/api.hbs

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{> header }}
+  <title>API Documentation - {{ siteTitle }}</title>
+  <meta name="description" content="API Documentation for {{ siteTitle }}" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docutopia/react/dist/browser/docutopia.css" />
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="docs" style="height: 100vh;"></div>
+
+  <script src="https://cdn.jsdelivr.net/npm/@docutopia/react/dist/browser/docutopia.js"></script>
+  <script>
+    Docutopia.render('docs', {
+      specUrl: '{{ specUrl }}',
+    });
+  </script>
+</body>
+
+</html>

package/template/changelog-entry.hbs

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{> header }}
+  <title>{{siteTitle}} - {{title}}</title>
+</head>
+
+<body>
+  {{> singlepage/hero }}
+  <a href="https://github.com/{{ githubPath }}" class="github-corner" aria-label="View source on GitHub"><svg width="80"
+      height="80" viewBox="0 0 250 250" style="color:#fff; position: absolute; top: 0; border: 0; right: 0;"
+      aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg></a>
+  <style>
+    .github-corner:hover .octo-arm {
+      animation: octocat-wave 560ms ease-in-out
+    }
+
+    @keyframes octocat-wave {
+
+      0%,
+      100% {
+        transform: rotate(0)
+      }
+
+      20%,
+      60% {
+        transform: rotate(-25deg)
+      }
+
+      40%,
+      80% {
+        transform: rotate(10deg)
+      }
+    }
+
+    @media (max-width:500px) {
+      .github-corner:hover .octo-arm {
+        animation: none
+      }
+
+      .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out
+      }
+    }
+  </style>
+  <main class="versions-container">
+    <div class="versions-content">
+      <div class="changelog-entry-nav">
+        <a href="/changelog/">&larr; Back to Changelog</a>
+      </div>
+      <div class="changelog-entry changelog-entry-single">
+        <div class="changelog-entry-header">
+          <h1 class="changelog-entry-title">{{title}}</h1>
+          {{#if tag}}
+          <span class="changelog-tag changelog-tag-{{tagClass}}">{{tag}}</span>
+          {{/if}}
+        </div>
+        <span class="changelog-entry-date">{{formattedDate}}</span>
+        <div class="changelog-entry-body">
+          {{{generatedHtml}}}
+        </div>
+      </div>
+    </div>
+  </main>
+  {{> footer}}
+
+  {{> scripts }}
+</body>
+
+</html>

package/template/changelog.hbs

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{> header }}
+  <title>{{siteTitle}} Changelog</title>
+</head>
+
+<body>
+  {{> singlepage/hero }}
+  <a href="https://github.com/{{ githubPath }}" class="github-corner" aria-label="View source on GitHub"><svg width="80"
+      height="80" viewBox="0 0 250 250" style="color:#fff; position: absolute; top: 0; border: 0; right: 0;"
+      aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg></a>
+  <style>
+    .github-corner:hover .octo-arm {
+      animation: octocat-wave 560ms ease-in-out
+    }
+
+    @keyframes octocat-wave {
+
+      0%,
+      100% {
+        transform: rotate(0)
+      }
+
+      20%,
+      60% {
+        transform: rotate(-25deg)
+      }
+
+      40%,
+      80% {
+        transform: rotate(10deg)
+      }
+    }
+
+    @media (max-width:500px) {
+      .github-corner:hover .octo-arm {
+        animation: none
+      }
+
+      .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out
+      }
+    }
+  </style>
+  <main class="versions-container">
+    <div class="versions-content">
+      <h2 class="home-title">Changelog</h2>
+      {{#if entries}}
+      {{#each entries as |entry|}}
+      <div class="changelog-entry">
+        <div class="changelog-entry-header">
+          <a class="changelog-entry-title" href="/changelog/{{entry.slug}}/">{{entry.title}}</a>
+          {{#if entry.tag}}
+          <span class="changelog-tag changelog-tag-{{entry.tagClass}}">{{entry.tag}}</span>
+          {{/if}}
+        </div>
+        <span class="changelog-entry-date">{{entry.formattedDate}}</span>
+        <div class="changelog-entry-body">
+          {{{entry.generatedHtml}}}
+        </div>
+      </div>
+      {{/each}}
+      {{/if}}
+    </div>
+  </main>
+  {{> footer}}
+
+  {{> scripts }}
+</body>
+
+</html>

package/template/css/base.css

@@ -193,6 +193,140 @@ hr {
   text-decoration: underline;
 }
 
+/* Changelog */
+.changelog-entry {
+  overflow: hidden;
+  width: 100%;
+  line-break: anywhere;
+  margin-top: 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--color-text);
+}
+
+.changelog-entry:last-child {
+  border-bottom: none;
+}
+
+.changelog-entry-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.changelog-entry-title {
+  font-size: 1.375rem;
+  color: var(--color-primary);
+  font-weight: 700;
+  transition: color .3s;
+}
+
+a.changelog-entry-title:hover {
+  color: var(--color-secondary-dark);
+}
+
+h1.changelog-entry-title {
+  font-size: 1.875rem;
+  margin: 0;
+}
+
+.changelog-entry-date {
+  font-size: 0.75rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.changelog-tag {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 1rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.changelog-tag-added {
+  background-color: rgba(140, 220, 0, 0.15);
+  color: #4a7a00;
+}
+
+.changelog-tag-improved {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: #1d4ed8;
+}
+
+.changelog-tag-fixed {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: #b45309;
+}
+
+.changelog-tag-removed {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #b91c1c;
+}
+
+.changelog-tag-deprecated {
+  background-color: rgba(156, 163, 175, 0.15);
+  color: #4b5563;
+}
+
+.changelog-tag-security {
+  background-color: rgba(168, 85, 247, 0.15);
+  color: #6d28d9;
+}
+
+.changelog-entry-body p {
+  margin: 0.5rem 0;
+}
+
+.changelog-entry-body pre {
+  margin-bottom: 2rem;
+}
+
+.changelog-entry-body h1 {
+  font-size: 1.375rem;
+  margin-bottom: 1rem;
+}
+
+.changelog-entry-body h2 {
+  font-size: 1.125rem;
+  margin-top: 1.75rem;
+  margin-bottom: 1rem;
+}
+
+.changelog-entry-body ul {
+  padding-left: 1rem;
+}
+
+.changelog-entry-body ul > li {
+  margin-bottom: 0.75rem;
+}
+
+.changelog-entry-body ul > li a {
+  text-decoration: underline;
+}
+
+.changelog-entry-nav {
+  margin-bottom: 1.5rem;
+}
+
+.changelog-entry-nav a {
+  color: var(--color-primary);
+  font-size: 0.875rem;
+  transition: color .3s;
+}
+
+.changelog-entry-nav a:hover {
+  color: var(--color-secondary-dark);
+}
+
+.changelog-entry-single {
+  border-bottom: none;
+}
+
 .github-corner {
   fill: var(--color-primary) !important;
 }
@@ -378,6 +512,9 @@ footer img {
   .release {
     margin-bottom: 4rem;
   }
+  .changelog-entry {
+    margin-bottom: 2rem;
+  }
   .versions-container {
     margin-bottom: 4.5rem;
   }
@@ -417,6 +554,9 @@ footer img {
   .content h1 {
     font-size: 1.9rem;
   }
+  h1.changelog-entry-title {
+    font-size: 2.25rem;
+  }
   .content > ul, .content > ol {
     padding-left: 2rem;
   }

package/template/css/multipage.css

@@ -241,10 +241,6 @@ details > summary {
   margin-right: 2rem
 }
 
-.main-toc {
-  padding-bottom: 1.5rem;
-}
-
 .toc {
   font-size: 0.875rem;
 }
@@ -287,18 +283,6 @@ details > summary {
   text-decoration: none;
 }
 
-.main-toc ul > li > a::after {
-  position: absolute;
-  right: 0;
-  content: '';
-  display: inline-block;
-  width: 0.25rem;
-  height: 0.25rem;
-  border-right: 1px solid var(--color-primary);
-  border-bottom: 1px solid var(--color-primary);
-  transform: rotate(-45deg);
-}
-
 .fixed-toc {
   display: none;
   position: fixed;

package/template/includes/multipage/doc.hbs

@@ -2,16 +2,22 @@
   <div class="main-content">
     <article class="content">
       <h1>{{title}}</h1>
-      <div class="toc main-toc">
-{{tableOfContents}}
-      </div>
 {{generatedHtml}}
     </article>
     <div class="fixed-toc-container">
       <div class="toc fixed-toc" id="fixed-toc">
-        {{tableOfContents}}
       </div>
     </div>
     </div>
 
-</div>
+</div>
+<script>
+  const tocHeading = document.getElementById('table-of-contents');
+  if (tocHeading) {
+    const tocList = tocHeading.nextElementSibling;
+    const fixedToc = document.getElementById('fixed-toc');
+    if (tocList && tocList.tagName === 'UL' && fixedToc) {
+      fixedToc.innerHTML = tocList.outerHTML;
+    }
+  }
+</script>