diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/app/changelog/components/release.tsx | 3 | ||||
| -rw-r--r-- | apps/web/src/components/ui/react-markdown-wrapper.tsx | 29 |
2 files changed, 30 insertions, 2 deletions
diff --git a/apps/web/src/app/changelog/components/release.tsx b/apps/web/src/app/changelog/components/release.tsx index 0da74bf4..475b0a6d 100644 --- a/apps/web/src/app/changelog/components/release.tsx +++ b/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> diff --git a/apps/web/src/components/ui/react-markdown-wrapper.tsx b/apps/web/src/components/ui/react-markdown-wrapper.tsx index 181ae8ac..68772b07 100644 --- a/apps/web/src/components/ui/react-markdown-wrapper.tsx +++ b/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} |