your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { marked } from 'marked';
3 import type { ContentComponentProps } from '../types';
4 import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
5 import { cn } from '@foxui/core';
6
7 let { item }: ContentComponentProps = $props();
8
9 const renderer = new marked.Renderer();
10 renderer.link = ({ href, title, text }) =>
11 `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
12</script>
13
14<div
15 class={cn(
16 'prose dark:prose-invert prose-neutral prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 accent:prose-a:text-accent-950 accent:prose-a:underline accent:prose-p:text-base-900 prose-p:first:mt-0 prose-p:last:mb-0 prose-headings:first:mt-0 prose-headings:last:mb-0 inline-flex h-full min-h-full w-full max-w-none overflow-x-hidden overflow-y-scroll rounded-md p-3 text-lg',
17 textAlignClasses?.[item.cardData.textAlign as string],
18 verticalAlignClasses[item.cardData.verticalAlign as string],
19 textSizeClasses[(item.cardData.textSize ?? 0) as number]
20 )}
21>
22 <span>{@html marked.parse(item.cardData.text ?? '', { renderer })}</span>
23</div>