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

Documentation work. Add command info for all Utility plugin commands.

Browse source
This commit is contained in:
Dragory 2019-10-25 23:14:21 +03:00
parent d9b65590d8
commit 9b5307ba2b
5 changed files with 197 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

44
dashboard/src/components/Expandable.vue
View file

@ -22,35 +22,32 @@
<style scoped>
@import "../style/components.pcss";
:root {
.expandable {
--animation-time: 400ms;
--target-height: auto;
}
transition: box-shadow var(--animation-time); /* hi */
.expandable {
transition: box-shadow var(--animation-time);
}
& > .title {
&:hover {
& .title-text {
@apply underline;
}
}
.title {
&:hover {
& .title-text {
@apply underline;
.icon {
transition: transform var(--animation-time);
transform-origin: 50% 60%;
}
.icon-open {
transform: rotate(179deg);
}
}
}
.icon {
transition: transform var(--animation-time);
transform-origin: 50% 60%;
}
.icon-open {
transform: rotate(179deg);
}
.content {
overflow: hidden;
display: none;
& > .content {
overflow: hidden;
display: none;
}
}
@keyframes open {
@ -72,7 +69,8 @@
}
.inline-code,
code:not([class]) {
code:not([class]),
>>> code:not([class]) {
@apply bg-gray-900;
}

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

@ -34,24 +34,44 @@
<div v-if="data.commands.length">
<h2 id="commands">Commands</h2>
<div v-for="command in data.commands" class="mb-4">
<h3 class="text-xl">!{{ command.trigger }}</h3>
<div v-if="command.config.extra.requiredPermission">
Permission: <code class="inline-code">{{ command.config.extra.requiredPermission }}</code>
</div>
<div v-if="command.config.extra.info && command.config.extra.info.basicUsage">
Basic usage: <code class="inline-code">{{ command.config.extra.info.basicUsage }}</code>
</div>
<div v-if="command.config.aliases && command.config.aliases.length">
Shortcut:
<code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
</div>
<h3 class="text-xl mb-0">
!{{ command.trigger }}
<span v-for="alias in command.config.aliases"> <span class="text-gray-600">/</span> !{{ alias }}</span>
</h3>
<MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.description"
:content="command.config.extra.info.description"
class="content">
</MarkdownBlock>
<MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.description" :content="command.config.extra.info.description" class="content"></MarkdownBlock>
<div v-bind:class="{'-mt-2': command.config.extra.info && command.config.extra.info.description}">
<div v-if="command.config.extra.info && command.config.extra.info.basicUsage">
<span class="font-semibold">Basic usage:</span> <code class="inline-code">{{ command.config.extra.info.basicUsage }}</code>
</div>
</div>
<Expandable class="mt-4">
<template v-slot:title>Additional information</template>
<template v-slot:content>
Signatures:
<div v-if="command.config.extra.info && command.config.extra.info.usageGuide">
<div class="font-semibold">Usage guide:</div>
<MarkdownBlock :content="command.config.extra.info.usageGuide"
class="content">
</MarkdownBlock>
</div>
<div v-if="command.config.extra.info && command.config.extra.info.examples">
<div class="font-semibold">Examples:</div>
<MarkdownBlock :content="command.config.extra.info.examples"
class="content">
</MarkdownBlock>
</div>
<p v-if="command.config.extra.requiredPermission">
<span class="font-semibold">Permission:</span>
<code class="inline-code">{{ command.config.extra.requiredPermission }}</code>
</p>
<span class="font-semibold">Signatures:</span>
<ul>
<li>
<code class="inline-code bg-gray-900">
@ -62,13 +82,13 @@
</ul>
<div class="mt-2" v-if="command.parameters.length">
Command arguments:
<span class="font-semibold">Command arguments:</span>
<ul>
<li v-for="param in command.parameters">
<code>{{ renderParameter(param) }}</code>
<router-link :to="'/docs/reference/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]"
<MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.parameterDescriptions && command.config.extra.info.parameterDescriptions[param.name]"
:content="command.config.extra.info.parameterDescriptions[param.name]"
class="content">
</MarkdownBlock>
</li>
@ -76,13 +96,13 @@
</div>
<div class="mt-2" v-if="command.config.options && command.config.options.length">
Options:
<span class="font-semibold">Options:</span>
<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>
<MarkdownBlock v-if="command.config.info && command.config.info.optionDescriptions && command.config.info.optionDescriptions[opt.name]"
:content="command.config.info.optionDescriptions[opt.name]"
<MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.optionDescriptions && command.config.extra.info.optionDescriptions[opt.name]"
:content="command.config.extra.info.optionDescriptions[opt.name]"
class="content">
</MarkdownBlock>
</li>

9
dashboard/src/store/docs.ts
View file

@ -34,6 +34,15 @@ export const DocsStore: Module<DocsState, RootState> = {
if (state.plugins[name]) return;
const data = await get(`docs/plugins/${name}`);
if (data && data.commands) {
data.commands.sort((a, b) => {
const aName = a.trigger.toLowerCase();
const bName = b.trigger.toLowerCase();
if (aName > bName) return 1;
if (aName < bName) return -1;
return 0;
});
}
commit("setPluginData", { name, data });
},
},