feat: add changelog system

This implements a new changelog system to the docs so it's easy to
browse it and subscribe via RSS.

Fixes MRGFY-5981

Change-Id: Ia2551cf70a6317a02376c287da41230680a05be4

Author: jd

eslint.config.js

@@ -16,6 +16,7 @@ export default [
       'node_modules/**',
       '.github/**',
       'public/scalar-api-reference.js',
+      'src/content/changelog/',
     ],
   },
 

package-lock.json

@@ -65,6 +65,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.5",
     "@astrojs/react": "^4.4.0",
+    "@astrojs/rss": "^4.0.12",
     "@astrojs/vue": "^5.1.1",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/poppins": "^5.2.7",

package.json

@@ -40,6 +40,18 @@ for (const [p, t] of trails.entries()) {
   }
 }
 
+// Handle dynamic changelog entries
+if (currentPath.startsWith('/changelog/') && currentPath !== '/changelog') {
+  // This is a specific changelog entry page
+  matchedTrail = [{ title: 'Changelog', path: '/changelog' }];
+
+  // Add the current page title from props if available
+  const { breadcrumbTitle } = Astro.props as { breadcrumbTitle?: string };
+  if (breadcrumbTitle) {
+    matchedTrail.push({ title: breadcrumbTitle });
+  }
+}
+
 if (matchedTrail.length >= 2) {
   const filtered: TrailEntry[] = [];
   for (const entry of matchedTrail) {

src/@types/changelog-content.d.ts

@@ -23,12 +23,20 @@ export interface Props {
   href?: string;
   icon: Function;
   variant?: 'ghost' | 'solid';
+  target?: string;
 }
-const { colorScheme, style, href, icon, variant = 'solid' } = Astro.props as Props;
+const {
+  colorScheme,
+  style,
+  href,
+  icon,
+  variant = 'solid',
+  target = '_blank',
+} = Astro.props as Props;
 ---
 
 <div role="presentation" class:list={['button', `button-${colorScheme}`, variant]} {style}>
-	<a href={href} target="_blank">
+	<a href={href} target={target}>
 		{icon && <Astro.props.icon />}
 		<slot />
 	</a>

src/components/Breadcrumbs.astro

@@ -84,7 +84,7 @@ export const helpCategory: Category = {
     },
     {
       text: 'Changelog',
-      href: 'https://changelog.mergify.com/',
+      href: 'https://docs.mergify.com/changelog/',
     },
     {
       text: 'Terms of Service',

src/components/Button.astro

@@ -87,8 +87,8 @@ import ThemeToggleButton from './ThemeToggleButton';
 			<HeaderLink href="https://slack.mergify.com" icon={SiSlack}>Slack Community</HeaderLink>
 			<HeaderLink href="https://github.com/Mergifyio/mergify/discussions" icon={FaGithub}>
 				Discussions
-			</HeaderLink>
-			<HeaderLink href="https://changelog.mergify.com" icon={HiOutlineDocumentArrowUp}>
+		        </HeaderLink>
+			<HeaderLink href="/changelog/" icon={HiOutlineDocumentArrowUp} target="_self">
 				Changelog
 			</HeaderLink>
 			<HeaderLink href="https://status.mergify.com" icon={SiStatuspage}>Status</HeaderLink>

src/components/Footer/footer.ts

@@ -4,13 +4,14 @@ import Button from '../Button.astro';
 export interface Props {
   icon: Function;
   href: string;
+  target?: string;
 }
 
-const { href, icon } = Astro.props as Props;
+const { href, icon, target } = Astro.props as Props;
 ---
 
 <div class="header-btn">
-	<Button colorScheme="blue" variant="ghost" icon={icon} href={href}>
+	<Button colorScheme="blue" variant="ghost" icon={icon} href={href} target={target}>
 		<slot />
 	</Button>
 </div>

src/components/Header/Header.astro

@@ -3,7 +3,7 @@ import { defineCollection, z } from 'astro:content';
 import { glob } from 'astro/loaders';
 
 const docs = defineCollection({
-  /* ... */
+  /* Documentation pages */
   loader: glob({
     pattern: '**/[^_]*.mdx',
     base: './src/content/docs',
@@ -16,4 +16,14 @@ const docs = defineCollection({
   }),
 });
 
-export const collections = { docs };
+const changelog = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    description: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+  }),
+});
+
+export const collections = { docs, changelog };