Create changelog page

package.json

@@ -18,6 +18,7 @@
     "@fontsource/ibm-plex-mono": "^5.2.5",
     "@fontsource/ibm-plex-sans": "^5.2.5",
     "astro": "^5.8.1",
+    "marked": "^16.1.2",
     "sharp": "^0.34.1",
     "starlight-links-validator": "^0.16.0",
     "starlight-llms-txt": "^0.5.1",

src/content.config.ts

@@ -1,7 +1,6 @@
 import { defineCollection } from 'astro:content';
-import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
 
 export const collections = {
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+  'docs': defineCollection({ schema: docsSchema() }),
 };

src/pages/changelog.astro

@@ -0,0 +1,26 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { marked } from 'marked';
+
+interface Release {
+  name: string;
+  html_url: string;
+  published_at: string;
+  body: string;
+}
+
+const response = await fetch('https://api.github.com/repos/firebase/genkit/releases');
+const releases: Release[] = await response.json();
+---
+
+<StarlightPage frontmatter={{ title: 'Changelog' }}>
+  {
+    releases.map((release) => (
+      <div class="sl-markdown-content">
+        <h2>{release.name}</h2> ({new Date(release.published_at).toLocaleDateString()})
+        <div class="release-body" set:html={marked.parse(release.body)} />
+        <hr />
+      </div>
+    ))
+  }
+</StarlightPage>

src/sidebar.ts

@@ -2,6 +2,7 @@ const JS_SIDEBAR = [
   { label: "Get started", slug: "docs/get-started" },
   { label: "Developer tools", slug: "docs/devtools" },
   { label: "MCP Server", slug: "docs/mcp-server" },
+  { label: "Changelog", link: "/changelog" },
   {
     label: "Tutorials",
     items: [

src/tailwind.css

@@ -218,4 +218,27 @@ h1 {
 
 [data-theme="light"] .sidebar-content a[aria-current="page"]:hover {
   color: var(--sl-color-accent);
-}
+}
+
+.release-notes {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.no-underline {
+  text-decoration: none;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.release-body h2 {
+  font-size: 1.25rem;
+}
+
+.release-body h3 {
+  font-size: 1.1rem;
+}

tsconfig.json

@@ -4,8 +4,11 @@
   "exclude": ["dist"],
   "compilerOptions": {
     "baseUrl": ".",
+    "strictNullChecks": true,
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "astro"
   }
 }