[ [SAAS.04] SaaS ] Changelog

Changelog

> Terminal-styled release notes component with version history, change type categorization, and GitHub integration.

Import

[ [0x5B] IMPORT ]

1import { ChangelogEntry } from "@/components/changelog"
2import { CHANGELOG } from "@/data/changelog"

Preview

[ [0x00] CHANGELOG ]

[0x01] v1.0.0 - INITIAL_RELEASE2025-12-15

[ADDED]

-78+ production-ready UI components
-18 terminal color themes
-Multi-provider payments (Stripe, Polar, Lemonsqueezy)

[CHANGED]

-Upgraded to Next.js 16 with React 19

[FIXED]

-Mobile navigation z-index issues

[SECURITY]

-Updated auth dependencies

> VIEW ON GITHUB

1<ChangelogEntry
2  entry={{
3    version: '1.0.0',
4    date: '2025-12-15',
5    title: 'INITIAL_RELEASE',
6    url: 'https://github.com/...',
7    changes: [
8      { type: 'added', description: 'Production-ready UI components' },
9      { type: 'changed', description: 'Upgraded to Next.js 16' },
10      { type: 'fixed', description: 'Mobile navigation issues' },
11    ],
12  }}
13  index={0}
14/>

Variants

[ [0x00] COMPACT MODE ]

[0x01] v0.9.0 - BETA_RELEASE2025-12-01

[ADDED]

-Initial component library
-Terminal theme system

1<ChangelogEntry entry={entry} compact />

[ [0x00] NO GITHUB LINK ]

[0x02] v0.9.0 - BETA_RELEASE2025-12-01

[ADDED]

-Initial component library
-Terminal theme system

1// Entries without 'url' prop won't show GitHub link
2<ChangelogEntry
3  entry={{
4    version: '0.9.0',
5    date: '2025-12-01',
6    title: 'BETA_RELEASE',
7    changes: [...],
8    // no url prop
9  }}
10  index={1}
11/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
entry	`ChangelogEntry`	`required`	The changelog entry object containing version, date, title, url, and changes array.
index	`number`	`0`	Index for hex code generation in the card header (0x01, 0x02, etc.).
compact	`boolean`	`false`	Enable compact mode - hides GitHub link and reduces spacing.
className	`string`	`undefined`	Additional CSS classes for the card container.

Usage

[ [0xCF] RENDERING ALL CHANGELOG ENTRIES ]

1import { CHANGELOG } from '@/data/changelog';
2import { ChangelogEntry } from '@/components/changelog';
3
4export default function ChangelogPage() {
5  return (
6    <div className="space-y-12">
7      {CHANGELOG.map((entry, index) => (
8        <ChangelogEntry
9          key={entry.version}
10          entry={entry}
11          index={index}
12        />
13      ))}
14    </div>
15  );
16}

[ [0xF7] FILTERING BY CHANGE TYPE ]

1import { getChangelogByType } from '@/data/changelog';
2
3// Get only entries with 'added' changes
4const addedOnly = getChangelogByType('added');
5
6// Get only entries with 'fixed' changes
7const fixedOnly = getChangelogByType('fixed');

[ [0x54] SYNCING FROM GITHUB RELEASES ]

1# Run the sync script to fetch latest releases
2npm run sync:changelog
3
4# Configure via environment variables:
5# GITHUB_TOKEN - Optional, for private repos
6# GITHUB_OWNER - Repository owner (default: "jpoindexter")
7# GITHUB_REPO  - Repository name (default: "fabrk-dev")

Accessibility

[ [0x58] A11Y ]

Semantic heading structure with h2 for version titles
Change type icons have associated labels for screen readers
External links marked with rel="noopener noreferrer"
Sufficient color contrast for all change type indicators
Keyboard accessible GitHub links

Preview

[ [0x00] CHANGELOG ]

[0x01] v1.0.0 - INITIAL_RELEASE2025-12-15

[ADDED]

-78+ production-ready UI components
-18 terminal color themes
-Multi-provider payments (Stripe, Polar, Lemonsqueezy)

[CHANGED]

-Upgraded to Next.js 16 with React 19

[FIXED]

-Mobile navigation z-index issues

[SECURITY]

-Updated auth dependencies

> VIEW ON GITHUB

1<ChangelogEntry
2  entry={{
3    version: '1.0.0',
4    date: '2025-12-15',
5    title: 'INITIAL_RELEASE',
6    url: 'https://github.com/...',
7    changes: [
8      { type: 'added', description: 'Production-ready UI components' },
9      { type: 'changed', description: 'Upgraded to Next.js 16' },
10      { type: 'fixed', description: 'Mobile navigation issues' },
11    ],
12  }}
13  index={0}
14/>

Variants

[ [0x00] COMPACT MODE ]

[0x01] v0.9.0 - BETA_RELEASE2025-12-01

[ADDED]

-Initial component library
-Terminal theme system

1<ChangelogEntry entry={entry} compact />

[ [0x00] NO GITHUB LINK ]

[0x02] v0.9.0 - BETA_RELEASE2025-12-01

[ADDED]

-Initial component library
-Terminal theme system

1// Entries without 'url' prop won't show GitHub link
2<ChangelogEntry
3  entry={{
4    version: '0.9.0',
5    date: '2025-12-01',
6    title: 'BETA_RELEASE',
7    changes: [...],
8    // no url prop
9  }}
10  index={1}
11/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
entry	`ChangelogEntry`	`required`	The changelog entry object containing version, date, title, url, and changes array.
index	`number`	`0`	Index for hex code generation in the card header (0x01, 0x02, etc.).
compact	`boolean`	`false`	Enable compact mode - hides GitHub link and reduces spacing.
className	`string`	`undefined`	Additional CSS classes for the card container.

Usage

[ [0xCF] RENDERING ALL CHANGELOG ENTRIES ]

1import { CHANGELOG } from '@/data/changelog';
2import { ChangelogEntry } from '@/components/changelog';
3
4export default function ChangelogPage() {
5  return (
6    <div className="space-y-12">
7      {CHANGELOG.map((entry, index) => (
8        <ChangelogEntry
9          key={entry.version}
10          entry={entry}
11          index={index}
12        />
13      ))}
14    </div>
15  );
16}

[ [0xF7] FILTERING BY CHANGE TYPE ]

1import { getChangelogByType } from '@/data/changelog';
2
3// Get only entries with 'added' changes
4const addedOnly = getChangelogByType('added');
5
6// Get only entries with 'fixed' changes
7const fixedOnly = getChangelogByType('fixed');

[ [0x54] SYNCING FROM GITHUB RELEASES ]

1# Run the sync script to fetch latest releases
2npm run sync:changelog
3
4# Configure via environment variables:
5# GITHUB_TOKEN - Optional, for private repos
6# GITHUB_OWNER - Repository owner (default: "jpoindexter")
7# GITHUB_REPO  - Repository name (default: "fabrk-dev")