your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { marked } from 'marked';
3 import { sanitize } from '$lib/sanitize';
4 import type { ContentComponentProps } from '../types';
5 import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
6 import { cn } from '@foxui/core';
7
8 let { item }: ContentComponentProps = $props();
9
10 const renderer = new marked.Renderer();
11 renderer.link = ({ href, title, text }) =>
12 `<a target="_blank" href="${href}" title="${title ?? ''}">${text}</a>`;
13</script>
14
15<div
16 class={cn(
17 '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',
18 textAlignClasses?.[item.cardData.textAlign as string],
19 verticalAlignClasses[item.cardData.verticalAlign as string],
20 textSizeClasses[(item.cardData.textSize ?? 0) as number]
21 )}
22>
23 <span
24 >{@html sanitize(marked.parse(item.cardData.text ?? '', { renderer }) as string, {
25 ADD_ATTR: ['target']
26 })}</span
27 >
28</div>