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,28 @@
+---
+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' }}>
+  <ul>
+    {
+      releases.map((release) => (
+        <li>
+          <a href={`/releases/${release.name.replace(/ /g, '_')}`}>
+            {release.name} ({new Date(release.published_at).toLocaleDateString()})
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</StarlightPage>

src/pages/releases/[slug].astro

@@ -0,0 +1,32 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { marked } from 'marked';
+
+export async function getStaticPaths() {
+  const response = await fetch('https://api.github.com/repos/firebase/genkit/releases');
+  const releases: any[] = await response.json();
+
+  return releases.map((release) => ({
+    params: { slug: release.name.replace(/ /g, '_') },
+    props: { release },
+  }));
+}
+
+const { release } = Astro.props;
+---
+
+<StarlightPage frontmatter={{ title: release.name }}>
+  <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)} />
+  </div>
+</StarlightPage>
+<style is:global>
+  .release-body h2 {
+    font-size: 1.25rem;
+  }
+
+  .release-body h3 {
+    font-size: 1.1rem;
+  }
+</style>

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,19 @@ 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;
+}

tsconfig.json

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