From e918dfd4d5f24a05aad68b9db3f93c883720d79b Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Wed, 2 Sep 2020 12:23:42 -0500
Subject: [PATCH 1/6] feat($theme-default): add code group and code block
 components

---
 .../global-components/CodeBlock.vue           | 36 ++++++++++
 .../global-components/CodeGroup.vue           | 69 +++++++++++++++++++
 packages/docs/docs/guide/getting-started.md   | 51 ++++++++++++--
 3 files changed, 150 insertions(+), 6 deletions(-)
 create mode 100644 packages/@vuepress/theme-default/global-components/CodeBlock.vue
 create mode 100644 packages/@vuepress/theme-default/global-components/CodeGroup.vue

diff --git a/packages/@vuepress/theme-default/global-components/CodeBlock.vue b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
new file mode 100644
index 0000000000..fc1dc71742
--- /dev/null
+++ b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="theme-code-block"
+    :class="{ 'theme-code-block__active': active }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-block {
+    display: none;
+  }
+  .theme-code-block__active {
+    display: block;
+  }
+  .theme-code-block > pre {
+    background-color: orange;
+  }
+</style>
diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
new file mode 100644
index 0000000000..20f3789503
--- /dev/null
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="theme-code-group">
+    <div class="theme-code-group__nav">
+      <button
+        v-for="(tab, i) in codeTabs"
+        :key="tab.title"
+        class="theme-code-group__nav-tab"
+        :class="{'theme-code-group__nav-tab-active': i === activeCodeTabIndex}"
+        @click="changeCodeTab(i)"
+      >
+        {{ tab.title }}
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: 0
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.codeTabs.forEach(tab => {
+        tab.elm.classList.remove('theme-code-block__active')
+      })
+      this.codeTabs[index].elm.classList.add('theme-code-block__active')
+    }
+  },
+  mounted () {
+    this.codeTabs = this.$slots.default.filter(slot => Boolean(slot.componentOptions)).map(slot => ({
+      title: slot.componentOptions.propsData.title,
+      elm: slot.elm
+    }))
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-group {}
+  .theme-code-group__nav {
+    margin-bottom: -35px;
+    background-color: #282c34;
+    padding-bottom: 22px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    font-size: 1.5rem;
+  }
+  .theme-code-group__nav-tab {
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    background-color: transparent;
+    color: white;
+  }
+  .theme-code-group__nav-tab-active {
+    border-bottom: #42b983 1px solid;
+  }
+</style>
diff --git a/packages/docs/docs/guide/getting-started.md b/packages/docs/docs/guide/getting-started.md
index 8b839378ff..d17bf763fa 100644
--- a/packages/docs/docs/guide/getting-started.md
+++ b/packages/docs/docs/guide/getting-started.md
@@ -13,10 +13,19 @@ The fastest way to get your VuePress project setup is to use our [create-vuepres
 
 To use it, open up your terminal in the desired directory and run the following command:
 
+<code-group>
+<code-block title="YARN" :active="true">
 ```bash
 yarn create vuepress-site [optionalDirectoryName]
-# OR npx create-vuepress-site [optionalDirectoryName]
 ```
+</code-block>
+
+<code-block title="NPM">
+```bash
+npx create-vuepress-site [optionalDirectoryName]
+```
+</code-block>
+</code-group>
 
 You will then have the opportunity to configure your VuePress site’s metadata such as:
 
@@ -40,15 +49,35 @@ This section will help you build a basic VuePress documentation site from ground
 
 2. Initialize with your preferred package manager
 
+   <code-group>
+   <code-block title="YARN" :active="true">
+    ```bash
+    yarn init
+    ```
+   </code-block>
+
+   <code-block title="NPM">
    ```bash
-   yarn init # npm init
+   npm init
    ```
+   </code-block>
+   </code-group>
 
 3. Install VuePress locally
 
-   ```bash
-   yarn add -D vuepress # npm install -D vuepress
-   ```
+    <code-group>
+    <code-block title="YARN" :active="true">
+    ```bash
+    yarn add -D vuepress
+    ```
+    </code-block>
+
+    <code-block title="NPM">
+    ```bash
+    npm install -D vuepress
+    ```
+    </code-block>
+    </code-group>
 
 4. Create your first document
 
@@ -71,9 +100,19 @@ This section will help you build a basic VuePress documentation site from ground
 
 6. Serve the documentation site in the local server
 
+   <code-group>
+   <code-block title="YARN" :active="true">
+   ```bash
+   yarn docs:dev
+   ```
+   </code-block>
+
+   <code-block title="NPM">
    ```bash
-   yarn docs:dev # npm run docs:dev
+   npm run docs:dev
    ```
+   </code-block>
+   </code-group>
 
    VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080).
 

From be9d466b6f335d38db9d53d683781b5bce01014b Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Wed, 2 Sep 2020 12:39:58 -0500
Subject: [PATCH 2/6] docs: update wording to proper usage

---
 packages/docs/docs/guide/getting-started.md   | 24 +++++++++----------
 .../docs/docs/theme/default-theme-config.md   |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/docs/docs/guide/getting-started.md b/packages/docs/docs/guide/getting-started.md
index d17bf763fa..a713a44a60 100644
--- a/packages/docs/docs/guide/getting-started.md
+++ b/packages/docs/docs/guide/getting-started.md
@@ -65,19 +65,19 @@ This section will help you build a basic VuePress documentation site from ground
 
 3. Install VuePress locally
 
-    <code-group>
-    <code-block title="YARN" :active="true">
-    ```bash
-    yarn add -D vuepress
-    ```
-    </code-block>
+   <code-group>
+   <code-block title="YARN" :active="true">
+   ```bash
+   yarn add -D vuepress
+   ```
+   </code-block>
 
-    <code-block title="NPM">
-    ```bash
-    npm install -D vuepress
-    ```
-    </code-block>
-    </code-group>
+   <code-block title="NPM">
+   ```bash
+   npm install -D vuepress
+   ```
+   </code-block>
+   </code-group>
 
 4. Create your first document
 
diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index 354eb5475d..d2982c1549 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -559,7 +559,7 @@ This will render `.vuepress/components/SpecialLayout.vue` for the given page.
 
 ## Ejecting
 
-You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn't install Vuepress globally, run `./node_modules/.bin/vuepress eject`.
+You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn’t install VuePress globally, run `./node_modules/.bin/vuepress eject`.
 
 ::: warning
 Once you eject, you are on your own and **won’t** be receiving future updates or bugfixes to the default theme even if you upgrade VuePress.

From a19519620210bdc447cdc989e02d7c21fc95b107 Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Wed, 2 Sep 2020 13:07:46 -0500
Subject: [PATCH 3/6] docs: use implicit truthy of boolean CodeBlock attribute

---
 packages/docs/docs/guide/getting-started.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docs/docs/guide/getting-started.md b/packages/docs/docs/guide/getting-started.md
index a713a44a60..e2fcd4c756 100644
--- a/packages/docs/docs/guide/getting-started.md
+++ b/packages/docs/docs/guide/getting-started.md
@@ -14,7 +14,7 @@ The fastest way to get your VuePress project setup is to use our [create-vuepres
 To use it, open up your terminal in the desired directory and run the following command:
 
 <code-group>
-<code-block title="YARN" :active="true">
+<code-block title="YARN" active>
 ```bash
 yarn create vuepress-site [optionalDirectoryName]
 ```
@@ -50,7 +50,7 @@ This section will help you build a basic VuePress documentation site from ground
 2. Initialize with your preferred package manager
 
    <code-group>
-   <code-block title="YARN" :active="true">
+   <code-block title="YARN" active>
     ```bash
     yarn init
     ```
@@ -66,7 +66,7 @@ This section will help you build a basic VuePress documentation site from ground
 3. Install VuePress locally
 
    <code-group>
-   <code-block title="YARN" :active="true">
+   <code-block title="YARN" active>
    ```bash
    yarn add -D vuepress
    ```
@@ -101,7 +101,7 @@ This section will help you build a basic VuePress documentation site from ground
 6. Serve the documentation site in the local server
 
    <code-group>
-   <code-block title="YARN" :active="true">
+   <code-block title="YARN" active>
    ```bash
    yarn docs:dev
    ```

From e9bec76bdf48d0215254ae766502dd32be2aa3b6 Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Wed, 2 Sep 2020 13:37:47 -0500
Subject: [PATCH 4/6] feat: code group provides logical fallthrough behavior

---
 .../global-components/CodeGroup.vue           | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
index 20f3789503..d4e03be565 100644
--- a/packages/@vuepress/theme-default/global-components/CodeGroup.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -12,6 +12,10 @@
       </button>
     </div>
     <slot />
+    <pre
+      v-if="codeTabs.length < 1"
+      class="pre-blank"
+    >// Make sure to add code blocks to your code group</pre>
   </div>
 </template>
 
@@ -21,7 +25,7 @@ export default {
   data () {
     return {
       codeTabs: [],
-      activeCodeTabIndex: 0
+      activeCodeTabIndex: -1
     }
   },
   watch: {
@@ -33,10 +37,20 @@ export default {
     }
   },
   mounted () {
-    this.codeTabs = this.$slots.default.filter(slot => Boolean(slot.componentOptions)).map(slot => ({
-      title: slot.componentOptions.propsData.title,
-      elm: slot.elm
-    }))
+    this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
+      if (slot.componentOptions.propsData.active === '') {
+        this.activeCodeTabIndex = index
+      }
+
+      return {
+        title: slot.componentOptions.propsData.title,
+        elm: slot.elm
+      }
+    })
+
+    if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+      this.activeCodeTabIndex = 0
+    }
   },
   methods: {
     changeCodeTab (index) {
@@ -66,4 +80,7 @@ export default {
   .theme-code-group__nav-tab-active {
     border-bottom: #42b983 1px solid;
   }
+  .pre-blank {
+    color: #42b983;
+  }
 </style>

From f253a8f5e899df3da7d98474148662c2fff0cdb2 Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Wed, 2 Sep 2020 13:49:56 -0500
Subject: [PATCH 5/6] feat: code group tabs styled properly

---
 .../theme-default/global-components/CodeGroup.vue        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
index d4e03be565..3588fcc90b 100644
--- a/packages/@vuepress/theme-default/global-components/CodeGroup.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -68,14 +68,19 @@ export default {
     padding-bottom: 22px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
-    font-size: 1.5rem;
+    padding-left: 10px;
+    padding-top: 10px;
   }
   .theme-code-group__nav-tab {
     border: 0;
     padding: 5px;
     cursor: pointer;
     background-color: transparent;
-    color: white;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: #FFFFFF; /* Fallback for older browsers */
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
   }
   .theme-code-group__nav-tab-active {
     border-bottom: #42b983 1px solid;

From 0f60aab7c5a2e9cfd8db276f2a3b23fa80048fce Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Thu, 3 Sep 2020 13:26:53 -0500
Subject: [PATCH 6/6] feat: code group uses codeBgColor for background

---
 .../@vuepress/theme-default/global-components/CodeGroup.vue  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
index 3588fcc90b..e0a340b2a1 100644
--- a/packages/@vuepress/theme-default/global-components/CodeGroup.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -60,11 +60,11 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="stylus" scoped>
   .theme-code-group {}
   .theme-code-group__nav {
     margin-bottom: -35px;
-    background-color: #282c34;
+    background-color: $codeBgColor;
     padding-bottom: 22px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
@@ -78,7 +78,6 @@ export default {
     background-color: transparent;
     font-size: 0.85em;
     line-height: 1.4;
-    color: #FFFFFF; /* Fallback for older browsers */
     color: rgba(255, 255, 255, 0.9);
     font-weight: 600;
   }