Merge pull request #284 from mieweb/develop

Add html hot reload
Fix slugify and server
Fix few UI issues
Fix eslint vue location
Fix tests
Fix sharing folder

src/containers/server/static/assets/components/DriveTools.vue → apps/ui/assets/components/DriveTools.vue

@@ -7,8 +7,8 @@
           WikiGDrive Folder
         </a>
       </li>
-      <li class="list-group-item" v-if="selectedFile.parentId" target="_blank">
-        <a :href="'https://drive.google.com/open?id=' + selectedFile.parentId">
+      <li class="list-group-item" v-if="selectedFile.parentId">
+        <a :href="'https://drive.google.com/open?id=' + selectedFile.parentId" target="_blank">
           <i class="fa fa-arrow-up-right-from-square me-1"></i>
           Google Drive
         </a>

src/containers/server/static/assets/components/GitCommit.vue → apps/ui/assets/components/GitCommit.vue

@@ -52,7 +52,7 @@
 </template>
 <script>
 import {UtilsMixin} from './UtilsMixin.mjs';
-import {GitMixin} from '../components/GitMixin.mjs';
+import {GitMixin} from './GitMixin.mjs';
 
 export default {
   mixins: [UtilsMixin, GitMixin],

src/containers/server/static/assets/components/MarkDown.vue → apps/ui/assets/components/MarkDown.vue

@@ -2,7 +2,7 @@
   <pre><code class="language-markdown line-numbers" ref="code"><slot></slot></code></pre>
 </template>
 <script lang="ts">
-import Prism from '../prism.js';
+const Prism = window['Prism'];
 
 const url = /\b([a-z]{3,7}:\/\/|tel:)[\w\-+%~/.:=&@]+(?:\?[\w\-+%~/.:=?&!$'()*,;@]*)?(?:#[\w\-+%~/.:#=?&!$'()*,;@]*)?/;
 const email = /\b\S+@[\w.]+[a-z]{2}/;

apps/ui/assets/components/NavBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <router-link v-if="!isSinglePreview && rootFolder.name" class="navbar-brand" :to="{ name: 'drive', params: {driveId} }">{{ rootFolder.name }}</router-link>
+    <span class="navbar-brand" v-else-if="!isSinglePreview">WikiGDrive</span>
+<!--    <button class="navbar-toggler" type="button" data-toggle="collapse" @click="show = !show">
+      <span class="navbar-toggler-icon"></span>
+    </button>-->
+    <slot></slot>
+<!--    <div class="collapse navbar-collapse" :class="{ show: show }">
+    </div>-->
+  </nav>
+</template>
+<script>
+import {UtilsMixin} from './UtilsMixin.mjs';
+
+export default {
+  mixins: [ UtilsMixin ],
+  data() {
+    return {
+      show: false
+    };
+  },
+  computed: {
+    rootFolder() {
+      return this.$root.drive;
+    }
+  }
+};
+</script>

src/containers/server/static/assets/components/NavTabs.vue → apps/ui/assets/components/NavTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="nav h-100">
+  <ul class="navbar-nav mr-auto">
     <li :class="{ 'active': activeTab === 'html' }" class="wgd-nav-item" v-if="isDocument(selectedFile) || isMarkdown(selectedFile) || isImage(selectedFile)">
       <a @click.prevent.stop="setActiveTab('html')">
         <i class="fa-solid fa-eye"></i>

src/containers/server/static/assets/components/UserConfig.vue → apps/ui/assets/components/UserConfig.vue

@@ -22,7 +22,7 @@
           </div>
 
           <div>
-            <img v-if="user_config.hugo_theme.preview_img" :src="user_config.hugo_theme.preview_img" style="height: 250px;" />
+            <img v-if="user_config.hugo_theme.preview_img" :src="user_config.hugo_theme.preview_img" style="height: 250px;" :alt="user_config.hugo_theme.id" />
           </div>
 
           <button class="btn btn-primary" type="button" @click="save">Save</button>

src/containers/server/static/assets/layout/BaseLayout.vue → apps/ui/assets/layout/BaseLayout.vue

@@ -1,24 +1,27 @@
 <template>
   <div id="main" :class="{'hide-sidedrawer': !sidebar}">
     <slot name="navbar">
-      <nav class="bg-primary"></nav>
+      <NavBar />
     </slot>
-    <div id="content-wrapper">
-      <div id="sidedrawer" class="">
-        <Sidebar>
-          <slot name="sidebar"></slot>
-        </Sidebar>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm" v-if="sidebar">
+          <Sidebar>
+            <slot name="sidebar"></slot>
+          </Sidebar>
+        </div>
+        <main class="col">
+          <slot></slot>
+        </main>
       </div>
-      <main>
-        <slot></slot>
-      </main>
     </div>
   </div>
 </template>
 <script>
 import Sidebar from './SideBar.vue';
+import NavBar from '../components/NavBar.vue';
 export default {
-  components: {Sidebar},
+  components: {Sidebar, NavBar},
   props: {
     navbar: {
       type: Boolean,

apps/ui/assets/main.css

@@ -0,0 +1,47 @@
+@import "mie.css";
+
+:root {
+  --sidebar-width: 600px;
+  --navbar-height: 60px;
+}
+
+/**
+ * Body CSS
+ */
+html,
+body,
+#app, #main {
+  height: 100%;
+}
+
+#main {
+  display: flex;
+  flex-direction: column;
+}
+
+nav {
+  /*height: var(--navbar-height);*/
+  /*max-height: 60px;*/
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  background-color: #2196F3;
+  color: #FFF;
+}
+
+.navbar {
+  min-height: var(--navbar-height);
+  padding: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Autolinker */
+
+.token a {
+  color: inherit;
+}
+
+pre[class*=language-] {
+  margin-top: 0 !important;
+}

src/containers/server/static/assets/main.mjs → apps/ui/assets/main.mjs

@@ -4,26 +4,10 @@ import {FileClientService} from './services/FileClientService.mjs';
 import {DriveClientService} from './services/DriveClientService.mjs';
 import {GitClientService} from './services/GitClientService.mjs';
 
-const {loadModule} = window['vue3-sfc-loader'];
+import * as Vue from 'vue';
+import * as VueRouter from 'vue-router';
 
-const options = {
-  moduleCache: {
-    vue: Vue
-  },
-  async getFile(url) {
-    const res = await fetch(url);
-    if (!res.ok)
-      throw Object.assign(new Error(res.statusText + ' ' + url), {res});
-    return {
-      getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
-    };
-  },
-  addStyle(textContent) {
-    const style = Object.assign(document.createElement('style'), {textContent});
-    const ref = document.head.getElementsByTagName('style')[0] || null;
-    document.head.insertBefore(style, ref);
-  }
-};
+import App from './App.vue';
 
 const app = Vue.createApp({
   data: {
@@ -32,7 +16,7 @@ const app = Vue.createApp({
     changes: []
   },
   components: {
-    'App': Vue.defineAsyncComponent(() => loadModule('/assets/App.vue', options))
+    'App': App
   },
   template: '<App />',
   methods: {
@@ -64,44 +48,44 @@ const router = new VueRouter.createRouter({
     {
       path: '/drive/',
       name: 'drives',
-      component: Vue.defineAsyncComponent(() => loadModule('/assets/pages/DrivesView.vue', options)),
+      component: () => import('./pages/DrivesView.vue'),
     },
     {
       path: '/drive/:driveId*',
       name: 'drive',
-      component: Vue.defineAsyncComponent(() => loadModule('/assets/pages/FolderView.vue', options))
+      component: () => import('./pages/FolderView.vue')
     },
     {
       path: '/gdocs/:driveId/:fileId',
       name: 'gdocs',
-      component: Vue.defineAsyncComponent(() => loadModule('/assets/pages/GDocsView.vue', options))
+      component: () => import('./pages/GDocsView.vue')
     },
     {
       path: '/logs',
       name: 'logs',
-      component: Vue.defineAsyncComponent(() => loadModule('/assets/pages/LogsView.vue', options))
+      component: () => import('./pages/LogsView.vue')
     },
     {
       path: '/',
-      component: Vue.defineAsyncComponent(() => loadModule('/assets/pages/MainView.vue', options))
+      component: () => import('./pages/MainView.vue')
     },
     {
       path: '/:pathMatch(.*)*',
       name: 'NotFound',
-      component: Vue.defineAsyncComponent(() => loadModule('/assets/pages/NotFound.vue', options))
+      component: () => import('./pages/NotFound.vue')
     }
   ]
 });
 
-
 app.use(router);
 
 const vm = app.mount('#app');
 
-router.beforeEach(async (to, from) => {
+router.beforeEach(async (to, from, next) => {
   const toDriveId = Array.isArray(to.params?.driveId) ? to.params.driveId[0] : to.params.driveId;
   const fromDriveId = Array.isArray(from.params?.driveId) ? from.params.driveId[0] : from.params.driveId;
   if (toDriveId !== fromDriveId) {
     await vm.changeDrive(toDriveId);
   }
+  next();
 });

src/containers/server/static/assets/mie.css → apps/ui/assets/mie.css

@@ -2,16 +2,14 @@ a {
   text-decoration: none;
 }
 
-nav {
-  height: 60px;
-  max-height: 60px;
-  justify-content: space-between;
-}
-
 .h-100 {
   height: 100%;
 }
 
+.navbar-nav {
+  flex-direction: row;
+}
+
 .wgd-nav-item svg {
   max-height: 60px;
   pointer-events: none;
@@ -31,7 +29,7 @@ nav {
 }
 
 .wgd-nav-item.active {
-  background: url("./tab.svg") no-repeat 50% 100%;
+  background: url("tab.svg") no-repeat 50% 100%;
   color: #000;
 }
 .wgd-nav-item > a {

src/containers/server/static/assets/pages/DrivesView.vue → apps/ui/assets/pages/DrivesView.vue

@@ -1,11 +1,5 @@
 <template>
   <BaseLayout :sidebar="false">
-    <template v-slot:navbar>
-      <nav class="bg-primary">
-        <span class="navbar-brand">WikiGDrive</span>
-      </nav>
-    </template>
-
     <template v-slot:default>
       <div class="container">
         <table class="table table-hover table-clickable" v-if="drives && drives.length > 0">

src/containers/server/static/assets/pages/FolderView.vue → apps/ui/assets/pages/FolderView.vue

@@ -1,13 +1,9 @@
 <template>
   <BaseLayout :sidebar="!notRegistered" :share-email="shareEmail">
     <template v-slot:navbar>
-      <nav class="bg-primary navbar-dark">
-        <router-link v-if="rootFolder.name" class="navbar-brand d-none d-md-inline" :to="{ name: 'drive', params: {driveId} }">{{ rootFolder.name }}</router-link>
-        <span class="navbar-brand" v-else>
-          WikiGDrive
-        </span>
+      <NavBar>
         <NavTabs :folder-path="folderPath" :activeTab="activeTab" :selectedFile="selectedFile" @sync="syncSingle" />
-      </nav>
+      </NavBar>
     </template>
 
     <template v-slot:sidebar>
@@ -48,10 +44,12 @@ import UserConfig from '../components/UserConfig.vue';
 import GitLog from '../components/GitLog.vue';
 import GitCommit from '../components/GitCommit.vue';
 import DriveTools from '../components/DriveTools.vue';
+import NavBar from '../components/NavBar.vue';
 
 export default {
   name: 'FolderView',
   components: {
+    NavBar,
     DriveTools,
     NavTabs,
     NotRegistered,
@@ -93,6 +91,7 @@ export default {
       this.activeTab = this.$route.hash.replace(/^#/, '') || DEFAULT_TAB;
     },
     async active_jobs() {
+      console.log(JSON.stringify(this.jobs));
       await this.fetch();
     }
   },

src/containers/server/static/assets/pages/GDocsView.vue → apps/ui/assets/pages/GDocsView.vue

@@ -1,9 +1,9 @@
 <template>
   <BaseLayout :sidebar="false" :share-email="shareEmail">
     <template v-slot:navbar>
-      <nav class="bg-primary navbar-dark">
+      <NavBar>
         <NavTabs :folder-path="folderPath" :activeTab="activeTab" :selectedFile="selectedFile" @sync="syncSingle" />
-      </nav>
+      </NavBar>
     </template>
 
     <template v-slot:default>
@@ -34,6 +34,7 @@ import {UtilsMixin} from '../components/UtilsMixin.mjs';
 import FilePreview from '../components/FilePreview.vue';
 import ImagePreview from '../components/ImagePreview.vue';
 import NotRegistered from './NotRegistered.vue';
+import NavBar from '../components/NavBar.vue';
 import NavTabs from '../components/NavTabs.vue';
 import DriveTools from '../components/DriveTools.vue';
 import LogsViewer from '../components/LogsViewer.vue';
@@ -46,6 +47,7 @@ export default {
   name: 'GDocsView',
   mixins: [UtilsMixin, UiMixin],
   components: {
+    NavBar,
     NavTabs,
     FilePreview,
     ImagePreview,