this repo has no description
1import { cn } from "~/design-system/utils/cn";
2import { renderMarkdown } from "~/articles/__render-markdown.server";
3
4interface ArticleShell {
5 markdown: string;
6}
7
8export async function ArticleShell({ markdown }: ArticleShell) {
9 const content = await renderMarkdown(markdown);
10
11 const mainClassName = cn([
12 "prose prose-sm max-w-none leading-7",
13 "prose-headings:font-semibold prose-headings:text-(--text-primary)",
14 "prose-h2:mb-6 prose-h2:mt-8 prose-h2:text-3xl prose-h2:first:mt-0 prose-h2:font-(--font-display)",
15 "prose-h3:mb-3 prose-h3:mt-6 prose-h3:text-lg prose-h3:first:mt-0",
16 "prose-p:mb-5 prose-p:text-(--text-secondary)",
17 "prose-ul:mb-5 prose-ul:list-disc prose-ul:space-y-2 prose-ul:pl-5",
18 "prose-ol:mb-5 prose-ol:list-decimal prose-ol:space-y-2 prose-ol:pl-5",
19 "prose-li:text-(--text-secondary)",
20 "prose-strong:font-semibold prose-strong:text-(--text-primary)",
21 "prose-code:rounded prose-code:bg-(--bg-primary) prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:text-xs",
22 "prose-pre:mb-5 prose-pre:overflow-x-auto prose-pre:rounded prose-pre:bg-(--bg-primary) prose-pre:p-4 prose-pre:font-mono prose-pre:text-xs",
23 "prose-a:text-(--accent-default) prose-a:underline prose-a:decoration-(--accent-default)/30 prose-a:underline-offset-2 prose-a:hover:decoration-(--accent-default)",
24 "prose-blockquote:mb-5 prose-blockquote:border-l-2 prose-blockquote:border-(--accent-default) prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-(--text-muted)",
25 "prose-hr:my-8 prose-hr:border-(--border-default)",
26 ]);
27
28 return (
29 <article className="border border-(--border-default) bg-(--bg-secondary) p-6 md:p-8 xl:sticky xl:top-20">
30 <div className={mainClassName}>{content}</div>
31 </article>
32 );
33}