feat: T5DE's website: landing page, download, changelog and FAQ

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/changelog/page.tsx

@@ -0,0 +1,52 @@
+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&apos;t load the releases. They&apos;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>
+  );
+}