Update dashboard side to tailwindcss

dashboard/src/components/docs/DocsLayout.vue

@@ -1,46 +1,47 @@
 <template>
-  <div class="docs">
-    <div class="container mx-auto px-4 py-2">
-      <!-- Top bar -->
-      <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
-        <div class="flex-initial flex items-center">
-          <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
-          <h1 class="flex-auto">Zeppelin Documentation</h1>
-        </div>
-        <div class="flex-1 flex items-center justify-end">
-          <router-link
-            to="/dashboard"
-            role="menuitem"
-            class="py-1 px-2 rounded hover:bg-gray-700">
-            Go to dashboard
-          </router-link>
+  <div class="docs container mx-auto px-4 py-2">
+    <!-- Top bar -->
+    <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
+      <div class="flex-initial flex items-center">
+        <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
+
+        <router-link to="/docs">
+          <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
+        </router-link>
+      </div>
+      <div class="flex-1 flex items-center justify-end">
+        <router-link
+          to="/dashboard"
+          role="menuitem"
+          class="py-1 px-2 rounded hover:bg-gray-700">
+          Go to dashboard
+        </router-link>
+      </div>
+    </nav>
+
+    <!-- WIP bar -->
+    <div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
+      <i class="mdi mdi-alert mr-1" title="Note"></i>
+      This documentation is a work in progress.
+    </div>
+
+    <!-- Content wrapper -->
+    <div class="flex items-start mt-8">
+      <!-- Sidebar -->
+      <nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
+        <div role="none" v-for="(group, index) in menu">
+          <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
+          <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
+            <li role="none" v-for="item in group.items">
+              <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
+            </li>
+          </ul>
         </div>
       </nav>
 
-      <!-- WIP bar -->
-      <div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
-        <i class="mdi mdi-alert mr-1" title="Note"></i>
-        This documentation is a work in progress.
-      </div>
-
-      <!-- Content wrapper -->
-      <div class="flex items-start mt-8">
-        <!-- Sidebar -->
-        <nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
-          <div role="none" v-for="(group, index) in menu">
-            <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
-            <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
-              <li role="none" v-for="item in group.items">
-                <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
-              </li>
-            </ul>
-          </div>
-        </nav>
-
-        <!-- Content -->
-        <div class="docs-content flex-auto overflow-x-hidden">
-          <router-view :key="$route.fullPath"></router-view>
-        </div>
+      <!-- Content -->
+      <div class="docs-content main-content flex-auto overflow-x-hidden">
+        <router-view :key="$route.fullPath"></router-view>
       </div>
     </div>
   </div>

dashboard/src/components/docs/MarkdownBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="rendered"></div>
+  <div class="markdown-block" ref="rendered"></div>
 </template>
 
 <script>

dashboard/src/components/docs/Plugin.vue

@@ -46,7 +46,7 @@
             <code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
           </div>
 
-          <MarkdownBlock v-if="command.config.info && command.config.info.description" :content="command.config.info.description" class="content mb-4"></MarkdownBlock>
+          <MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.description" :content="command.config.extra.info.description" class="content"></MarkdownBlock>
 
           <Expandable class="mt-4">
             <template v-slot:title>Additional information</template>
@@ -54,7 +54,7 @@
               Signatures:
               <ul>
                 <li>
-                  <code>
+                  <code class="inline-code bg-gray-900">
                     !{{ command.trigger }}
                     <span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
                   </code>
@@ -77,7 +77,7 @@
 
               <div class="mt-2" v-if="command.config.options && command.config.options.length">
                 Options:
-                <ul class="z-list z-ul">
+                <ul>
                   <li v-for="opt in command.config.options">
                     <code>{{ renderOption(opt) }}</code>
                     <router-link :to="'/docs/reference/argument-types#' + (opt.type || 'string')">{{ opt.type || 'string' }}</router-link>