feat(docs): add code block (#96)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

Author: alexzhang1030

docs/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitepress'
-import { nav, sidebar } from './data'
+import { markdownConfig, nav, sidebar } from './configs'
 
 export default defineConfig({
   lang: 'en-US',
@@ -37,10 +37,7 @@ gtag('config', 'G-29NKGSL23C');`,
   description: 'Explore and extend more macros and syntax sugar to Vue.',
   lastUpdated: true,
   cleanUrls: 'with-subfolders',
-  markdown: {
-    theme: 'material-palenight',
-    lineNumbers: true,
-  },
+  markdown: markdownConfig,
 
   vue: {
     reactivityTransform: true,

docs/.vitepress/configs/index.ts

@@ -0,0 +1,2 @@
+export * from './navs'
+export * from './markdown'

docs/.vitepress/configs/markdown.ts

@@ -0,0 +1,19 @@
+import { useCodeGroup, useCodeGroupItem } from '../theme/components/markdown'
+import type { MarkdownOptions } from 'vitepress'
+
+/**
+ * vitepress markdown config
+ * @see https://vitepress.vuejs.org/config/app-configs.html#markdown
+ */
+export const markdownConfig: MarkdownOptions = {
+  lineNumbers: true,
+  theme: 'material-palenight',
+  config: (md) => {
+    md.use(useCodeGroup.container, useCodeGroup.type, {
+      render: useCodeGroup.render,
+    })
+    md.use(useCodeGroupItem.container, useCodeGroupItem.type, {
+      render: useCodeGroupItem.render,
+    })
+  },
+}

docs/.vitepress/data.ts docs/.vitepress/configs/navs.tsdocs/.vitepress/data.ts renamed to docs/.vitepress/configs/navs.ts

@@ -0,0 +1,79 @@
+import { defineComponent, h, ref } from 'vue'
+import type { Component, ComponentOptions, VNode } from 'vue'
+
+export const CodeGroup: ComponentOptions = defineComponent({
+  name: 'CodeGroup',
+
+  setup(_, { slots }) {
+    // index of current active item
+    const activeIndex = ref(-1)
+
+    return () => {
+      // NOTICE: here we put the `slots.default()` inside the render function to make
+      // the slots reactive, otherwise the slot content won't be changed once the
+      // `setup()` function of current component is called
+
+      // get children code-group-item
+      const items = (slots.default?.() || [])
+        .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem')
+        .map((vnode) => {
+          if (vnode.props === null) vnode.props = {}
+
+          return vnode as VNode & { props: Exclude<VNode['props'], null> }
+        })
+
+      // do not render anything if there is no code-group-item
+      if (items.length === 0) return null
+
+      if (activeIndex.value < 0 || activeIndex.value > items.length - 1) {
+        // if `activeIndex` is invalid
+
+        // find the index of the code-group-item with `active` props
+        activeIndex.value = items.findIndex(
+          (vnode) => vnode.props.active === '' || vnode.props.active === true
+        )
+
+        // if there is no `active` props on code-group-item, set the first item active
+        if (activeIndex.value === -1) activeIndex.value = 0
+      } else {
+        // set the active item
+        items.forEach((vnode, i) => {
+          vnode.props.active = i === activeIndex.value
+        })
+      }
+
+      return h('div', { class: 'code-group' }, [
+        h(
+          'div',
+          { class: 'code-group__nav' },
+          h(
+            'ul',
+            { class: 'code-group__ul' },
+            items.map((vnode, i) => {
+              const isActive = i === activeIndex.value
+
+              return h(
+                'li',
+                { class: 'code-group__li' },
+                h(
+                  'button',
+                  {
+                    class: {
+                      'code-group__nav-tab': true,
+                      'code-group__nav-tab-active': isActive,
+                    },
+                    ariaPressed: isActive,
+                    ariaExpanded: isActive,
+                    onClick: () => (activeIndex.value = i),
+                  },
+                  vnode.props.title
+                )
+              )
+            })
+          )
+        ),
+        items,
+      ])
+    }
+  },
+})

docs/.vitepress/theme/components/CodeGroup.ts

@@ -0,0 +1,72 @@
+<script lang="tsx">
+import { defineComponent, ref } from 'vue'
+import type { Component } from 'vue'
+export default defineComponent({
+  name: 'CodeGroup',
+  setup(_, { slots }) {
+    const currentIndex = ref(0)
+    return () => {
+      // use jsx instead of template because we need to change slots
+      // so jsx could handle but template not
+      const items = (slots.default?.() ?? [])
+        .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem')
+        .map((vnode) => {
+          vnode.props = vnode.props ?? {}
+          return vnode
+        })
+
+      items.forEach((item, index) => {
+        item.props!.active = index === currentIndex.value
+      })
+
+      return (
+        <div rounded="2" overflow="hidden" my="4" w="full">
+          <div
+            w="full"
+            flex="~"
+            justify="start"
+            items="center"
+            gap="10px"
+            h="12"
+            dark:bg="#27272A"
+            bg="#F5F5F5"
+            px="3"
+            py="4"
+            box="border"
+          >
+            {items.map((item, index) => (
+              <div
+                key={index}
+                cursor="pointer"
+                text="sm black"
+                px="2"
+                py="5px"
+                tracking="tight"
+                transition="colors"
+                rounded="6px"
+                box="border"
+                class={[
+                  'dark:color-white hover:bg-#E5E5E5 dark:hover:bg-#3A3A3D',
+                  {
+                    active: index === currentIndex.value,
+                  },
+                ]}
+                onClick={() => (currentIndex.value = index)}
+              >
+                {item.props?.title}
+              </div>
+            ))}
+          </div>
+          <div>{items}</div>
+        </div>
+      )
+    }
+  },
+})
+</script>
+
+<style scoped>
+.active {
+  --at-apply: dark:bg-#3f3f46 bg-#e6e6e6;
+}
+</style>

docs/.vitepress/theme/components/CodeGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'CodeGroupItem',
+  inheritAttrs: false,
+})
+
+defineProps<{
+  title: string
+  active: boolean
+}>()
+</script>
+<template>
+  <div v-if="active" class="content"><slot /></div>
+</template>
+<style scoped>
+.content :deep(div[class*='language-']) {
+  border-radius: 0;
+  border-top: none;
+  margin: 0;
+}
+</style>

docs/.vitepress/theme/components/CodeGroupItem.vue

@@ -0,0 +1,13 @@
+import { useMarkdownContainer } from './plugins/container'
+
+export const useCodeGroup = useMarkdownContainer({
+  type: 'code-group',
+  before: () => '<CodeGroup>\n',
+  after: () => '</CodeGroup>\n',
+})
+
+export const useCodeGroupItem = useMarkdownContainer({
+  type: 'code-group-item',
+  before: (info: string) => `<CodeGroupItem title="${info}">\n`,
+  after: () => '</CodeGroupItem>\n',
+})

docs/.vitepress/theme/components/markdown/index.ts

@@ -0,0 +1,59 @@
+import container from 'markdown-it-container'
+
+type RenderPlaceFunction = (info: string) => string
+
+interface ContainerPluginOptions {
+  /**
+   * The type of the container
+   *
+   * It would be used as the `name` of the container
+   *
+   * @see https://github.com/markdown-it/markdown-it-container#api
+   */
+  type: string
+
+  /**
+   * A function to render the starting tag of the container.
+   *
+   * This option will not take effect if you don't specify the `after` option.
+   */
+  before: RenderPlaceFunction
+
+  /**
+   * A function to render the ending tag of the container.
+   *
+   * This option will not take effect if you don't specify the `before` option.
+   */
+  after: RenderPlaceFunction
+}
+
+/** Powered by vuepress-next */
+export const useMarkdownContainer = ({
+  type,
+  after,
+  before,
+}: ContainerPluginOptions) => {
+  const infoStack: string[] = []
+  const render = (tokens: any, index: number): string => {
+    const token = tokens[index]
+    if (token.nesting === 1) {
+      // resolve info (title)
+      const info = token.info.trim().slice(type.length).trim()
+      infoStack.push(info)
+      return before(info)
+    } else {
+      // `after` tag
+
+      // pop the info from stack
+      const info = infoStack.pop() || ''
+
+      // render
+      return after(info)
+    }
+  }
+  return {
+    container,
+    type,
+    render,
+  }
+}

docs/.vitepress/theme/components/markdown/plugins/container.ts

@@ -0,0 +1,5 @@
+declare module 'markdown-it-container' {
+  import type { PluginWithParams } from 'markdown-it'
+  const container: PluginWithParams
+  export = container
+}