Close #9: Encyclopedia embed

web/src/components/DDCODE/fetchWikiMainPage.vue

+<template>
+  <div>
+    <slot :response="response" :loading="loading"></slot>
+  </div>
+</template>
+
+<script>
+// require modules
+const _ = require('lodash');
+let host = require('../js/const').host;
+
+export default {
+  name: "fetchWikiMain",
+  data() {
+    return {
+      loading: true,
+      response: '',
+      isDev: process.env.NODE_ENV === 'development'
+    }
+  },
+  methods: {
+    getItems() {
+      const vm = this;
+
+      // console.log(host)
+
+      if(vm.isDev) {
+        host = require('../js/const').devHost;
+      }
+
+      let url = `http://${host}/wiki`;
+
+      fetch(url)
+          .then(response => response.json())
+          .then((response) => {
+            setTimeout(() => {
+              this.loading = false;
+              this.response = response.data.pages.single;
+            }, 10);
+          });
+    }
+  },
+  mounted() {
+    const vm = this
+    // /* eslint-disable no-console */
+    // console.log(vm.locus);
+    vm.getItems();
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

web/src/components/EncycloPage.vue

@@ -27,7 +27,20 @@
         </router-link>
       </li>
     </ul>
-    <h2>Encyclopedia</h2>
+
+    <fetch-wiki-main-page>
+      <template slot-scope="{response, loading}">
+        <slot :response="response" :loading="loading">
+          <div v-if="loading || response === null"></div>
+          <div v-else>
+<!--            <h1>{{response.title}}</h1>-->
+            <vue-markdown>
+              {{response.content}}
+            </vue-markdown>
+          </div>
+        </slot>
+      </template>
+    </fetch-wiki-main-page>
 
     <div style="float: left">
       <h3>Contact Information</h3>
@@ -47,11 +60,14 @@
 </template>
 
 <script>
+import FetchWikiMainPage from "@/components/DDCODE/fetchWikiMainPage";
+import VueMarkdown from "vue-markdown"
 const _ = require('lodash')
 
 export default {
   name: 'EncycloPage',
   components: {
+    FetchWikiMainPage, VueMarkdown
   },
   props: {
     msg: String