refactor: build dashboard with vite

dashboard/src/api.ts

@@ -1,5 +1,5 @@
 import { RootStore } from "./store";
-const apiUrl = process.env.API_URL;
+const apiUrl = window.API_URL;
 
 type QueryParamObject = { [key: string]: string | null };
 

dashboard/src/components/Expandable.vue

@@ -20,7 +20,7 @@
 </template>
 
 <style scoped>
-  @import "../style/components.pcss";
+  @reference "../style/app.css";
 
   .expandable {
     --animation-time: 400ms;

dashboard/src/components/PrivacyPolicy.vue

@@ -87,6 +87,6 @@
 </template>
 
 <script type="ts">
-  import "../style/privacy-policy.pcss";
+  import "../style/privacy-policy.css";
   export default {};
 </script>

dashboard/src/components/Tab.vue

@@ -5,6 +5,8 @@
 </template>
 
 <style scoped>
+  @reference "../style/app.css";
+
   li {
     padding-bottom: 1px;
 
@@ -26,7 +28,7 @@
     }
   }
 
-  .active a {
+  .active :deep(a) {
     @apply text-gray-200;
   }
 </style>

dashboard/src/components/dashboard/GuildConfigEditor.vue

@@ -25,7 +25,7 @@
                lang="yaml"
                theme="tomorrow_night"
                ref="aceEditor"
-               v-options="{
+               :options="{
                   useSoftTabs: true,
                   tabSize: 2
                 }"

dashboard/src/components/dashboard/GuildInfo.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>Guild Info</h1>
     <p>
-      <img class="inline-block w-16 mr-4" style="vertical-align: -20px" src="../../img/squint.png"> What are you doing here
+      <img class="inline-block w-16 mr-4" style="vertical-align: -20px" src="/img/squint.png"> What are you doing here
     </p>
   </div>
 </template>

dashboard/src/components/dashboard/Layout.vue

@@ -4,7 +4,7 @@
 
     <nav class="flex items-stretch flex-wrap pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
       <div class="flex-full md:flex-initial flex items-center">
-        <img class="w-10 mr-5" :src="logoUrl" alt="" aria-hidden="true">
+        <img class="w-10 mr-5" src="/img/logo.png" alt="" aria-hidden="true">
 
         <router-link to="/dashboard">
           <h1 class="font-semibold">Zeppelin Dashboard</h1>
@@ -48,7 +48,6 @@
 
 <script>
   import Title from "../Title.vue";
-  import logoUrl from "../../img/logo.png";
 
   export default {
     components: {
@@ -60,8 +59,5 @@
         window.location.pathname = '/';
       }
     },
-    data() {
-      return { logoUrl };
-    },
   };
 </script>

dashboard/src/components/docs/ArgumentTypes.vue

@@ -104,8 +104,8 @@
 </template>
 
 <script>
