Render markdown release notes on download page

The download page now uses the shared `ReleaseBody` component instead of a raw `<pre>` block, so release notes render as formatted Markdown. `ReleaseBody` was enhanced to strip an extra `## DevStackBox...` heading, accept a `className` override, and apply a bordered/padded container style. Global release-note styles were also expanded to cover inline code, horizontal rules, and links for more consistent readability.

Author: ProgrammerNomad

app/download/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Download, ExternalLink } from "lucide-react";
+import { ReleaseBody } from "@/components/release-body";
 import { homepage } from "@/content/homepage";
 import {
   findWindowsInstaller,
@@ -65,9 +66,7 @@ export default async function DownloadPage() {
       {release?.body ? (
         <section className="mt-10">
           <h2 className="text-lg font-semibold">Release notes</h2>
-          <pre className="mt-4 whitespace-pre-wrap rounded-lg border border-border bg-muted/30 p-4 text-sm text-muted-foreground">
-            {release.body.slice(0, 2000)}
-          </pre>
+          <ReleaseBody body={release.body} className="mt-4" />
         </section>
       ) : null}
 

app/globals.css

@@ -184,6 +184,18 @@
   .release-body strong {
     @apply font-semibold text-foreground;
   }
+
+  .release-body code {
+    @apply rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground;
+  }
+
+  .release-body hr {
+    @apply my-4 border-border;
+  }
+
+  .release-body a {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
 }
 
 .text-hero {

components/release-body.tsx

@@ -1,23 +1,31 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { cn } from "@/lib/utils";
 
 function prepareReleaseBody(body: string): string {
   let text = body.trim();
   text = text.replace(/^#\s+.+\n+/, "");
+  text = text.replace(/^##\s+DevStackBox[^\n]*\n+/i, "");
   text = text.replace(/^\*\*[^*\n]+\*\*\s*\n+/, "");
   return text.trim();
 }
 
 type ReleaseBodyProps = {
   body: string;
+  className?: string;
 };
 
-export function ReleaseBody({ body }: ReleaseBodyProps) {
+export function ReleaseBody({ body, className }: ReleaseBodyProps) {
   const markdown = prepareReleaseBody(body);
   if (!markdown) return null;
 
   return (
-    <div className="release-body doc-content prose-no-margin mt-3 text-sm text-muted-foreground">
+    <div
+      className={cn(
+        "release-body doc-content prose-no-margin rounded-lg border border-border bg-muted/20 p-6 text-sm text-muted-foreground",
+        className,
+      )}
+    >
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
     </div>
   );