33 lines
1.0 KiB
Vue
33 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import ProseA from "~/components/content/prose/ProseA.vue";
|
|
import ProseH1 from "~/components/content/prose/ProseH1.vue";
|
|
import ProseH2 from "~/components/content/prose/ProseH2.vue";
|
|
import ProseH3 from "~/components/content/prose/ProseH3.vue";
|
|
import ProseH4 from "~/components/content/prose/ProseH4.vue";
|
|
import ProseH5 from "~/components/content/prose/ProseH5.vue";
|
|
import ProseH6 from "~/components/content/prose/ProseH6.vue";
|
|
import ProseBlockquote from "~/components/content/prose/ProseBlockquote.vue";
|
|
const props = defineProps<{
|
|
content: string
|
|
}>();
|
|
const parser = useMarkdown();
|
|
const ast = await parser(props.content);
|
|
</script>
|
|
|
|
<template>
|
|
<Suspense>
|
|
<template #fallback>
|
|
<div class="loading"></div>
|
|
</template>
|
|
<MDCRenderer :body="ast?.body" :data="ast?.data" :components="{
|
|
a: ProseA,
|
|
h1: ProseH1,
|
|
h2: ProseH2,
|
|
h3: ProseH3,
|
|
h4: ProseH4,
|
|
h5: ProseH5,
|
|
h6: ProseH6,
|
|
blockquote: ProseBlockquote,
|
|
}" />
|
|
</Suspense>
|
|
</template> |