1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import type { Metadata } from "next";
import { BasePage } from "@/app/base-page";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/utils/ui";
import { allChangelogs } from "content-collections";
export const metadata: Metadata = {
title: "Changelog - OpenCut",
description: "Every update, improvement, and fix to OpenCut — documented.",
openGraph: {
title: "Changelog - OpenCut",
description: "Every update, improvement, and fix to OpenCut — documented.",
type: "website",
},
};
const knownSectionOrder = ["new", "improved", "fixed", "breaking"];
const knownSectionTitles: Record<string, string> = {
new: "Features",
improved: "Improvements",
fixed: "Fixes",
breaking: "Breaking Changes",
};
function getSectionTitle(type: string): string {
return (
knownSectionTitles[type] ?? type.charAt(0).toUpperCase() + type.slice(1)
);
}
export default function ChangelogPage() {
const releases = [...allChangelogs].sort((a, b) =>
b.version.localeCompare(a.version, undefined, { numeric: true }),
);
return (
<BasePage title="Changelog" description="See what's new in OpenCut">
<div className="mx-auto w-full max-w-3xl">
<div className="relative">
<div
aria-hidden
className="absolute top-2 bottom-0 left-[5px] w-px bg-border hidden sm:block"
/>
<div className="flex flex-col">
{releases.map((release, releaseIndex) => (
<div key={release.version} className="flex flex-col">
<ReleaseEntry release={release} />
{releaseIndex < releases.length - 1 && (
// ml-1.5 aligns with the center of the 11px timeline dot
<Separator className="my-10 sm:ml-1.5" />
)}
</div>
))}
</div>
</div>
</div>
</BasePage>
);
}
type Change = { type: string; text: string };
type Release = (typeof allChangelogs)[number];
function groupAndOrderChanges({ changes }: { changes: Change[] }) {
const grouped = changes.reduce<Record<string, Change[]>>((acc, change) => {
if (!acc[change.type]) {
acc[change.type] = [];
}
acc[change.type].push(change);
return acc;
}, {});
const customTypes = Object.keys(grouped).filter(
(type) => !knownSectionOrder.includes(type),
);
const orderedTypes = [
...knownSectionOrder.filter((type) => grouped[type]?.length > 0),
...customTypes,
];
return { grouped, orderedTypes };
}
function ReleaseEntry({ release }: { release: Release }) {
const { grouped: groupedChanges, orderedTypes } = groupAndOrderChanges({
changes: release.changes,
});
return (
<article className="relative sm:pl-10">
<div aria-hidden className="absolute left-0 top-[3px] hidden sm:block">
<div
className={cn(
"size-[11px] rounded-full border-[1.5px]",
release.isLatest
? "border-foreground bg-foreground"
: "border-muted-foreground/30 bg-background",
)}
/>
</div>
<div className="flex flex-col gap-5">
<div className="flex items-center gap-2.5 flex-wrap">
<span className="text-sm font-medium tracking-widest text-muted-foreground">
{release.version} - {release.date}
</span>
</div>
<div className="flex flex-col gap-4">
<h2 className="text-2xl font-bold tracking-tight">{release.title}</h2>
{release.description && (
<p className="text-base text-foreground leading-relaxed max-w-xl">
{release.description}
</p>
)}
</div>
<div className="flex flex-col gap-4">
{orderedTypes.map((type) => (
<div key={type} className="flex flex-col gap-1.5">
<h3 className="text-base font-semibold text-foreground">
{getSectionTitle(type)}:
</h3>
<ul className="list-disc pl-5 space-y-1.5">
{groupedChanges[type].map((change) => (
<li
key={change.text}
className="text-base text-foreground leading-relaxed"
>
{change.text}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</article>
);
}
|
