Render release notes markdown on releases page

Replace the truncated plain-text release body with a dedicated `ReleaseBody` component that renders GitHub-flavored markdown, trims common boilerplate headers, and applies scoped typography styles for release content. Also update the download link to use `findWindowsInstaller` so the releases page points to the intended Windows installer asset instead of the first asset.

Author: ProgrammerNomad

app/globals.css

@@ -164,6 +164,26 @@
   .doc-content ol {
     @apply list-decimal pl-6;
   }
+
+  .release-body h2,
+  .release-body h3,
+  .release-body h4 {
+    @apply mt-4 mb-2 text-base;
+  }
+
+  .release-body p,
+  .release-body ul,
+  .release-body ol {
+    @apply my-2;
+  }
+
+  .release-body li {
+    @apply my-0.5;
+  }
+
+  .release-body strong {
+    @apply font-semibold text-foreground;
+  }
 }
 
 .text-hero {

app/releases/page.tsx

@@ -1,6 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { formatReleaseDate, getReleases } from "@/lib/github";
+import { ReleaseBody } from "@/components/release-body";
+import {
+  findWindowsInstaller,
+  formatReleaseDate,
+  getReleases,
+} from "@/lib/github";
 
 import { buildPageMetadata } from "@/lib/page-metadata";
 
@@ -23,7 +28,9 @@ export default async function ReleasesPage() {
         {releases.length === 0 ? (
           <li className="text-muted-foreground">No releases found.</li>
         ) : (
-          releases.map((r) => (
+          releases.map((r) => {
+            const installer = findWindowsInstaller(r);
+            return (
             <li
               key={r.tag_name}
               className="rounded-xl border border-border p-6"
@@ -34,12 +41,7 @@ export default async function ReleasesPage() {
                   {formatReleaseDate(r.published_at)}
                 </time>
               </div>
-              {r.body ? (
-                <p className="mt-3 line-clamp-4 text-sm text-muted-foreground whitespace-pre-wrap">
-                  {r.body.slice(0, 400)}
-                  {r.body.length > 400 ? "…" : ""}
-                </p>
-              ) : null}
+              {r.body ? <ReleaseBody body={r.body} /> : null}
               <div className="mt-4 flex flex-wrap gap-3 text-sm">
                 <a
                   href={r.html_url}
@@ -49,17 +51,18 @@ export default async function ReleasesPage() {
                 >
                   View on GitHub
                 </a>
-                {r.assets[0] ? (
+                {installer ? (
                   <a
-                    href={r.assets[0].browser_download_url}
+                    href={installer.browser_download_url}
                     className="text-primary hover:underline"
                   >
-                    Download {r.assets[0].name}
+                    Download {installer.name}
                   </a>
                 ) : null}
               </div>
             </li>
-          ))
+            );
+          })
         )}
       </ul>
       <p className="mt-8">

components/release-body.tsx

@@ -0,0 +1,24 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+function prepareReleaseBody(body: string): string {
+  let text = body.trim();
+  text = text.replace(/^#\s+.+\n+/, "");
+  text = text.replace(/^\*\*[^*\n]+\*\*\s*\n+/, "");
+  return text.trim();
+}
+
+type ReleaseBodyProps = {
+  body: string;
+};
+
+export function ReleaseBody({ body }: 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">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
+    </div>
+  );
+}