Style changes

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

@@ -1,61 +1,34 @@
 <template>
-    <div class="command-argument-parent">
+    <span class="command-argument"><slot/></span>
-        <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 {
+        display: inline-block;
+        
         font-size: $exampleFontSize;
         font-family: $exampleFontFamily;
+        border-bottom: 1px solid darken($exampleArgColor, 15%);
         color: $exampleTextColor;
 
         padding: 0 0.5rem;
         background-color: $exampleArgColor;
         border-radius: 4px;
-        
+
         line-height: 1.7;
     }
-       
+
     .custom-block.tip .command-argument {
         background-color: $exampleArgColorInTip;
     }
-        
+
     .command-example .command-argument {
         background-color: $exampleArgColorInExample;
     }
-        
+
     .custom-block.tip .command-example .command-argument {
         background-color: $exampleArgColorInBoth;
     }
-
-    .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>

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

@@ -1,7 +1,12 @@
 <template>
     <p class="command-example">
         <span class="example-comment" v-if="comment">// {{ comment }}</span>
-        <span class="bot-prefix">pk;</span><slot></slot>
+        <span class="bot-prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined">
+            <span v-for="part in parse(usage)">
+            <span v-if="part.type === 'str'">{{ part.str }}</span>
+            <span v-else-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span>
+            </span>
+        </span>
     </p>
 </template>
 
@@ -10,32 +15,58 @@
         font-size: $exampleFontSize;
         font-family: $exampleFontFamily;
         color: $exampleTextColor;
-        
+
         background-color: $exampleBgColor;
         border-radius: 6px;
-        
+
-        margin: 0.5rem 0;
+        /*margin: 1rem 0;*/
         padding: 0.75rem 1.25rem;
-        
+
         clear: both;
+
+        margin-bottom: 10rem;
     }
-        
+
     .custom-block.tip .command-example {
         background-color: $exampleBgColorInTip;
     }
-    
+
     .bot-prefix {
         color: $examplePrefixColor;
     }
-    
+
     .example-comment {
         color: $exampleCommentColor;
-        float: right;
+        //float: right;
+
+        //@media (max-width: $MQNarrow) {
+        display: block;
+        //float: none;
+        margin-bottom: -0.15rem;
+        //}
     }
 </style>
 
 <script>
     export default {
-        props: ["comment"]
+        props: ["usage", "comment"],
+        methods: {
+            parse(usage) {
+                const parts = [];
+                let lastMatch = 0;
+
+                for (const match of usage.matchAll(/`([^`]+)`/g)) {
+                    if (match.index > 0)
+                        parts.push({type: "str", str: usage.substring(lastMatch, match.index)});
+                    parts.push({type: "arg", arg: match[1]});
+                    lastMatch = match.index + match[0].length;
+                }
+
+                if (lastMatch < usage.length)
+                    parts.push({type: "str", str: usage.substring(lastMatch)});
+
+                return parts;
+            }
+        }
     }
 </script>

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

@@ -11,6 +11,7 @@
         color: $exampleTextColor;
         padding: 0.2rem 0.4rem;
         border-radius: 3px;
+        border-bottom: 1px solid darken($exampleArgColor, 15%);
     }
         
     .custom-block.tip .example-inline {

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

@@ -10,22 +10,12 @@
 
         <h4>Syntax <small>(how the command is used)</small></h4>
         <CmdGroup>
-            <Cmd v-for="usage in command.usage" :comment="usage.desc">
+            <Cmd v-for="usage in command.usage" :comment="usage.desc" :usage="usage.cmd || usage" />
-                <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 v-if="command.examples">Examples</h4>
         <CmdGroup v-if="command.examples">
-            <Cmd v-for="example in command.examples" :comment="example.desc">
+            <Cmd v-for="example in command.examples" :comment="example.desc" :usage="example.cmd || example" />
-                <span v-for="part in parseUsage(example)">
-                    <span v-if="part.type === 'str'">{{ part.str }}</span>
-                    <span v-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span>
-                </span>
-            </Cmd>
         </CmdGroup>
 
         <h4 v-if="command.arguments">Arguments <small>(fill in above)</small></h4>
@@ -41,25 +31,6 @@
             <Arg>-{{ key }}</Arg>
             - {{ flag.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>
 
@@ -71,27 +42,6 @@
 
         data() {
             return {command: commands[this.cmd]};
-        },
-
-        methods: {
-            parseUsage(usage) {
-                if (usage.cmd) usage = usage.cmd;
-
-                const argRegex = /`([^`]+)`/g;
-                const parts = [];
-                let lastMatch = 0;
-                for (const match of usage.matchAll(argRegex)) {
-                    if (match.index > 0)
-                        parts.push({type: "str", str: usage.substring(lastMatch, match.index)});
-                    parts.push({type: "arg", arg: match[1]});
-                    lastMatch = match.index + match[0].length;
-                }
-                if (lastMatch < usage.length)
-                    parts.push({type: "str", str: usage.substring(lastMatch)});
-                console.log("INPUT STRING:", usage);
-                console.log("OUTPUT TOKENS:", parts);
-                return parts;
-            }
         }
     }
 </script>

docs/content/.vuepress/styles/palette.styl

@@ -3,19 +3,16 @@ $textColor = #2c3e50;
 $accentColor = darken(#e8a024, 10%);
 
 // CUSTOM
-/*$exampleBgColor = $codeBgColor;
-$exampleTextColor = #ffffff;*/
 $exampleBgColor = #f3f5f7;
 $exampleBgColorInTip = darken($exampleBgColor, 4%);
 $exampleTextColor = darken($textColor, 5%);
-$exampleArgColor = darken($exampleBgColor, 4%);
+$exampleArgColor = darken($exampleBgColor, 1%);
-$exampleArgColorInExample = darken($exampleBgColor, 8%);
+$exampleArgColorInExample = darken($exampleBgColor, 4%);
-$exampleArgColorInTip = darken($exampleBgColor, 7%);
+$exampleArgColorInTip = darken($exampleBgColor, 3%);
-$exampleArgColorInBoth = darken($exampleBgColor, 12%);
+$exampleArgColorInBoth = darken($exampleBgColor, 8%);
 $tipDarkenFactor = 3;
 $exampleDarkenFactor = 5;
-//$examplePrefixColor = #b3b6b9;
-$examplePrefixColor = desaturate(lighten($textColor, 40%), 50%);
 $exampleCommentColor = darken($accentColor, 15%);
+$examplePrefixColor = desaturate(lighten($exampleCommentColor, 20%), 10%);
 $exampleFontSize = 0.9rem;
 $exampleFontFamily = source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;