feat: port CodeGroup & CodeBlock to vitepress

.gitignore

@@ -7,3 +7,4 @@
 dist
 node_modules
 TODOs.md
+.idea

docs/guide/getting-started.md

@@ -10,15 +10,35 @@ This section will help you build a basic VitePress documentation site from groun
 
 - **Step. 2:** Initialize with your preferred package manager.
 
+  <CodeGroup>
+  <CodeBlock title="YARN" active>
   ```bash
   $ yarn init
   ```
+  </CodeBlock>
+  
+  <CodeBlock title="NPM">
+  ```bash
+  $ npm init
+  ```
+  </CodeBlock>
+  </CodeGroup>
 
 - **Step. 3:** Install VitePress locally.
 
+  <CodeGroup>
+  <CodeBlock title="YARN" active>
   ```bash
   $ yarn add --dev vitepress
   ```
+  </CodeBlock>
+
+  <CodeBlock title="NPM">
+  ```bash
+  $ npm install --dev vitepress
+  ```
+  </CodeBlock>
+  </CodeGroup>
 
 - **Step. 4:** Create your first document.
 
@@ -40,9 +60,19 @@ This section will help you build a basic VitePress documentation site from groun
 
 - **Step. 6:** Serve the documentation site in the local server.
 
+  <CodeGroup>
+  <CodeBlock title="YARN" active>
   ```bash
   $ yarn docs:dev
   ```
+  </CodeBlock>
+
+  <CodeBlock title="NPM">
+  ```bash
+  $ yarn run docs:dev
+  ```
+  </CodeBlock>
+  </CodeGroup>
 
   VitePress will start a hot-reloading development server at http://localhost:3000.
 

src/client/app/index.ts

@@ -9,6 +9,8 @@ import { usePageData } from './composables/pageData'
 import { useUpdateHead } from './composables/head'
 import Theme from '/@theme/index'
 import { usePrefetch } from './composables/preFetch'
+import CodeGroup from '/@theme/components/global/CodeGroup.vue'
+import CodeBlock from '/@theme/components/global/CodeBlock.vue'
 
 const NotFound = Theme.NotFound || (() => '404 Not Found')
 
@@ -29,6 +31,8 @@ export function createApp() {
   handleHMR(router)
 
   const app = newApp()
+  app.component('CodeGroup', CodeGroup)
+  app.component('CodeBlock', CodeBlock)
 
   app.provide(RouterSymbol, router)
 

src/client/theme-default/components/global/CodeBlock.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-show="!_internal ? true : active">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      required: true
+    } as PropType<string>,
+    active: {
+      type: [Boolean, String],
+    },
+    _internal: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    }
+  },
+  name: "CodeBlock"
+})
+</script>
+
+<style scoped>
+
+</style>

src/client/theme-default/components/global/CodeGroup.vue

@@ -0,0 +1,70 @@
+<script lang="ts">
+import { defineComponent, h } from "vue";
+import { CodeGroupTabState } from "/@theme/components/global/types";
+import CodeBlock from "/@theme/components/global/CodeBlock.vue";
+
+export default defineComponent({
+  name: "CodeGroup",
+  components: { CodeBlock },
+  data() {
+    return {
+      tabs: [] as CodeGroupTabState[],
+      activeTabIndex: -1
+    }
+  },
+  mounted() {
+    let activeTabIndex = -1;
+    const tabs: CodeGroupTabState[] = [];
+
+    const blocks = (this.$slots.default?.() || []).filter(s => s.type.name === 'CodeBlock');
+
+    blocks.forEach(({ props: { title, active = false }, children }, index) => {
+      if (activeTabIndex === -1 && typeof active === 'string') {
+        activeTabIndex = index;
+      }
+
+      tabs.push({
+        index: index,
+        title: title,
+        content: children?.length
+      })
+    });
+
+    this.tabs = tabs
+    this.activeTabIndex = activeTabIndex
+    console.log(this)
+  },
+  render() {
+    const hCodeBlocks = this.tabs.map(
+        tab => h(
+            CodeBlock,
+            {
+              active: this.activeTabIndex === tab.index,
+              title: tab.title,
+              _internal: true
+            },
+            {
+              default: (props) => {
+                const children = this.$slots.default ? this.$slots.default(props) : []
+
+                return children[tab.index]
+              }
+          }
+        )
+    )
+    const hTabNav = h('div', { class: 'code-group__nav' },
+        this.tabs.map(tab =>
+            h(
+                'button',
+                {
+                  class: `code-group__nav-button ${this.activeTabIndex === tab.index ? 'code-group__nav-button-active' : ''}`,
+                  onClick: () => (this.activeTabIndex = tab.index)
+                },
+                tab.title
+            )
+        )
+    )
+    return h('div', { class: 'code-group' }, [hTabNav, ...hCodeBlocks])
+  }
+})
+</script>

src/client/theme-default/components/global/types.ts

@@ -0,0 +1,5 @@
+export interface CodeGroupTabState {
+  title: string
+  index: number
+  content: string
+}