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

dashboard: separate plugin usage/configuration, add usage guide + configuration guide

Browse source
This commit is contained in:
Dragory 2019-09-29 15:53:14 +03:00
parent 1cf09ea997
commit 3ff3bfd5f0
10 changed files with 524 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

11
dashboard/src/components/docs/Layout.vue → dashboard/src/components/docs/DocsLayout.vue
View file

@ -133,14 +133,21 @@
<script>
import Vue from "vue";
import hljs from "highlight.js/lib/highlight.js";
import hljsYaml from "highlight.js/lib/languages/yaml.js";
import VueHighlightJS from "vue-highlightjs";
import Buefy from "buefy";
import {mapState} from "vuex";
import "../../directives/trim-code";
import "../../style/icons.scss";
import "buefy/dist/buefy.css";
import "highlight.js/styles/ocean.css";
import "../../directives/trim-code";
import "../../style/docs.scss";
Vue.use(VueHighlightJS);
hljs.registerLanguage("yaml", hljsYaml);
Vue.use(VueHighlightJS, { hljs });
Vue.use(Buefy);
export default {
async mounted() {

34
dashboard/src/components/docs/MarkdownBlock.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<div ref="rendered"></div>
</template>
<script>
import marked from "marked";
import hljs from "highlight.js";
export default {
props: ["content"],
methods: {
renderContent() {
const rendered = marked(this.content || "");
const target = this.$refs.rendered;
target.innerHTML = rendered;
target.querySelectorAll("code[class*='language-']").forEach(elem => {
if (elem.parentNode.tagName === 'PRE') {
elem.parentNode.classList.add('codeblock');
}
hljs.highlightBlock(elem);
});
}
},
mounted() {
this.renderContent();
},
watch: {
content() {
this.renderContent();
},
},
};
</script>

174
dashboard/src/components/docs/Plugin.vue
View file

@ -4,92 +4,134 @@
</div>
<div v-else>
<h1 class="z-title is-1 mb-1">{{ data.info.prettyName || data.name }}</h1>
<p class="mb-1">
Name in config: <code>{{ data.name }}</code>
</p>
<div v-if="data.info.description" class="content" v-html="renderMarkdown(data.info.description)"></div>
<div class="tabs">
<ul>
<li v-bind:class="{'is-active': tab === 'usage'}">
<router-link v-bind:to="'/docs/plugins/' + pluginName + '/usage'">Usage</router-link>
</li>
<li v-bind:class="{'is-active': tab === 'configuration'}">
<router-link v-bind:to="'/docs/plugins/' + pluginName + '/configuration'">Configuration</router-link>
</li>
</ul>
</div>
<p class="mt-1 mb-1">
To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
</p>
<!-- Usage tab -->
<div class="usage" v-if="tab === 'usage'">
<!-- Description -->
<MarkdownBlock :content="data.info.description" class="content"></MarkdownBlock>
<h2 id="default-configuration" class="z-title is-2 mt-2 mb-1">Default configuration</h2>
<CodeBlock lang="yaml">{{ renderConfiguration(data.options) }}</CodeBlock>
<b-collapse :open="false" class="card mt-1 mb-1">
<div slot="trigger" slot-scope="props" class="card-header" role="button">
<p class="card-header-title">Config schema</p>
<a class="card-header-icon">
<b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
</a>
<!-- Usage guide -->
<div v-if="data.info.usageGuide">
<h2 id="usage-guide" class="z-title is-2 mt-2 mb-1">Usage guide</h2>
<MarkdownBlock :content="data.info.usageGuide" class="content"></MarkdownBlock>
</div>
<div class="card-content">
<CodeBlock lang="plain">{{ data.configSchema }}</CodeBlock>
</div>
</b-collapse>
<div v-if="data.commands.length">
<h2 id="commands" class="z-title is-2 mt-2 mb-1">Commands</h2>
<div v-for="command in data.commands">
<h3 class="z-title is-3 mt-2 mb-1">!{{ command.trigger }}</h3>
<div v-if="command.config.requiredPermission">
Permission: <code>{{ command.config.requiredPermission }}</code>
</div>
<div v-if="command.config.info && command.config.info.basicUsage">
Basic usage: <code>{{ command.config.info.basicUsage }}</code>
</div>
<div v-if="command.config.aliases && command.config.aliases.length">
Shortcut:
<code style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
</div>
<div v-if="command.config.info && command.config.info.description" class="content mt-1 mb-1" v-html="renderMarkdown(command.config.info.description)"></div>
<b-collapse :open="false" class="card mt-1 mb-1">
<div slot="trigger" slot-scope="props" class="card-header" role="button">
<p class="card-header-title">Additional information</p>
<a class="card-header-icon">
<b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
</a>
<!-- Command list -->
<div v-if="data.commands.length">
<h2 id="commands" class="z-title is-2 mt-2 mb-1">Commands</h2>
<div v-for="command in data.commands">
<h3 class="z-title is-3 mt-2 mb-1">!{{ command.trigger }}</h3>
<div v-if="command.config.requiredPermission">
Permission: <code>{{ command.config.requiredPermission }}</code>
</div>
<div v-if="command.config.info && command.config.info.basicUsage">
Basic usage: <code>{{ command.config.info.basicUsage }}</code>
</div>
<div v-if="command.config.aliases && command.config.aliases.length">
Shortcut:
<code style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
</div>
<div class="card-content">
Signatures:
<ul class="z-list z-ul">
<li>
<code>
!{{ command.trigger }}
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
</code>
</li>
</ul>
<div class="mt-2" v-if="command.parameters.length">
Command arguments:
<MarkdownBlock v-if="command.config.info && command.config.info.description" :content="command.config.info.description" class="content mt-1 mb-1"></MarkdownBlock>
<b-collapse :open="false" class="card mt-1 mb-1">
<div slot="trigger" slot-scope="props" class="card-header" role="button">
<p class="card-header-title">Additional information</p>
<a class="card-header-icon">
<b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
</a>
</div>
<div class="card-content">
Signatures:
<ul class="z-list z-ul">
<li v-for="param in command.parameters">
<code>{{ renderParameter(param) }}</code>
<router-link :to="'/docs/descriptions/argument-types#' + (param.type || 'string')">{{ param.type || 'string' }}</router-link>
<div v-if="command.config.info && command.config.info.parameterDescriptions && command.config.info.parameterDescriptions[param.name]" class="content">
{{ renderMarkdown(command.config.info.parameterDescriptions[param.name]) }}
</div>
<li>
<code>
!{{ command.trigger }}
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
</code>
</li>
</ul>
<div class="mt-2" v-if="command.parameters.length">
Command arguments:
<ul class="z-list z-ul">
<li v-for="param in command.parameters">
<code>{{ renderParameter(param) }}</code>
<router-link :to="'/docs/descriptions/argument-types#' + (param.type || 'string')">{{ param.type || 'string' }}</router-link>
<MarkdownBlock v-if="command.config.info && command.config.info.parameterDescriptions && command.config.info.parameterDescriptions[param.name]"
:content="command.config.info.parameterDescriptions[param.name]"
class="content">
</MarkdownBlock>
</li>
</ul>
</div>
</div>
</div>
</b-collapse>
</b-collapse>
</div>
</div>
</div>
<!-- Configuration tab -->
<div class="configuration" v-if="tab === 'configuration'">
<!-- Basic config info -->
<p class="mb-1">
Name in config: <code>{{ data.name }}</code>
</p>
<p class="mt-1 mb-1">
To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
</p>
<!-- Configuration guide -->
<div v-if="data.info.configurationGuide">
<h2 id="configuration-guide" class="z-title is-2 mt-2 mb-1">Configuration guide</h2>
<MarkdownBlock :content="data.info.configurationGuide" class="content"></MarkdownBlock>
</div>
<!-- Default configuration -->
<h2 id="default-configuration" class="z-title is-2 mt-2 mb-1">Default configuration</h2>
<CodeBlock lang="yaml">{{ renderConfiguration(data.defaultOptions) }}</CodeBlock>
<!-- Config schema -->
<h2 id="config-schema" class="z-title is-2 mt-2 mb-1">Config schema</h2>
<b-collapse :open="false" class="card mt-1 mb-1">
<div slot="trigger" slot-scope="props" class="card-header" role="button">
<p class="card-header-title">Click to expand</p>
<a class="card-header-icon">
<b-icon :icon="props.open ? 'menu-up' : 'menu-down'"></b-icon>
</a>
</div>
<div class="card-content">
<CodeBlock lang="plain">{{ data.configSchema }}</CodeBlock>
</div>
</b-collapse>
</div>
</div>
</template>
<script>
import Vue from "vue";
import {mapState} from "vuex";
import marked from "marked";
import yaml from "js-yaml";
import CodeBlock from "./CodeBlock";
import MarkdownBlock from "./MarkdownBlock";
import Tabs from "../shared/Tabs";
const validTabs = ['usage', 'configuration'];
const defaultTab = 'usage';
export default {
components: { CodeBlock },
components: { CodeBlock, MarkdownBlock, Tabs },
async mounted() {
this.loading = true;
@ -97,9 +139,6 @@
this.loading = false;
},
methods: {
renderMarkdown(str) {
return marked(str);
},
renderConfiguration(options) {
return yaml.safeDump({
[this.pluginName]: options,
@ -119,6 +158,9 @@
return {
loading: true,
pluginName: this.$route.params.pluginName,
tab: validTabs.includes(this.$route.params.tab)
? this.$route.params.tab
: defaultTab,
};
},
computed: {

3
dashboard/src/main.ts
View file

@ -1,8 +1,6 @@
import "./style/base.scss";
import "buefy/dist/buefy.css";
import Vue from "vue";
import Buefy from "buefy";
import { RootStore } from "./store";
import { router } from "./routes";
@ -21,7 +19,6 @@ Vue.mixin({
import App from "./components/App.vue";
Vue.use(Buefy);
const app = new Vue({
router,
store: RootStore,

6
dashboard/src/routes.ts
View file

@ -1,8 +1,6 @@
import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Splash from "./components/Splash.vue";
import Login from "./components/Login.vue";
import LoginCallback from "./components/LoginCallback.vue";
import { authGuard, authRedirectGuard, loginCallbackGuard } from "./auth";
Vue.use(VueRouter);
@ -17,7 +15,7 @@ export const router = new VueRouter({
// Docs
{
path: "/docs",
component: () => import("./components/docs/Layout.vue"),
component: () => import("./components/docs/DocsLayout.vue"),
children: [
{
path: "",
@ -40,7 +38,7 @@ export const router = new VueRouter({
component: () => import("./components/docs/ArgumentTypes.vue"),
},
{
path: "plugins/:pluginName",
path: "plugins/:pluginName/:tab?",
component: () => import("./components/docs/Plugin.vue"),
},
],

8
dashboard/src/store/types.ts
View file

@ -31,6 +31,14 @@ export interface ThinDocsPlugin {
export interface DocsPlugin extends ThinDocsPlugin {
commands: any[];
defaultOptions: any;
configSchema?: string;
info: {
name: string;
description?: string;
usageGuide?: string;
configurationGuide?: string;
};
}
export interface DocsState {

19
dashboard/src/style/docs.scss
View file

@ -1,5 +1,6 @@
@import url('https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css');
$bulmaswatch-import-font: false;
$family-primary: 'Open Sans', sans-serif;
$list-background-color: transparent;
@ -9,9 +10,15 @@ $size-3: 1.5rem;
$size-4: 1.25rem;
@import "~bulmaswatch/superhero/_variables";
$tabs-link-color: $grey-light;
$tabs-link-active-color: $grey-lighter;
$tabs-link-active-border-bottom-color: $grey-lighter;
@import "~bulma/bulma";
@import "~bulmaswatch/superhero/_overrides";
.docs-cloak {
visibility: visible !important;
}
@ -42,3 +49,15 @@ $size-4: 1.25rem;
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2rem; }
.codeblock,
.content .codeblock {
border-radius: 3px;
padding: 16px;
max-width: 970px; /* FIXME: temp fix for overflowing code blocks, look into properly later */
}
.codeblock .hljs {
background: transparent;
padding: 0;
}

1
dashboard/src/style/icons.scss Normal file
View file

@ -0,0 +1 @@
@import url("https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css");