fixes gamevault-app and gamevault-backend supports markdown in description but not gamevault-frontend

Fixes #22

Author: Alfagun74

CHANGELOG.md

@@ -7,6 +7,7 @@
 - New installed games section in the library
 - Game time tracker
 - Fixed a bug where only the first 1000 Tags would be loaded in the library, now all tags are loaded
+- [#22](https://github.com/Phalcode/gamevault-frontend/issues/22) - Added support for markdown in game descriptions and notes.
 
 ## 16.2.1
 

src/components/MarkdownContent.tsx

@@ -10,14 +10,27 @@ export default function MarkdownContent({
   content,
   className,
 }: MarkdownContentProps) {
+  const normalizedContent = content
+    .replace(/\r\n/g, "\n")
+    .replace(/\\r\\n/g, "\n")
+    .replace(/\\n/g, "\n");
+
   return (
     <div
       className={clsx(
-        "prose prose-sm prose-zinc max-w-none dark:prose-invert",
+        "prose prose-sm prose-zinc max-w-none text-zinc-700 dark:prose-invert dark:text-zinc-300",
+        "prose-headings:font-semibold prose-headings:text-zinc-950 dark:prose-headings:text-zinc-50",
+        "prose-p:leading-7 prose-p:text-zinc-700 dark:prose-p:text-zinc-300",
+        "prose-a:text-indigo-600 prose-a:no-underline hover:prose-a:text-indigo-500 dark:prose-a:text-indigo-300 dark:hover:prose-a:text-indigo-200",
+        "prose-strong:text-zinc-900 dark:prose-strong:text-zinc-100",
+        "prose-code:rounded prose-code:bg-zinc-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:text-zinc-900 dark:prose-code:bg-zinc-800 dark:prose-code:text-zinc-100",
+        "prose-pre:rounded-xl prose-pre:border prose-pre:border-zinc-200 prose-pre:bg-zinc-950 prose-pre:shadow-sm dark:prose-pre:border-zinc-800",
+        "prose-blockquote:border-l-zinc-300 prose-blockquote:text-zinc-600 dark:prose-blockquote:border-l-zinc-700 dark:prose-blockquote:text-zinc-300",
+        "prose-li:text-zinc-700 prose-li:marker:text-zinc-400 dark:prose-li:text-zinc-300 dark:prose-li:marker:text-zinc-500",
         className,
       )}
     >
-      <Markdown>{content}</Markdown>
+      <Markdown>{normalizedContent}</Markdown>
     </div>
   );
 }