Add "data-based" command doc framework basics

docs/content/.vuepress/components/Arg.vue

@@ -21,9 +21,15 @@
     }
         
     .command-argument {
+        font-size: $exampleFontSize;
+        font-family: $exampleFontFamily;
+        color: $exampleTextColor;
+
         padding: 0 0.5rem;
         background-color: lighten($exampleBgColor, 15%);
         border-radius: 4px;
+        
+        line-height: 1.7;
     }
     
     .argument-details {

docs/content/.vuepress/components/Cmd.vue

@@ -1,6 +1,7 @@
 <template>
     <p class="command-example">
         <span class="bot-prefix">pk;</span><slot></slot>
+        <span class="example-comment" v-if="comment">// {{ comment }}</span>
     </p>
 </template>
 
@@ -8,8 +9,8 @@
     .command-example {
         font-size: $exampleFontSize;
         font-family: $exampleFontFamily;
-
         color: $exampleTextColor;
+        
         background-color: $exampleBgColor;
         border-radius: 6px;
         
@@ -20,4 +21,15 @@
     .bot-prefix {
         color: $examplePrefixColor;
     }
-</style>
+    
+    .example-comment {
+        color: $exampleCommentColor;
+        float: right;
+    }
+</style>
+
+<script>
+    export default {
+        props: ["comment"]
+    }
+</script>

docs/content/.vuepress/components/CmdGroup.vue

@@ -8,7 +8,8 @@
     .command-example-group {
         background-color: $exampleBgColor;
         border-radius: 6px;
-        
+
+        margin: 0.5rem 0;
         padding: 0.75rem 1.25rem;
     }
     

docs/content/.vuepress/components/CommandInfo.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="command-info">
+        <h3 :id="cmd">
+            <a class="header-anchor" :href="'#' + cmd">#</a>
+            {{ command.title }}
+        </h3>
+        <p>{{ command.summary }}</p>
+
+        <slot></slot>
+
+        <CmdGroup>
+            <Cmd v-for="usage in command.usage" :comment="usage.desc">
+                <span v-for="part in parseUsage(usage)">
+                    <span v-if="part.type === 'str'">{{ part.str }}</span>
+                    <span v-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span>
+                </span>
+            </Cmd>
+        </CmdGroup>
+
+        <h4>Arguments</h4>
+        <div v-for="(arg, key) in command.arguments">
+            <Arg>{{ key }}</Arg> (<strong v-if="arg.type === 'string'">text</strong><strong v-if="arg.type === 'system'">system ID</strong><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}. 
+        </div>
+
+        <!--table>
+            <thead>
+            <tr>
+                <th>Argument</th>
+                <th>Type</th>
+                <th>Description</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(arg, key) in command.arguments">
+                <td>
+                    <Arg>{{ key }}</Arg>
+                </td>
+                <td>{{ arg.type }}</td>
+                <td>{{ arg.desc }}</td>
+            </tr>
+            </tbody>
+        </table-->
+    </div>
+</template>
+
+<script>
+    import commands from "../../../commands/commands";
+
+    export default {
+        props: ["cmd"],
+
+        data() {
+            return {command: commands[this.cmd]};
+        },
+
+        methods: {
+            parseUsage(usage) {
+                if (usage.cmd) usage = usage.cmd;
+
+                const parts = usage.split(/\s/);
+                const output = [];
+                for (const part of parts) {
+                    const match = part.match(/`([\w\-]+)`/);
+                    if (match)
+                        output.push({type: "arg", arg: match[1]});
+                    else
+                        output.push({type: "str", str: part})
+                }
+                return output;
+            }
+        }
+    }
+</script>
+
+<style>
+    .command-info {
+        margin-bottom: 2.5rem;
+    }
+
+    .command-info h3 {
+        margin-bottom: 0;
+    }
+
+    .command-info p {
+        margin-top: 0.25rem;
+    }
+
+    .command-info h4 {
+        margin-bottom: 0.75rem;
+    }
+</style>