Start integrating Hugo in the new plugin

Former-commit-id: dcc6bd82b3d3a89637a1032aad1a25d0b1f80046 [formerly 8784cd37bf58e81cdbe1bcec00e6f16b58efc915] [formerly 9e25850e063ae0825de337d5d5f29cee601b9040 [formerly 8b1d36dfb9ebfa001ddeef98034bb5a73d135c94]]
Former-commit-id: 04a38bea2d141093570d9289d0d0a056a136fe8a [formerly 5995538504889e698aa6cd35b7da40c38b5d5ddf]
Former-commit-id: 8c81a0b060167e1a2983a99bc87b380838ac07dc

assets/src/components/Editor.vue

@@ -48,6 +48,7 @@ export default {
       lineNumbers: (this.req.language !== 'markdown'),
       viewportMargin: Infinity,
       autofocus: true,
+      mode: this.req.language,
       theme: (this.req.language === 'markdown') ? 'markdown' : 'ttcn',
       lineWrapping: (this.req.language === 'markdown')
     })
@@ -66,7 +67,8 @@ export default {
       value: this.req.metadata,
       viewportMargin: Infinity,
       lineWrapping: true,
-      theme: 'markdown'
+      theme: 'markdown',
+      mode: this.metalang
     })
 
     CodeMirror.autoLoadMode(this.metadata, this.metalang)

assets/src/components/Header.vue

@@ -16,6 +16,20 @@
         <i class="material-icons" title="Save">save</i>
       </button>
 
+      <div v-for="plugin in plugins" :key="plugin.name">
+        <button class="action"
+          v-for="action in plugin.header.visible"
+          v-if="action.if(pluginData, $route)"
+          @click="action.click($event, pluginData, $route)"
+          :aria-label="action.name"
+          :id="action.id"
+          :title="action.name"
+          :key="action.name">
+          <i class="material-icons">{{ action.icon }}</i>
+          <span>{{ action.name }}</span>
+        </button>
+      </div>
+
       <button @click="openMore" id="more" aria-label="More" title="More" class="action">
         <i class="material-icons">more_vert</i>
       </button>
@@ -36,6 +50,20 @@
           <delete-button v-show="showDeleteButton"></delete-button>
         </div>
 
+        <div v-for="plugin in plugins" :key="plugin.name">
+          <button class="action"
+            v-for="action in plugin.header.hidden"
+            v-if="action.if(pluginData, $route)"
+            @click="action.click($event, pluginData, $route)"
+            :id="action.id"
+            :aria-label="action.name"
+            :title="action.name"
+            :key="action.name">
+            <i class="material-icons">{{ action.icon }}</i>
+            <span>{{ action.name }}</span>
+          </button>
+        </div>
+
         <switch-button v-show="showSwitchButton"></switch-button>
         <download-button v-show="showCommonButton"></download-button>
         <upload-button v-show="showUpload"></upload-button>
@@ -61,6 +89,8 @@ import DownloadButton from './buttons/Download'
 import SwitchButton from './buttons/SwitchView'
 import MoveButton from './buttons/Move'
 import {mapGetters, mapState} from 'vuex'
+import api from '@/utils/api'
+import buttons from '@/utils/buttons'
 
 export default {
   name: 'main',
@@ -76,7 +106,13 @@ export default {
   },
   data: function () {
     return {
-      width: window.innerWidth
+      width: window.innerWidth,
+      pluginData: {
+        api,
+        buttons,
+        'store': this.$store,
+        'router': this.$router
+      }
     }
   },
   created () {
@@ -93,7 +129,8 @@ export default {
       'user',
       'loading',
       'reload',
-      'multiple'
+      'multiple',
+      'plugins'
     ]),
     isMobile () {
       return this.width <= 736

assets/src/components/Sidebar.vue

@@ -17,8 +17,8 @@
       </button>
     </div>
 
-    <div v-for="plugin in plugins">
-      <button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" :key="action.name" class="action">
+    <div v-for="plugin in plugins" :key="plugin.name">
+      <button v-for="action in plugin.sidebar" @click="action.click($event, pluginData, $route)" :aria-label="action.name" :title="action.name" :key="action.name" class="action">
         <i class="material-icons">{{ action.icon }}</i>
         <span>{{ action.name }}</span>
       </button>
@@ -36,32 +36,38 @@
       </button>
     </div>
 
-    <p class="credits">Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.<br><a @click="help">Help</a></p>
+    <p class="credits">
+      <span>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</span>
+      <span v-for="plugin in plugins" :key="plugin.name" v-html="plugin.credits"><br></span>
+      <span><a @click="help">Help</a></span>
+    </p>
   </nav>
 </template>
 
 <script>
 import {mapState} from 'vuex'
 import auth from '@/utils/auth'
+import buttons from '@/utils/buttons'
+import api from '@/utils/api'
 
 export default {
   name: 'sidebar',
-  data: () => {
+  data: function () {
     return {
-      plugins: []
+      pluginData: {
+        api,
+        buttons,
+        'store': this.$store,
+        'router': this.$router
+      }
     }
   },
   computed: {
-    ...mapState(['user']),
+    ...mapState(['user', 'plugins']),
     active () {
       return this.$store.state.show === 'sidebar'
     }
   },
-  mounted () {
-    if (window.plugins !== undefined || window.plugins !== null) {
-      this.plugins = window.plugins
-    }
-  },
   methods: {
     help: function () {
       this.$store.commit('showHover', 'help')

assets/src/components/prompts/Prompts.vue

@@ -11,6 +11,26 @@
     <error v-else-if="showError"></error>
     <success v-else-if="showSuccess"></success>
 
+    <template v-for="plugin in plugins">
+      <form class="prompt"
+        v-for="prompt in plugin.prompts"
+        :key="prompt.name"
+        v-if="show === prompt.name"
+        @submit="prompt.submit($event, pluginData, $route)">
+        <h3>{{ prompt.title }}</h3>
+        <p>{{ prompt.description }}</p>
+        <input v-for="input in prompt.inputs"
+          :key="input.name"
+          :type="input.type"
+          :name="input.name"
+          :placeholder="input.placeholder">
+        <div>
+          <input type="submit" class="ok" :value="prompt.ok">
+          <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
+        </div>
+      </form>
+    </template>
+
     <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
@@ -27,6 +47,8 @@ import Success from './Success'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
 import { mapState } from 'vuex'
+import buttons from '@/utils/buttons'
+import api from '@/utils/api'
 
 export default {
   name: 'prompts',
@@ -42,8 +64,18 @@ export default {
     NewDir,
     Help
   },
+  data: function () {
+    return {
+      pluginData: {
+        api,
+        buttons,
+        'store': this.$store,
+        'router': this.$router
+      }
+    }
+  },
   computed: {
-    ...mapState(['show']),
+    ...mapState(['show', 'plugins']),
     showError: function () { return this.show === 'error' },
     showSuccess: function () { return this.show === 'success' },
     showInfo: function () { return this.show === 'info' },