table of contents in pages

docs/.vuepress/config.js

@@ -129,7 +129,7 @@ module.exports = {
           },
           {
             title: "Partir à l'aventure",
-            path: '/partir-a-laventure/'
+            path: '/partir-a-l-aventure/'
           },
           {
             title: "Combattre",

docs/.vuepress/store/index.js

@@ -14,7 +14,7 @@ export default new Vuex.Store({
     drawer: true,
     rightDrawer: false,
     hasRightDrawer: false,
-    inRightSidebar: null,
+    inRightDrawer: null,
   },
 
   getters: {
@@ -38,7 +38,7 @@ export default new Vuex.Store({
       commit('setInRightDrawer', payload)
     },
   },
-  
+
   mutations: {
     setDrawer: (state, payload) => {
       state.drawer = payload

docs/.vuepress/store/modules/spellFilters.js

@@ -58,6 +58,17 @@ export default {
   },
 
   actions: {
+    reset: ({ commit }) => {
+      commit('resetSearch')
+      commit('resetMustBeConcentration')
+      commit('resetMustBeRitual')
+      commit('resetClasses')
+      commit('resetLevels')
+      commit('resetSchools')
+      commit('resetComponentVerbal')
+      commit('resetComponentSomatic')
+      commit('resetComponentMaterial')
+    },
     updateSearch: ({ commit }, payload) => {
       commit('setSearch', payload)
     },
@@ -109,12 +120,21 @@ export default {
     setSearch: (state, payload) => {
       state.search = payload
     },
+    resetSearch: (state) => {
+      state.search = ''
+    },
     setMustBeConcentration: (state, payload) => {
       state.mustBeConcentration = payload
     },
+    resetMustBeConcentration: (state) => {
+      state.mustBeConcentration = undefined
+    },
     setMustBeRitual: (state, payload) => {
       state.mustBeRitual = payload
     },
+    resetMustBeRitual: (state) => {
+      state.mustBeRitual = undefined
+    },
     setClasses: (state, payload) => {
       state.classes = payload
     },
@@ -196,12 +216,21 @@ export default {
     setComponentVerbal: (state, payload) => {
       state.componentVerbal = payload
     },
+    resetComponentVerbal: (state) => {
+      state.componentVerbal = undefined
+    },
     setComponentSomatic: (state, payload) => {
       state.componentSomatic = payload
     },
+    resetComponentSomatic: (state) => {
+      state.componentSomatic = undefined
+    },
     setComponentMaterial: (state, payload) => {
       state.componentMaterial = payload
     },
+    resetComponentMaterial: (state) => {
+      state.componentMaterial = undefined
+    },
   }
 
 }

docs/.vuepress/theme/components/Navbar.vue

@@ -8,7 +8,7 @@
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
     <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
-      <v-icon>mdi-format-list-bulleted</v-icon>
+      <v-icon>{{ rightDrawerIcon }}</v-icon>
     </v-btn>
   </v-app-bar>
 </template>
@@ -39,6 +39,17 @@ export default {
     },
     hasRightDrawer() {
       return this.$store.state.hasRightDrawer
+    },
+    inRightDrawer() {
+      return this.$store.state.inRightDrawer
+    },
+    rightDrawerIcon() {
+      if (this.inRightDrawer == 'pageToc') {
+        return 'mdi-format-list-bulleted'
+      } else if (this.inRightDrawer == 'spellFilters') {
+        return 'mdi-filter-variant'
+      }
+      return 'mdi-menu'
     }
   },
 

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>

docs/.vuepress/theme/components/RightDrawer.vue

@@ -1,17 +1,20 @@
 <template>
   <v-navigation-drawer class="right-drawer" v-model="rightDrawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app right>
+    <PageToc v-if="hasPageToc" />
     <SpellFilters v-if="hasSpellFilters" />
   </v-navigation-drawer>
 </template>
 
 <script>
-import SpellFilters from '@theme/components/SpellFilters.vue'
+import PageToc from '@theme/components/PageToc'
+import SpellFilters from '@theme/components/SpellFilters'
 
 export default {
   name: 'RightDrawer',
 
   components: {
-    SpellFilters
+    SpellFilters,
+    PageToc
   },
 
   data () {
@@ -28,9 +31,12 @@ export default {
         this.$store.commit('setRightDrawer', newValue)
       }
     },
+    hasPageToc () {
+      return this.$store.state.inRightDrawer == 'pageToc'
+    },
     hasSpellFilters () {
       return this.$store.state.inRightDrawer == 'spellFilters'
-    }
+    },
   },
 
   mounted () {

docs/.vuepress/theme/components/SpellFilters.vue

@@ -325,6 +325,9 @@ export default {
   },
 
   mounted () {
+    console.log('filter mounted')
+    this.$store.dispatch('spellFilters/reset')
+
     let selectedSchools = getUrlParameter(window.location.href, "ecoles").split(",")
     let selectedClasses = getUrlParameter(window.location.href, "classes").split(",")
     let selectedLevels = getUrlParameter(window.location.href, "niveaux").split(",")

docs/.vuepress/theme/layouts/Layout.vue

@@ -15,6 +15,30 @@ export default {
   },
 
   computed: {
+  },
+
+  methods: {
+    setRightDrawer () {
+      this.$store.commit('setHasRightDrawer', false)
+      this.$store.commit('setRightDrawer', false)
+      this.$store.commit('setInRightDrawer', null)
+
+      if (this.$page.headers && this.$page.headers.length > 0 && this.$page.frontmatter.toc !== false) {
+        this.$store.commit('setHasRightDrawer', true)
+        this.$store.commit('setRightDrawer', true)
+        this.$store.commit('setInRightDrawer', 'pageToc')
+      }
+    }
+  },
+
+  watch: {
+    $route (id) {
+      this.setRightDrawer()
+    }
+  },
+
+  mounted () {
+    this.setRightDrawer()
   }
 }
 </script>

docs/.vuepress/theme/layouts/SpellLayout.vue

@@ -12,6 +12,12 @@ export default {
 
   components: {
     Spell
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', false)
+    this.$store.commit('setRightDrawer', false)
+    this.$store.commit('setInRightDrawer', null)
   }
 }
 </script>

docs/.vuepress/theme/layouts/SpellsLayout.vue

@@ -13,7 +13,7 @@
     >
 
       <template v-slot:item.title="{ item }">
-        <router-link :to="{ path: item.path }">{{ item.title }}</router-link>
+        <router-link :to="{ path: item.path }" class="subtitle-2">{{ item.title }}</router-link>
       </template>
 
       <template v-slot:item.frontmatter.level="{ item }">
@@ -165,5 +165,18 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import '../styles/colors';
+
+.v-data-table {
+  a {
+    color: $color-dragon;
+    text-decoration: none;
+  }
+
+  .v-data-table__mobile-row {
+    min-height: 32px;
+  }
+}
+
 </style>

docs/.vuepress/theme/styles/_colors.scss

@@ -1,3 +1,3 @@
 $color-hero: #563f5a;
 $color-dragon: #9b1c47;
-$color-gray: #555;
+$color-gray: #6f6f6f;