<script setup lang="ts">
import { useAsyncData, useNuxtApp } from 'nuxt/app';
import { computed } from 'vue';

import useSimpleHead from '~/composables/useSimpleHead.ts';
import parseMarkdown from '~/src/parseMarkdown.ts';

const { $translator: translator } = useNuxtApp();
const { data: license } = useAsyncData(async () => {
    const markdown = (await import('../LICENSE.md')).default;
    return parseMarkdown(markdown, translator);
});
const title = computed(() => license.value?.title ?? null);
const banner = computed(() => license.value?.img ?? null);
const content = computed(() => license.value?.content);

useSimpleHead({
    title,
    banner,
    description: computed(() => license.value?.intro ?? ''),
}, translator);
</script>

<template>
    <Page>
        <div class="blog-post">
            <div v-html="content"></div>

            <Separator icon="heart" />
            <Support />

            <section>
                <Share :title="title ?? undefined" />
            </section>
        </div>
    </Page>
</template>
