Fix up docs

backend/src/api/docs.ts

@@ -30,14 +30,14 @@ function formatConfigSchema(schema) {
 }
 
 export function initDocs(app: express.Express) {
-  const docsPlugins = guildPlugins.filter(pluginClass => pluginClass.showInDocs);
+  const docsPlugins = guildPlugins.filter(plugin => plugin.showInDocs);
 
   app.get("/docs/plugins", (req: express.Request, res: express.Response) => {
     res.json(
-      docsPlugins.map(pluginClass => {
-        const thinInfo = pluginClass.info ? { prettyName: pluginClass.info.prettyName } : {};
+      docsPlugins.map(plugin => {
+        const thinInfo = plugin.info ? { prettyName: plugin.info.prettyName } : {};
         return {
-          name: pluginClass.info,
+          name: plugin.name,
           info: thinInfo,
         };
       }),
@@ -56,7 +56,10 @@ export function initDocs(app: express.Express) {
 
     const commands = (plugin.commands || []).map(cmd => ({
       trigger: cmd.trigger,
+      permission: cmd.permission,
       signature: cmd.signature,
+      description: cmd.description,
+      usage: cmd.usage,
       config: cmd.config,
     }));
 

backend/src/plugins/AutoDelete/AutoDeletePlugin.ts

@@ -15,6 +15,13 @@ const defaultOptions: PluginOptions<AutoDeletePluginType> = {
 };
 
 export const AutoDeletePlugin = zeppelinPlugin<AutoDeletePluginType>()("auto_delete", {
+  showInDocs: true,
+  info: {
+    prettyName: "Auto-delete",
+    description: "Allows Zeppelin to auto-delete messages from a channel after a delay",
+    configurationGuide: "Maximum deletion delay is currently 5 minutes",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/AutoReactions/AutoReactionsPlugin.ts

@@ -6,6 +6,7 @@ import { DisableAutoReactionsCmd } from "./commands/DisableAutoReactionsCmd";
 import { GuildSavedMessages } from "src/data/GuildSavedMessages";
 import { GuildAutoReactions } from "src/data/GuildAutoReactions";
 import { AddReactionsEvt } from "./events/AddReactionsEvt";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions: PluginOptions<AutoReactionsPluginType> = {
   config: {
@@ -22,6 +23,14 @@ const defaultOptions: PluginOptions<AutoReactionsPluginType> = {
 };
 
 export const AutoReactionsPlugin = zeppelinPlugin<AutoReactionsPluginType>()("auto_reactions", {
+  showInDocs: true,
+  info: {
+    prettyName: "Auto-reactions",
+    description: trimPluginDescription(`
+      Allows setting up automatic reactions to all new messages on a channel
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Automod/AutomodPlugin.ts

@@ -22,6 +22,7 @@ import { MutesPlugin } from "../Mutes/MutesPlugin";
 import { AntiraidClearCmd } from "./commands/AntiraidClearCmd";
 import { SetAntiraidCmd } from "./commands/SetAntiraidCmd";
 import { ViewAntiraidCmd } from "./commands/ViewAntiraidCmd";
+import { pluginInfo } from "./info";
 
 const defaultOptions = {
   config: {
@@ -134,6 +135,9 @@ const configPreprocessor: ConfigPreprocessorFn<AutomodPluginType> = options => {
 };
 
 export const AutomodPlugin = zeppelinPlugin<AutomodPluginType>()("automod", {
+  showInDocs: true,
+  info: pluginInfo,
+
   dependencies: [LogsPlugin, ModActionsPlugin, MutesPlugin],
 
   configSchema: ConfigSchema,

backend/src/plugins/Automod/info.ts

@@ -0,0 +1,102 @@
+import { ZeppelinPluginBlueprint } from "../ZeppelinPluginBlueprint";
+import { trimPluginDescription } from "../../utils";
+
+export const pluginInfo: ZeppelinPluginBlueprint["info"] = {
+  prettyName: "Automod",
+  description: trimPluginDescription(`
+      Allows specifying automated actions in response to triggers. Example use cases include word filtering and spam prevention.
+    `),
+  configurationGuide: trimPluginDescription(`
+      The automod plugin is very customizable. For a full list of available triggers, actions, and their options, see Config schema at the bottom of this page.    
+    
+      ### Simple word filter
+      Removes any messages that contain the word 'banana' and sends a warning to the user.
+      Moderators (level >= 50) are ignored by the filter based on the override.
+      
+      ~~~yml
+      automod:
+        config:
+          rules:
+            my_filter:
+              triggers:
+              - match_words:
+                  words: ['banana']
+                  case_sensitive: false
+                  only_full_words: true
+              actions:
+                clean: true
+                warn:
+                  reason: 'Do not talk about bananas!'
+        overrides:
+        - level: '>=50'
+          config:
+            rules:
+              my_filter:
+                enabled: false
+      ~~~
+      
+      ### Spam detection
+      This example includes 2 filters:
+      
+      - The first one is triggered if a user sends 5 messages within 10 seconds OR 3 attachments within 60 seconds.
+        The messages are deleted and the user is muted for 5 minutes.
+      - The second filter is triggered if a user sends more than 2 emoji within 5 seconds.
+        The messages are deleted but the user is not muted.
+      
+      Moderators are ignored by both filters based on the override.
+      
+      ~~~yml
+      automod:
+        config:
+          rules:
+            my_spam_filter:
+              triggers:
+              - message_spam:
+                  amount: 5
+                  within: 10s
+              - attachment_spam:
+                  amount: 3
+                  within: 60s
+              actions:
+                clean: true
+                mute:
+                  duration: 5m
+                  reason: 'Auto-muted for spam'
+            my_second_filter:
+              triggers:
+              - message_spam:
+                  amount: 5
+                  within: 10s
+              actions:
+                clean: true
+        overrides:
+        - level: '>=50'
+          config:
+            rules:
+              my_spam_filter:
+                enabled: false
+              my_second_filter:
+                enabled: false
+      ~~~
+      
+      ### Custom status alerts
+      This example sends an alert any time a user with a matching custom status sends a message.
+      
+      ~~~yml
+      automod:
+        config:
+          rules:
+            bad_custom_statuses:
+              triggers:
+              - match_words:
+                  words: ['banana']
+                  match_custom_status: true
+              actions:
+                alert:
+                  channel: "473087035574321152"
+                  text: |-
+                    Bad custom status on user <@!{user.id}>:
+                    {matchSummary}
+      ~~~
+    `),
+};

backend/src/plugins/Cases/CasesPlugin.ts

@@ -10,6 +10,7 @@ import { postCaseToCaseLogChannel } from "./functions/postToCaseLogChannel";
 import { CaseTypes } from "../../data/CaseTypes";
 import { getCaseTypeAmountForUserId } from "./functions/getCaseTypeAmountForUserId";
 import { getCaseEmbed } from "./functions/getCaseEmbed";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions = {
   config: {
@@ -19,6 +20,14 @@ const defaultOptions = {
 };
 
 export const CasesPlugin = zeppelinPlugin<CasesPluginType>()("cases", {
+  showInDocs: true,
+  info: {
+    prettyName: "Cases",
+    description: trimPluginDescription(`
+      This plugin contains basic configuration for cases created by other plugins
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Censor/CensorPlugin.ts

@@ -5,11 +5,12 @@ import { GuildLogs } from "src/data/GuildLogs";
 import { GuildSavedMessages } from "src/data/GuildSavedMessages";
 import { onMessageCreate } from "./util/onMessageCreate";
 import { onMessageUpdate } from "./util/onMessageUpdate";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions: PluginOptions<CensorPluginType> = {
   config: {
     filter_zalgo: false,
-    filter_invites: true,
+    filter_invites: false,
     invite_guild_whitelist: null,
     invite_guild_blacklist: null,
     invite_code_whitelist: null,
@@ -41,6 +42,15 @@ const defaultOptions: PluginOptions<CensorPluginType> = {
 };
 
 export const CensorPlugin = zeppelinPlugin<CensorPluginType>()("censor", {
+  showInDocs: true,
+  info: {
+    prettyName: "Censor",
+    description: trimPluginDescription(`
+      Censor words, tokens, links, regex, etc.
+      For more advanced filtering, check out the Automod plugin!
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/CompanionChannels/CompanionChannelsPlugin.ts

@@ -3,6 +3,7 @@ import { CompanionChannelsPluginType, ConfigSchema, TCompanionChannelOpts } from
 import { VoiceChannelJoinEvt } from "./events/VoiceChannelJoinEvt";
 import { VoiceChannelSwitchEvt } from "./events/VoiceChannelSwitchEvt";
 import { VoiceChannelLeaveEvt } from "./events/VoiceChannelLeaveEvt";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions = {
   config: {
@@ -11,6 +12,16 @@ const defaultOptions = {
 };
 
 export const CompanionChannelsPlugin = zeppelinPlugin<CompanionChannelsPluginType>()("companion_channels", {
+  showInDocs: true,
+  info: {
+    prettyName: "Companion channels",
+    description: trimPluginDescription(`
+      Set up 'companion channels' between text and voice channels.
+      Once set up, any time a user joins one of the specified voice channels,
+      they'll get channel permissions applied to them for the text channels.
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/CustomEvents/CustomEventsPlugin.ts

@@ -12,6 +12,8 @@ const defaultOptions = {
 };
 
 export const CustomEventsPlugin = zeppelinPlugin<CustomEventsPluginType>()("custom_events", {
+  showInDocs: false,
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/LocateUser/LocateUserPlugin.ts

@@ -9,6 +9,7 @@ import { FollowCmd } from "./commands/FollowCmd";
 import { DeleteFollowCmd, ListFollowCmd } from "./commands/ListFollowCmd";
 import { ChannelJoinAlertsEvt, ChannelLeaveAlertsEvt, ChannelSwitchAlertsEvt } from "./events/SendAlertsEvts";
 import { GuildBanRemoveAlertsEvt } from "./events/BanRemoveAlertsEvt";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions: PluginOptions<LocateUserPluginType> = {
   config: {
@@ -27,6 +28,16 @@ const defaultOptions: PluginOptions<LocateUserPluginType> = {
 };
 
 export const LocateUserPlugin = zeppelinPlugin<LocateUserPluginType>()("locate_user", {
+  showInDocs: true,
+  info: {
+    prettyName: "Locate user",
+    description: trimPluginDescription(`
+      This plugin allows users with access to the commands the following:
+      * Instantly receive an invite to the voice channel of a user
+      * Be notified as soon as a user switches or joins a voice channel
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Logs/LogsPlugin.ts

@@ -41,6 +41,11 @@ const defaultOptions: PluginOptions<LogsPluginType> = {
 };
 
 export const LogsPlugin = zeppelinPlugin<LogsPluginType>()("logs", {
+  showInDocs: true,
+  info: {
+    prettyName: "Logs",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/MessageSaver/MessageSaverPlugin.ts

@@ -21,11 +21,11 @@ const defaultOptions: PluginOptions<MessageSaverPluginType> = {
 };
 
 export const MessageSaverPlugin = zeppelinPlugin<MessageSaverPluginType>()("message_saver", {
+  showInDocs: false,
+
   configSchema: ConfigSchema,
   defaultOptions,
 
-  showInDocs: false,
-
   // prettier-ignore
   commands: [
     SaveMessagesToDBCmd,

backend/src/plugins/ModActions/ModActionsPlugin.ts

@@ -32,6 +32,7 @@ import { warnMember } from "./functions/warnMember";
 import { Member } from "eris";
 import { kickMember } from "./functions/kickMember";
 import { banUserId } from "./functions/banUserId";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions = {
   config: {
@@ -89,6 +90,14 @@ const defaultOptions = {
 };
 
 export const ModActionsPlugin = zeppelinPlugin<ModActionsPluginType>()("mod_actions", {
+  showInDocs: true,
+  info: {
+    prettyName: "Mod actions",
+    description: trimPluginDescription(`
+      This plugin contains the 'typical' mod actions such as warning, muting, kicking, banning, etc.
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Mutes/MutesPlugin.ts

@@ -56,6 +56,11 @@ let FIRST_CHECK_TIME = Date.now();
 const FIRST_CHECK_INCREMENT = 5 * 1000;
 
 export const MutesPlugin = zeppelinPlugin<MutesPluginType>()("mutes", {
+  showInDocs: true,
+  info: {
+    prettyName: "Mutes",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/NameHistory/NameHistoryPlugin.ts

@@ -22,6 +22,8 @@ const defaultOptions: PluginOptions<NameHistoryPluginType> = {
 };
 
 export const NameHistoryPlugin = zeppelinPlugin<NameHistoryPluginType>()("name_history", {
+  showInDocs: false,
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Persist/PersistPlugin.ts

@@ -5,6 +5,7 @@ import { GuildPersistedData } from "src/data/GuildPersistedData";
 import { GuildLogs } from "src/data/GuildLogs";
 import { StoreDataEvt } from "./events/StoreDataEvt";
 import { LoadDataEvt } from "./events/LoadDataEvt";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions: PluginOptions<PersistPluginType> = {
   config: {
@@ -15,6 +16,15 @@ const defaultOptions: PluginOptions<PersistPluginType> = {
 };
 
 export const PersistPlugin = zeppelinPlugin<PersistPluginType>()("persist", {
+  showInDocs: true,
+  info: {
+    prettyName: "Persist",
+    description: trimPluginDescription(`
+      Re-apply roles or nicknames for users when they rejoin the server.
+      Mute roles are re-applied automatically, this plugin is not required for that.
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/PingableRoles/PingableRolesPlugin.ts

@@ -21,6 +21,11 @@ const defaultOptions: PluginOptions<PingableRolesPluginType> = {
 };
 
 export const PingableRolesPlugin = zeppelinPlugin<PingableRolesPluginType>()("pingable_roles", {
+  showInDocs: true,
+  info: {
+    prettyName: "Pingable roles",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Post/PostPlugin.ts

@@ -28,6 +28,11 @@ const defaultOptions: PluginOptions<PostPluginType> = {
 };
 
 export const PostPlugin = zeppelinPlugin<PostPluginType>()("post", {
+  showInDocs: true,
+  info: {
+    prettyName: "Post",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/ReactionRoles/ReactionRolesPlugin.ts

@@ -30,6 +30,11 @@ const defaultOptions: PluginOptions<ReactionRolesPluginType> = {
 };
 
 export const ReactionRolesPlugin = zeppelinPlugin<ReactionRolesPluginType>()("reaction_roles", {
+  showInDocs: true,
+  info: {
+    prettyName: "Reaction roles",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Reminders/RemindersPlugin.ts

@@ -22,6 +22,11 @@ const defaultOptions: PluginOptions<RemindersPluginType> = {
 };
 
 export const RemindersPlugin = zeppelinPlugin<RemindersPluginType>()("reminders", {
+  showInDocs: true,
+  info: {
+    prettyName: "Reminders",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Roles/RolesPlugin.ts

@@ -6,6 +6,7 @@ import { AddRoleCmd } from "./commands/AddRoleCmd";
 import { RemoveRoleCmd } from "./commands/RemoveRoleCmd";
 import { MassAddRoleCmd } from "./commands/MassAddRoleCmd";
 import { MassRemoveRoleCmd } from "./commands/MassRemoveRoleCmd";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions: PluginOptions<RolesPluginType> = {
   config: {
@@ -30,6 +31,14 @@ const defaultOptions: PluginOptions<RolesPluginType> = {
 };
 
 export const RolesPlugin = zeppelinPlugin<RolesPluginType>()("roles", {
+  showInDocs: true,
+  info: {
+    prettyName: "Roles",
+    description: trimPluginDescription(`
+      Enables authorised users to add and remove whitelisted roles with a command.
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Roles/commands/AddRoleCmd.ts

@@ -8,6 +8,7 @@ import { GuildChannel } from "eris";
 export const AddRoleCmd = rolesCmd({
   trigger: "addrole",
   permission: "can_assign",
+  description: "Add a role to the specified member",
 
   signature: {
     member: ct.resolvedMember(),

backend/src/plugins/Roles/commands/RemoveRoleCmd.ts

@@ -8,6 +8,7 @@ import { stripObjectToScalars, verboseUserMention, resolveRoleId } from "src/uti
 export const RemoveRoleCmd = rolesCmd({
   trigger: "removerole",
   permission: "can_assign",
+  description: "Remove a role from the specified member",
 
   signature: {
     member: ct.resolvedMember(),

backend/src/plugins/SelfGrantableRoles/SelfGrantableRolesPlugin.ts

@@ -14,6 +14,8 @@ const defaultOptions: PluginOptions<SelfGrantableRolesPluginType> = {
 };
 
 export const SelfGrantableRolesPlugin = zeppelinPlugin<SelfGrantableRolesPluginType>()("self_grantable_roles", {
+  showInDocs: true,
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Slowmode/SlowmodePlugin.ts

@@ -35,6 +35,11 @@ const defaultOptions: PluginOptions<SlowmodePluginType> = {
 };
 
 export const SlowmodePlugin = zeppelinPlugin<SlowmodePluginType>()("slowmode", {
+  showInDocs: true,
+  info: {
+    prettyName: "Slowmode",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Spam/SpamPlugin.ts

@@ -8,6 +8,7 @@ import { GuildMutes } from "src/data/GuildMutes";
 import { onMessageCreate } from "./util/onMessageCreate";
 import { clearOldRecentActions } from "./util/clearOldRecentActions";
 import { SpamVoiceJoinEvt, SpamVoiceSwitchEvt } from "./events/SpamVoiceEvt";
+import { trimPluginDescription } from "../../utils";
 
 const defaultOptions: PluginOptions<SpamPluginType> = {
   config: {
@@ -41,6 +42,15 @@ const defaultOptions: PluginOptions<SpamPluginType> = {
 };
 
 export const SpamPlugin = zeppelinPlugin<SpamPluginType>()("spam", {
+  showInDocs: true,
+  info: {
+    prettyName: "Spam protection",
+    description: trimPluginDescription(`
+      Basic spam detection and auto-muting.
+      For more advanced spam filtering, check out the Automod plugin!
+    `),
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Starboard/StarboardPlugin.ts

@@ -27,6 +27,8 @@ const defaultOptions: PluginOptions<StarboardPluginType> = {
 };
 
 export const StarboardPlugin = zeppelinPlugin<StarboardPluginType>()("starboard", {
+  showInDocs: true,
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/Tags/TagsPlugin.ts

@@ -45,6 +45,11 @@ const defaultOptions: PluginOptions<TagsPluginType> = {
 };
 
 export const TagsPlugin = zeppelinPlugin<TagsPluginType>()("tags", {
+  showInDocs: true,
+  info: {
+    prettyName: "Tags",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/UsernameSaver/UsernameSaverPlugin.ts

@@ -5,6 +5,8 @@ import { UsernameSaverPluginType } from "./types";
 import { MessageCreateUpdateUsernameEvt, VoiceChannelJoinUpdateUsernameEvt } from "./events/UpdateUsernameEvts";
 
 export const UsernameSaverPlugin = zeppelinPlugin<UsernameSaverPluginType>()("username_saver", {
+  showInDocs: false,
+
   // prettier-ignore
   events: [
     MessageCreateUpdateUsernameEvt,

backend/src/plugins/Utility/UtilityPlugin.ts

@@ -78,6 +78,11 @@ const defaultOptions: PluginOptions<UtilityPluginType> = {
 };
 
 export const UtilityPlugin = zeppelinPlugin<UtilityPluginType>()("utility", {
+  showInDocs: true,
+  info: {
+    prettyName: "Utility",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

backend/src/plugins/WelcomeMessage/WelcomeMessagePlugin.ts

@@ -8,11 +8,16 @@ const defaultOptions: PluginOptions<WelcomeMessagePluginType> = {
   config: {
     send_dm: false,
     send_to_channel: null,
-    message: "",
+    message: null,
   },
 };
 
 export const WelcomeMessagePlugin = zeppelinPlugin<WelcomeMessagePluginType>()("welcome_message", {
+  showInDocs: true,
+  info: {
+    prettyName: "Welcome message",
+  },
+
   configSchema: ConfigSchema,
   defaultOptions,
 

dashboard/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.js",
     "build-debug": "rimraf dist && cross-env NODE_ENV=development webpack --config webpack.config.js",
-    "watch": "cross-env NODE_ENV=development webpack-dev-server"
+    "watch": "cross-env NODE_ENV=development webpack-dev-server",
+    "watch-build": "rimraf dist && NODE_ENV=development webpack --config webpack.config.js --watch"
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",

dashboard/src/components/Title.vue

@@ -1,3 +1,5 @@
+<template></template>
+
 <script lang="ts">
   export default {
     props: ['title'],

dashboard/src/components/docs/Plugin.vue

@@ -19,6 +19,8 @@
 
     <!-- Usage tab -->
     <div class="usage" v-if="tab === 'usage'">
+      <h2 class="sr-only">Usage</h2>
+
       <div v-if="!hasUsageInfo">
         This plugin has no usage information.
         See <router-link v-bind:to="'/docs/plugins/' + pluginName + '/configuration'">Configuration</router-link>.
@@ -26,33 +28,32 @@
 
       <!-- Usage guide -->
       <div v-if="data.info.usageGuide">
-        <h2 id="usage-guide">Usage guide</h2>
         <MarkdownBlock :content="data.info.usageGuide" class="content" />
       </div>
 
       <!-- Command list -->
       <div v-if="data.commands.length">
-        <h2 id="commands">Commands</h2>
+        <h3 id="commands" class="text-2xl">Commands</h3>
         <div v-for="command in data.commands"
              class="command mb-4"
-             v-bind:ref="getCommandSlug(command.trigger)" v-bind:class="{target: targetCommandId === getCommandSlug(command.trigger)}">
-          <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"
+             v-bind:ref="getCommandSlug(command)" v-bind:class="{target: targetCommandId === getCommandSlug(command)}">
+          <h4 class="text-xl font-semibold mb-0">
+            <span v-for="(trigger, index) in getTriggers(command)"> <span class="text-gray-600" v-if="index > 0">/</span> !{{ trigger }} </span>
+          </h4>
+          <MarkdownBlock v-if="command.description"
+                         :content="command.description"
                          class="content" />
 
-          <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 v-bind:class="{'-mt-2': command.description}">
+            <div v-if="command.usage">
+              <span class="font-semibold">Basic usage:</span> <code class="inline-code">{{ command.usage }}</code>
             </div>
           </div>
 
           <Expandable class="mt-4">
             <template v-slot:title>Additional information</template>
             <template v-slot:content>
+              <!--
               <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"
@@ -66,49 +67,54 @@
                                class="content">
                 </MarkdownBlock>
               </div>
+              -->
 
-              <p v-if="command.config.extra.requiredPermission">
+              <p v-if="command.permission">
                 <span class="font-semibold">Permission:</span>
-                <code class="inline-code">{{ command.config.extra.requiredPermission }}</code>
+                <code class="inline-code">{{ command.permission }}</code>
               </p>
 
-              <span class="font-semibold">Signatures:</span>
-              <ul>
-                <li>
+              <div v-if="command.signature">
+                <h5 class="font-semibold mb-2">Signatures:</h5>
+                <ul class="list-none">
+                  <li v-for="(signature, index) in getCommandSignatures(command)" v-bind:class="{'mt-8': index !== 0}">
                     <code class="inline-code bg-gray-900">
-                    !{{ command.trigger }}
-                    <span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
+                      !{{ getTriggers(command)[0] }}
+                      <span v-for="paramInfo in getSignatureParameters(signature)">{{ renderParameterOrOption(paramInfo.name, paramInfo.param) }} </span>
                     </code>
-                </li>
-              </ul>
 
-              <div class="mt-2" v-if="command.parameters.length">
-                <span class="font-semibold">Command arguments:</span>
+                    <div class="pl-4">
+                      <div v-if="getSignatureParameters(signature).length">
+                        <div class="font-semibold text-sm mt-2">Parameters</div>
                         <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.extra.info && command.config.extra.info.parameterDescriptions && command.config.extra.info.parameterDescriptions[param.name]"
-                                   :content="command.config.extra.info.parameterDescriptions[param.name]"
+                          <li v-for="paramInfo in getSignatureParameters(signature)">
+                            <code>{{ renderParameter(paramInfo.name, paramInfo.param) }}</code>
+                            <router-link :to="'/docs/reference/argument-types#' + (paramInfo.param.type || 'string')">{{ paramInfo.param.type || 'string' }}</router-link>
+                            <MarkdownBlock v-if="paramInfo.param.description"
+                                           :content="paramInfo.param.description"
                                            class="content">
                             </MarkdownBlock>
                           </li>
                         </ul>
                       </div>
 
-              <div class="mt-2" v-if="command.config.options && command.config.options.length">
-                <span class="font-semibold">Options:</span>
+                      <div v-if="getSignatureOptions(signature).length">
+                        <div class="font-semibold text-sm mt-2">Options</div>
                         <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.extra.info && command.config.extra.info.optionDescriptions && command.config.extra.info.optionDescriptions[opt.name]"
-                                   :content="command.config.extra.info.optionDescriptions[opt.name]"
+                          <li v-for="optionInfo in getSignatureOptions(signature)">
+                            <code>{{ renderOption(optionInfo.name, optionInfo.option) }}</code>
+                            <router-link :to="'/docs/reference/argument-types#' + (optionInfo.option.type || 'string')">{{ optionInfo.option.type || 'string' }}</router-link>
+                            <MarkdownBlock v-if="optionInfo.option.description"
+                                           :content="optionInfo.option.description"
                                            class="content">
                             </MarkdownBlock>
                           </li>
                         </ul>
                       </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
             </template>
           </Expandable>
         </div>
@@ -203,17 +209,48 @@
           [this.pluginName]: options,
         });
       },
-      renderParameter(param) {
-        let str = `${param.name}`;
+      getTriggers(command) {
+        return Array.isArray(command.trigger)
+          ? command.trigger
+          : [command.trigger];
+      },
+      getCommandSignatures(command) {
+        if (!command.signature) {
+          return [];
+        }
+
+        return Array.isArray(command.signature)
+          ? command.signature
+          : [command.signature];
+      },
+      getSignatureParameters(signature) {
+        return Array.from(Object.entries(signature))
+          .filter(([name, paramOrOption]) => !(paramOrOption as any).option)
+          .map(([name, param]) => ({ name, param }));
+      },
+      getSignatureOptions(signature) {
+        return Array.from(Object.entries(signature))
+          .filter(([name, paramOrOption]) => Boolean((paramOrOption as any).option))
+          .map(([name, option]) => ({ name, option }));
+      },
+      renderParameterOrOption(name, paramOrOption) {
+        if (paramOrOption.option) {
+          return this.renderOption(name, paramOrOption);
+        }
+
+        return this.renderParameter(name, paramOrOption);
+      },
+      renderParameter(name, param) {
+        let str = name;
         if (param.rest) str += '...';
-        if (param.required) {
+        if (param.required !== false) {
           return `<${str}>`;
         } else {
           return `[${str}]`;
         }
       },
-      renderOption(opt) {
-        let str = `-${opt.name}`;
+      renderOption(name, opt) {
+        let str = `-${name}`;
         if (opt.shortcut) {
           str += `|-${opt.shortcut}`;
         }
@@ -223,8 +260,9 @@
           return `[${str}]`;
         }
       },
-      getCommandSlug(str) {
-        return 'command-' + str.trim().toLowerCase().replace(/\s/g, '-');
+      getCommandSlug(command) {
+        const mainTrigger = this.getTriggers(command)[0];
+        return 'command-' + mainTrigger.trim().toLowerCase().replace(/\s/g, '-');
       },
       scrollToCommand(hash) {
         if (this.$refs[hash]) {

dashboard/src/store/docs.ts

@@ -36,8 +36,8 @@ export const DocsStore: Module<DocsState, RootState> = {
       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();
+          const aName = (Array.isArray(a.trigger) ? a.trigger[0] : a.trigger).toLowerCase();
+          const bName = (Array.isArray(b.trigger) ? b.trigger[0] : b.trigger).toLowerCase();
           if (aName > bName) return 1;
           if (aName < bName) return -1;
           return 0;