From 3ff3bfd5f01c394d6351a85fe3509576aabaebc7 Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Sun, 29 Sep 2019 15:53:14 +0300
Subject: [PATCH] dashboard: separate plugin usage/configuration, add usage
 guide + configuration guide

---
 dashboard/package-lock.json                   | 348 +++++++++++++++++-
 dashboard/package.json                        |   5 +-
 .../docs/{Layout.vue => DocsLayout.vue}       |  11 +-
 .../src/components/docs/MarkdownBlock.vue     |  34 ++
 dashboard/src/components/docs/Plugin.vue      | 174 +++++----
 dashboard/src/main.ts                         |   3 -
 dashboard/src/routes.ts                       |   6 +-
 dashboard/src/store/types.ts                  |   8 +
 dashboard/src/style/docs.scss                 |  19 +
 dashboard/src/style/icons.scss                |   1 +
 10 files changed, 524 insertions(+), 85 deletions(-)
 rename dashboard/src/components/docs/{Layout.vue => DocsLayout.vue} (92%)
 create mode 100644 dashboard/src/components/docs/MarkdownBlock.vue
 create mode 100644 dashboard/src/style/icons.scss

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 5e5694bc..f027c189 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -2084,6 +2084,12 @@
       "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
       "dev": true
     },
+    "camelcase": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+      "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -2187,6 +2193,17 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
       "dev": true
     },
+    "cliui": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^2.1.1",
+        "strip-ansi": "^4.0.0",
+        "wrap-ansi": "^2.0.0"
+      }
+    },
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -2210,6 +2227,12 @@
         "q": "^1.1.2"
       }
     },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
     "codemirror": {
       "version": "5.48.0",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz",
@@ -2851,6 +2874,12 @@
         "ms": "^2.1.1"
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -3054,6 +3083,12 @@
       "integrity": "sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=",
       "dev": true
     },
+    "duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
+      "dev": true
+    },
     "duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -3223,6 +3258,34 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "execa": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^5.0.1",
+        "get-stream": "^3.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        }
+      }
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -3458,6 +3521,15 @@
         }
       }
     },
+    "find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "dev": true,
+      "requires": {
+        "locate-path": "^2.0.0"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4062,12 +4134,24 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "get-caller-file": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+      "dev": true
+    },
     "get-port": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
       "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=",
       "dev": true
     },
+    "get-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+      "dev": true
+    },
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -4146,6 +4230,16 @@
         "unicode-trie": "^0.3.1"
       }
     },
+    "gzip-size": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
+      "integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "pify": "^3.0.0"
+      }
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -4271,9 +4365,9 @@
       "dev": true
     },
     "highlight.js": {
-      "version": "9.15.8",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.8.tgz",
-      "integrity": "sha512-RrapkKQWwE+wKdF73VsOa2RQdIoO3mxwJ4P8mhbI6KYJUraUHRKM5w5zQQKXNk0xNL4UVRdulV9SBJcmzJNzVA=="
+      "version": "9.15.10",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz",
+      "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw=="
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -4470,6 +4564,12 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "invert-kv": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
+      "dev": true
+    },
     "is-absolute-url": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
@@ -4609,6 +4709,12 @@
         "number-is-nan": "^1.0.0"
       }
     },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
+    },
     "is-glob": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -4677,6 +4783,12 @@
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
       "dev": true
     },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "dev": true
+    },
     "is-svg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
@@ -4886,6 +4998,15 @@
       "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
       "dev": true
     },
+    "lcid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "dev": true,
+      "requires": {
+        "invert-kv": "^1.0.0"
+      }
+    },
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -4902,6 +5023,16 @@
         "type-check": "~0.3.2"
       }
     },
+    "locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "dev": true,
+      "requires": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
     "lodash": {
       "version": "4.17.11",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
@@ -5006,6 +5137,15 @@
       "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
       "dev": true
     },
+    "mem": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
+      "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^1.0.0"
+      }
+    },
     "merge-source-map": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.0.4.tgz",
