table of contents in pages

docs/.vuepress/theme/components/PageToc.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="page-toc mt-4">
+    <p class="subtitle-2 pl-6 pr-6">Table des matières</p>
+    <ul>
+      <li :class="[ itemPadding(h), 'mb-1' ]" v-for="h in headers">
+        <a :href="anchor(h)">{{ h.title }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageToc',
+
+  data () {
+    return {
+
+    }
+  },
+
+  computed: {
+    headers () {
+      return this.$page.headers
+    }
+  },
+
+  methods: {
+    anchor (h) {
+      return '#' + h.slug
+    },
+    itemPadding (h) {
+      return 'pl-' + (h.level - 2) * 4
+    }
+  },
+
+  mounted () {
+    
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/colors';
+
+.page-toc {
+  ul {
+    list-style: none;
+    padding-right: 24px;
+
+    li {
+      a {
+        color: $color-gray;
+        text-decoration: none;
+
+        &:hover {
+          color: $color-dragon;
+        }
+      }
+    }
+  }
+}
+</style>