Add a Table of Contents sidebar to the resources pages

[ArsalaBangash]

The previous Hacklab website had a useful side bar which gave an outline of the doc.

[ArsalaBangash]

From https://content.nuxtjs.org/writing#table-of-contents:

[ArsalaBangash]

Table of contents snippet from: https://content.nuxtjs.org/snippets#table-of-contents

Add a table of contents by looping over our array of toc and use the id to link to it and the text to show the title. We can use the depth to style the titles differently:

<template>
  <ul>
    <li
      v-for="link of article.toc"
      :key="link.id"
      :class="{ 'toc2': link.depth === 2, 'toc3': link.depth === 3 }"
    >
      <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
    </li>
  </ul>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug)
      .fetch()

    return {
      article
    }
  }
}
</script>