Skip to main content
Sabo ships with a simple MDX-powered changelog.
  • Content Location: sabo/src/content/changelog/
  • List Page: sabo/src/app/changelog/page.tsx
  • Entry Page: sabo/src/app/changelog/[slug]/page.tsx
  • Helper: sabo/src/lib/changelog.ts

​
Add a New Entry

1

Create a file

In sabo/src/content/changelog/, create a new .mdx file. The filename becomes the slug (e.g., 0-4-0.mdx → /changelog/0-4-0).
2

Add frontmatter

Include metadata at the top. releaseDate is used for sorting (newest first).
---
version: "v0.4.0"
title: "Your Release Title"
releaseDate: "2025-01-20T00:00:00.000Z"
author:
  name: "Sabo Team"
  picture: "/blog/authors/sabo.png" # optional
image: "/og/changelog.png" # optional Open Graph
---
3

Write content

Write your notes using Markdown/MDX. Headings like ## New Features, ## Improvements, and ## Bug Fixes are commonly used.

​
Fields Reference

​
version
string
Displayed version label for the release.
​
title
string
Release title shown on the list and detail pages.
​
releaseDate
string
ISO date string used to sort entries (newest first).
​
author.name
string
Optional author display name.
​
author.picture
string
Optional author avatar path (relative to public/).
​
image
string
Optional Open Graph image used for social previews on the detail page.
image is used in the entry page’s metadata for Open Graph previews. author.picture is parsed but not rendered by the current UI.

​
How It Works

Changelog files are read and parsed from src/content/changelog, then sorted by releaseDate.
sabo/src/lib/changelog.ts
export interface Author {
  name: string;
  picture?: string;
}

export interface ChangelogMetadata {
  slug: string;
  version: string;
  title: string;
  releaseDate: string;
  author?: Author;
  image?: string;
}

export interface ChangelogEntry extends ChangelogMetadata {
  content: string;
}
sabo/src/lib/changelog.ts
// Sort entries by releaseDate (newest first)
return entries.sort((a, b) => {
  return new Date(b.releaseDate).getTime() - new Date(a.releaseDate).getTime();
});
Slugs are derived from filenames (e.g., 0-4-0.mdx → /changelog/0-4-0). No extra configuration is required.