@@ -5278,6 +5418,15 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "dev": true,
+      "requires": {
+        "path-key": "^2.0.0"
+      }
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -5470,6 +5619,17 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
+    "os-locale": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
+      "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+      "dev": true,
+      "requires": {
+        "execa": "^0.7.0",
+        "lcid": "^1.0.0",
+        "mem": "^1.1.0"
+      }
+    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -5486,6 +5646,36 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dev": true,
+      "requires": {
+        "p-try": "^1.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "dev": true,
+      "requires": {
+        "p-limit": "^1.1.0"
+      }
+    },
+    "p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+      "dev": true
+    },
     "pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
@@ -5557,6 +5747,16 @@
         "ws": "^5.1.1"
       }
     },
+    "parcel-plugin-bundle-visualiser": {
+      "version": "git://github.com/Dragory/parcel-plugin-bundle-visualiser.git#ffde124d9e07bdd11644e3df7828b5b2195bc271",
+      "from": "git://github.com/Dragory/parcel-plugin-bundle-visualiser.git#explicit-env-var",
+      "dev": true,
+      "requires": {
+        "filesize": "^3.6.0",
+        "gzip-size": "^4.1.0",
+        "yargs": "^11.0.0"
+      }
+    },
     "parse-asn1": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.4.tgz",
@@ -5611,6 +5811,12 @@
       "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
       "dev": true
     },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -5654,6 +5860,12 @@
       "integrity": "sha1-GN4vl+S/epVRrXURlCtUlverpmA=",
       "dev": true
     },
+    "pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "dev": true
+    },
     "pn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
@@ -6488,6 +6700,18 @@
         "tough-cookie": "^2.3.3"
       }
     },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "dev": true
+    },
     "resolve": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz",
@@ -6675,6 +6899,12 @@
         "send": "0.17.1"
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
     "set-value": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
@@ -7063,6 +7293,16 @@
         "xtend": "^4.0.0"
       }
     },
+    "string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
+      "requires": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -7081,6 +7321,12 @@
         "ansi-regex": "^3.0.0"
       }
     },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
+      "dev": true
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -7603,12 +7849,8 @@
       }
     },
     "vue-highlightjs": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz",
-      "integrity": "sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=",
-      "requires": {
-        "highlight.js": "*"
-      }
+      "version": "git://github.com/Dragory/vue-highlightjs.git#5cd0d3d82fe16b4ff51ecf45e9a527b0d35aa0fa",
+      "from": "git://github.com/Dragory/vue-highlightjs.git#pass-hljs-instance"
     },
     "vue-hot-reload-api": {
       "version": "2.3.3",
@@ -7700,12 +7942,65 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
       "dev": true
     },
+    "wrap-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -7733,11 +8028,46 @@
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
       "dev": true
     },
+    "y18n": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "dev": true
+    },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
+    },
+    "yargs": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
+      "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
+      "dev": true,
+      "requires": {
+        "cliui": "^4.0.0",
+        "decamelize": "^1.1.1",
+        "find-up": "^2.1.0",
+        "get-caller-file": "^1.0.1",
+        "os-locale": "^2.0.0",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^1.0.1",
+        "set-blocking": "^2.0.0",
+        "string-width": "^2.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^3.2.1",
+        "yargs-parser": "^9.0.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-9.0.2.tgz",
+      "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=",
+      "dev": true,
+      "requires": {
+        "camelcase": "^4.1.0"
+      }
     }
   }
 }
diff --git a/dashboard/package.json b/dashboard/package.json
index cd8d203a..85bff6ee 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "build": "rimraf dist && parcel build src/index.html --no-source-maps --out-dir dist",
+    "build-with-report": "cross-env GENERATE_BUNDLE_SIZE_REPORT=1 npm run build",
     "build-debug": "rimraf dist && cross-env NODE_ENV=development parcel build src/index.html --no-minify --out-dir dist",
     "watch": "parcel src/index.html"
   },
@@ -15,6 +16,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "cross-env": "^5.2.0",
     "parcel-bundler": "^1.12.3",
+    "parcel-plugin-bundle-visualiser": "git://github.com/Dragory/parcel-plugin-bundle-visualiser.git#explicit-env-var",
     "sass": "^1.21.0",
     "vue-template-compiler": "^2.6.10"
   },
