finxol.io
1<script setup>
2const props = defineProps({
3 post: Object
4});
5
6const { post } = toRefs(props);
7
8const headings = [];
9for (const tag of post.value.body.value) {
10 if (["h1", "h2", "h3"].includes(tag[0])) headings.push(tag);
11}
12</script>
13
14<template>
15<aside v-if="headings.length > 0" class="md:w-[80%] mx-auto ">
16 <h2 class="text-2xl font-bold">Table of Contents</h2>
17
18 <ul class=" pl-8 mt-4">
19 <li
20 v-for="heading in headings"
21 :key="heading[1].id"
22 :class="['text-md mb-2', heading[0] === 'h3' ? 'ml-6' : '']"
23 >
24 <a :href="`#${heading[1].id}`">
25 <span class="mr-2 text-gray-400 dark:text-gray-500">#</span>
26 {{ heading[2] }}
27 </a>
28 </li>
29 </ul>
30
31 <div class="bg-stone-200 dark:bg-stone-700 h-[1px] my-8"></div>
32</aside>
33</template>