From 52c02bc8e41bf86544b8ced9fe1abc3de11c9274 Mon Sep 17 00:00:00 2001
From: Heerko <heerko@swummoq.net>
Date: Tue, 13 Jul 2021 15:05:45 +0200
Subject: [PATCH] Added docs to frontend

---
 front/package.json        |  1 +
 front/src/router/index.js |  1 +
 front/src/views/Docs.vue  | 82 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 front/src/views/Docs.vue

diff --git a/front/package.json b/front/package.json
index b581122..f72a988 100644
--- a/front/package.json
+++ b/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": {
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 15bf748..0f4db92 100644
--- a/front/src/router/index.js
+++ b/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 = '/' 
 
diff --git a/front/src/views/Docs.vue b/front/src/views/Docs.vue
new file mode 100644
index 0000000..04e53c0
--- /dev/null
+++ b/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>
\ No newline at end of file