PageLinks

<script setup lang="ts">
import type { PageLink } from 'pohon-ui';

const route = useRoute();

definePageMeta({
  layout: 'docs'
});

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first();
});

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path);
});

const links = computed<Array<PageLink>>(() => [
  {
    icon: 'i-lucide-file-pen',
    label: 'Edit this page',
    to: `https://github.com/vinicunca/pohon/edit/main/docs/content/${page?.value?.stem}.md`,
    target: '_blank'
  },
  {
    icon: 'i-lucide-star',
    label: 'Star on GitHub',
    to: 'https://github.com/vinicunca/pohon',
    target: '_blank'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/vinicunca/pohon/releases'
  }
]);
</script>

<template>
  <PPage>
    <PPageHeader
      :title="page.title"
      :description="page.description"
    />

    <PPageBody>
      <ContentRenderer :value="page" />

      <PSeparator />

      <PContentSurround :surround="surround" />
    </PPageBody>

    <template #right>
      <PContentToc :links="page.body.toc.links">
        <template #bottom>
          <PSeparator type="dashed" />

          <PPageLinks
            title="Community"
            :links="links"
          />
        </template>
      </PContentToc>
    </template>
  </PPage>
</template>