feat: changelog now supports markdown within entries

Author: mazeincoding

apps/web/src/app/changelog/components/release.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { cn } from "@/utils/ui";
+import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper";
 import {
 	getSectionTitle,
 	groupAndOrderChanges,
@@ -144,7 +145,7 @@ function ReleaseChangeList({
 					key={change.text}
 					className="text-base leading-relaxed text-foreground"
 				>
-					{change.text}
+					<ReactMarkdownWrapper inline>{change.text}</ReactMarkdownWrapper>
 				</li>
 			))}
 		</ul>

apps/web/src/components/ui/react-markdown-wrapper.tsx

@@ -1,7 +1,13 @@
 import ReactMarkdown from "react-markdown";
 import { cn } from "@/utils/ui";
 
-export function ReactMarkdownWrapper({ children }: { children: string }) {
+export function ReactMarkdownWrapper({
+	children,
+	inline = false,
+}: {
+	children: string;
+	inline?: boolean;
+}) {
 	return (
 		<ReactMarkdown
 			components={{
@@ -18,6 +24,27 @@ export function ReactMarkdownWrapper({ children }: { children: string }) {
 				strong: ({ children }) => (
 					<strong className="text-foreground font-semibold">{children}</strong>
 				),
+				code: ({ className: codeClassName, children, ...props }) => (
+					<code
+						className={cn(
+							"rounded border border-destructive/20 bg-destructive/5 px-1.5 py-0.5 font-mono text-[0.85em] text-red-700 dark:text-red-300",
+							codeClassName,
+						)}
+						{...props}
+					>
+						{children}
+					</code>
+				),
+				p: ({ className: paragraphClassName, children, ...props }) =>
+					inline ? (
+						<span className={cn("m-0", paragraphClassName)} {...props}>
+							{children}
+						</span>
+					) : (
+						<p className={cn("m-0", paragraphClassName)} {...props}>
+							{children}
+						</p>
+					),
 			}}
 		>
 			{children}