21 lines
666 B
Vue
21 lines
666 B
Vue
<script setup lang="ts">
|
|
import type { TocEntry } from '#shared/content';
|
|
|
|
defineProps<{ entries: TocEntry[]; label?: string }>();
|
|
</script>
|
|
|
|
<template>
|
|
<nav v-if="entries.length" aria-label="Table of contents" class="toc">
|
|
<p class="muted mb-2 text-xs font-semibold uppercase tracking-wide">{{ label || t('blog.toc') }}</p>
|
|
<ul class="space-y-1 text-sm">
|
|
<li
|
|
v-for="e in entries"
|
|
:key="e.id"
|
|
:class="e.level >= 4 ? 'ps-8' : e.level === 3 ? 'ps-4' : ''"
|
|
>
|
|
<a :href="`#${e.id}`" class="muted leading-snug hover:text-brand-600 dark:hover:text-brand-400">{{ e.text }}</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|