Initial docs rewrite using Vuepress

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

@@ -0,0 +1,47 @@
+<template>
+    <div class="command-argument-parent">
+        <div class="command-argument">
+            <slot />
+        </div>
+        
+        <div v-if="false" class="argument-details">
+            {{ name }}
+            <span v-if="optional !== undefined">(optional)</span>
+        </div>
+    </div>
+
+</template>
+
+<style lang="stylus">
+    .command-argument-parent {
+        display: inline-flex;
+        flex-direction: column;
+
+        text-align: center;
+    }
+        
+    .command-argument {
+        padding: 0 0.5rem;
+        background-color: lighten($exampleBgColor, 15%);
+        border-radius: 4px;
+    }
+    
+    .argument-details {
+        font-size: 0.75em;
+        font-style: italic; 
+    }
+    
+    .arg-input {
+        /*font-size: 0.9rem;*/
+        color: $exampleTextColor;
+        background-color: transparent;
+        text-align: center;
+        border: none;
+    }
+</style>
+
+<script>
+    export default {
+        props: ["optional", "name", "edit", "value"],
+    }
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+    <p class="command-example">
+        <span class="bot-prefix">pk;</span><slot></slot>
+    </p>
+</template>
+
+<style lang="stylus">
+    .command-example {
+        font-size: $exampleFontSize;
+        font-family: $exampleFontFamily;
+
+        color: $exampleTextColor;
+        background-color: $exampleBgColor;
+        border-radius: 6px;
+        
+        margin: 0.5rem 0;
+        padding: 0.75rem 1.25rem;
+    }
+    
+    .bot-prefix {
+        color: $examplePrefixColor;
+    }
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+    <div class="command-example-group">
+        <slot />
+    </div>
+</template>
+
+<style lang="stylus">
+    .command-example-group {
+        background-color: $exampleBgColor;
+        border-radius: 6px;
+        
+        padding: 0.75rem 1.25rem;
+    }
+    
+    .command-example-group .command-example {
+        margin: 0;
+        padding: 0;
+    }
+    
+    .command-example-group .command-example:not(:last-child) {
+        margin-bottom: 0.5rem;
+    }
+</style>

docs/content/.vuepress/components/CmdInline.vue

@@ -0,0 +1,19 @@
+<template>
+    <span class="example-inline"><span class="inline-bot-prefix">pk;</span><slot /></span>
+</template>
+
+<style lang="stylus">
+    .example-inline {
+        font-size: $exampleFontSize;
+        font-family: $exampleFontFamily;
+        
+        background-color: $exampleBgColor;
+        color: $exampleTextColor;
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+    }
+        
+    .inline-bot-prefix {
+        color: $examplePrefixColor;
+    }
+</style>