Feat(starter): docs code group

starters/docs/components/bases/CodeBlock.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="code-block" :class="[active && 'active']">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.code-block {
+  display: none;
+}
+.code-block.active {
+  display: block;
+}
+</style>

starters/docs/components/bases/CodeGroup.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="code-group">
+    <div class="rounded-t border-b-2 border-gray-700 px-2 bg-gray-800 text-sm text-white relative ">
+      <button
+        v-for="({ label }, i) in tabs"
+        ref="tabs"
+        :key="label"
+        class="px-4 py-3 text-gray-400 font-bold font-mono"
+        :class="[activeTabIndex === i && 'active']"
+        @click="updateTabs(i)"
+      >
+        {{ label }}
+      </button>
+      <span ref="highlight-underline" class="highlight-underline" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tabs: [],
+      activeTabIndex: 0
+    }
+  },
+  watch: {
+    activeTabIndex (newValue, oldValue) {
+      this.switchTab(newValue)
+    }
+  },
+  created () {
+    this.$slots.default.map((slot) => {
+      this.tabs.push({
+        label: slot.componentOptions.propsData.label,
+        elm: null
+      })
+    })
+    this.activeTabIndex = 0
+  },
+  mounted () {
+    this.tabs = this.$slots.default.map((slot) => {
+      return {
+        label: slot.componentOptions.propsData.label,
+        elm: slot.elm
+      }
+    })
+    this.updateHighlighteUnderlinePosition()
+  },
+  methods: {
+    switchTab (i) {
+      this.tabs.map((tab) => {
+        tab.elm.classList.remove('active')
+      })
+      this.tabs[i].elm.classList.add('active')
+    },
+    updateTabs (i) {
+      this.activeTabIndex = i
+      this.updateHighlighteUnderlinePosition()
+    },
+    updateHighlighteUnderlinePosition () {
+      const activeTab = this.$refs.tabs[this.activeTabIndex]
+      if (!activeTab) {
+        return
+      }
+      const highlightUnderline = this.$refs['highlight-underline']
+      highlightUnderline.style.left = `${activeTab.offsetLeft}px`
+      highlightUnderline.style.width = `${activeTab.clientWidth}px`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+button {
+  outline: none;
+}
+
+.highlight-underline {
+  @apply bg-green-600 absolute;
+  bottom: -2px;
+  height: 2px;
+  transition: left 150ms, width 150ms;
+}
+
+.code-group ::v-deep {
+  pre[class*="language-"] {
+    @apply rounded-t-none;
+  }
+}
+</style>

starters/docs/content/en/installation.md

@@ -6,10 +6,26 @@ position: 2
 
 Add `@nuxtjs/content` dependency to your project:
 
+<code-group>
+
+<code-block label="Yarn" active>
+
 ```bash
-yarn add @nuxtjs/content # npm install @nuxtjs/content
+yarn add @nuxtjs/content
 ```
 
+</code-block>
+
+<code-block label="NPM">
+
+```bash
+npm install @nuxtjs/content
+```
+
+</code-block>
+
+</code-group>
+
 Then, add `@nuxtjs/content` to the `modules` section of `nuxt.config.js`:
 
 ```js