From ede09bcf044ccb81971d0c72003af6df06722e8a Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Fri, 1 Nov 2024 21:14:28 +0100
Subject: [PATCH] feat(page): render changelog markdown

---
 apps/page/package.json         |  1 +
 apps/page/src/pages/[id].astro | 10 +++-------
 packages/ui/src/global.css     |  8 ++++++++
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/page/package.json b/apps/page/package.json
index da5bc70..31c49e8 100644
--- a/apps/page/package.json
+++ b/apps/page/package.json
@@ -21,6 +21,7 @@
     "@types/react-dom": "^18.3.1",
     "astro": "^4.16.7",
     "date-fns": "^4.1.0",
+    "marked": "^14.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.14",
diff --git a/apps/page/src/pages/[id].astro b/apps/page/src/pages/[id].astro
index f6002f9..d17e11d 100644
--- a/apps/page/src/pages/[id].astro
+++ b/apps/page/src/pages/[id].astro
@@ -3,6 +3,7 @@ import type { PageByIdOutput } from '@boring.tools/schema'
 import { Separator } from '@boring.tools/ui'
 import type { z } from 'astro/zod'
 import { format } from 'date-fns'
+import { marked } from 'marked'
 
 type PageById = z.infer<typeof PageByIdOutput>
 const url = import.meta.env.DEV
@@ -55,9 +56,7 @@ const data: PageById = await response.json()
 											}
 										</div>
 
-										<p>
-											{version.markdown}
-										</p>
+											<div set:html={marked.parse(version.markdown ?? "")} />
 									</div>
 								)
 							})}
@@ -89,10 +88,7 @@ const data: PageById = await response.json()
 											</p>
 											}
 										</div>
-
-										<p>
-											{version.markdown}
-										</p>
+										<div class="page" set:html={marked.parse(version.markdown ?? "")} />
 									</div>
 								)
 							})}
diff --git a/packages/ui/src/global.css b/packages/ui/src/global.css
index cd57894..f1d0b35 100644
--- a/packages/ui/src/global.css
+++ b/packages/ui/src/global.css
@@ -85,4 +85,12 @@
       "rlig" 1,
       "calt" 1;
   }
+
+  .page h3 {
+    @apply text-2xl my-2;
+  }
+
+  .page ul {
+    @apply list-disc ml-6;
+  }
 }