-  import CodeBlock from "./CodeBlock";
-  import Expandable from "../Expandable";
+  import CodeBlock from "./CodeBlock.vue";
+  import Expandable from "../Expandable.vue";
 
   export default {
     components: {

dashboard/src/components/docs/Counters.vue

@@ -346,8 +346,8 @@
 </template>
 
 <script>
-import CodeBlock from "./CodeBlock";
-import Expandable from "../Expandable";
+import CodeBlock from "./CodeBlock.vue";
+import Expandable from "../Expandable.vue";
 
 export default {
   components: { CodeBlock, Expandable },

dashboard/src/components/docs/DocsLayout.vue

@@ -5,7 +5,7 @@
     <!-- 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="logoUrl" alt="" aria-hidden="true">
+        <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>
@@ -27,9 +27,9 @@
     <a class="sr-only-when-not-focused text-center block py-2" href="#main-anchor">Skip to main content</a>
 
     <!-- Content wrapper -->
-    <div class="flex flex-wrap items-start mt-8">
+    <div class="flex flex-wrap lg:flex-nowrap items-start mt-8 gap-8">
       <!-- Sidebar -->
-      <nav class="docs-sidebar px-4 pt-2 pb-3 mr-8 mb-4 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block" v-bind:class="{ closed: !mobileMenuOpen }">
+      <nav class="docs-sidebar px-4 pt-2 pb-3 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block" v-bind:class="{ closed: !mobileMenuOpen }">
         <div role="none" v-for="(group, index) in menu">
           <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': typeof index === 'number' && index !== 0}">{{ group.label }}</h1>
           <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
@@ -41,7 +41,7 @@
       </nav>
 
       <!-- Content -->
-      <main class="docs-content main-content flex-flexible overflow-x-hidden">
+      <main class="docs-content main-content flex-auto overflow-x-hidden">
         <a id="main-anchor" ref="main-anchor" tabindex="-1" class="sr-only"></a>
         <router-view :key="$route.fullPath"></router-view>
       </main>
@@ -53,7 +53,6 @@
   import {mapState} from "vuex";
   import Menu from 'vue-material-design-icons/Menu.vue';
   import Title from "../Title.vue";
-  import logoUrl from "../../img/logo.png";
 
   type TMenuItem = {
     to: string;
@@ -132,12 +131,12 @@
     data() {
       return {
         mobileMenuOpen: false,
-        logoUrl,
       };
     },
 
     methods: {
       toggleMobileMenu() {
+        console.log('hi');
         this.mobileMenuOpen = !this.mobileMenuOpen;
       },
 

dashboard/src/components/docs/Permissions.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script>
-  import CodeBlock from "./CodeBlock";
+  import CodeBlock from "./CodeBlock.vue";
 
   export default {
     components: { CodeBlock },

dashboard/src/components/docs/Plugin.vue

@@ -9,7 +9,7 @@
     <MarkdownBlock :content="data.info.description" class="content"></MarkdownBlock>
 
     <div v-if="data.info.type === 'legacy'">
-      <div class="px-3 py-2 mb-4 rounded bg-gray-800 shadow-md inline-block flex">
+      <div class="px-3 py-2 mb-4 rounded bg-gray-800 shadow-md flex">
         <div class="flex-none mr-2">
           <alert class="inline-icon mr-1 text-yellow-300" />
         </div>
@@ -163,6 +163,8 @@
 </template>
 
 <style scoped>
+  @reference "../../style/app.css";
+
   .command.target {
     @apply mt-5 mb-3;
     @apply pt-2 pb-2 pl-4 pr-4;
@@ -174,7 +176,6 @@
 </style>
 
 <script lang="ts">
-  import Vue from "vue";
   import {mapState} from "vuex";
   import yaml from "js-yaml";
   import CodeBlock from "./CodeBlock.vue";

dashboard/src/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Zeppelin - Moderation bot for Discord</title>
-  </head>
-  <body>
-    <noscript>
-      <h1>Zeppelin</h1>
-      The Zeppelin website requires JavaScript to load.
-    </noscript>
-
-    <div id="app"></div>
-  </body>
-</html>

dashboard/src/init-vue.ts

@@ -1,4 +1,4 @@
-import "./style/app.pcss";
+import "./style/app.css";
 
 import { createApp } from "vue";
 

dashboard/src/main.ts

@@ -1,5 +1,5 @@
-import "./style/initial.pcss";
-const splashHtml = require("./splash.html");
+import "./style/initial.css";
+import splashHtml from "./splash.html";
 
 if (window.location.pathname !== "/") {
   import("./init-vue");

dashboard/src/splash.html

@@ -2,7 +2,7 @@
   <div id="error"></div>
   <div class="wrapper">
     <div class="logo-column">
-      <img class="logo" src="./img/logo.png" alt="Zeppelin Logo" />
+      <img class="logo" src="/img/logo.png" alt="Zeppelin Logo" />
     </div>
     <div class="info-column">
       <h1>Zeppelin</h1>

dashboard/src/style/app.css

@@ -1,13 +1,10 @@
-@import "~tailwindcss/base.css";
-@import "~tailwindcss/components.css";
-@import "~tailwindcss/utilities.css";
+@import "tailwindcss";
 
-@import "~vue-material-design-icons/styles.css";
+@import "vue-material-design-icons/styles.css";
 
-@import "components.pcss";
-@import "content.pcss";
+@import "./content.css";
 
-@import "docs.pcss";
+@import "./docs.css";
 
 /* Reset some icon default styles for more predictable alignment */
 .material-design-icon > .material-design-icon__svg {

dashboard/src/style/content.css

@@ -1,3 +1,5 @@
+@import "./components.css";
+
 .main-content {
   & h1 {
     @apply text-3xl;
@@ -25,7 +27,12 @@
 
   & a:not([class]),
   & a[class=""] {
-    @apply link;
+    @apply text-blue-400;
+    @apply underline;
+
+    &:hover {
+      @apply text-blue-200;
+    }
   }
 
   & ul:not([class]) {
@@ -47,7 +54,11 @@
   }
 
   & code:not([class]) {
-    @apply inline-code;
+    @apply inline-block;
+    @apply bg-gray-800;
+    @apply px-1;
+    @apply rounded;
+    @apply text-sm;
   }
 
   & .expandable:not(.wide) {

dashboard/src/style/docs.css

@@ -4,7 +4,7 @@
   }
 }
 
-@screen until-lg {
+@media (width < theme(--breakpoint-lg)) {
   .docs-sidebar.closed:not(:focus-within) {
       @apply sr-only;
   }

dashboard/src/style/initial.css

@@ -0,0 +1,3 @@
+@import "./reset.css";
+@import "./base.css";
+@import "./splash.css";

dashboard/src/style/initial.pcss

@@ -1,3 +0,0 @@
-@import "./reset.pcss";
-@import "./base.pcss";
-@import "./splash.pcss";

dashboard/src/style/reset.css

@@ -0,0 +1,50 @@
+@layer base {
+  /* Box sizing rules */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Remove default padding */
+  ul,
+  ol {
+    padding: 0;
+  }
+
+  /* Remove default margin */
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  ul,
+  ol,
+  li,
+  figure,
+  figcaption,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  /* Remove all animations and transitions for people that prefer not to see them */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

dashboard/src/style/reset.pcss

@@ -1,48 +0,0 @@
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Remove default padding */
-ul,
-ol {
-  padding: 0;
-}
-
-/* Remove default margin */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-ul,
-ol,
-li,
-figure,
-figcaption,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Remove all animations and transitions for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}

dashboard/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.html' {
+  const value: string;
+  export default value;
+}