53 lines
2.5 KiB
TypeScript
53 lines
2.5 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Markdown from "react-markdown";
|
|
import { allReleases, formatDate, releasesPage } from "@/lib/releases";
|
|
|
|
export const metadata: Metadata = { title: "Changelog" };
|
|
|
|
// Release notes are Markdown, written by the client's CI: what's in each release.
|
|
const markdown = {
|
|
p: (props: React.ComponentProps<"p">) => <p className="text-muted-foreground" {...props} />,
|
|
ul: (props: React.ComponentProps<"ul">) => <ul className="list-disc space-y-1 pl-5 text-muted-foreground" {...props} />,
|
|
ol: (props: React.ComponentProps<"ol">) => <ol className="list-decimal space-y-1 pl-5 text-muted-foreground" {...props} />,
|
|
code: (props: React.ComponentProps<"code">) => <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs break-all" {...props} />,
|
|
a: (props: React.ComponentProps<"a">) => <a className="text-foreground underline underline-offset-4" {...props} />,
|
|
strong: (props: React.ComponentProps<"strong">) => <strong className="font-medium text-foreground" {...props} />,
|
|
h1: (props: React.ComponentProps<"h3">) => <h3 className="font-medium" {...props} />,
|
|
h2: (props: React.ComponentProps<"h3">) => <h3 className="font-medium" {...props} />,
|
|
h3: (props: React.ComponentProps<"h3">) => <h3 className="font-medium" {...props} />,
|
|
};
|
|
|
|
export default async function ChangelogPage() {
|
|
const releases = await allReleases();
|
|
return (
|
|
<div className="max-w-2xl space-y-10">
|
|
<h1 className="text-3xl font-semibold tracking-tight">Changelog</h1>
|
|
{releases === null ? (
|
|
<p className="text-muted-foreground">
|
|
Couldn't load the releases. They're on{" "}
|
|
<a href={releasesPage} className="text-foreground underline underline-offset-4">
|
|
git.t5de.dev
|
|
</a>
|
|
.
|
|
</p>
|
|
) : (
|
|
releases.map((r) => (
|
|
<article key={r.tag} id={r.tag} className="space-y-4 border-t pt-8 first:border-t-0 first:pt-0">
|
|
<header className="flex flex-wrap items-baseline gap-x-3">
|
|
<h2 className="text-xl font-semibold">
|
|
<a href={`#${r.tag}`}>{r.version}</a>
|
|
</h2>
|
|
<time dateTime={r.date} className="text-sm text-muted-foreground">
|
|
{formatDate(r.date)}
|
|
</time>
|
|
</header>
|
|
<div className="space-y-3 text-sm">
|
|
<Markdown components={markdown}>{r.body}</Markdown>
|
|
</div>
|
|
</article>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
}
|