Changelog

Manage release notes stored as MDX and rendered on /changelog.

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.