@@ -22,12 +24,13 @@
     "buefy": "^0.7.10",
     "bulma": "^0.7.5",
     "bulmaswatch": "^0.7.2",
+    "highlight.js": "^9.15.10",
     "js-cookie": "^2.2.0",
     "js-yaml": "^3.13.1",
     "marked": "^0.7.0",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
-    "vue-highlightjs": "^1.3.3",
+    "vue-highlightjs": "git://github.com/Dragory/vue-highlightjs.git#pass-hljs-instance",
     "vue-hot-reload-api": "^2.3.3",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"
diff --git a/dashboard/src/components/docs/Layout.vue b/dashboard/src/components/docs/DocsLayout.vue
similarity index 92%
rename from dashboard/src/components/docs/Layout.vue
rename to dashboard/src/components/docs/DocsLayout.vue
index 5b9de5f1..1cb05868 100644
--- a/dashboard/src/components/docs/Layout.vue
+++ b/dashboard/src/components/docs/DocsLayout.vue
@@ -133,14 +133,21 @@
 
 <script>
   import Vue from "vue";
+  import hljs from "highlight.js/lib/highlight.js";
+  import hljsYaml from "highlight.js/lib/languages/yaml.js";
   import VueHighlightJS from "vue-highlightjs";
+  import Buefy from "buefy";
   import {mapState} from "vuex";
 
-  import "../../directives/trim-code";
+  import "../../style/icons.scss";
+  import "buefy/dist/buefy.css";
   import "highlight.js/styles/ocean.css";
+  import "../../directives/trim-code";
   import "../../style/docs.scss";
 
