flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { marked, type Renderer } from 'marked';
3 import { sanitize } from '$lib/sanitize';
4 import { parseContentSegments, getEmbedDefinition } from '$lib/embeds';
5
6 let {
7 content,
8 renderer
9 }: {
10 content: string;
11 renderer: Renderer;
12 } = $props();
13
14 let segments = $derived(parseContentSegments(content));
15</script>
16
17{#each segments as segment, i (segment.kind === 'embed' ? `embed-${i}` : `md-${i}`)}
18 {#if segment.kind === 'markdown'}
19 {@html sanitize(marked.parse(segment.text, { renderer }) as string, {
20 ADD_ATTR: ['target']
21 })}
22 {:else if segment.kind === 'embed'}
23 {@const definition = getEmbedDefinition(segment.type)}
24 {#if definition}
25 <div class="not-prose my-6">
26 <definition.component url={segment.url} data={segment.data} />
27 </div>
28 {/if}
29 {/if}
30{/each}