Add changelog property

schemas/common-defs.yaml

@@ -35,6 +35,21 @@ $defs:
         needs_checking:
           type: string
           description: Describe why the item needs checking by another person. What's problematic?
+        changelog:
+          type: array
+          description: A chronological list of changes related to this item.
+          items:
+            type: object
+            required:
+              - version
+              - description
+            properties:
+              version:
+                type: string
+                description: Version in which the change was introduced.
+              description:
+                type: string
+                description: Description of what changed.
 
   preview_images:
     type: array

web/src/components/ChangelogList.astro

@@ -0,0 +1,49 @@
+---
+interface ChangelogEntry {
+  version: string;
+  description: string;
+}
+
+interface Props {
+  entries: ChangelogEntry[];
+}
+
+const { entries } = Astro.props;
+---
+
+{entries.length > 0 && (
+  <div class="changelog-section">
+    <h4>Changelog</h4>
+    <div class="changelog-list">
+      {entries.map(entry => (
+        <li>
+          <span class="changelog-version">{entry.version}</span>
+          <span class="changelog-description">{entry.description}</span>
+        </li>
+      ))}
+    </div>
+  </div>
+)}
+
+<style>
+.changelog-list {
+  background-color: var(--sl-color-bg-nav);
+  border-left: 4px solid var(--sl-color-gray-5);
+  border-radius: 8px;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.5rem;
+  color: var(--sl-color-text);
+  list-style: none;
+}
+
+.changelog-version {
+  font-weight: bold;
+  color: var(--sl-color-orange-high);
+  display: block;
+}
+
+.changelog-description {
+  display: block;
+  margin-left: 0.5rem;
+}
+</style>

web/src/pages/[func].astro

@@ -14,6 +14,8 @@ import type { NotesType } from '@src/utils/types';
 import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 import CodeExamplesSection from '@src/components/CodeExamplesSection.astro';
 
+import ChangelogList from '@src/components/ChangelogList.astro';
+
 export async function getStaticPaths() {
     const functions = await getCollection('functions');
     return functions.map(func => ({
@@ -56,6 +58,9 @@ if (Array.isArray(funcInfo.notes) && funcInfo.notes.length > 0) {
     notesContent = funcInfo.notes;
 }
 
+const metaArray = func.data[funcInfo.type]?.meta ?? [];
+const changelogEntries = metaArray.find(m => m.changelog)?.changelog ?? [];
+
 let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
 
 ---
@@ -175,6 +180,8 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
 
         <CodeExamplesSection codeExamples={funcExamples} />
 
+        <ChangelogList entries={changelogEntries} />
+
         <SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksForItem(func)} currentId={func.id} />
     </StarlightPage>
 </div>

web/src/styles/custom.css

@@ -17,7 +17,8 @@
 .function-syntax,
 .function-oop,
 .notes-section,
-.examples-section {
+.examples-section,
+.changelog-section {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
 }