Work on documentation

dashboard/package-lock.json

@@ -4253,6 +4253,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.15.8",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.8.tgz",
+      "integrity": "sha512-RrapkKQWwE+wKdF73VsOa2RQdIoO3mxwJ4P8mhbI6KYJUraUHRKM5w5zQQKXNk0xNL4UVRdulV9SBJcmzJNzVA=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -7578,6 +7583,14 @@
         "diff-match-patch": "^1.0.0"
       }
     },
+    "vue-highlightjs": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz",
+      "integrity": "sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=",
+      "requires": {
+        "highlight.js": "*"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",

dashboard/package.json

@@ -22,6 +22,7 @@
     "js-cookie": "^2.2.0",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
+    "vue-highlightjs": "^1.3.3",
     "vue-hot-reload-api": "^2.3.3",
     "vue-router": "^3.0.6"
   },

dashboard/src/components/Dashboard/GuildConfigEditor.vue

@@ -35,7 +35,7 @@
   import "codemirror/lib/codemirror.css";
   import "codemirror/theme/oceanic-next.css";
   import "codemirror/mode/yaml/yaml.js";
-  import {ApiError} from "../api";
+  import {ApiError} from "../../api";
 
   export default {
     components: {

dashboard/src/components/Dashboard/Layout.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="dashboard">
+	<div class="dashboard dashboard-cloak">
     <nav class="navbar" role="navigation" aria-label="main navigation">
       <div class="container">
         <div class="navbar-brand">
           <div class="navbar-item">
-            <img class="dashboard-logo" src="../img/logo.png" aria-hidden="true">
+            <img class="dashboard-logo" src="../../img/logo.png" alt="" aria-hidden="true">
             <h1 class="dashboard-title">Zeppelin Dashboard</h1>
           </div>
         </div>
@@ -28,6 +28,11 @@
 </template>
 
 <style scoped>
+  .dashboard-cloak {
+    /* Replaced by "visible" in dashboard.scss */
+    visibility: hidden;
+  }
+
   .dashboard-logo {
     margin-right: 12px;
   }
@@ -40,7 +45,7 @@
 <script>
   export default {
     async mounted() {
-      await import("../style/dashboard.scss");
+      await import("../../style/dashboard.scss");
     },
     methods: {
       async logout() {

dashboard/src/components/Docs/CodeBlock.vue

@@ -0,0 +1,21 @@
+<template>
+  <pre class="codeblock" v-highlightjs><code v-bind:class="lang" v-trim-code="trim"><slot></slot></code></pre>
+</template>
+
+<style scoped>
+  .codeblock {
+    padding: 0;
+    border-radius: 3px;
+  }
+
+  .hljs {
+    background: transparent;
+    padding: 16px;
+  }
+</style>
+
+<script>
+  export default {
+    props: ["lang", "trim"],
+  };
+</script>

dashboard/src/components/Docs/ConfigurationFormat.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h1>Configuration format</h1>
+    <p>
+      This is the basic format of the bot configuration for a guild. The basic breakdown is:
+    </p>
+    <ol>
+      <li>Prefix (i.e. what character is preceding each command)</li>
+      <li>Permission levels (see <router-link to="/docs/permissions">Permissions</router-link> for more info)</li>
+      <li>Plugin-specific configuration (see <router-link to="/docs/plugin-configuration">Plugin configuration</router-link> for more info)</li>
+    </ol>
+    <CodeBlock lang="yaml" trim="4">
+      prefix: "!"
+
+      # role id: level
+      levels:
+        "172949857164722176": 100 # Example admin
+        "172950000412655616": 50 # Example mod
+
+      plugins:
+        mod_plugin:
+          config:
+            kick_message: 'You have been kicked'
+            can_kick: false
+          overrides:
+            - level: '>=50'
+              config:
+                can_kick: true
+            - level: '>=100'
+              config:
+                kick_message: 'You have been kicked by an admin'
+    </CodeBlock>
+  </div>
+</template>
+
+<script>
+  import CodeBlock from "./CodeBlock";
+
+  export default {
+    components: { CodeBlock },
+  };
+</script>

dashboard/src/components/Docs/Introduction.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Introduction</h1>
+    <p>
+      Zeppelin is a private moderation bot for Discord, designed with large servers and reliability in mind.
+    </p>
+
+    <h2>Getting the bot</h2>
+    <p>
+      Since the bot is currently private, access to the bot is granted on a case by case basis.<br>
+      There are plans to streamline this process in the future.
+    </p>
+
+    <h2>Configuration</h2>
+    <p>
+      All Zeppelin configuration is done through the dashboard by editing a YAML config file. By default, only the server
+      owner has access to this, but they can give other users access as they see fit. See <router-link to="/docs/configuration-format">Configuration format</router-link> for more details.
+    </p>
+  </div>
+</template>

dashboard/src/components/Docs/Layout.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="docs docs-cloak">
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+      <div class="container">
+        <div class="navbar-brand">
+          <div class="navbar-item">
+            <img class="docs-logo" src="../../img/logo.png" alt="" aria-hidden="true">
+            <h1 class="docs-title">Zeppelin Documentation</h1>
+          </div>
+        </div>
+
+        <div class="navbar-menu is-active">
+          <div class="navbar-end">
+            <router-link to="/dashboard" class="navbar-item">Go to dashboard</router-link>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div class="wrapper">
+      <div class="docs-sidebar">
+        <div class="docs-sidebar-content">
+          <aside class="menu">
+            <p class="menu-label">General</p>
+            <ul class="menu-list">
+              <li><router-link to="/docs">Introduction</router-link></li>
+              <li><router-link to="/docs/configuration-format">Configuration format</router-link></li>
+              <li><router-link to="/docs/plugin-configuration">Plugin configuration</router-link></li>
+              <li><router-link to="/docs/permissions">Permissions</router-link></li>
+            </ul>
+
+            <p class="menu-label">Plugins</p>
+            <ul class="menu-list">
+              <li><a>Blah</a></li>
+              <li><a>Bloh</a></li>
+            </ul>
+          </aside>
+        </div>
+      </div>
+      <div class="docs-main content">
+        <router-view></router-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .docs-cloak {
+    /* Replaced by "visible" in docs.scss */
+    visibility: hidden;
+  }
+
+  .docs {
+    width: 100%;
+    max-width: 1280px;
+    margin: 20px auto;
+  }
+
+  .navbar {
+    border: 1px solid #4e5d6c;
+    border-radius: 3px;
+    margin-bottom: 24px;
+    padding: 0 16px;
+  }
+
+  .docs-logo {
+    margin-right: 12px;
+  }
+
+  .docs-title {
+    font-weight: 600;
+  }
+
+  .wrapper {
+    display: flex;
+  }
+
+  .docs-sidebar {
+    flex: 0 0 280px;
+  }
+
+  .docs-sidebar-content {
+    position: sticky;
+    top: 20px;
+  }
+
+  .docs-sidebar .menu {
+    padding: 12px 16px;
+    border: 1px solid #4e5d6c;
+    background-color: #2b3e50;
+    border-radius: 3px;
+  }
+
+  .docs-sidebar .menu-label {
+    font-weight: 600;
+  }
+
+  .docs-main {
+    flex: 1 1 100%;
+    padding: 0 24px 24px;
+  }
+
+  .docs-main >>> h4 {
+    margin-top: 1.25em; /* ? */
+  }
+</style>
+
+<script>
+  import Vue from "vue";
+  import VueHighlightJS from "vue-highlightjs";
+  import "../../directives/trim-code";
+  import "highlight.js/styles/ocean.css";
+
+  Vue.use(VueHighlightJS);
+
+  export default {
+    async mounted() {
+      await import("../../style/docs.scss");
+    },
+  };
+</script>

dashboard/src/components/Docs/Permissions.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <h1>Permissions</h1>
+    <p>
+      Permissions in Zeppelin are simply values in plugin configuration that are checked when the command is used.
+      These values can be changed with overrides (see <router-link to="/docs/plugin-configuration">Plugin configuration</router-link> for more info)
+      and can depend on e.g. user id, role id, channel id, category id, or <strong>permission level</strong>.
+    </p>
+
+    <h2>Permission levels</h2>
+    <p>
+      The simplest way to control access to bot commands and features is via permission levels.
+      These levels are simply a number (usually between 0 and 100), based on the user's roles or user id, that can then
+      be used in permission overrides. By default, several commands are "moderator only" (level 50 and up) or "admin only" (level 100 and up).
+    </p>
+    <p>
+      Additionally, having a higher permission level means that certain commands (such as !ban) can't be used against
+      you by users with a lower or equal permission level (so e.g. moderators can't ban each other or admins above them).
+    </p>
+    <p>
+      Permission levels are defined in the config in the <strong>levels</strong> section. For example:
+    </p>
+
+    <CodeBlock lang="yaml" trim="4">
+      # "role/user id": level
+      levels:
+        "172949857164722176": 100 # Example admin
+        "172950000412655616": 50 # Example mod
+    </CodeBlock>
+
+    <h2>Examples</h2>
+
+    <h3>Basic overrides</h3>
+    <p>
+      For this example, let's assume we have a plugin called <code>cats</code> which has a command <code>!cat</code> locked behind the permission <code>can_cat</code>.
+      Let's say that by default, the plugin allows anyone to use <code>!cat</code>, but we want to restrict it to moderators only.
+    </p>
+    <p>
+      Here's what the configuration for this would look like:
+    </p>
+
+    <CodeBlock lang="yaml" trim="4">
+      plugins:
+        cats:
+          config:
+            can_cat: false # Here we set the permission false by default
+          overrides:
+            # In this override, can_cat is changed to "true" for anyone with a permission level of 50 or higher
+            - level: ">=50"
+              config:
+                can_cat: true
+    </CodeBlock>
+
+    <h3>Replacing defaults</h3>
+    <p>
+      In this example, let's assume you don't want to use the default permission levels of 50 and 100 for mods and admins respectively.
+      Let's say you're using various incremental levels instead: 10, 20, 30, 40, 50...<br>
+      We want to make it so moderator commands are available starting at level 70.
+      Additionally, we'd like to reserve banning for levels 90+ only.
+      To do this, we need to <strong>replace</strong> the default overrides that enable moderator commands at level 50.
+    </p>
+    <p>
+      Here's what the configuration for this would look like:
+    </p>
+
+    <CodeBlock lang="yaml" trim="4">
+      plugins:
+        mod_actions:
+          =overrides: # The "=" here means "replace any defaults"
+            - level: ">=70"
+              config:
+                can_warn: true
+                can_mute: true
+                can_kick: true
+            - level: ">=90"
+              config:
+                can_ban: true
+    </CodeBlock>
+  </div>
+</template>
+
+<script>
+  import CodeBlock from "./CodeBlock";
+
+  export default {
+    components: { CodeBlock },
+  };
+</script>

dashboard/src/components/Docs/PluginConfiguration.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <h1>Plugin configuration</h1>
+    <p>
+      Each plugin in Zeppelin has its own configuration options. In the config editor, you can both set the default config
+      and overrides based on specific conditions. Permissions are also just values in the plugin's config, and thus follow
+      the same rules with overrides etc. as other options (see <router-link to="/docs/permissions">Permissions</router-link> for more info).
+    </p>
+    <p>
+      Information about each plugin's options can be found on the plugin's page on the sidebar. See <router-link to="/docs/configuration-format">Configuration format</router-link> for an example of a full config.
+    </p>
+
+    <h2>Overrides</h2>
+    <p>
+      Overrides are the primary mechanism of changing options and permissions based on permission levels, roles, channels, user ids, etc.
+    </p>
+    <p>
+      Here's an example demonstrating different types of overrides:
+    </p>
+
+    <CodeBlock lang="yaml" trim="4">
+      plugins:
+        example_plugin:
+          config:
+            can_kick: false
+            kick_message: "You have been kicked"
+            nested:
+              value: "Hello"
+              other_value: "Foo"
+          overrides:
+            # Simple permission level based override to allow kicking only for levels 50 and up
+            - level: '>=50'
+              config:
+                can_kick: true
+                nested:
+                  # This only affects nested.other_value; nested.value is still "Hello"
+                  other_value: "Bar"
+            # Channel override - don't allow kicking on the specified channel
+            - channel: "109672661671505920"
+              config:
+                can_kick: false
+            # Same as above, but for a full category
+            - category: "360735466737369109"
+              config:
+                can_kick: false
+            # Multiple channels. If any of them match, this override applies.
+            - channel: ["109672661671505920", "570714864285253677"]
+              config:
+                can_kick: false
+            # Match based on a role
+            - role: "172950000412655616"
+              config:
+                can_kick: false
+            # Match based on multiple roles. The user must have ALL roles mentioned here for this override to apply.
+            - role: ["172950000412655616", "172949857164722176"]
+              config:
+                can_kick: false
+            # Match on user id
+            - user: "106391128718245888"
+              config:
+                kick_message: "You have been kicked by Dragory"
+            # Match on multiple conditions
+            - channel: "109672661671505920"
+              role: "172950000412655616"
+              config:
+                can_kick: false
+            # Match on ANY of multiple conditions
+            - channel: "109672661671505920"
+              role: "172950000412655616"
+              type: "any"
+              config:
+                can_kick: false
+    </CodeBlock>
+  </div>
+</template>
+
+<script>
+  import CodeBlock from "./CodeBlock";
+
+  export default {
+    components: { CodeBlock },
+  };
+</script>

dashboard/src/components/Splash.vue

@@ -10,8 +10,8 @@
           Zeppelin is a private moderation bot for Discord, designed with large servers and reliability in mind.
         </div>
         <div class="actions">
-          <a class="btn" href="/login">Dashboard</a>
+          <router-link class="btn" to="/login">Dashboard</router-link>
-          <a class="btn disabled" href="#">Docs</a>
+          <router-link class="btn" to="/docs">Docs</router-link>
         </div>
         <div class="error" v-if="error">
           <strong>Error</strong>

dashboard/src/directives/trim-code.ts

@@ -0,0 +1,11 @@
+import Vue from "vue";
+
+Vue.directive("trim-code", {
+  bind(el, binding) {
+    el.innerHTML = el.innerHTML
+      .replace(/(^\n+|\n+$)/g, "")
+      .split("\n")
+      .map(line => line.slice(binding.value))
+      .join("\n");
+  },
+});

dashboard/src/main.ts

@@ -18,7 +18,6 @@ Vue.mixin({
 });
 
 import App from "./components/App.vue";
-import Login from "./components/Login.vue";
 
 const app = new Vue({
   router,

dashboard/src/routes.ts

@@ -14,19 +14,43 @@ export const router = new VueRouter({
     { path: "/login", beforeEnter: authRedirectGuard },
     { path: "/login-callback", beforeEnter: loginCallbackGuard },
 
+    // Docs
+    {
+      path: "/docs",
+      component: () => import("./components/Docs/Layout.vue"),
+      children: [
+        {
+          path: "",
+          component: () => import("./components/Docs/Introduction.vue"),
+        },
+        {
+          path: "configuration-format",
+          component: () => import("./components/Docs/ConfigurationFormat.vue"),
+        },
+        {
+          path: "permissions",
+          component: () => import("./components/Docs/Permissions.vue"),
+        },
+        {
+          path: "plugin-configuration",
+          component: () => import("./components/Docs/PluginConfiguration.vue"),
+        },
+      ],
+    },
+
     // Dashboard
     {
       path: "/dashboard",
-      component: () => import("./components/Dashboard.vue"),
+      component: () => import("./components/Dashboard/Layout.vue"),
       beforeEnter: authGuard,
       children: [
         {
           path: "",
-          component: () => import("./components/DashboardGuildList.vue"),
+          component: () => import("./components/Dashboard/GuildList.vue"),
         },
         {
           path: "guilds/:guildId/config",
-          component: () => import("./components/DashboardGuildConfigEditor.vue"),
+          component: () => import("./components/Dashboard/GuildConfigEditor.vue"),
         },
       ],
     },

dashboard/src/style/dashboard.scss

@@ -3,3 +3,7 @@ $family-primary: 'Open Sans', sans-serif;
 @import "~bulmaswatch/superhero/_variables";
 @import "~bulma/bulma";
 @import "~bulmaswatch/superhero/_overrides";
+
+.dashboard-cloak {
+  visibility: visible !important;
+}

dashboard/src/style/docs.scss

@@ -0,0 +1,9 @@
+$family-primary: 'Open Sans', sans-serif;
+
+@import "~bulmaswatch/superhero/_variables";
+@import "~bulma/bulma";
+@import "~bulmaswatch/superhero/_overrides";
+
+.docs-cloak {
+  visibility: visible !important;
+}