Added docs to frontend

front/package.json

@@ -29,6 +29,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
+    "raw-loader": "^4.0.2",
     "zulip-js": "^2.0.9"
   },
   "eslintConfig": {

front/src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 import Home from '../views/Home'
+import Docs from '../views/Docs.vue'
 
 const path = '/' 
 

front/src/views/Docs.vue

@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+<template>
+  <div class="docs">
+    <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>
+      </li>
+    </ul>
+    <div v-if="selected">
+      <vue3-markdown-it
+        :source="source"
+        :html="true"
+        @click.capture="clickEvent"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import VueMarkdownIt from "vue3-markdown-it";
+/*eslint no-unused-vars: "off"*/
+/*eslint no-undef: "off"*/
+
+// VueMarkdownIt.use();
+import css from "raw-loader!../../docs/CSS.md";
+import workshop from "raw-loader!../../docs/Workshop.md";
+
+export default {
+  name: "Docs",
+  components: [VueMarkdownIt],
+  data() {
+    return {
+      files: { Workshop: workshop, CSS: css },
+      selected: "",
+    };
+  },
+  computed: {
+    source() {
+      return this.files[this.selected];
+    },
+  },
+  methods: {
+    select(key) {
+      this.selected = key;
+    },
+    clickEvent(evt) {
+      console.log(evt);
+      let regex = new RegExp("[^.]+$");
+      let url = evt.explicitOriginalTarget.href;
+      let extension = url.match(regex);
+      if (extension.includes("md")) {
+        let filename = this.getFileName(url);
+        if (filename in this.files) {
+          this.selected = filename;
+          evt.preventDefault();
+        }
+      }
+      return false;
+    },
+    getFileName(url, includeExtension) {
+      var matches =
+        url &&
+        typeof url.match === "function" &&
+        url.match(/\/?([^/.]*)\.?([^/]*)$/);
+      if (!matches) return null;
+
+      if (includeExtension && matches.length > 2 && matches[2]) {
+        return matches.slice(1).join(".");
+      }
+      return matches[1];
+    },
+  },
+};
+</script>
+
+<style>
+.docs {
+  padding: 1em;
+}
+</style>