-  Vue.use(VueHighlightJS);
+  hljs.registerLanguage("yaml", hljsYaml);
+  Vue.use(VueHighlightJS, { hljs });
+  Vue.use(Buefy);
 
   export default {
     async mounted() {
diff --git a/dashboard/src/components/docs/MarkdownBlock.vue b/dashboard/src/components/docs/MarkdownBlock.vue
new file mode 100644
index 00000000..ecd052d3
--- /dev/null
+++ b/dashboard/src/components/docs/MarkdownBlock.vue
@@ -0,0 +1,34 @@
+<template>
+  <div ref="rendered"></div>
+</template>
+
+<script>
+  import marked from "marked";
+  import hljs from "highlight.js";
+
+  export default {
+    props: ["content"],
+    methods: {
+      renderContent() {
+        const rendered = marked(this.content || "");
+        const target = this.$refs.rendered;
+        target.innerHTML = rendered;
+        target.querySelectorAll("code[class*='language-']").forEach(elem => {
+          if (elem.parentNode.tagName === 'PRE') {
+            elem.parentNode.classList.add('codeblock');
+          }
+
+          hljs.highlightBlock(elem);
+        });
+      }
+    },
+    mounted() {
+      this.renderContent();
+    },
+    watch: {
+      content() {
+        this.renderContent();
+      },
+    },
+  };
+</script>
diff --git a/dashboard/src/components/docs/Plugin.vue b/dashboard/src/components/docs/Plugin.vue
index 6f2aee6e..818880da 100644
--- a/dashboard/src/components/docs/Plugin.vue
+++ b/dashboard/src/components/docs/Plugin.vue
@@ -4,92 +4,134 @@
   </div>
   <div v-else>
     <h1 class="z-title is-1 mb-1">{{ data.info.prettyName || data.name }}</h1>
-    <p class="mb-1">
-      Name in config: <code>{{ data.name }}</code>
-    </p>
 
-    <div v-if="data.info.description" class="content" v-html="renderMarkdown(data.info.description)"></div>
+    <div class="tabs">
+      <ul>
+        <li v-bind:class="{'is-active': tab === 'usage'}">
+          <router-link v-bind:to="'/docs/plugins/' + pluginName + '/usage'">Usage</router-link>
+        </li>
+        <li v-bind:class="{'is-active': tab === 'configuration'}">
+          <router-link v-bind:to="'/docs/plugins/' + pluginName + '/configuration'">Configuration</router-link>
+        </li>
+      </ul>
+    </div>
 
-    <p class="mt-1 mb-1">
-      To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
-    </p>
+    <!-- Usage tab -->
+    <div class="usage" v-if="tab === 'usage'">
+      <!-- Description -->
+      <MarkdownBlock :content="data.info.description" class="content"></MarkdownBlock>
 
-    <h2 id="default-configuration" class="z-title is-2 mt-2 mb-1">Default configuration</h2>
-    <CodeBlock lang="yaml">{{ renderConfiguration(data.options) }}</CodeBlock>
-    <b-collapse :open="false" class="card mt-1 mb-1">
-      <div slot="trigger" slot-scope="props" class="card-header" role="button">
-        <p class="card-header-title">Config schema</p>
-        <a class="card-header-icon">
-          <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
-        </a>
+      <!-- Usage guide -->
+      <div v-if="data.info.usageGuide">
+        <h2 id="usage-guide" class="z-title is-2 mt-2 mb-1">Usage guide</h2>
+        <MarkdownBlock :content="data.info.usageGuide" class="content"></MarkdownBlock>
       </div>
-      <div class="card-content">
-        <CodeBlock lang="plain">{{ data.configSchema }}</CodeBlock>
-      </div>
-    </b-collapse>
 
-    <div v-if="data.commands.length">
-      <h2 id="commands" class="z-title is-2 mt-2 mb-1">Commands</h2>
-      <div v-for="command in data.commands">
-        <h3 class="z-title is-3 mt-2 mb-1">!{{ command.trigger }}</h3>
-        <div v-if="command.config.requiredPermission">
-          Permission: <code>{{ command.config.requiredPermission }}</code>
-        </div>
-        <div v-if="command.config.info && command.config.info.basicUsage">
-          Basic usage: <code>{{ command.config.info.basicUsage }}</code>
-        </div>
-        <div v-if="command.config.aliases && command.config.aliases.length">
-          Shortcut:
-          <code style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
-        </div>
-        <div v-if="command.config.info && command.config.info.description" class="content mt-1 mb-1" v-html="renderMarkdown(command.config.info.description)"></div>
-
-        <b-collapse :open="false" class="card mt-1 mb-1">
-          <div slot="trigger" slot-scope="props" class="card-header" role="button">
-            <p class="card-header-title">Additional information</p>
-            <a class="card-header-icon">
-              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
-            </a>
+      <!-- Command list -->
+      <div v-if="data.commands.length">
+        <h2 id="commands" class="z-title is-2 mt-2 mb-1">Commands</h2>
+        <div v-for="command in data.commands">
+          <h3 class="z-title is-3 mt-2 mb-1">!{{ command.trigger }}</h3>
+          <div v-if="command.config.requiredPermission">
+            Permission: <code>{{ command.config.requiredPermission }}</code>
+          </div>
+          <div v-if="command.config.info && command.config.info.basicUsage">
+            Basic usage: <code>{{ command.config.info.basicUsage }}</code>
+          </div>
+          <div v-if="command.config.aliases && command.config.aliases.length">
+            Shortcut:
+            <code style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
           </div>
-          <div class="card-content">
-            Signatures:
-            <ul class="z-list z-ul">
-              <li>
-                <code>
-                  !{{ command.trigger }}
-                  <span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
-                </code>
-              </li>
-            </ul>
 
-            <div class="mt-2" v-if="command.parameters.length">
-              Command arguments:
+          <MarkdownBlock v-if="command.config.info && command.config.info.description" :content="command.config.info.description" class="content mt-1 mb-1"></MarkdownBlock>
+
+          <b-collapse :open="false" class="card mt-1 mb-1">
+            <div slot="trigger" slot-scope="props" class="card-header" role="button">
+              <p class="card-header-title">Additional information</p>
+              <a class="card-header-icon">
+                <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
+              </a>
+            </div>
+            <div class="card-content">
+              Signatures:
               <ul class="z-list z-ul">
-                <li v-for="param in command.parameters">
-                  <code>{{ renderParameter(param) }}</code>
-                  <router-link :to="'/docs/descriptions/argument-types#' + (param.type || 'string')">{{ param.type || 'string' }}</router-link>
-                  <div v-if="command.config.info && command.config.info.parameterDescriptions && command.config.info.parameterDescriptions[param.name]" class="content">
-                    {{ renderMarkdown(command.config.info.parameterDescriptions[param.name]) }}
-                  </div>
+                <li>
+                  <code>
+                    !{{ command.trigger }}
+                    <span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
+                  </code>
                 </li>
               </ul>
+
+              <div class="mt-2" v-if="command.parameters.length">
+                Command arguments:
+                <ul class="z-list z-ul">
+                  <li v-for="param in command.parameters">
+                    <code>{{ renderParameter(param) }}</code>
+                    <router-link :to="'/docs/descriptions/argument-types#' + (param.type || 'string')">{{ param.type || 'string' }}</router-link>
+                    <MarkdownBlock v-if="command.config.info && command.config.info.parameterDescriptions && command.config.info.parameterDescriptions[param.name]"
+                                   :content="command.config.info.parameterDescriptions[param.name]"
+                                   class="content">
+                    </MarkdownBlock>
+                  </li>
+                </ul>
+              </div>
             </div>
-          </div>
-        </b-collapse>
+          </b-collapse>
+        </div>
       </div>
     </div>
+
+    <!-- Configuration tab -->
+    <div class="configuration" v-if="tab === 'configuration'">
+      <!-- Basic config info -->
+      <p class="mb-1">
+        Name in config: <code>{{ data.name }}</code>
+      </p>
+      <p class="mt-1 mb-1">
+        To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
+      </p>
+
+      <!-- Configuration guide -->
+      <div v-if="data.info.configurationGuide">
+        <h2 id="configuration-guide" class="z-title is-2 mt-2 mb-1">Configuration guide</h2>
+        <MarkdownBlock :content="data.info.configurationGuide" class="content"></MarkdownBlock>
+      </div>
+
+      <!-- Default configuration -->
+      <h2 id="default-configuration" class="z-title is-2 mt-2 mb-1">Default configuration</h2>
+      <CodeBlock lang="yaml">{{ renderConfiguration(data.defaultOptions) }}</CodeBlock>
+
+      <!-- Config schema -->
+      <h2 id="config-schema" class="z-title is-2 mt-2 mb-1">Config schema</h2>
+      <b-collapse :open="false" class="card mt-1 mb-1">
+        <div slot="trigger" slot-scope="props" class="card-header" role="button">
+          <p class="card-header-title">Click to expand</p>
+          <a class="card-header-icon">
+            <b-icon :icon="props.open ? 'menu-up' : 'menu-down'"></b-icon>
+          </a>
+        </div>
+        <div class="card-content">
+          <CodeBlock lang="plain">{{ data.configSchema }}</CodeBlock>
+        </div>
+      </b-collapse>
+    </div>
   </div>
 </template>
 
 <script>
   import Vue from "vue";
   import {mapState} from "vuex";
-  import marked from "marked";
   import yaml from "js-yaml";
   import CodeBlock from "./CodeBlock";
+  import MarkdownBlock from "./MarkdownBlock";
+  import Tabs from "../shared/Tabs";
+
+  const validTabs = ['usage', 'configuration'];
+  const defaultTab = 'usage';
 
   export default {
-    components: { CodeBlock },
+    components: { CodeBlock, MarkdownBlock, Tabs },
 
     async mounted() {
       this.loading = true;
@@ -97,9 +139,6 @@
       this.loading = false;
     },
     methods: {
-      renderMarkdown(str) {
-        return marked(str);
-      },
       renderConfiguration(options) {
         return yaml.safeDump({
           [this.pluginName]: options,
@@ -119,6 +158,9 @@
       return {
         loading: true,
         pluginName: this.$route.params.pluginName,
+        tab: validTabs.includes(this.$route.params.tab)
+          ? this.$route.params.tab
+          : defaultTab,
       };
     },
     computed: {
diff --git a/dashboard/src/main.ts b/dashboard/src/main.ts
index ff700e91..1c73d9a0 100644
--- a/dashboard/src/main.ts
+++ b/dashboard/src/main.ts
@@ -1,8 +1,6 @@
 import "./style/base.scss";
-import "buefy/dist/buefy.css";
 
 import Vue from "vue";
-import Buefy from "buefy";
 import { RootStore } from "./store";
 import { router } from "./routes";
 
@@ -21,7 +19,6 @@ Vue.mixin({
 
 import App from "./components/App.vue";
 
-Vue.use(Buefy);
 const app = new Vue({
   router,
   store: RootStore,
diff --git a/dashboard/src/routes.ts b/dashboard/src/routes.ts
index f90b6171..4b709eda 100644
--- a/dashboard/src/routes.ts
+++ b/dashboard/src/routes.ts
@@ -1,8 +1,6 @@
 import Vue from "vue";
 import VueRouter, { RouteConfig } from "vue-router";
 import Splash from "./components/Splash.vue";
-import Login from "./components/Login.vue";
-import LoginCallback from "./components/LoginCallback.vue";
 import { authGuard, authRedirectGuard, loginCallbackGuard } from "./auth";
 
 Vue.use(VueRouter);
@@ -17,7 +15,7 @@ export const router = new VueRouter({
     // Docs
     {
       path: "/docs",
-      component: () => import("./components/docs/Layout.vue"),
+      component: () => import("./components/docs/DocsLayout.vue"),
       children: [
         {
           path: "",
@@ -40,7 +38,7 @@ export const router = new VueRouter({
           component: () => import("./components/docs/ArgumentTypes.vue"),
         },
         {
-          path: "plugins/:pluginName",
+          path: "plugins/:pluginName/:tab?",
           component: () => import("./components/docs/Plugin.vue"),
         },
       ],
diff --git a/dashboard/src/store/types.ts b/dashboard/src/store/types.ts
index 82fae8b0..cefdacf2 100644
--- a/dashboard/src/store/types.ts
+++ b/dashboard/src/store/types.ts
@@ -31,6 +31,14 @@ export interface ThinDocsPlugin {
 
 export interface DocsPlugin extends ThinDocsPlugin {
   commands: any[];
+  defaultOptions: any;
+  configSchema?: string;
+  info: {
+    name: string;
+    description?: string;
+    usageGuide?: string;
+    configurationGuide?: string;
+  };
 }
 
 export interface DocsState {
diff --git a/dashboard/src/style/docs.scss b/dashboard/src/style/docs.scss
index 33f7c9a3..2189dc27 100644
--- a/dashboard/src/style/docs.scss
+++ b/dashboard/src/style/docs.scss
@@ -1,5 +1,6 @@
 @import url('https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css');
 
+$bulmaswatch-import-font: false;
 $family-primary: 'Open Sans', sans-serif;
 $list-background-color: transparent;
 
@@ -9,9 +10,15 @@ $size-3: 1.5rem;
 $size-4: 1.25rem;
 
 @import "~bulmaswatch/superhero/_variables";
+
+$tabs-link-color: $grey-light;
+$tabs-link-active-color: $grey-lighter;
+$tabs-link-active-border-bottom-color: $grey-lighter;
+
 @import "~bulma/bulma";
 @import "~bulmaswatch/superhero/_overrides";
 
+
 .docs-cloak {
   visibility: visible !important;
 }
@@ -42,3 +49,15 @@ $size-4: 1.25rem;
 .mb-1 { margin-bottom: 1rem; }
 .mb-2 { margin-bottom: 1.5rem; }
 .mb-3 { margin-bottom: 2rem; }
+
+.codeblock,
+.content .codeblock {
+  border-radius: 3px;
+  padding: 16px;
+  max-width: 970px; /* FIXME: temp fix for overflowing code blocks, look into properly later */
+}
+
+.codeblock .hljs {
+  background: transparent;
+  padding: 0;
+}
diff --git a/dashboard/src/style/icons.scss b/dashboard/src/style/icons.scss
new file mode 100644
index 00000000..a5f73a62
--- /dev/null
+++ b/dashboard/src/style/icons.scss
@@ -0,0 +1 @@
+@import url("https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css");