From 5455f20660d9db34c440f4559b41dfcc1fe66c10 Mon Sep 17 00:00:00 2001
From: FileEX <kongali@interia.pl>
Date: Sun, 25 May 2025 17:34:33 +0200
Subject: [PATCH] Implement changelog

---
 schemas/common-defs.yaml               | 15 ++++++++
 web/src/components/ChangelogList.astro | 49 ++++++++++++++++++++++++++
 web/src/pages/[func].astro             |  7 ++++
 web/src/styles/custom.css              |  3 +-
 4 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/ChangelogList.astro

diff --git a/schemas/common-defs.yaml b/schemas/common-defs.yaml
index b5b9af99..0e267f41 100644
--- a/schemas/common-defs.yaml
+++ b/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
diff --git a/web/src/components/ChangelogList.astro b/web/src/components/ChangelogList.astro
new file mode 100644
index 00000000..cc2309d8
--- /dev/null
+++ b/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>
diff --git a/web/src/pages/[func].astro b/web/src/pages/[func].astro
index efe303a7..edf34ebb 100644
--- a/web/src/pages/[func].astro
+++ b/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);
 
 ---
@@ -173,6 +178,8 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
 
         <CodeExamplesSection codeExamples={funcExamples} />
 
+        <ChangelogList entries={changelogEntries} />
+
         <SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksForItem(func)} currentId={func.id} />
     </StarlightPage>
 </div>
\ No newline at end of file
diff --git a/web/src/styles/custom.css b/web/src/styles/custom.css
index 31372848..deec8113 100644
--- a/web/src/styles/custom.css
+++ b/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;
 }