Add branch version selector dropdown to user settings (discordjs#218)

* Update vuepress-theme-yuu to v1.1.0

* Install semver package

* Add branch selector dropdown to user settings

* Move localStorage usage to inside the mounted hook

* Add ".x" to master branch version label

* Lint Branch Vue component

* Add `inline` prop to Branch component

* Add section about how to use the Branch component

* Add quotes around `default` object key

* Revert "Add quotes around `default` object key"

This reverts commit a3a8050. Not needed
right now because of the current eslint config.

CONTRIBUTING.md

@@ -240,3 +240,41 @@ The `author` and `avatar` attributes must be strings, and the `bot` attribute mu
 Do note the `<div is="discord-messages">` syntax instead of `<discord-messages>`. This is due to how VuePress renders markdown and HTML inside markdown files and doesn't recognize `<discord-messages>` as an HTML element, therefore rendering anything indented inside as a regular codeblock.
 
 You can read more about how to use these components by checking out [the package's GitHub repo](https://github.com/Danktuary/vue-discord-message).
+
+### Branch-specific content
+
+On some pages, you'll want to display content that applies only to the stable branch and other content that applies to a different branch. You can use the `<branch>` component inside any .md file like so:
+
+```md
+You can use
+<branch version="11.x" inline>`message.channel.fetchMessages()`</branch>
+<branch version="12.x" inline>`message.channel.messages.fetch()`</branch>
+to fetch all messages in a channel
+```
+
+If you're on the `11.x` branch, you'd see "You can use `message.channel.fetchMessages()` to fetch all messages in a channel. Use the `inline` attribute to make content display inline with the content around it. Otherwise, it'll be displayed on its own line.
+
+You can refer to the `guide/.vuepress/branches.js` file to see which values are valid to use for the `version` attribute.
+
+#### Codeblocks and other markdown
+
+A common use-case for this component would be with codeblocks. Using Vue components inside markdown can get tricky and cause weird errors, so in order for everything to render properly, an extra blank line should be added before and after the component tag. For example (ignoring the `\` before the backticks):
+
+```md
+You can use the following to fetch all messages in a channel:
+
+<branch version="11.x">
+
+\```js
+message.channel.fetchMessages();
+\```
+
+</branch>
+<branch version="12.x">
+
+\```js
+message.channel.messages.fetch();
+\```
+
+</branch>
+```

guide/.vuepress/branches.js

@@ -0,0 +1,5 @@
+export default [
+	{ label: 'v11.x', version: '11.x' },
+	{ label: 'v11.5 (stable)', version: '11.5' },
+	{ label: 'v12.x (master)', version: '12.x' },
+];

guide/.vuepress/components/Branch.vue

@@ -0,0 +1,55 @@
+<template>
+	<span v-show="displayContent" :style="{ display: inline ? 'inline-block' : 'block' }">
+		<slot></slot>
+	</span>
+</template>
+
+<script>
+import semver from 'semver';
+import branches from '../branches.js';
+import eventBus from '../eventBus.js';
+
+const [defaultBranch] = branches;
+
+export default {
+	name: 'Branch',
+
+	props: {
+		version: {
+			type: String,
+			required: true,
+		},
+		inline: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			selectedBranch: defaultBranch.version,
+		};
+	},
+
+	computed: {
+		displayContent() {
+			return semver.satisfies(semver.coerce(this.version), this.selectedBranch);
+		},
+	},
+
+	mounted() {
+		this.selectedBranch = localStorage.getItem('branch-version') || defaultBranch.version;
+		eventBus.$on('branch-update', this.updateBranch);
+	},
+
+	destroyed() {
+		eventBus.$off('branch-update', this.updateBranch);
+	},
+
+	methods: {
+		updateBranch(branch) {
+			this.selectedBranch = branch;
+		},
+	},
+};
+</script>

guide/.vuepress/components/BranchSelector.vue

@@ -0,0 +1,56 @@
+<template>
+	<div>
+		<label for="branch-selector">Discord.js Version:</label>
+		<select id="branch-selector" v-model="selectedBranch" @change="updateBranch">
+			<option v-for="branch in branches" :key="branch.version" :value="branch.version">
+				{{ branch.label }}
+			</option>
+		</select>
+	</div>
+</template>
+
+<script>
+import branches from '../branches.js';
+import eventBus from '../eventBus.js';
+
+const [defaultBranch] = branches;
+
+export default {
+	name: 'BranchSelector',
+
+	data() {
+		return {
+			branches,
+			selectedBranch: defaultBranch.version,
+		};
+	},
+
+	mounted() {
+		this.selectedBranch = localStorage.getItem('branch-version') || defaultBranch.version;
+	},
+
+	methods: {
+		updateBranch() {
+			localStorage.setItem('branch-version', this.selectedBranch);
+			eventBus.$emit('branch-update', this.selectedBranch);
+		},
+	},
+};
+</script>
+
+<style>
+#branch-selector {
+	display: block;
+	width: 100%;
+	border-color: #eaecef;
+	padding: 5px;
+	box-sizing: border-box;
+	border-radius: 4px;
+}
+
+.yuu-theme-dark #branch-selector {
+	color: #f3f3f3;
+	background-color: #1a1a1a;
+	border-color: rgba(255, 255, 255, 0.1);
+}
+</style>

guide/.vuepress/config.js

@@ -17,6 +17,7 @@ const config = {
 	themeConfig: {
 		yuu: {
 			colorThemes: ['blue', 'red'],
+			extraOptions: { below: 'BranchSelector' },
 		},
 		algolia: {
 			apiKey: 'c8d9361fb8403f7c5111887e0edf4b5e',

guide/.vuepress/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();

package.json

@@ -31,7 +31,8 @@
     "vuepress": "^0.14.4"
   },
   "dependencies": {
+    "semver": "^6.0.0",
     "vue-discord-message": "^3.0.0",
-    "vuepress-theme-yuu": "^1.0.0"
+    "vuepress-theme-yuu": "^1.1.0"
   }
 }

yarn.lock

@@ -5848,6 +5848,11 @@ semver-diff@^2.0.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
 
+semver@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65"
+  integrity sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==
+
 serialize-javascript@^1.3.0, serialize-javascript@^1.4.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
@@ -6823,8 +6828,14 @@ vuepress-html-webpack-plugin@^3.2.0:
     util.promisify "1.0.0"
 
 vuepress-theme-yuu@^1.0.0:
+<<<<<<< HEAD
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/vuepress-theme-yuu/-/vuepress-theme-yuu-1.0.0.tgz#970b6aa8f5f6bd2e5db5d00539ccacba83ad4389"
+=======
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vuepress-theme-yuu/-/vuepress-theme-yuu-1.1.0.tgz#bbf177b82ba3eb0f52193042150d8b02946ede20"
+  integrity sha512-fuwT1xprMT9zz2d3cKO76DU6IaUe1H6U4g4e62aagsPH0na/DJLhXzIc1uxo/x3iU+EsJ95Guyb0pdpxRPzX9g==
+>>>>>>> Update vuepress-theme-yuu to v1.1.0
   dependencies:
     vue-click-outside "^1.0.7"