StyAndCo/zappyzep
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Work on documentation

Browse source
This commit is contained in:
Dragory 2019-07-28 18:24:32 +03:00
parent c2935bd1d7
commit f186e5c61f
17 changed files with 451 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
dashboard/package-lock.json generated
View file

@ -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",

1
dashboard/package.json
View file

@ -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"
},

2
dashboard/src/components/DashboardGuildConfigEditor.vue → dashboard/src/components/Dashboard/GuildConfigEditor.vue
View file

@ -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: {

0
dashboard/src/components/DashboardGuildList.vue → dashboard/src/components/Dashboard/GuildList.vue
View file

11
dashboard/src/components/Dashboard.vue → dashboard/src/components/Dashboard/Layout.vue
View file

@ -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() {

21
dashboard/src/components/Docs/CodeBlock.vue Normal file
View file

@ -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>

42
dashboard/src/components/Docs/ConfigurationFormat.vue Normal file
View file

@ -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>

20
dashboard/src/components/Docs/Introduction.vue Normal file
View file

@ -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>

121
dashboard/src/components/Docs/Layout.vue Normal file
View file

@ -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>

88
dashboard/src/components/Docs/Permissions.vue Normal file
View file

@ -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>

83
dashboard/src/components/Docs/PluginConfiguration.vue Normal file
View file

@ -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>

4
dashboard/src/components/Splash.vue
View file

@ -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>
<a class="btn disabled" href="#">Docs</a>
<router-link class="btn" to="/login">Dashboard</router-link>
<router-link class="btn" to="/docs">Docs</router-link>
</div>
<div class="error" v-if="error">
<strong>Error</strong>

11
dashboard/src/directives/trim-code.ts Normal file
View file

@ -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");
},
});

1
dashboard/src/main.ts
View file

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

30
dashboard/src/routes.ts
View file

@ -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"),
},
],
},

4
dashboard/src/style/dashboard.scss
View file

@ -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;
}

9
dashboard/src/style/docs.scss Normal file
View file

@ -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;
}