feat($theme-default): add code group and code block components (#2594)

vuejs · Sep 9, 2020 · 394c4f6 · 394c4f6
1 parent 4618913
commit 394c4f6
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 5 deletions.
diff --git a/packages/@vuepress/theme-default/global-components/CodeBlock.vue 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
@@ -0,0 +1,90 @@
+<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 />
+    <pre
+      v-if="codeTabs.length < 1"
+      class="pre-blank"
+    >// Make sure to add code blocks to your code group</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: -1
+    }
+  },
+  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, 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) {
+      this.activeCodeTabIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .theme-code-group {}
+  .theme-code-group__nav {
+    margin-bottom: -35px;
+    background-color: $codeBgColor;
+    padding-bottom: 22px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    padding-left: 10px;
+    padding-top: 10px;
+  }
+  .theme-code-group__nav-tab {
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    background-color: transparent;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+  }
+  .theme-code-group__nav-tab-active {
+    border-bottom: #42b983 1px solid;
+  }
+  .pre-blank {
+    color: #42b983;
+  }
+</style>
diff --git 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>
 ```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>
+    ```bash
+    yarn init
+    ```
+   </code-block>
+
+   <code-block title="NPM">
    ```bash
-   yarn init # npm init
+   npm init
    ```
+   </code-block>
+   </code-group>
 
 3. Install VuePress locally
 
+   <code-group>
+   <code-block title="YARN" active>
+   ```bash
+   yarn add -D vuepress
+   ```
+   </code-block>
+
+   <code-block title="NPM">
    ```bash
-   yarn add -D vuepress # npm install -D vuepress
+   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>
+   ```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).
 

diff --git 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.