Revamp !help command. Add support for linking to specific commands in zep docs.

dashboard/src/components/docs/Plugin.vue

@@ -27,21 +27,22 @@
       <!-- Usage guide -->
       <div v-if="data.info.usageGuide">
         <h2 id="usage-guide">Usage guide</h2>
-        <MarkdownBlock :content="data.info.usageGuide" class="content"></MarkdownBlock>
+        <MarkdownBlock :content="data.info.usageGuide" class="content" />
       </div>
 
       <!-- Command list -->
       <div v-if="data.commands.length">
         <h2 id="commands">Commands</h2>
-        <div v-for="command in data.commands" class="mb-4">
+        <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"
-                         class="content">
-          </MarkdownBlock>
+                         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">
@@ -144,6 +145,17 @@
   </div>
 </template>
 
+<style scoped>
+  .command.target {
+    @apply mt-5 mb-3;
+    @apply pt-2 pb-2 pl-4 pr-4;
+    @apply border;
+    @apply border-gray-400;
+    @apply border-dashed;
+    @apply rounded;
+  }
+</style>
+
 <script lang="ts">
   import Vue from "vue";
   import {mapState} from "vuex";
@@ -172,6 +184,18 @@
       }
 
       this.loading = false;
+
+      this.$nextTick(() => {
+        if (this.tab === "usage" && window.location.hash) {
+          this.scrollToCommand(window.location.hash.slice(1));
+        }
+      });
+
+      this.hashChangeListener = () => this.scrollToCommand(window.location.hash.slice(1));
+      window.addEventListener('hashchange', this.hashChangeListener);
+    },
+    beforeDestroy() {
+      window.removeEventListener('hashchange', this.hashChangeListener);
     },
     methods: {
       renderConfiguration(options) {
@@ -199,6 +223,20 @@
           return `[${str}]`;
         }
       },
+      getCommandSlug(str) {
+        return 'command-' + str.trim().toLowerCase().replace(/\s/g, '-');
+      },
+      scrollToCommand(hash) {
+        if (this.$refs[hash]) {
+          this.targetCommandId = hash;
+          (this.$refs[hash][0] as Element).scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+        } else {
+          this.targetCommandId = null;
+        }
+      },
     },
     data() {
       return {
@@ -207,6 +245,8 @@
         tab: validTabs.includes(this.$route.params.tab)
           ? this.$route.params.tab
           : defaultTab,
+        targetCommandId: null,
+        hashChangeListener: null
       };
     },
     computed: {

src/plugins/Utility.ts

@@ -26,6 +26,7 @@ import {
   DAYS,
   embedPadding,
   errorMessage,
+  get,
   getInviteCodesInString,
   isSnowflake,
   MINUTES,
@@ -1110,7 +1111,10 @@ export class UtilityPlugin extends ZeppelinPlugin<TConfigSchema> {
   helpCmd(msg: Message, args: { command: string }) {
     const searchStr = args.command.toLowerCase();
 
-    const matchingCommands: Array<ICommandDefinition<ICommandContext, ICommandExtraData>> = [];
+    const matchingCommands: Array<{
+      plugin: ZeppelinPlugin;
+      command: ICommandDefinition<ICommandContext, ICommandExtraData>;
+    }> = [];
 
     const guildData = this.knub.getGuildData(this.guildId);
     for (const plugin of guildData.loadedPlugins.values()) {
@@ -1118,18 +1122,48 @@ export class UtilityPlugin extends ZeppelinPlugin<TConfigSchema> {
 
       const registeredCommands = plugin.getRegisteredCommands();
       for (const registeredCommand of registeredCommands) {
-        for (const trigger of registeredCommand.command.triggers) {
-          if (trigger.source.startsWith(searchStr)) {
-            matchingCommands.push(registeredCommand.command);
+        for (const trigger of registeredCommand.command.originalTriggers) {
+          const strTrigger = typeof trigger === "string" ? trigger : trigger.source;
+
+          if (strTrigger.startsWith(searchStr)) {
+            matchingCommands.push({
+              plugin,
+              command: registeredCommand.command,
+            });
           }
         }
       }
     }
 
     const totalResults = matchingCommands.length;
-    const limitedResults = matchingCommands.slice(0, 15);
-    const signatures = limitedResults.map(command => {
-      return "`" + getCommandSignature(command) + "`";
+    const limitedResults = matchingCommands.slice(0, 3);
+    const commandSnippets = limitedResults.map(({ plugin, command }) => {
+      const prefix: string = command.originalPrefix
+        ? typeof command.originalPrefix === "string"
+          ? command.originalPrefix
+          : command.originalPrefix.source
+        : "";
+
+      const originalTrigger = command.originalTriggers[0];
+      const trigger: string = originalTrigger
+        ? typeof originalTrigger === "string"
+          ? originalTrigger
+          : originalTrigger.source
+        : "";
+
+      const description = get(command, "config.extra.info.description");
+      const basicUsage = get(command, "config.extra.info.basicUsage");
+      const commandSlug = trigger
+        .trim()
+        .toLowerCase()
+        .replace(/\s/g, "-");
+
+      let snippet = `**${prefix}${trigger}**`;
+      if (description) snippet += `\n${description}`;
+      if (basicUsage) snippet += `\nBasic usage: \`${basicUsage}\``;
+      snippet += `\n<https://zeppelin.gg/docs/plugins/${plugin.runtimePluginName}/usage#command-${commandSlug}>`;
+
+      return snippet;
     });
 
     if (totalResults === 0) {
@@ -1139,10 +1173,10 @@ export class UtilityPlugin extends ZeppelinPlugin<TConfigSchema> {
 
     let message =
       totalResults !== limitedResults.length
-        ? `Results (${totalResults} total, showing first ${limitedResults.length}):`
-        : `Results:`;
+        ? `Results (${totalResults} total, showing first ${limitedResults.length}):\n\n`
+        : "";
 
-    message += `\n\n${signatures.join("\n")}`;
+    message += `${commandSnippets.join("\n\n")}`;
     createChunkedMessage(msg.channel, message);
   }