table of contents, an letting og of expand/colapse chapters

front/src/App.vue

@@ -46,14 +46,16 @@ export default {
       }
     })
 
-    this.$router.afterEach((to) => {
-      this.$store.commit("setTopics", []);
-      this.$store.commit("setRules", []);
-      this.$store.commit("setCurStream", to.path.replace("/", ""));
-      if (this.currentStream != ""
-       && this.streams.find(s => s.name == this.currentStream)
-       ) {
-        this.setUpDoc(this.currentStream);
+    this.$router.afterEach((to, from) => {
+      if (to.path !== from.path) {
+        this.$store.commit("setTopics", []);
+        this.$store.commit("setRules", []);
+        this.$store.commit("setCurStream", to.path.replace("/", ""));
+        if (this.currentStream != ""
+        && this.streams.find(s => s.name == this.currentStream)
+        ) {
+          this.setUpDoc(this.currentStream);
+        }
       }
     });
   },

front/src/components/Content/Chapter.vue

@@ -1,10 +1,9 @@
 <template>
-  <div :class="['body', topic.title]">
-    <h3 @click="desiresContent = !desiresContent" class="header">
-      <span class="expandToggle" v-html="toggleSymbol"></span>
+  <div class="body">
+    <h2 class="header">
       <span>{{ topic.title }}</span>
-    </h3>
-    <div v-if="desiresContent || print">
+    </h2>
+    <div>
       <span v-for="message in messagesToShow" :key="message.id">
         <Message :message="message" :show_message_data="show_message_data" />
         <span>&nbsp;</span>
@@ -25,18 +24,10 @@ export default {
   },
   data() {
     return {
-      desiresContent: false,
-    };
+    }
   },
-  props: ["topic", "print", "show_message_data"],
+  props: ["topic", "show_message_data"],
   computed: {
-    toggleSymbol() {
-      let r = "";
-      if (!this.print) {
-        r = this.desiresContent ? "▼ " : "► ";
-      }
-      return r;
-    },
     messagesToShow() {
       return this.topic.messages
       .filter(m => !m.responseTo)

front/src/components/Content/index.vue

@@ -1,9 +1,24 @@
 <template>
-  <section id="content">
+  <section>
     <h1 class="title">{{ title }}</h1>
+    <ul>
+      <li
+        v-for="topic in sortedTopics"
+        :key="topic.title"
+      >
+        <router-link 
+          :to="`#${toValidID(topic.title)}`"
+          @click.stop="goTo(`#${toValidID(topic.title)}`)" 
+        >
+          {{ topic.title }}
+        </router-link>
+      </li>
+    </ul>
+    <div style="float: none"><div style="page-break-after: always"></div></div>
     <Chapter
       v-for="topic in sortedTopics"
       :key="topic.title"
+      :id="toValidID(topic.title)"
       :topic="topic"
       :print="print"
       :show_message_data="show_message_data"
@@ -20,6 +35,7 @@ export default {
   components: {
     Chapter,
   },
+  props: ["print", "show_message_data"],
   computed: {
     ...mapState(["currentStream", "streams"]),
     ...mapGetters(["sortedTopics"]),
@@ -29,16 +45,20 @@ export default {
     }
     
   },
-  methods: {},
-  props: ["print", "show_message_data"],
+  methods: {
+    toValidID(string) { return (
+      encodeURIComponent('ch-' + string)
+      .toLowerCase()
+      .replace(/\.|%[0-9a-z]{2}/gi, '')
+    )},
+    goTo(id) {
+      document.querySelector(`.${this.currentStream} ${id}`).scrollIntoView()
+    }
+  },
 };
 </script>
 
 <style scoped>
-#content {
-  /* max-width: 700px; */
-  /* background: unset; */
-}
 @media print {
   .title {
     /* display: none; */