haandling internl links in docs

front/docs/Chattypub.md

@@ -57,7 +57,7 @@ Every message you send to this topic should consist of a single emoji followed b
 }
 ```
 
-These messages should be unique and follow the CSS syntax, as described in the [introduction to CSS](#CSS). If you are comfortable with CSS, you can skip to the part of the document that describes [how CSS is used in ChattyPub](#css-in-chatty-pub).
+These messages should be unique and follow the CSS syntax, as described in the [introduction to CSS](/docs/CSS). If you are comfortable with CSS, you can skip to the part of the document that describes [how CSS is used in ChattyPub](/docs/CSS#css-in-chattypub).
 
 To apply these styles to the contents of your publication, head back to any other topic in your stream, select a message you'd like to style, and react to it with the emoji whose styles you want to apply. On ChattyPub, the message should be rendered with these styles.
 

front/docs/Workshop.md

@@ -34,7 +34,7 @@ Texts, notes, chats, images, and screenshots will make great material for our wo
 
 ## How It Works
 
-For an overview of how ChattyPub works with Zulip, go [here](#Chattypub).
+For an overview of how ChattyPub works with Zulip, go [here](/docs/Chattypub).
 ## Workshop
 
 The workshop is split over two sessions (over two days) of 4 hours each.
@@ -48,8 +48,8 @@ _Opening Session: Introductions & first encounters with ChattyPub_
   - How it all comes together (emojis ;])(Karl)
 - Experimenting with ChattyPub! ( 2 hrs )
   - participants with different levels of experience of CSS are grouped together
-  - each group follows [these instructions](#content) to make one publication in ChattyPub
-  - detailed instructions about CSS can be found [here](#CSS)
+  - each group follows [these instructions](/docs/Chattypub#content) to make one publication in ChattyPub
+  - detailed instructions about CSS can be found [here](/docs/CSS)
 - Brainstorm Session (1 hr)
   - in groups of 2-3, participants brainstorm publications they will make during the main session 
     - The goal is to document together, in print, parts of the summer academy.

front/src/router/index.js

@@ -18,6 +18,12 @@ export default createRouter({
       name: 'Docs',
       component: Docs,
     },
+    {
+      path: '/docs/:slug',
+      name: 'Doc',
+      props: true,
+      component: Docs,
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'Home',

front/src/views/Docs.vue

@@ -5,17 +5,22 @@
     <ul>
       <li><router-link to="/">Back to Chattypub</router-link></li>
       <li v-for="(file, key) in files" :key="key">
-        <a :href="'#' + key" @click="select(key)">{{ key }}</a>
+        <router-link :to="`/docs/${key}`">
+          {{ key }}
+        </router-link>
       </li>
     </ul>
-    <div v-if="selected">
-      <vue3-markdown-it :source="source" :html="true" v-bind="$mdOpts" />
+    <div v-if="$route.params.slug">
+      <vue3-markdown-it 
+        :source="source" 
+        :html="true" 
+        v-bind="$mdOpts" 
+      />
     </div>
   </div>
 </template>
 
 <script>
-import VueMarkdownIt from "vue3-markdown-it";
 /*eslint no-unused-vars: "off"*/
 /*eslint no-undef: "off"*/
 import css from "../../docs/CSS.md";
@@ -25,22 +30,33 @@ import "github-markdown-css/github-markdown.css";
 
 export default {
   name: "Docs",
-  components: [VueMarkdownIt],
   data() {
     return {
-      files: { Workshop: workshop, Chattypub: chattypub, CSS: css },
-      selected: "",
+      files: { 
+        Workshop: workshop, 
+        Chattypub: chattypub, 
+        CSS: css 
+      },
     };
   },
   computed: {
     source() {
-      return this.files[this.selected];
+      return this.files[this.$route.params.slug];
     },
   },
+  mounted() {
+    setTimeout(() => { 
+      if (this.source && this.$route.hash) {
+        document
+        .querySelector(this.$route.hash)
+        .scrollIntoView({
+          behavior: "smooth",
+        })
+      }
+      // this.handleLinks()
+    }, 100)
+  },
   methods: {
-    select(key) {
-      this.selected = key;
-    },
     getFileName(url, includeExtension) {
       var matches =
         url &&
@@ -53,6 +69,19 @@ export default {
       }
       return matches[1];
     },
+    handleLinks() {
+      Array.from(document.querySelectorAll('a'))
+      .forEach(a => {
+        a.addEventListener('click', e => {
+          if (a.pathname.startsWith('/docs/')) {
+            console.log(a)
+            this.$router.push(a.pathname)
+            e.preventDefault()
+            document.scroll({top: 0})
+          }
+        })
+      })
+    }
   },
 };
 </script>