add loading to doc

components/doc/Tree.vue

@@ -13,6 +13,7 @@
         <v-navigation-drawer v-model="drawer" :permanent="$vuetify.breakpoint.mdAndUp" floating app right clipped class="pt-6 bg-color">
           <v-treeview
             :items="items"
+            :loading="loading"
             open-on-click
             activatable
             dense
@@ -39,6 +40,7 @@
         <markdown-renderer :content="content" />
       </v-col>
     </v-row>
+    <loading :active.sync="loading" color="#eb3654" background-color="black" :is-full-page="true"></loading>
   </div>
 </template>
 
@@ -47,20 +49,23 @@ const fm = require('front-matter');
 import { parseGithubData, findActiveNode, findOpenIds, findActiveIds } from './parseGithubData';
 import MarkdownRenderer from './MarkdownRenderer.vue';
 import Header from './Header';
+import Loading from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/vue-loading.css';
 export default {
   data() {
     return {
       items: [],
       openIds: [],
       activeIds: [],
+      loading: false,
       metaData: {},
       content: '',
       repo_name: '',
       user_name: '',
       drawer: null,
     };
   },
-  components: { MarkdownRenderer, Header },
+  components: { MarkdownRenderer, Header, Loading },
   async fetch() {
     let slug = this.$route.params.slug;
     await this.$axios
@@ -89,17 +94,24 @@ export default {
   },
   methods: {
     active(name) {
-      const splittedPath = name[0].split('/');
-      const fileName = splittedPath[splittedPath.length - 1];
-      const slug = fileName.substring(0, fileName.length - 3);
-      this.$router.push(`${slug}`);
-      const url = `https://raw.githubusercontent.com/${this.user_name}/${this.repo_name}/main/${name[0]}`;
-      fetch(url)
-        .then(res => res.text())
-        .then(res => {
-          this.metaData = fm(res);
-          this.content = '${toc} \n' + this.metaData.body;
-        });
+      console.log(name);
+      try {
+        const splittedPath = name[0].split('/');
+        const fileName = splittedPath[splittedPath.length - 1];
+        const slug = fileName.substring(0, fileName.length - 3);
+        this.$router.push(`${slug}`);
+        this.loading = true;
+        const url = `https://raw.githubusercontent.com/${this.user_name}/${this.repo_name}/main/${name[0]}`;
+        fetch(url)
+          .then(res => res.text())
+          .then(res => {
+            this.metaData = fm(res);
+            this.content = '${toc} \n' + this.metaData.body;
+            this.loading = false;
+          });
+      } catch (e) {
+        console.log('error');
+      }
     },
     open(items) {
       this.openIds = items;

components/doc/parseGithubData.js

@@ -6,7 +6,7 @@ export const parseGithubData = res => {
       const nodePath = node.path;
       const splittedPath = nodePath.split('/');
       const fileName = splittedPath[splittedPath.length - 1];
-      const slug = fileName.substring(0, fileName.length - 3);
+      const slug = fileName.substring(2, fileName.length - 3);
       // try {
       //   slug.replaceAll(/-/g, ' ');
       // } catch (e) {

components/editor/Editor.vue

@@ -29,7 +29,7 @@ export default {
           ],
         },
         color: 'white',
-        placeholder: 'type something',
+        placeholder: 'متن موردنظر',
       },
     };
   },
@@ -67,5 +67,8 @@ export default {
   .ql-editor {
     min-height: 200px;
   }
+  .ql-blank {
+    text-align: right;
+  }
 }
 </style>

layouts/dashboard.vue

@@ -79,7 +79,7 @@ export default {
           icon: 'mdi-file-document-outline',
           hover: 'mdi-file-document',
           link: '/dashboard/doc/Game-Doc',
-          disabled: true,
+          disabled: false,
         },
         doc: {
           title: 'مستندات و منابع',

package.json

@@ -30,6 +30,7 @@
     "nuxt": "^v2.15.3",
     "vue-google-oauth2": "^1.5.8",
     "vue-i18n": "^8.24.0",
+    "vue-loading-overlay": "^3.4.2",
     "vue-quill-editor": "^3.0.6"
   },
   "devDependencies": {