From 96f28730ed2cb49dbd6d2001b97b8aca6d6b2f84 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Fri, 6 Aug 2021 00:34:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85vitepress=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/text-input/src/text-input.scss          |   1 +
 devui/text-input/src/text-input.tsx           |   1 +
 sites/.vitepress/config/sidebar.ts            |  28 ++
 sites/.vitepress/devui-theme/Layout.vue       | 188 +++++++++++
 sites/.vitepress/devui-theme/NotFound.vue     |  20 ++
 .../components/AlgoliaSearchBox.vue           | 178 +++++++++++
 .../devui-theme/components/BuySellAds.vue     | 148 +++++++++
 .../devui-theme/components/CarbonAds.vue      |  99 ++++++
 .../devui-theme/components/EditLink.vue       |  38 +++
 .../devui-theme/components/Home.vue           |  38 +++
 .../devui-theme/components/HomeFeatures.vue   | 143 +++++++++
 .../devui-theme/components/HomeFooter.vue     |  50 +++
 .../devui-theme/components/HomeHero.vue       | 165 ++++++++++
 .../devui-theme/components/LastUpdated.vue    |  58 ++++
 .../devui-theme/components/NavBar.vue         |  61 ++++
 .../devui-theme/components/NavBarTitle.vue    |  38 +++
 .../components/NavDropdownLink.vue            | 135 ++++++++
 .../components/NavDropdownLinkItem.vue        |  76 +++++
 .../devui-theme/components/NavLink.vue        |  61 ++++
 .../devui-theme/components/NavLinks.vue       |  52 +++
 .../components/NextAndPrevLinks.vue           |  88 ++++++
 .../devui-theme/components/Page.vue           |  53 ++++
 .../devui-theme/components/PageFooter.vue     |  41 +++
 .../devui-theme/components/SearchBox.vue      | 290 +++++++++++++++++
 .../devui-theme/components/SideBar.vue        |  63 ++++
 .../devui-theme/components/SideBarLink.d.ts   |   6 +
 .../devui-theme/components/SideBarLink.js     |  68 ++++
 .../devui-theme/components/SideBarLinks.vue   |  12 +
 .../components/ToggleSideBarButton.vue        |  46 +++
 .../components/icons/ArrowLeft.vue            |   7 +
 .../components/icons/ArrowRight.vue           |   7 +
 .../components/icons/OutboundLink.vue         |  31 ++
 .../devui-theme/components/match-query.js     |  50 +++
 .../devui-theme/components/test.d.ts          |   4 +
 .../.vitepress/devui-theme/components/test.js |   1 +
 .../composables/activeSidebarLink.d.ts        |   1 +
 .../composables/activeSidebarLink.js          |  99 ++++++
 .../devui-theme/composables/editLink.d.ts     |   4 +
 .../devui-theme/composables/editLink.js       |  47 +++
 .../devui-theme/composables/nav.d.ts          |   2 +
 .../.vitepress/devui-theme/composables/nav.js |  45 +++
 .../devui-theme/composables/navLink.d.ts      |  15 +
 .../devui-theme/composables/navLink.js        |  42 +++
 .../composables/nextAndPrevLinks.d.ts         |   5 +
 .../composables/nextAndPrevLinks.js           |  37 +++
 .../devui-theme/composables/repo.d.ts         |   5 +
 .../devui-theme/composables/repo.js           |  37 +++
 .../devui-theme/composables/sideBar.d.ts      |   2 +
 .../devui-theme/composables/sideBar.js        |  57 ++++
 sites/.vitepress/devui-theme/config.d.ts      | 112 +++++++
 sites/.vitepress/devui-theme/config.js        |   1 +
 sites/.vitepress/devui-theme/index.d.ts       |   8 +
 sites/.vitepress/devui-theme/index.js         |  12 +
 sites/.vitepress/devui-theme/styles/code.css  | 298 ++++++++++++++++++
 .../devui-theme/styles/custom-blocks.css      |  70 ++++
 .../.vitepress/devui-theme/styles/layout.css  | 236 ++++++++++++++
 .../devui-theme/styles/sidebar-links.css      | 107 +++++++
 sites/.vitepress/devui-theme/styles/vars.css  |  74 +++++
 .../devui-theme/support/sideBar.d.ts          |  18 ++
 .../.vitepress/devui-theme/support/sideBar.js |  46 +++
 sites/.vitepress/devui-theme/utils.d.ts       |  25 ++
 sites/.vitepress/devui-theme/utils.js         |  63 ++++
 sites/.vitepress/theme/index.ts               |   2 +-
 sites/components/alert/index.md               |  23 ++
 sites/components/avatar/index.md              |  23 ++
 sites/components/button/index.md              |  28 +-
 sites/components/checkbox/index.md            |  34 ++
 sites/components/panel/index.md               |  74 +++++
 sites/components/radio/index.md               |  33 ++
 sites/components/tabs/index.md                |   7 +
 sites/components/tags-input/index.md          |  44 +++
 sites/components/text-input/index.md          |  16 +
 sites/index.md                                |   8 +-
 73 files changed, 4099 insertions(+), 6 deletions(-)
 create mode 100644 devui/text-input/src/text-input.scss
 create mode 100644 sites/.vitepress/devui-theme/Layout.vue
 create mode 100644 sites/.vitepress/devui-theme/NotFound.vue
 create mode 100644 sites/.vitepress/devui-theme/components/AlgoliaSearchBox.vue
 create mode 100644 sites/.vitepress/devui-theme/components/BuySellAds.vue
 create mode 100644 sites/.vitepress/devui-theme/components/CarbonAds.vue
 create mode 100644 sites/.vitepress/devui-theme/components/EditLink.vue
 create mode 100644 sites/.vitepress/devui-theme/components/Home.vue
 create mode 100644 sites/.vitepress/devui-theme/components/HomeFeatures.vue
 create mode 100644 sites/.vitepress/devui-theme/components/HomeFooter.vue
 create mode 100644 sites/.vitepress/devui-theme/components/HomeHero.vue
 create mode 100644 sites/.vitepress/devui-theme/components/LastUpdated.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NavBar.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NavBarTitle.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NavDropdownLink.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NavDropdownLinkItem.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NavLink.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NavLinks.vue
 create mode 100644 sites/.vitepress/devui-theme/components/NextAndPrevLinks.vue
 create mode 100644 sites/.vitepress/devui-theme/components/Page.vue
 create mode 100644 sites/.vitepress/devui-theme/components/PageFooter.vue
 create mode 100644 sites/.vitepress/devui-theme/components/SearchBox.vue
 create mode 100644 sites/.vitepress/devui-theme/components/SideBar.vue
 create mode 100644 sites/.vitepress/devui-theme/components/SideBarLink.d.ts
 create mode 100644 sites/.vitepress/devui-theme/components/SideBarLink.js
 create mode 100644 sites/.vitepress/devui-theme/components/SideBarLinks.vue
 create mode 100644 sites/.vitepress/devui-theme/components/ToggleSideBarButton.vue
 create mode 100644 sites/.vitepress/devui-theme/components/icons/ArrowLeft.vue
 create mode 100644 sites/.vitepress/devui-theme/components/icons/ArrowRight.vue
 create mode 100644 sites/.vitepress/devui-theme/components/icons/OutboundLink.vue
 create mode 100644 sites/.vitepress/devui-theme/components/match-query.js
 create mode 100644 sites/.vitepress/devui-theme/components/test.d.ts
 create mode 100644 sites/.vitepress/devui-theme/components/test.js
 create mode 100644 sites/.vitepress/devui-theme/composables/activeSidebarLink.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/activeSidebarLink.js
 create mode 100644 sites/.vitepress/devui-theme/composables/editLink.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/editLink.js
 create mode 100644 sites/.vitepress/devui-theme/composables/nav.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/nav.js
 create mode 100644 sites/.vitepress/devui-theme/composables/navLink.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/navLink.js
 create mode 100644 sites/.vitepress/devui-theme/composables/nextAndPrevLinks.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/nextAndPrevLinks.js
 create mode 100644 sites/.vitepress/devui-theme/composables/repo.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/repo.js
 create mode 100644 sites/.vitepress/devui-theme/composables/sideBar.d.ts
 create mode 100644 sites/.vitepress/devui-theme/composables/sideBar.js
 create mode 100644 sites/.vitepress/devui-theme/config.d.ts
 create mode 100644 sites/.vitepress/devui-theme/config.js
 create mode 100644 sites/.vitepress/devui-theme/index.d.ts
 create mode 100644 sites/.vitepress/devui-theme/index.js
 create mode 100644 sites/.vitepress/devui-theme/styles/code.css
 create mode 100644 sites/.vitepress/devui-theme/styles/custom-blocks.css
 create mode 100644 sites/.vitepress/devui-theme/styles/layout.css
 create mode 100644 sites/.vitepress/devui-theme/styles/sidebar-links.css
 create mode 100644 sites/.vitepress/devui-theme/styles/vars.css
 create mode 100644 sites/.vitepress/devui-theme/support/sideBar.d.ts
 create mode 100644 sites/.vitepress/devui-theme/support/sideBar.js
 create mode 100644 sites/.vitepress/devui-theme/utils.d.ts
 create mode 100644 sites/.vitepress/devui-theme/utils.js
 create mode 100644 sites/components/alert/index.md
 create mode 100644 sites/components/avatar/index.md
 create mode 100644 sites/components/checkbox/index.md
 create mode 100644 sites/components/panel/index.md
 create mode 100644 sites/components/radio/index.md
 create mode 100644 sites/components/tabs/index.md
 create mode 100644 sites/components/tags-input/index.md
 create mode 100644 sites/components/text-input/index.md

diff --git a/devui/text-input/src/text-input.scss b/devui/text-input/src/text-input.scss
new file mode 100644
index 00000000..05d93cd7
--- /dev/null
+++ b/devui/text-input/src/text-input.scss
@@ -0,0 +1 @@
+@import '../../style/core/form'
diff --git a/devui/text-input/src/text-input.tsx b/devui/text-input/src/text-input.tsx
index eafc2979..a02f1092 100644
--- a/devui/text-input/src/text-input.tsx
+++ b/devui/text-input/src/text-input.tsx
@@ -1,5 +1,6 @@
 import { defineComponent, computed } from 'vue';
 import { inputProps } from './use-input';
+import './text-input.scss'
 
 export default defineComponent({
   name: 'DTextInput',
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index cc9dc4fc..15c00549 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -5,7 +5,35 @@ const sidebar = {
       text: '通用',
       children: [
         { text: 'Button 按钮', link: '/components/button/' },
+        { text: 'Panel 面板', link: '/components/panel/' },
+      ]
+    },
+    {
+      text: '导航',
+      children: [
+        { text: 'Tabs 选项卡切换', link: '/components/tabs/' },
+      ]
+    },
+    {
+      text: '反馈',
+      children: [
+        { text: 'Alert 警告', link: '/components/alert/' },
+      ]
+    },
+    {
+      text: '数据录入',
+      children: [
+        { text: 'Checkbox 复选框', link: '/components/checkbox/' },
+        { text: 'Radio 单选框', link: '/components/radio/' },
         { text: 'Switch 开关', link: '/components/switch/' },
+        { text: 'TagsInput 标签输入', link: '/components/tags-input/' },
+        { text: 'TextInput 文本框', link: '/components/text-input/' },
+      ]
+    },
+    {
+      text: '数据展示',
+      children: [
+        { text: 'Avatar 头像', link: '/components/avatar/' },
       ]
     }
   ],
diff --git a/sites/.vitepress/devui-theme/Layout.vue b/sites/.vitepress/devui-theme/Layout.vue
new file mode 100644
index 00000000..62bffadf
--- /dev/null
+++ b/sites/.vitepress/devui-theme/Layout.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, computed, watch, defineAsyncComponent } from 'vue'
+import { useRoute, useData } from 'vitepress'
+import { isSideBarEmpty, getSideBarConfig } from './support/sideBar'
+
+// components
+import NavBar from './components/NavBar.vue'
+import SideBar from './components/SideBar.vue'
+import Page from './components/Page.vue'
+
+const Home = defineAsyncComponent(() => import('./components/Home.vue'))
+
+const NoopComponent = () => null
+
+const CarbonAds = __CARBON__
+  ? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
+  : NoopComponent
+const BuySellAds = __BSA__
+  ? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
+  : NoopComponent
+const AlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
+  : NoopComponent
+
+// generic state
+const route = useRoute()
+const { site, page, theme, frontmatter } = useData()
+
+// custom layout
+const isCustomLayout = computed(() => !!frontmatter.value.customLayout)
+// home
+const enableHome = computed(() => !!frontmatter.value.home)
+
+// automatic multilang check for AlgoliaSearchBox
+const isMultiLang = computed(
+  () => Object.keys(theme.value.locales || {}).length > 0
+)
+
+// navbar
+const showNavbar = computed(() => {
+  const themeConfig = theme.value
+  if (frontmatter.value.navbar === false || themeConfig.navbar === false) {
+    return false
+  }
+  return (
+    site.value.title || themeConfig.logo || themeConfig.repo || themeConfig.nav
+  )
+})
+
+// sidebar
+const openSideBar = ref(false)
+
+const showSidebar = computed(() => {
+  if (frontmatter.value.home || frontmatter.value.sidebar === false) {
+    return false
+  }
+
+  return !isSideBarEmpty(
+    getSideBarConfig(theme.value.sidebar, route.data.relativePath)
+  )
+})
+
+const toggleSidebar = (to?: boolean) => {
+  openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
+}
+
+const hideSidebar = toggleSidebar.bind(null, false)
+// close the sidebar when navigating to a different location
+watch(route, hideSidebar)
+// TODO: route only changes when the pathname changes
+// listening to hashchange does nothing because it's prevented in router
+
+// page classes
+const pageClasses = computed(() => {
+  return [
+    {
+      'no-navbar': !showNavbar.value,
+      'sidebar-open': openSideBar.value,
+      'no-sidebar': !showSidebar.value
+    }
+  ]
+})
+</script>
+
+<template>
+  <div class="theme" :class="pageClasses">
+    <NavBar v-if="showNavbar" @toggle="toggleSidebar">
+      <template #search>
+        <slot name="navbar-search">
+          <AlgoliaSearchBox
+            v-if="theme.algolia"
+            :options="theme.algolia"
+            :multilang="isMultiLang"
+            :key="site.lang"
+          />
+        </slot>
+      </template>
+    </NavBar>
+
+    <SideBar :open="openSideBar">
+      <template #sidebar-top>
+        <slot name="sidebar-top" />
+      </template>
+      <template #sidebar-bottom>
+        <slot name="sidebar-bottom" />
+      </template>
+    </SideBar>
+    <!-- TODO: make this button accessible -->
+    <div class="sidebar-mask" @click="toggleSidebar(false)" />
+
+    <Content v-if="isCustomLayout" />
+
+    <Home v-else-if="enableHome">
+      <template #hero>
+        <slot name="home-hero" />
+      </template>
+      <template #features>
+        <slot name="home-features" />
+      </template>
+      <template #footer>
+        <slot name="home-footer" />
+      </template>
+    </Home>
+
+    <Page v-else>
+      <template #top>
+        <slot name="page-top-ads">
+          <div
+            id="ads-container"
+            v-if="theme.carbonAds && theme.carbonAds.carbon"
+          >
+            <CarbonAds
+              :key="'carbon' + page.relativePath"
+              :code="theme.carbonAds.carbon"
+              :placement="theme.carbonAds.placement"
+            />
+          </div>
+        </slot>
+        <slot name="page-top" />
+      </template>
+      <template #bottom>
+        <slot name="page-bottom" />
+        <slot name="page-bottom-ads">
+          <BuySellAds
+            v-if="theme.carbonAds && theme.carbonAds.custom"
+            :key="'custom' + page.relativePath"
+            :code="theme.carbonAds.custom"
+            :placement="theme.carbonAds.placement"
+          />
+        </slot>
+      </template>
+    </Page>
+  </div>
+
+  <Debug v-if="false" />
+</template>
+
+<style>
+#ads-container {
+  margin: 0 auto;
+}
+
+@media (min-width: 420px) {
+  #ads-container {
+    position: relative;
+    right: 0;
+    float: right;
+    margin: -8px -8px 24px 24px;
+    width: 146px;
+  }
+}
+
+@media (max-width: 420px) {
+  #ads-container {
+    /* Avoid layout shift */
+    height: 105px;
+    margin: 1.75rem 0;
+  }
+}
+
+@media (min-width: 1400px) {
+  #ads-container {
+    position: fixed;
+    right: 8px;
+    bottom: 8px;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/NotFound.vue b/sites/.vitepress/devui-theme/NotFound.vue
new file mode 100644
index 00000000..e797d7b3
--- /dev/null
+++ b/sites/.vitepress/devui-theme/NotFound.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="theme">
+    <h1>404</h1>
+    <blockquote>{{ getMsg() }}</blockquote>
+    <a :href="$site.base" aria-label="go to home">Take me home.</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+const msgs = [
+  `There's nothing here.`,
+  `How did we get here?`,
+  `That's a Four-Oh-Four.`,
+  `Looks like we've got some broken links.`
+]
+
+function getMsg() {
+  return msgs[Math.floor(Math.random() * msgs.length)]
+}
+</script>
diff --git a/sites/.vitepress/devui-theme/components/AlgoliaSearchBox.vue b/sites/.vitepress/devui-theme/components/AlgoliaSearchBox.vue
new file mode 100644
index 00000000..fee1c1c2
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/AlgoliaSearchBox.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import '@docsearch/css'
+import docsearch from '@docsearch/js'
+import { useRoute, useRouter, useData } from 'vitepress'
+import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
+import type { DefaultTheme } from '../config'
+import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
+
+const props = defineProps<{
+  options: DefaultTheme.AlgoliaSearchOptions
+  multilang?: boolean
+}>()
+
+const vm = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
+
+watch(
+  () => props.options,
+  (value) => {
+    update(value)
+  }
+)
+
+onMounted(() => {
+  initialize(props.options)
+})
+
+function isSpecialClick(event: MouseEvent) {
+  return (
+    event.button === 1 ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+
+  return pathname + hash
+}
+
+function update(options: any) {
+  if (vm && vm.vnode.el) {
+    vm.vnode.el.innerHTML =
+      '<div class="algolia-search-box" id="docsearch"></div>'
+    initialize(options)
+  }
+}
+
+const { lang } = useData()
+
+function initialize(userOptions: any) {
+  // if the user has multiple locales, the search results should be filtered
+  // based on the language
+  const facetFilters = props.multilang ? ['language:' + lang.value] : []
+
+  docsearch(
+    Object.assign({}, userOptions, {
+      container: '#docsearch',
+
+      searchParameters: Object.assign({}, userOptions.searchParameters, {
+        // pass a custom lang facetFilter to allow multiple language search
+        // https://github.com/algolia/docsearch-configs/pull/3942
+        facetFilters: facetFilters.concat(
+          userOptions.searchParameters?.facetFilters || []
+        )
+      }),
+
+      navigator: {
+        navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
+          const { pathname: hitPathname } = new URL(
+            window.location.origin + suggestionUrl
+          )
+
+          // Router doesn't handle same-page navigation so we use the native
+          // browser location API for anchor navigation
+          if (route.path === hitPathname) {
+            window.location.assign(window.location.origin + suggestionUrl)
+          } else {
+            router.go(suggestionUrl)
+          }
+        }
+      },
+
+      transformItems: (items: DocSearchHit[]) => {
+        return items.map((item) => {
+          return Object.assign({}, item, {
+            url: getRelativePath(item.url)
+          })
+        })
+      },
+
+      hitComponent: ({
+        hit,
+        children
+      }: {
+        hit: DocSearchHit
+        children: any
+      }) => {
+        const relativeHit = hit.url.startsWith('http')
+          ? getRelativePath(hit.url as string)
+          : hit.url
+
+        return {
+          type: 'a',
+          ref: undefined,
+          constructor: undefined,
+          key: undefined,
+          props: {
+            href: hit.url,
+            onClick: (event: MouseEvent) => {
+              if (isSpecialClick(event)) {
+                return
+              }
+
+              // we rely on the native link scrolling when user is already on
+              // the right anchor because Router doesn't support duplicated
+              // history entries
+              if (route.path === relativeHit) {
+                return
+              }
+
+              // if the hits goes to another page, we prevent the native link
+              // behavior to leverage the Router loading feature
+              if (route.path !== relativeHit) {
+                event.preventDefault()
+              }
+
+              router.go(relativeHit)
+            },
+            children
+          }
+        }
+      }
+    })
+  )
+}
+</script>
+
+<template>
+  <div class="algolia-search-box" id="docsearch" />
+</template>
+
+<style>
+.algolia-search-box {
+  padding-top: 1px;
+}
+
+@media (min-width: 720px) {
+  .algolia-search-box {
+    padding-left: 8px;
+  }
+}
+
+@media (min-width: 751px) {
+  .algolia-search-box {
+    min-width: 176.3px; /* avoid layout shift */
+  }
+
+  .algolia-search-box .DocSearch-Button-Placeholder {
+    padding-left: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+}
+
+.DocSearch {
+  --docsearch-primary-color: var(--c-brand);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  --docsearch-text-color: var(--c-text-light);
+  --docsearch-muted-color: var(--c-text-lighter);
+  --docsearch-searchbox-background: #f2f2f2;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/BuySellAds.vue b/sites/.vitepress/devui-theme/components/BuySellAds.vue
new file mode 100644
index 00000000..9a73a60c
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/BuySellAds.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { defineProps, onMounted } from 'vue'
+
+// global _bsa
+const ID = 'bsa-cpc-script'
+
+declare global {
+  var _bsa: BSA | undefined
+
+  interface BSA {
+    init(
+      name: string,
+      code: string,
+      placement: string,
+      options: {
+        target: string
+        align: string
+        disable_css?: 'true' | 'false'
+      }
+    ): void
+  }
+}
+
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
+
+onMounted(() => {
+  if (!document.getElementById(ID)) {
+    const s = document.createElement('script')
+
+    s.id = ID
+    s.src = '//m.servedby-buysellads.com/monetization.js'
+
+    document.head.appendChild(s)
+
+    s.onload = () => {
+      load()
+    }
+  } else {
+    load()
+  }
+})
+
+function load() {
+  if (typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('default', code, `placement:${placement}`, {
+      target: '.bsa-cpc',
+      align: 'horizontal',
+      disable_css: 'true'
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="buy-sell-ads">
+    <div class="bsa-cpc" />
+  </div>
+</template>
+
+<style scoped>
+.buy-sell-ads {
+  margin: 0 auto;
+  padding-top: 2rem;
+  font-size: 0.85rem;
+}
+
+.bsa-cpc {
+  border-radius: 6px;
+  background-color: var(--c-bg-accent);
+}
+
+.bsa-cpc ::v-deep(a._default_) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  padding: 12px;
+  text-decoration: none;
+  line-height: 1.4;
+  font-weight: 400;
+  color: var(--c-text-light);
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(a._default_) {
+    flex-wrap: nowrap;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-ad) {
+  display: none;
+}
+
+.bsa-cpc ::v-deep(a._default_ .default-image) {
+  flex-shrink: 0;
+  margin-right: 12px;
+  width: 24px;
+}
+
+.bsa-cpc ::v-deep(a._default_ .default-image img) {
+  border-radius: 4px;
+  height: 24px;
+  vertical-align: middle;
+}
+
+.bsa-cpc ::v-deep(._default_::after) {
+  border: 1px solid #1c90f3;
+  border-radius: 4px;
+  margin-top: 8px;
+  margin-left: 36px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 0.85em;
+  font-weight: 500;
+  color: #1c90f3;
+  content: 'Sponsored';
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(._default_::after) {
+    margin-top: 0px;
+    margin-left: 12px;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-text) {
+  flex-grow: 1;
+  align-self: center;
+  width: calc(100% - 36px);
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(.default-text) {
+    width: auto;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-title) {
+  font-weight: 600;
+}
+
+.bsa-cpc ::v-deep(.default-description) {
+  padding-left: 8px;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/CarbonAds.vue b/sites/.vitepress/devui-theme/components/CarbonAds.vue
new file mode 100644
index 00000000..ce2b977d
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/CarbonAds.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { defineProps, ref, onMounted } from 'vue'
+
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
+
+const el = ref()
+
+onMounted(() => {
+  const s = document.createElement('script')
+  s.id = '_carbonads_js'
+  s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
+  el.value.appendChild(s)
+})
+</script>
+
+<template>
+  <div class="carbon-ads" ref="el" />
+</template>
+
+<style scoped>
+.carbon-ads {
+  border-radius: 4px;
+  margin: 0 auto;
+  max-width: 280px;
+  font-size: 0.75rem;
+  background-color: var(--c-bg-accent);
+  min-height: 105.38px; /* avoid layout shift on mobile */
+}
+
+.carbon-ads::after {
+  clear: both;
+  display: block;
+  content: '';
+}
+
+@media (min-width: 420px) {
+  .carbon-ads {
+    z-index: 1;
+    float: right;
+    margin: -8px -8px 24px 24px;
+    padding: 8px;
+    width: 146px;
+    max-width: 100%;
+    min-height: 200px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .carbon-ads {
+    right: 8px;
+    float: none;
+    margin: 0;
+  }
+}
+
+.carbon-ads :deep(.carbon-img) {
+  float: left;
+  margin-right: 0.75rem;
+  max-width: 110px;
+  border: 1px solid var(--c-divider);
+}
+
+@media (min-width: 420px) {
+  .carbon-ads :deep(.carbon-img) {
+    float: none;
+    display: block;
+    margin-right: 0;
+    max-width: 130px;
+  }
+}
+
+.carbon-ads :deep(.carbon-img img) {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+@media (min-width: 420px) {
+  .carbon-ads :deep(.carbon-text) {
+    padding-top: 8px;
+  }
+}
+
+.carbon-ads :deep(.carbon-text) {
+  display: block;
+  font-weight: 400;
+  color: var(--c-text-light);
+}
+
+.carbon-ads :deep(.carbon-poweredby) {
+  display: block;
+  padding-top: 2px;
+  font-weight: 400;
+  color: var(--c-text-lighter);
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/EditLink.vue b/sites/.vitepress/devui-theme/components/EditLink.vue
new file mode 100644
index 00000000..ffdab5ea
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/EditLink.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useEditLink } from '../composables/editLink'
+import OutboundLink from './icons/OutboundLink.vue'
+
+const { url, text } = useEditLink()
+</script>
+
+<template>
+  <div class="edit-link">
+    <a
+      v-if="url"
+      class="link"
+      :href="url"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ text }} <OutboundLink class="icon" />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.link {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--c-text-light);
+}
+
+.link:hover {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+.icon {
+  margin-left: 4px;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/Home.vue b/sites/.vitepress/devui-theme/components/Home.vue
new file mode 100644
index 00000000..f9ba63dd
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/Home.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import HomeHero from './HomeHero.vue'
+import HomeFeatures from './HomeFeatures.vue'
+import HomeFooter from './HomeFooter.vue'
+</script>
+
+<template>
+  <main class="home" aria-labelledby="main-title">
+    <HomeHero />
+    <slot name="hero" />
+    <HomeFeatures />
+    <div class="home-content">
+      <Content />
+    </div>
+    <slot name="features" />
+    <HomeFooter />
+    <slot name="footer" />
+  </main>
+</template>
+
+<style scoped>
+.home {
+  padding-top: var(--header-height);
+}
+
+.home-content {
+  max-width: 960px;
+  margin: 0px auto;
+  padding: 0 1.5rem;
+}
+
+@media (max-width: 720px) {
+  .home-content {
+    max-width: 392px;
+    padding: 0;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/HomeFeatures.vue b/sites/.vitepress/devui-theme/components/HomeFeatures.vue
new file mode 100644
index 00000000..c435248e
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/HomeFeatures.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+
+const hasFeatures = computed(() => {
+  return frontmatter.value.features && frontmatter.value.features.length > 0
+})
+
+interface Feature {
+  title?: string
+  details?: string
+}
+
+const features = computed<Feature[]>(() => {
+  return frontmatter.value.features ? frontmatter.value.features : []
+})
+</script>
+
+<template>
+  <div v-if="hasFeatures" class="home-features">
+    <div class="wrapper">
+      <div class="container">
+        <div class="features">
+          <section
+            v-for="(feature, index) in features"
+            :key="index"
+            class="feature"
+          >
+            <h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
+            <p class="details" v-if="feature.details">{{ feature.details }}</p>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-features {
+  margin: 0 auto;
+  padding: 2.5rem 0 2.75rem;
+  max-width: 960px;
+}
+
+.home-hero + .home-features {
+  padding-top: 0;
+}
+
+@media (min-width: 420px) {
+  .home-features {
+    padding: 3.25rem 0 3.5rem;
+  }
+
+  .home-hero + .home-features {
+    padding-top: 0;
+  }
+}
+
+@media (min-width: 720px) {
+  .home-features {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+  }
+}
+
+.wrapper {
+  padding: 0 1.5rem;
+}
+
+.home-hero + .home-features .wrapper {
+  border-top: 1px solid var(--c-divider);
+  padding-top: 2.5rem;
+}
+
+@media (min-width: 420px) {
+  .home-hero + .home-features .wrapper {
+    padding-top: 3.25rem;
+  }
+}
+
+@media (min-width: 720px) {
+  .wrapper {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 392px;
+}
+
+@media (min-width: 720px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+.features {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -20px -24px;
+}
+
+.feature {
+  flex-shrink: 0;
+  padding: 20px 24px;
+  width: 100%;
+}
+
+@media (min-width: 720px) {
+  .feature {
+    width: calc(100% / 3);
+  }
+}
+
+.title {
+  margin: 0;
+  border-bottom: 0;
+  line-height: 1.4;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+@media (min-width: 420px) {
+  .title {
+    font-size: 1.4rem;
+  }
+}
+
+.details {
+  margin: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+  color: var(--c-text-light);
+}
+
+.title + .details {
+  padding-top: 0.25rem;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/HomeFooter.vue b/sites/.vitepress/devui-theme/components/HomeFooter.vue
new file mode 100644
index 00000000..55f27af4
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/HomeFooter.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <footer v-if="frontmatter.footer" class="footer">
+    <div class="container">
+      <p class="text">{{ frontmatter.footer }}</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+@media (min-width: 720px) {
+  .footer {
+    padding: 0 1.5rem;
+  }
+}
+
+.container {
+  padding: 2rem 1.5rem 2.25rem;
+}
+
+.home-hero + .footer .container,
+.home-features + .footer .container,
+.home-content + .footer .container {
+  border-top: 1px solid var(--c-divider);
+}
+
+@media (min-width: 420px) {
+  .container {
+    padding: 3rem 1.5rem 3.25rem;
+  }
+}
+
+.text {
+  margin: 0;
+  text-align: center;
+  line-height: 1.4;
+  font-size: 0.9rem;
+  color: var(--c-text-light);
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/HomeHero.vue b/sites/.vitepress/devui-theme/components/HomeHero.vue
new file mode 100644
index 00000000..9ff14a75
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/HomeHero.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, withBase } from 'vitepress'
+import NavLink from './NavLink.vue'
+
+const { site, frontmatter } = useData()
+
+const showHero = computed(() => {
+  const {
+    heroImage,
+    heroText,
+    tagline,
+    actionLink,
+    actionText
+  } = frontmatter.value
+  return heroImage || heroText || tagline || (actionLink && actionText)
+})
+
+const heroText = computed(() => frontmatter.value.heroText || site.value.title)
+</script>
+
+<template>
+  <header v-if="showHero" class="home-hero">
+    <figure v-if="frontmatter.heroImage" class="figure">
+      <img
+        class="image"
+        :src="withBase(frontmatter.heroImage)"
+        :alt="frontmatter.heroAlt"
+      />
+    </figure>
+
+    <h1 v-if="heroText" id="main-title" class="title">{{ heroText }}</h1>
+    <p v-if="frontmatter.tagline" class="description">
+      {{ frontmatter.tagline }}
+    </p>
+
+    <NavLink
+      v-if="frontmatter.actionLink && frontmatter.actionText"
+      :item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
+      class="action"
+    />
+
+    <NavLink
+      v-if="frontmatter.altActionLink && frontmatter.altActionText"
+      :item="{
+        link: frontmatter.altActionLink,
+        text: frontmatter.altActionText
+      }"
+      class="action alt"
+    />
+  </header>
+</template>
+
+<style scoped>
+.home-hero {
+  margin: 2.5rem 0 2.75rem;
+  padding: 0 1.5rem;
+  text-align: center;
+}
+
+@media (min-width: 420px) {
+  .home-hero {
+    margin: 3.5rem 0;
+  }
+}
+
+@media (min-width: 720px) {
+  .home-hero {
+    margin: 4rem 0 4.25rem;
+  }
+}
+
+.figure {
+  padding: 0 1.5rem;
+}
+
+.image {
+  display: block;
+  margin: 0 auto;
+  width: auto;
+  max-width: 100%;
+  max-height: 280px;
+}
+
+.title {
+  margin-top: 1.5rem;
+  font-size: 2rem;
+}
+
+@media (min-width: 420px) {
+  .title {
+    font-size: 3rem;
+  }
+}
+
+@media (min-width: 720px) {
+  .title {
+    margin-top: 2rem;
+  }
+}
+
+.description {
+  margin: 0;
+  margin-top: 0.25rem;
+  line-height: 1.3;
+  font-size: 1.2rem;
+  color: var(--c-text-light);
+}
+
+@media (min-width: 420px) {
+  .description {
+    line-height: 1.2;
+    font-size: 1.6rem;
+  }
+}
+
+.action {
+  margin-top: 1.5rem;
+  display: inline-block;
+}
+
+.action.alt {
+  margin-left: 1.5rem;
+}
+
+@media (min-width: 420px) {
+  .action {
+    margin-top: 2rem;
+    display: inline-block;
+  }
+}
+
+.action :deep(.item) {
+  display: inline-block;
+  border-radius: 6px;
+  padding: 0 20px;
+  line-height: 44px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--c-bg);
+  background-color: var(--c-brand);
+  border: 2px solid var(--c-brand);
+  transition: background-color 0.1s ease;
+}
+
+.action.alt :deep(.item) {
+  background-color: var(--c-bg);
+  color: var(--c-brand);
+}
+
+.action :deep(.item:hover) {
+  text-decoration: none;
+  color: var(--c-bg);
+  background-color: var(--c-brand-light);
+}
+
+@media (min-width: 420px) {
+  .action :deep(.item) {
+    padding: 0 24px;
+    line-height: 52px;
+    font-size: 1.2rem;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/LastUpdated.vue b/sites/.vitepress/devui-theme/components/LastUpdated.vue
new file mode 100644
index 00000000..ab888fbc
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/LastUpdated.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useData } from 'vitepress'
+
+const { theme, page } = useData()
+
+const hasLastUpdated = computed(() => {
+  const lu = theme.value.lastUpdated
+
+  return lu !== undefined && lu !== false
+})
+
+const prefix = computed(() => {
+  const p = theme.value.lastUpdated
+  return p === true ? 'Last Updated' : p
+})
+
+const datetime = ref('')
+onMounted(() => {
+  // locale string might be different based on end user
+  // and will lead to potential hydration mismatch if calculated at build time
+  datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
+})
+</script>
+
+<template>
+  <p v-if="hasLastUpdated" class="last-updated">
+    <span class="prefix">{{ prefix }}:</span>
+    <span class="datetime">{{ datetime }}</span>
+  </p>
+</template>
+
+<style scoped>
+.last-updated {
+  display: inline-block;
+  margin: 0;
+  line-height: 1.4;
+  font-size: 0.9rem;
+  color: var(--c-text-light);
+}
+
+@media (min-width: 960px) {
+  .last-updated {
+    font-size: 1rem;
+  }
+}
+
+.prefix {
+  display: inline-block;
+  font-weight: 500;
+}
+
+.datetime {
+  display: inline-block;
+  margin-left: 6px;
+  font-weight: 400;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NavBar.vue b/sites/.vitepress/devui-theme/components/NavBar.vue
new file mode 100644
index 00000000..28b459e8
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NavBar.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { defineEmit } from 'vue'
+import NavBarTitle from './NavBarTitle.vue'
+import NavLinks from './NavLinks.vue'
+import ToggleSideBarButton from './ToggleSideBarButton.vue'
+
+defineEmit(['toggle'])
+</script>
+
+<template>
+  <header class="nav-bar">
+    <ToggleSideBarButton @toggle="$emit('toggle')" />
+
+    <NavBarTitle />
+
+    <div class="flex-grow" />
+
+    <div class="nav">
+      <NavLinks />
+    </div>
+
+    <slot name="search" />
+  </header>
+</template>
+
+<style scoped>
+.nav-bar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: var(--z-index-navbar);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--c-divider);
+  padding: 0.7rem 1.5rem 0.7rem 4rem;
+  height: var(--header-height);
+  background-color: var(--c-bg);
+}
+
+@media (min-width: 720px) {
+  .nav-bar {
+    padding: 0.7rem 1.5rem;
+  }
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.nav {
+  display: none;
+}
+
+@media (min-width: 720px) {
+  .nav {
+    display: block;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NavBarTitle.vue b/sites/.vitepress/devui-theme/components/NavBarTitle.vue
new file mode 100644
index 00000000..4bfcbb1d
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NavBarTitle.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { withBase, useData } from 'vitepress'
+const { site, theme, localePath } = useData()
+</script>
+
+<template>
+  <a
+    class="nav-bar-title"
+    :href="localePath"
+    :aria-label="`${site.title}, back to home`"
+  >
+    <img
+      v-if="theme.logo"
+      class="logo"
+      :src="withBase(theme.logo)"
+      alt="Logo"
+    />
+    {{ site.title }}
+  </a>
+</template>
+
+<style scoped>
+.nav-bar-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--c-text);
+}
+
+.nav-bar-title:hover {
+  text-decoration: none;
+}
+
+.logo {
+  margin-right: 0.75rem;
+  height: 1.3rem;
+  vertical-align: bottom;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NavDropdownLink.vue b/sites/.vitepress/devui-theme/components/NavDropdownLink.vue
new file mode 100644
index 00000000..51e9a11a
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NavDropdownLink.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { defineProps, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+import type { DefaultTheme } from '../config'
+import NavDropdownLinkItem from './NavDropdownLinkItem.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithChildren
+}>()
+
+const route = useRoute()
+
+const open = ref(false)
+
+watch(
+  () => route.path,
+  () => {
+    open.value = false
+  }
+)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div class="nav-dropdown-link" :class="{ open }">
+    <button class="button" :aria-label="item.ariaLabel" @click="toggle">
+      <span class="button-text">{{ item.text }}</span>
+      <span class="button-arrow" :class="open ? 'down' : 'right'" />
+    </button>
+
+    <ul class="dialog">
+      <li v-for="item in item.items" :key="item.text" class="dialog-item">
+        <NavDropdownLinkItem :item="item" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.nav-dropdown-link {
+  position: relative;
+  height: 36px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+@media (min-width: 720px) {
+  .nav-dropdown-link {
+    height: auto;
+    overflow: visible;
+  }
+
+  .nav-dropdown-link:hover .dialog {
+    display: block;
+  }
+}
+
+.nav-dropdown-link.open {
+  height: auto;
+}
+
+.button {
+  display: block;
+  border: 0;
+  padding: 0 1.5rem;
+  width: 100%;
+  text-align: left;
+  line-height: 36px;
+  font-family: var(--font-family-base);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--c-text);
+  white-space: nowrap;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.button:focus {
+  outline: 0;
+}
+
+@media (min-width: 720px) {
+  .button {
+    border-bottom: 2px solid transparent;
+    padding: 0;
+    line-height: 24px;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+}
+
+.button-arrow {
+  display: inline-block;
+  margin-top: -1px;
+  margin-left: 8px;
+  border-top: 6px solid #ccc;
+  border-right: 4px solid transparent;
+  border-bottom: 0;
+  border-left: 4px solid transparent;
+  vertical-align: middle;
+}
+
+.button-arrow.right {
+  transform: rotate(-90deg);
+}
+
+@media (min-width: 720px) {
+  .button-arrow.right {
+    transform: rotate(0);
+  }
+}
+
+.dialog {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@media (min-width: 720px) {
+  .dialog {
+    display: none;
+    position: absolute;
+    top: 26px;
+    right: -8px;
+    border-radius: 6px;
+    padding: 12px 0;
+    min-width: 128px;
+    background-color: var(--c-bg);
+    box-shadow: var(--shadow-3);
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NavDropdownLinkItem.vue b/sites/.vitepress/devui-theme/components/NavDropdownLinkItem.vue
new file mode 100644
index 00000000..e8c133cc
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NavDropdownLinkItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { defineProps, toRefs } from 'vue'
+import type { DefaultTheme } from '../config'
+import { useNavLink } from '../composables/navLink'
+import OutboundLink from './icons/OutboundLink.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const propsRefs = toRefs(props)
+
+const { props: linkProps, isExternal } = useNavLink(propsRefs.item)
+</script>
+
+<template>
+  <div class="nav-dropdown-link-item">
+    <a class="item" v-bind="linkProps">
+      <span class="arrow" />
+      <span class="text">{{ item.text }}</span>
+      <span class="icon"><OutboundLink v-if="isExternal" /></span>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  display: block;
+  padding: 0 1.5rem 0 2.5rem;
+  line-height: 32px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--c-text);
+  white-space: nowrap;
+}
+
+@media (min-width: 720px) {
+  .item {
+    padding: 0 24px 0 12px;
+    line-height: 32px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--c-text);
+    white-space: nowrap;
+  }
+
+  .item.active .arrow {
+    opacity: 1;
+  }
+}
+
+.item:hover,
+.item.active {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+.item.external:hover {
+  border-bottom-color: transparent;
+  color: var(--c-text);
+}
+
+@media (min-width: 720px) {
+  .arrow {
+    display: inline-block;
+    margin-right: 8px;
+    border-top: 6px solid #ccc;
+    border-right: 4px solid transparent;
+    border-bottom: 0;
+    border-left: 4px solid transparent;
+    vertical-align: middle;
+    opacity: 0;
+    transform: translateY(-2px) rotate(-90deg);
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NavLink.vue b/sites/.vitepress/devui-theme/components/NavLink.vue
new file mode 100644
index 00000000..514b2282
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NavLink.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { defineProps, toRefs } from 'vue'
+import type { DefaultTheme } from '../config'
+import { useNavLink } from '../composables/navLink'
+import OutboundLink from './icons/OutboundLink.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const propsRefs = toRefs(props)
+
+const { props: linkProps, isExternal } = useNavLink(propsRefs.item)
+</script>
+
+<template>
+  <div class="nav-link">
+    <a class="item" v-bind="linkProps">
+      {{ item.text }} <OutboundLink v-if="isExternal" />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  display: block;
+  padding: 0 1.5rem;
+  line-height: 36px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--c-text);
+  white-space: nowrap;
+}
+
+.item:hover,
+.item.active {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+.item.external:hover {
+  border-bottom-color: transparent;
+  color: var(--c-text);
+}
+
+@media (min-width: 720px) {
+  .item {
+    border-bottom: 2px solid transparent;
+    padding: 0;
+    line-height: 24px;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+
+  .item:hover,
+  .item.active {
+    border-bottom-color: var(--c-brand);
+    color: var(--c-text);
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NavLinks.vue b/sites/.vitepress/devui-theme/components/NavLinks.vue
new file mode 100644
index 00000000..aaa622a1
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NavLinks.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { useLocaleLinks } from '../composables/nav'
+import { useRepo } from '../composables/repo'
+import NavLink from './NavLink.vue'
+import NavDropdownLink from './NavDropdownLink.vue'
+
+const { theme } = useData()
+const localeLinks = useLocaleLinks()
+const repo = useRepo()
+const show = computed(() => theme.value.nav || repo.value || localeLinks.value)
+</script>
+
+<template>
+  <nav v-if="show" class="nav-links">
+    <template v-if="theme.nav">
+      <div v-for="item in theme.nav" :key="item.text" class="item">
+        <NavDropdownLink v-if="item.items" :item="item" />
+        <NavLink v-else :item="item" />
+      </div>
+    </template>
+
+    <div v-if="localeLinks" class="item">
+      <NavDropdownLink :item="localeLinks" />
+    </div>
+
+    <div v-if="repo" class="item">
+      <NavLink :item="repo" />
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.nav-links {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--c-divider);
+}
+
+@media (min-width: 720px) {
+  .nav-links {
+    display: flex;
+    padding: 6px 0 0;
+    align-items: center;
+    border-bottom: 0;
+  }
+
+  .item + .item {
+    padding-left: 24px;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/NextAndPrevLinks.vue b/sites/.vitepress/devui-theme/components/NextAndPrevLinks.vue
new file mode 100644
index 00000000..e826aca4
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/NextAndPrevLinks.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks'
+import ArrowLeft from './icons/ArrowLeft.vue'
+import ArrowRight from './icons/ArrowRight.vue'
+
+const { hasLinks, prev, next } = useNextAndPrevLinks()
+</script>
+
+<template>
+  <div v-if="hasLinks" class="next-and-prev-link">
+    <div class="container">
+      <div class="prev">
+        <a v-if="prev" class="link" :href="withBase(prev.link)">
+          <ArrowLeft class="icon icon-prev" />
+          <span class="text">{{ prev.text }}</span>
+        </a>
+      </div>
+      <div class="next">
+        <a v-if="next" class="link" :href="withBase(next.link)">
+          <span class="text">{{ next.text }}</span>
+          <ArrowRight class="icon icon-next" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.next-and-prev-link {
+  padding-top: 1rem;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--c-divider);
+  padding-top: 1rem;
+}
+
+.prev,
+.next {
+  display: flex;
+  flex-shrink: 0;
+  width: 50%;
+}
+
+.prev {
+  justify-content: flex-start;
+  padding-right: 12px;
+}
+
+.next {
+  justify-content: flex-end;
+  padding-left: 12px;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon {
+  display: block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  fill: var(--c-text);
+  transform: translateY(1px);
+}
+
+.icon-prev {
+  margin-right: 8px;
+}
+.icon-next {
+  margin-left: 8px;
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/Page.vue b/sites/.vitepress/devui-theme/components/Page.vue
new file mode 100644
index 00000000..7a1d422b
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/Page.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import PageFooter from './PageFooter.vue'
+import NextAndPrevLinks from './NextAndPrevLinks.vue'
+</script>
+
+<template>
+  <main class="page">
+    <div class="container">
+      <slot name="top" />
+
+      <Content class="content" />
+      <PageFooter />
+      <NextAndPrevLinks />
+
+      <slot name="bottom" />
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  padding-top: var(--header-height);
+}
+
+@media (min-width: 720px) {
+  .page {
+    margin-left: 16.4rem;
+  }
+}
+
+@media (min-width: 960px) {
+  .page {
+    margin-left: 20rem;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  padding: 0 1.5rem 4rem;
+  max-width: 48rem;
+}
+
+.content {
+  padding-bottom: 1.5rem;
+}
+
+@media (max-width: 420px) {
+  .content {
+    /* fix carbon ads display */
+    clear: both;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/PageFooter.vue b/sites/.vitepress/devui-theme/components/PageFooter.vue
new file mode 100644
index 00000000..41e1dded
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/PageFooter.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import EditLink from './EditLink.vue'
+import LastUpdated from './LastUpdated.vue'
+</script>
+
+<template>
+  <footer class="page-footer">
+    <div class="edit">
+      <EditLink />
+    </div>
+    <div class="updated">
+      <LastUpdated />
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.page-footer {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  overflow: auto;
+}
+
+@media (min-width: 960px) {
+  .page-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.updated {
+  padding-top: 4px;
+}
+
+@media (min-width: 960px) {
+  .updated {
+    padding-top: 0;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/SearchBox.vue b/sites/.vitepress/devui-theme/components/SearchBox.vue
new file mode 100644
index 00000000..85f71692
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/SearchBox.vue
@@ -0,0 +1,290 @@
+<template>
+  <div class="search-box">
+    <input
+      ref="input"
+      aria-label="Search"
+      :value="query"
+      :class="{ focused: focused }"
+      :placeholder="placeholder"
+      autocomplete="off"
+      spellcheck="false"
+      @input="query = $event.target.value"
+      @focus="focused = true"
+      @blur="focused = false"
+      @keyup.enter="go(focusIndex)"
+      @keyup.up="onUp"
+      @keyup.down="onDown"
+    />
+    <ul
+      v-if="showSuggestions"
+      class="suggestions"
+      :class="{ 'align-right': alignRight }"
+      @mouseleave="unfocus"
+    >
+      <li
+        v-for="(s, i) in suggestions"
+        :key="i"
+        class="suggestion"
+        :class="{ focused: i === focusIndex }"
+        @mousedown="go(i)"
+        @mouseenter="focus(i)"
+      >
+        <a :href="s.path" @click.prevent>
+          <span class="page-title">{{ s.title || s.path }}</span>
+          <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import matchQuery from './match-query'
+
+/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
+export default {
+  name: 'SearchBox',
+
+  data() {
+    return {
+      query: '',
+      focused: false,
+      focusIndex: 0,
+      placeholder: undefined
+    }
+  },
+
+  computed: {
+    showSuggestions() {
+      return this.focused && this.suggestions && this.suggestions.length
+    },
+
+    suggestions() {
+      const query = this.query.trim().toLowerCase()
+      if (!query) {
+        return
+      }
+
+      const { pages } = this.$site
+      const max =
+        this.$site.themeConfig.searchMaxSuggestions || SEARCH_MAX_SUGGESTIONS
+      const localePath = this.$localePath
+      const res = []
+      for (let i = 0; i < pages.length; i++) {
+        if (res.length >= max) break
+        const p = pages[i]
+        // filter out results that do not match current locale
+        if (this.getPageLocalePath(p) !== localePath) {
+          continue
+        }
+
+        // filter out results that do not match searchable paths
+        if (!this.isSearchable(p)) {
+          continue
+        }
+
+        if (matchQuery(query, p)) {
+          res.push(p)
+        } else if (p.headers) {
+          for (let j = 0; j < p.headers.length; j++) {
+            if (res.length >= max) break
+            const h = p.headers[j]
+            if (h.title && matchQuery(query, p, h.title)) {
+              res.push(
+                Object.assign({}, p, {
+                  path: p.path + '#' + h.slug,
+                  header: h
+                })
+              )
+            }
+          }
+        }
+      }
+      return res
+    },
+
+    // make suggestions align right when there are not enough items
+    alignRight() {
+      const navCount = (this.$site.themeConfig.nav || []).length
+      const repo = this.$site.repo ? 1 : 0
+      return navCount + repo <= 2
+    }
+  },
+
+  mounted() {
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+    document.addEventListener('keydown', this.onHotkey)
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onHotkey)
+  },
+
+  methods: {
+    getPageLocalePath(page) {
+      for (const localePath in this.$site.locales || {}) {
+        if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
+          return localePath
+        }
+      }
+      return '/'
+    },
+
+    isSearchable(page) {
+      let searchPaths = SEARCH_PATHS
+
+      // all paths searchables
+      if (searchPaths === null) {
+        return true
+      }
+
+      searchPaths = Array.isArray(searchPaths)
+        ? searchPaths
+        : new Array(searchPaths)
+
+      return (
+        searchPaths.filter((path) => {
+          return page.path.match(path)
+        }).length > 0
+      )
+    },
+
+    onHotkey(event) {
+      if (
+        event.srcElement === document.body &&
+        SEARCH_HOTKEYS.includes(event.key)
+      ) {
+        this.$refs.input.focus()
+        event.preventDefault()
+      }
+    },
+
+    onUp() {
+      if (this.showSuggestions) {
+        if (this.focusIndex > 0) {
+          this.focusIndex--
+        } else {
+          this.focusIndex = this.suggestions.length - 1
+        }
+      }
+    },
+
+    onDown() {
+      if (this.showSuggestions) {
+        if (this.focusIndex < this.suggestions.length - 1) {
+          this.focusIndex++
+        } else {
+          this.focusIndex = 0
+        }
+      }
+    },
+
+    go(i) {
+      if (!this.showSuggestions) {
+        return
+      }
+      this.$router.push(this.suggestions[i].path)
+      this.query = ''
+      this.focusIndex = 0
+    },
+
+    focus(i) {
+      this.focusIndex = i
+    },
+
+    unfocus() {
+      this.focusIndex = -1
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.search-box
+  display inline-block
+  position relative
+  margin-right 1rem
+  input
+    cursor text
+    width 10rem
+    height: 2rem
+    color lighten($textColor, 25%)
+    display inline-block
+    border 1px solid darken($borderColor, 10%)
+    border-radius 2rem
+    font-size 0.9rem
+    line-height 2rem
+    padding 0 0.5rem 0 2rem
+    outline none
+    transition all .2s ease
+    background #fff url(search.svg) 0.6rem 0.5rem no-repeat
+    background-size 1rem
+    &:focus
+      cursor auto
+      border-color $accentColor
+  .suggestions
+    background #fff
+    width 20rem
+    position absolute
+    top 2 rem
+    border 1px solid darken($borderColor, 10%)
+    border-radius 6px
+    padding 0.4rem
+    list-style-type none
+    &.align-right
+      right 0
+  .suggestion
+    line-height 1.4
+    padding 0.4rem 0.6rem
+    border-radius 4px
+    cursor pointer
+    a
+      white-space normal
+      color lighten($textColor, 35%)
+      .page-title
+        font-weight 600
+      .header
+        font-size 0.9em
+        margin-left 0.25em
+    &.focused
+      background-color #f3f4f5
+      a
+        color $accentColor
+
+@media (max-width: $MQNarrow)
+  .search-box
+    input
+      cursor pointer
+      width 0
+      border-color transparent
+      position relative
+      &:focus
+        cursor text
+        left 0
+        width 10rem
+
+// Match IE11
+@media all and (-ms-high-contrast: none)
+  .search-box input
+    height 2rem
+
+@media (max-width: $MQNarrow) and (min-width: $MQMobile)
+  .search-box
+    .suggestions
+      left 0
+
+@media (max-width: $MQMobile)
+  .search-box
+    margin-right 0
+    input
+      left 1rem
+    .suggestions
+      right 0
+
+@media (max-width: $MQMobileNarrow)
+  .search-box
+    .suggestions
+      width calc(100vw - 4rem)
+    input:focus
+      width 8rem
+</style>
diff --git a/sites/.vitepress/devui-theme/components/SideBar.vue b/sites/.vitepress/devui-theme/components/SideBar.vue
new file mode 100644
index 00000000..13929737
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/SideBar.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import NavLinks from './NavLinks.vue'
+import SideBarLinks from './SideBarLinks.vue'
+
+defineProps({
+  open: { type: Boolean, required: true }
+})
+</script>
+
+<template>
+  <aside class="sidebar" :class="{ open }">
+    <NavLinks class="nav" />
+
+    <slot name="sidebar-top" />
+
+    <SideBarLinks />
+
+    <slot name="sidebar-bottom" />
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  top: var(--header-height);
+  bottom: 0;
+  left: 0;
+  z-index: var(--z-index-sidebar);
+  border-right: 1px solid var(--c-divider);
+  width: 16.4rem;
+  background-color: var(--c-bg);
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease;
+}
+
+@media (min-width: 720px) {
+  .sidebar {
+    transform: translateX(0);
+  }
+}
+
+@media (min-width: 960px) {
+  .sidebar {
+    width: 20rem;
+  }
+}
+
+.sidebar.open {
+  transform: translateX(0);
+}
+
+.nav {
+  display: block;
+}
+
+@media (min-width: 720px) {
+  .nav {
+    display: none;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/SideBarLink.d.ts b/sites/.vitepress/devui-theme/components/SideBarLink.d.ts
new file mode 100644
index 00000000..acc55bf9
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/SideBarLink.d.ts
@@ -0,0 +1,6 @@
+import { FunctionalComponent } from 'vue';
+import { DefaultTheme } from '../config';
+export declare const SideBarLink: FunctionalComponent<{
+    item: DefaultTheme.SideBarItem;
+    depth?: number;
+}>;
diff --git a/sites/.vitepress/devui-theme/components/SideBarLink.js b/sites/.vitepress/devui-theme/components/SideBarLink.js
new file mode 100644
index 00000000..68b31d71
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/SideBarLink.js
@@ -0,0 +1,68 @@
+import { h } from 'vue';
+import { useRoute, useData } from 'vitepress';
+import { joinUrl, isActive } from '../utils';
+export const SideBarLink = (props) => {
+    const route = useRoute();
+    const { site, frontmatter } = useData();
+    const depth = props.depth || 1;
+    const maxDepth = frontmatter.value.sidebarDepth || Infinity;
+    const headers = route.data.headers;
+    const text = props.item.text;
+    const link = resolveLink(site.value.base, props.item.link);
+    const children = props.item.children;
+    const active = isActive(route, props.item.link);
+    const childItems = depth < maxDepth
+        ? createChildren(active, children, headers, depth + 1)
+        : null;
+    return h('li', { class: 'sidebar-link' }, [
+        h(link ? 'a' : 'p', {
+            class: { 'sidebar-link-item': true, active },
+            href: link
+        }, text),
+        childItems
+    ]);
+};
+function resolveLink(base, path) {
+    if (path === undefined) {
+        return path;
+    }
+    // keep relative hash to the same page
+    if (path.startsWith('#')) {
+        return path;
+    }
+    return joinUrl(base, path);
+}
+function createChildren(active, children, headers, depth = 1) {
+    if (children && children.length > 0) {
+        return h('ul', { class: 'sidebar-links' }, children.map((c) => {
+            return h(SideBarLink, { item: c, depth });
+        }));
+    }
+    return active && headers
+        ? createChildren(false, resolveHeaders(headers), undefined, depth)
+        : null;
+}
+function resolveHeaders(headers) {
+    return mapHeaders(groupHeaders(headers));
+}
+function groupHeaders(headers) {
+    headers = headers.map((h) => Object.assign({}, h));
+    let lastH2;
+    headers.forEach((h) => {
+        if (h.level === 2) {
+            lastH2 = h;
+        }
+        else if (lastH2) {
+            ;
+            (lastH2.children || (lastH2.children = [])).push(h);
+        }
+    });
+    return headers.filter((h) => h.level === 2);
+}
+function mapHeaders(headers) {
+    return headers.map((header) => ({
+        text: header.title,
+        link: `#${header.slug}`,
+        children: header.children ? mapHeaders(header.children) : undefined
+    }));
+}
diff --git a/sites/.vitepress/devui-theme/components/SideBarLinks.vue b/sites/.vitepress/devui-theme/components/SideBarLinks.vue
new file mode 100644
index 00000000..768013e3
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useSideBar } from '../composables/sideBar'
+import { SideBarLink } from './SideBarLink'
+
+const items = useSideBar()
+</script>
+
+<template>
+  <ul v-if="items.length > 0" class="sidebar-links">
+    <SideBarLink v-for="item of items" :item="item" />
+  </ul>
+</template>
diff --git a/sites/.vitepress/devui-theme/components/ToggleSideBarButton.vue b/sites/.vitepress/devui-theme/components/ToggleSideBarButton.vue
new file mode 100644
index 00000000..07448cc0
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/ToggleSideBarButton.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+export default {
+  emits: ['toggle']
+}
+</script>
+
+<template>
+  <div class="sidebar-button" @click="$emit('toggle')">
+    <svg
+      class="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
+        class
+      />
+    </svg>
+  </div>
+</template>
+
+<style>
+.sidebar-button {
+  position: absolute;
+  top: 0.6rem;
+  left: 1rem;
+  display: none;
+  padding: 0.6rem;
+  cursor: pointer;
+}
+
+.sidebar-button .icon {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+@media screen and (max-width: 719px) {
+  .sidebar-button {
+    display: block;
+  }
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/icons/ArrowLeft.vue b/sites/.vitepress/devui-theme/components/icons/ArrowLeft.vue
new file mode 100644
index 00000000..3f65b866
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/icons/ArrowLeft.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
+    />
+  </svg>
+</template>
diff --git a/sites/.vitepress/devui-theme/components/icons/ArrowRight.vue b/sites/.vitepress/devui-theme/components/icons/ArrowRight.vue
new file mode 100644
index 00000000..ed89263f
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/icons/ArrowRight.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
+    />
+  </svg>
+</template>
diff --git a/sites/.vitepress/devui-theme/components/icons/OutboundLink.vue b/sites/.vitepress/devui-theme/components/icons/OutboundLink.vue
new file mode 100644
index 00000000..4d74eeeb
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/icons/OutboundLink.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    class="icon outbound"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    x="0px"
+    y="0px"
+    viewBox="0 0 100 100"
+    width="15"
+    height="15"
+  >
+    <path
+      fill="currentColor"
+      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
+    />
+    <polygon
+      fill="currentColor"
+      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
+    />
+  </svg>
+</template>
+
+<style>
+.icon.outbound {
+  position: relative;
+  top: -1px;
+  display: inline-block;
+  vertical-align: middle;
+  color: var(--c-text-lighter);
+}
+</style>
diff --git a/sites/.vitepress/devui-theme/components/match-query.js b/sites/.vitepress/devui-theme/components/match-query.js
new file mode 100644
index 00000000..5678e377
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/match-query.js
@@ -0,0 +1,50 @@
+import get from 'lodash.get'
+
+export default (query, page, additionalStr = null) => {
+  let domain = get(page, 'title', '')
+
+  if (get(page, 'frontmatter.tags')) {
+    domain += ` ${page.frontmatter.tags.join(' ')}`
+  }
+
+  if (additionalStr) {
+    domain += ` ${additionalStr}`
+  }
+
+  return matchTest(query, domain)
+}
+
+const matchTest = (query, domain) => {
+  const escapeRegExp = (str) => str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+
+  // eslint-disable-next-line no-control-regex
+  const nonASCIIRegExp = new RegExp('[^\x00-\x7F]')
+
+  const words = query
+    .split(/\s+/g)
+    .map((str) => str.trim())
+    .filter((str) => !!str)
+
+  if (!nonASCIIRegExp.test(query)) {
+    // if the query only has ASCII chars, treat as English
+    const hasTrailingSpace = query.endsWith(' ')
+    const searchRegex = new RegExp(
+      words
+        .map((word, index) => {
+          if (words.length === index + 1 && !hasTrailingSpace) {
+            // The last word - ok with the word being "startswith"-like
+            return `(?=.*\\b${escapeRegExp(word)})`
+          } else {
+            // Not the last word - expect the whole word exactly
+            return `(?=.*\\b${escapeRegExp(word)}\\b)`
+          }
+        })
+        .join('') + '.+',
+      'gi'
+    )
+    return searchRegex.test(domain)
+  } else {
+    // if the query has non-ASCII chars, treat as other languages
+    return words.some((word) => domain.toLowerCase().indexOf(word) > -1)
+  }
+}
diff --git a/sites/.vitepress/devui-theme/components/test.d.ts b/sites/.vitepress/devui-theme/components/test.d.ts
new file mode 100644
index 00000000..f14b13f9
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/test.d.ts
@@ -0,0 +1,4 @@
+export interface Hello {
+    world: string;
+}
+export declare const O = 2;
diff --git a/sites/.vitepress/devui-theme/components/test.js b/sites/.vitepress/devui-theme/components/test.js
new file mode 100644
index 00000000..8e5eabec
--- /dev/null
+++ b/sites/.vitepress/devui-theme/components/test.js
@@ -0,0 +1 @@
+export const O = 2;
diff --git a/sites/.vitepress/devui-theme/composables/activeSidebarLink.d.ts b/sites/.vitepress/devui-theme/composables/activeSidebarLink.d.ts
new file mode 100644
index 00000000..68d9ecba
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/activeSidebarLink.d.ts
@@ -0,0 +1 @@
+export declare function useActiveSidebarLinks(): void;
diff --git a/sites/.vitepress/devui-theme/composables/activeSidebarLink.js b/sites/.vitepress/devui-theme/composables/activeSidebarLink.js
new file mode 100644
index 00000000..05f54c9f
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/activeSidebarLink.js
@@ -0,0 +1,99 @@
+import { onMounted, onUnmounted, onUpdated } from 'vue';
+export function useActiveSidebarLinks() {
+    let rootActiveLink = null;
+    let activeLink = null;
+    const onScroll = throttleAndDebounce(setActiveLink, 300);
+    function setActiveLink() {
+        const sidebarLinks = getSidebarLinks();
+        const anchors = getAnchors(sidebarLinks);
+        for (let i = 0; i < anchors.length; i++) {
+            const anchor = anchors[i];
+            const nextAnchor = anchors[i + 1];
+            const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor);
+            if (isActive) {
+                history.replaceState(null, document.title, hash ? hash : ' ');
+                activateLink(hash);
+                return;
+            }
+        }
+    }
+    function activateLink(hash) {
+        deactiveLink(activeLink);
+        deactiveLink(rootActiveLink);
+        activeLink = document.querySelector(`.sidebar a[href="${hash}"]`);
+        if (!activeLink) {
+            return;
+        }
+        activeLink.classList.add('active');
+        // also add active class to parent h2 anchors
+        const rootLi = activeLink.closest('.sidebar-links > ul > li');
+        if (rootLi && rootLi !== activeLink.parentElement) {
+            rootActiveLink = rootLi.querySelector('a');
+            rootActiveLink && rootActiveLink.classList.add('active');
+        }
+        else {
+            rootActiveLink = null;
+        }
+    }
+    function deactiveLink(link) {
+        link && link.classList.remove('active');
+    }
+    onMounted(() => {
+        setActiveLink();
+        window.addEventListener('scroll', onScroll);
+    });
+    onUpdated(() => {
+        // sidebar update means a route change
+        activateLink(decodeURIComponent(location.hash));
+    });
+    onUnmounted(() => {
+        window.removeEventListener('scroll', onScroll);
+    });
+}
+function getSidebarLinks() {
+    return [].slice.call(document.querySelectorAll('.sidebar a.sidebar-link-item'));
+}
+function getAnchors(sidebarLinks) {
+    return [].slice
+        .call(document.querySelectorAll('.header-anchor'))
+        .filter((anchor) => sidebarLinks.some((sidebarLink) => sidebarLink.hash === anchor.hash));
+}
+function getPageOffset() {
+    return document.querySelector('.nav-bar').offsetHeight;
+}
+function getAnchorTop(anchor) {
+    const pageOffset = getPageOffset();
+    return anchor.parentElement.offsetTop - pageOffset - 15;
+}
+function isAnchorActive(index, anchor, nextAnchor) {
+    const scrollTop = window.scrollY;
+    if (index === 0 && scrollTop === 0) {
+        return [true, null];
+    }
+    if (scrollTop < getAnchorTop(anchor)) {
+        return [false, null];
+    }
+    if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor)) {
+        return [true, decodeURIComponent(anchor.hash)];
+    }
+    return [false, null];
+}
+function throttleAndDebounce(fn, delay) {
+    let timeout;
+    let called = false;
+    return () => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        if (!called) {
+            fn();
+            called = true;
+            setTimeout(() => {
+                called = false;
+            }, delay);
+        }
+        else {
+            timeout = setTimeout(fn, delay);
+        }
+    };
+}
diff --git a/sites/.vitepress/devui-theme/composables/editLink.d.ts b/sites/.vitepress/devui-theme/composables/editLink.d.ts
new file mode 100644
index 00000000..1f7abc19
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/editLink.d.ts
@@ -0,0 +1,4 @@
+export declare function useEditLink(): {
+    url: import("vue").ComputedRef<string | null>;
+    text: import("vue").ComputedRef<any>;
+};
diff --git a/sites/.vitepress/devui-theme/composables/editLink.js b/sites/.vitepress/devui-theme/composables/editLink.js
new file mode 100644
index 00000000..9ba67c9d
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/editLink.js
@@ -0,0 +1,47 @@
+import { computed } from 'vue';
+import { useData } from 'vitepress';
+import { endingSlashRE, isExternal } from '../utils';
+const bitbucketRE = /bitbucket.org/;
+export function useEditLink() {
+    const { page, theme, frontmatter } = useData();
+    const url = computed(() => {
+        const { repo, docsDir = '', docsBranch = 'master', docsRepo = repo, editLinks } = theme.value;
+        const showEditLink = frontmatter.value.editLink || editLinks;
+        const { relativePath } = page.value;
+        if (!showEditLink || !relativePath || !repo) {
+            return null;
+        }
+        return createUrl(repo, docsRepo, docsDir, docsBranch, relativePath);
+    });
+    const text = computed(() => {
+        return theme.value.editLinkText || 'Edit this page';
+    });
+    return {
+        url,
+        text
+    };
+}
+function createUrl(repo, docsRepo, docsDir, docsBranch, path) {
+    return bitbucketRE.test(repo)
+        ? createBitbucketUrl(repo, docsRepo, docsDir, docsBranch, path)
+        : createGitHubUrl(repo, docsRepo, docsDir, docsBranch, path);
+}
+function createGitHubUrl(repo, docsRepo, docsDir, docsBranch, path) {
+    const base = isExternal(docsRepo)
+        ? docsRepo
+        : `https://github.com/${docsRepo}`;
+    return (base.replace(endingSlashRE, '') +
+        `/edit` +
+        `/${docsBranch}/` +
+        (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+        path);
+}
+function createBitbucketUrl(repo, docsRepo, docsDir, docsBranch, path) {
+    const base = isExternal(docsRepo) ? docsRepo : repo;
+    return (base.replace(endingSlashRE, '') +
+        `/src` +
+        `/${docsBranch}/` +
+        (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
+        path +
+        `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`);
+}
diff --git a/sites/.vitepress/devui-theme/composables/nav.d.ts b/sites/.vitepress/devui-theme/composables/nav.d.ts
new file mode 100644
index 00000000..e0abff68
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/nav.d.ts
@@ -0,0 +1,2 @@
+import type { DefaultTheme } from '../config';
+export declare function useLocaleLinks(): import("vue").ComputedRef<DefaultTheme.NavItemWithChildren | null>;
diff --git a/sites/.vitepress/devui-theme/composables/nav.js b/sites/.vitepress/devui-theme/composables/nav.js
new file mode 100644
index 00000000..22ac0dd1
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/nav.js
@@ -0,0 +1,45 @@
+import { computed } from 'vue';
+import { useRoute, useData, inBrowser } from 'vitepress';
+export function useLocaleLinks() {
+    const route = useRoute();
+    const { site } = useData();
+    return computed(() => {
+        const theme = site.value.themeConfig;
+        const locales = theme.locales;
+        if (!locales) {
+            return null;
+        }
+        const localeKeys = Object.keys(locales);
+        if (localeKeys.length <= 1) {
+            return null;
+        }
+        // handle site base
+        const siteBase = inBrowser ? site.value.base : '/';
+        const siteBaseWithoutSuffix = siteBase.endsWith('/')
+            ? siteBase.slice(0, -1)
+            : siteBase;
+        // remove site base in browser env
+        const routerPath = route.path.slice(siteBaseWithoutSuffix.length);
+        const currentLangBase = localeKeys.find((key) => {
+            return key === '/' ? false : routerPath.startsWith(key);
+        });
+        const currentContentPath = currentLangBase
+            ? routerPath.substring(currentLangBase.length - 1)
+            : routerPath;
+        const candidates = localeKeys.map((v) => {
+            const localePath = v.endsWith('/') ? v.slice(0, -1) : v;
+            return {
+                text: locales[v].label,
+                link: `${localePath}${currentContentPath}`
+            };
+        });
+        const currentLangKey = currentLangBase ? currentLangBase : '/';
+        const selectText = locales[currentLangKey].selectText
+            ? locales[currentLangKey].selectText
+            : 'Languages';
+        return {
+            text: selectText,
+            items: candidates
+        };
+    });
+}
diff --git a/sites/.vitepress/devui-theme/composables/navLink.d.ts b/sites/.vitepress/devui-theme/composables/navLink.d.ts
new file mode 100644
index 00000000..881bc114
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/navLink.d.ts
@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+import type { DefaultTheme } from '../config';
+export declare function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>): {
+    props: import("vue").ComputedRef<{
+        class: {
+            active: boolean;
+            isExternal: boolean;
+        };
+        href: string;
+        target: string | null;
+        rel: string | null;
+        'aria-label': string | undefined;
+    }>;
+    isExternal: boolean;
+};
diff --git a/sites/.vitepress/devui-theme/composables/navLink.js b/sites/.vitepress/devui-theme/composables/navLink.js
new file mode 100644
index 00000000..9cc42c3f
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/navLink.js
@@ -0,0 +1,42 @@
+import { computed } from 'vue';
+import { useRoute, withBase } from 'vitepress';
+import { isExternal as isExternalCheck } from '../utils';
+export function useNavLink(item) {
+    const route = useRoute();
+    const isExternal = isExternalCheck(item.value.link);
+    const props = computed(() => {
+        const routePath = normalizePath(`/${route.data.relativePath}`);
+        let active = false;
+        if (item.value.activeMatch) {
+            active = new RegExp(item.value.activeMatch).test(routePath);
+        }
+        else {
+            const itemPath = normalizePath(withBase(item.value.link));
+            active =
+                itemPath === '/'
+                    ? itemPath === routePath
+                    : routePath.startsWith(itemPath);
+        }
+        return {
+            class: {
+                active,
+                isExternal
+            },
+            href: isExternal ? item.value.link : withBase(item.value.link),
+            target: item.value.target || isExternal ? `_blank` : null,
+            rel: item.value.rel || isExternal ? `noopener noreferrer` : null,
+            'aria-label': item.value.ariaLabel
+        };
+    });
+    return {
+        props,
+        isExternal
+    };
+}
+function normalizePath(path) {
+    return path
+        .replace(/#.*$/, '')
+        .replace(/\?.*$/, '')
+        .replace(/\.(html|md)$/, '')
+        .replace(/\/index$/, '/');
+}
diff --git a/sites/.vitepress/devui-theme/composables/nextAndPrevLinks.d.ts b/sites/.vitepress/devui-theme/composables/nextAndPrevLinks.d.ts
new file mode 100644
index 00000000..fe9c8407
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/nextAndPrevLinks.d.ts
@@ -0,0 +1,5 @@
+export declare function useNextAndPrevLinks(): {
+    next: import("vue").ComputedRef<import("../config").DefaultTheme.SideBarLink | undefined>;
+    prev: import("vue").ComputedRef<import("../config").DefaultTheme.SideBarLink | undefined>;
+    hasLinks: import("vue").ComputedRef<boolean>;
+};
diff --git a/sites/.vitepress/devui-theme/composables/nextAndPrevLinks.js b/sites/.vitepress/devui-theme/composables/nextAndPrevLinks.js
new file mode 100644
index 00000000..8ed32d79
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/nextAndPrevLinks.js
@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { useData } from 'vitepress';
+import { isArray, ensureStartingSlash, removeExtention } from '../utils';
+import { getSideBarConfig, getFlatSideBarLinks } from '../support/sideBar';
+export function useNextAndPrevLinks() {
+    const { page, theme } = useData();
+    const path = computed(() => {
+        return removeExtention(ensureStartingSlash(page.value.relativePath));
+    });
+    const candidates = computed(() => {
+        const config = getSideBarConfig(theme.value.sidebar, path.value);
+        return isArray(config) ? getFlatSideBarLinks(config) : [];
+    });
+    const index = computed(() => {
+        return candidates.value.findIndex((item) => {
+            return item.link === path.value;
+        });
+    });
+    const next = computed(() => {
+        if (theme.value.nextLinks !== false &&
+            index.value > -1 &&
+            index.value < candidates.value.length - 1) {
+            return candidates.value[index.value + 1];
+        }
+    });
+    const prev = computed(() => {
+        if (theme.value.prevLinks !== false && index.value > 0) {
+            return candidates.value[index.value - 1];
+        }
+    });
+    const hasLinks = computed(() => !!next.value || !!prev.value);
+    return {
+        next,
+        prev,
+        hasLinks
+    };
+}
diff --git a/sites/.vitepress/devui-theme/composables/repo.d.ts b/sites/.vitepress/devui-theme/composables/repo.d.ts
new file mode 100644
index 00000000..abd93bbe
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/repo.d.ts
@@ -0,0 +1,5 @@
+export declare const platforms: (readonly [string, RegExp])[];
+export declare function useRepo(): import("vue").ComputedRef<{
+    text: string;
+    link: string;
+} | null>;
diff --git a/sites/.vitepress/devui-theme/composables/repo.js b/sites/.vitepress/devui-theme/composables/repo.js
new file mode 100644
index 00000000..a3c79ee3
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/repo.js
@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { useData } from 'vitepress';
+export const platforms = ['GitHub', 'GitLab', 'Bitbucket'].map((platform) => {
+    return [platform, new RegExp(platform, 'i')];
+});
+export function useRepo() {
+    const { site } = useData();
+    return computed(() => {
+        const theme = site.value.themeConfig;
+        const name = theme.docsRepo || theme.repo;
+        if (!name) {
+            return null;
+        }
+        const link = getRepoUrl(name);
+        const text = getRepoText(link, theme.repoLabel);
+        return { text, link };
+    });
+}
+function getRepoUrl(repo) {
+    // if the full url is not provided, default to GitHub repo
+    return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
+}
+function getRepoText(url, text) {
+    if (text) {
+        return text;
+    }
+    // if no label is provided, deduce it from the repo url
+    const hosts = url.match(/^https?:\/\/[^/]+/);
+    if (!hosts) {
+        return 'Source';
+    }
+    const platform = platforms.find(([_p, re]) => re.test(hosts[0]));
+    if (platform && platform[0]) {
+        return platform[0];
+    }
+    return 'Source';
+}
diff --git a/sites/.vitepress/devui-theme/composables/sideBar.d.ts b/sites/.vitepress/devui-theme/composables/sideBar.d.ts
new file mode 100644
index 00000000..ec7544f8
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/sideBar.d.ts
@@ -0,0 +1,2 @@
+import { DefaultTheme } from '../config';
+export declare function useSideBar(): import("vue").ComputedRef<DefaultTheme.SideBarItem[]>;
diff --git a/sites/.vitepress/devui-theme/composables/sideBar.js b/sites/.vitepress/devui-theme/composables/sideBar.js
new file mode 100644
index 00000000..3ca2b557
--- /dev/null
+++ b/sites/.vitepress/devui-theme/composables/sideBar.js
@@ -0,0 +1,57 @@
+import { computed } from 'vue';
+import { useRoute, useData } from 'vitepress';
+import { useActiveSidebarLinks } from '../composables/activeSidebarLink';
+import { getSideBarConfig } from '../support/sideBar';
+export function useSideBar() {
+    const route = useRoute();
+    const { site } = useData();
+    useActiveSidebarLinks();
+    return computed(() => {
+        // at first, we'll check if we can find the sidebar setting in frontmatter.
+        const headers = route.data.headers;
+        const frontSidebar = route.data.frontmatter.sidebar;
+        const sidebarDepth = route.data.frontmatter.sidebarDepth;
+        // if it's `false`, we'll just return an empty array here.
+        if (frontSidebar === false) {
+            return [];
+        }
+        // if it's `atuo`, render headers of the current page
+        if (frontSidebar === 'auto') {
+            return resolveAutoSidebar(headers, sidebarDepth);
+        }
+        // now, there's no sidebar setting at frontmatter; let's see the configs
+        const themeSidebar = getSideBarConfig(site.value.themeConfig.sidebar, route.data.relativePath);
+        if (themeSidebar === false) {
+            return [];
+        }
+        if (themeSidebar === 'auto') {
+            return resolveAutoSidebar(headers, sidebarDepth);
+        }
+        return themeSidebar;
+    });
+}
+function resolveAutoSidebar(headers, depth) {
+    const ret = [];
+    if (headers === undefined) {
+        return [];
+    }
+    let lastH2 = undefined;
+    headers.forEach(({ level, title, slug }) => {
+        if (level - 1 > depth) {
+            return;
+        }
+        const item = {
+            text: title,
+            link: `#${slug}`
+        };
+        if (level === 2) {
+            lastH2 = item;
+            ret.push(item);
+        }
+        else if (lastH2) {
+            ;
+            (lastH2.children || (lastH2.children = [])).push(item);
+        }
+    });
+    return ret;
+}
diff --git a/sites/.vitepress/devui-theme/config.d.ts b/sites/.vitepress/devui-theme/config.d.ts
new file mode 100644
index 00000000..be96e467
--- /dev/null
+++ b/sites/.vitepress/devui-theme/config.d.ts
@@ -0,0 +1,112 @@
+export declare namespace DefaultTheme {
+    interface Config {
+        logo?: string;
+        nav?: NavItem[] | false;
+        sidebar?: SideBarConfig | MultiSideBarConfig;
+        /**
+         * GitHub repository following the format <user>/<project>.
+         *
+         * @example `"vuejs/vue-next"`
+         */
+        repo?: string;
+        /**
+         * Customize the header label. Defaults to GitHub/Gitlab/Bitbucket
+         * depending on the provided repo.
+         *
+         * @example `"Contribute!"`
+         */
+        repoLabel?: string;
+        /**
+         * If your docs are in a different repository from your main project.
+         *
+         * @example `"vuejs/docs-next"`
+         */
+        docsRepo?: string;
+        /**
+         * If your docs are not at the root of the repo.
+         *
+         * @example `"docs"`
+         */
+        docsDir?: string;
+        /**
+         * If your docs are in a different branch. Defaults to `master`.
+         *
+         * @example `"next"`
+         */
+        docsBranch?: string;
+        /**
+         * Enable links to edit pages at the bottom of the page.
+         */
+        editLinks?: boolean;
+        /**
+         * Custom text for edit link. Defaults to "Edit this page".
+         */
+        editLinkText?: string;
+        /**
+         * Show last updated time at the bottom of the page. Defaults to `false`.
+         * If given a string, it will be displayed as a prefix (default value:
+         * "Last Updated").
+         */
+        lastUpdated?: string | boolean;
+        prevLinks?: boolean;
+        nextLinks?: boolean;
+        locales?: Record<string, LocaleConfig & Omit<Config, 'locales'>>;
+        algolia?: AlgoliaSearchOptions;
+        carbonAds?: {
+            carbon: string;
+            custom?: string;
+            placement: string;
+        };
+    }
+    type NavItem = NavItemWithLink | NavItemWithChildren;
+    interface NavItemBase {
+        text: string;
+        target?: string;
+        rel?: string;
+        ariaLabel?: string;
+        activeMatch?: string;
+    }
+    interface NavItemWithLink extends NavItemBase {
+        link: string;
+    }
+    interface NavItemWithChildren extends NavItemBase {
+        items: NavItemWithLink[];
+    }
+    type SideBarConfig = SideBarItem[] | 'auto' | false;
+    interface MultiSideBarConfig {
+        [path: string]: SideBarConfig;
+    }
+    type SideBarItem = SideBarLink | SideBarGroup;
+    interface SideBarLink {
+        text: string;
+        link: string;
+    }
+    interface SideBarGroup {
+        text: string;
+        link?: string;
+        /**
+         * @default false
+         */
+        collapsable?: boolean;
+        children: SideBarItem[];
+    }
+    interface AlgoliaSearchOptions {
+        appId?: string;
+        apiKey: string;
+        indexName: string;
+        placeholder?: string;
+        searchParameters?: any;
+        disableUserPersonalization?: boolean;
+        initialQuery?: string;
+    }
+    interface LocaleConfig {
+        /**
+         * Text for the language dropdown.
+         */
+        selectText?: string;
+        /**
+         * Label for this locale in the language dropdown.
+         */
+        label?: string;
+    }
+}
diff --git a/sites/.vitepress/devui-theme/config.js b/sites/.vitepress/devui-theme/config.js
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/sites/.vitepress/devui-theme/config.js
@@ -0,0 +1 @@
+export {};
diff --git a/sites/.vitepress/devui-theme/index.d.ts b/sites/.vitepress/devui-theme/index.d.ts
new file mode 100644
index 00000000..fb57816d
--- /dev/null
+++ b/sites/.vitepress/devui-theme/index.d.ts
@@ -0,0 +1,8 @@
+import './styles/vars.css';
+import './styles/layout.css';
+import './styles/code.css';
+import './styles/custom-blocks.css';
+import './styles/sidebar-links.css';
+import { Theme } from 'vitepress';
+declare const theme: Theme;
+export default theme;
diff --git a/sites/.vitepress/devui-theme/index.js b/sites/.vitepress/devui-theme/index.js
new file mode 100644
index 00000000..156939ec
--- /dev/null
+++ b/sites/.vitepress/devui-theme/index.js
@@ -0,0 +1,12 @@
+import './styles/vars.css';
+import './styles/layout.css';
+import './styles/code.css';
+import './styles/custom-blocks.css';
+import './styles/sidebar-links.css';
+import Layout from './Layout.vue';
+import NotFound from './NotFound.vue';
+const theme = {
+    Layout,
+    NotFound
+};
+export default theme;
diff --git a/sites/.vitepress/devui-theme/styles/code.css b/sites/.vitepress/devui-theme/styles/code.css
new file mode 100644
index 00000000..1e821af9
--- /dev/null
+++ b/sites/.vitepress/devui-theme/styles/code.css
@@ -0,0 +1,298 @@
+code {
+  margin: 0;
+  border-radius: 3px;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--code-font-family);
+  font-size: 0.85em;
+  color: var(--c-text-light);
+  background-color: var(--code-inline-bg-color);
+}
+
+code .token.deleted {
+  color: #ec5975;
+}
+
+code .token.inserted {
+  color: var(--c-brand);
+}
+
+div[class*='language-'] {
+  position: relative;
+  margin: 1rem -1.5rem;
+  background-color: var(--code-bg-color);
+  overflow-x: auto;
+}
+
+li > div[class*='language-'] {
+  border-radius: 6px 0 0 6px;
+  margin: 1rem -1.5rem 1rem -1.25rem;
+}
+
+@media (min-width: 420px) {
+  div[class*='language-'] {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+
+  li > div[class*='language-'] {
+    margin: 1rem 0 1rem 0rem;
+    border-radius: 6px;
+  }
+}
+
+[class*='language-'] pre,
+[class*='language-'] code {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+[class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  background: transparent;
+  overflow-x: auto;
+}
+
+[class*='language-'] code {
+  padding: 0;
+  line-height: var(--code-line-height);
+  font-size: var(--code-font-size);
+  color: #eee;
+}
+
+/* Line highlighting */
+
+.highlight-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem 0;
+  width: 100%;
+  line-height: var(--code-line-height);
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
+  user-select: none;
+  overflow: hidden;
+}
+
+.highlight-lines .highlighted {
+  background-color: rgba(0, 0, 0, 0.66);
+}
+
+/* Line numbers mode */
+
+div[class*='language-'].line-numbers-mode {
+  padding-left: 3.5rem;
+}
+
+.line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  border-right: 1px solid rgba(0, 0, 0, 0.5);
+  padding: 1.25rem 0;
+  width: 3.5rem;
+  text-align: center;
+  line-height: var(--code-line-height);
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
+  color: #888;
+}
+
+/* Language marker */
+
+div[class*='language-']:before {
+  position: absolute;
+  top: 0.6em;
+  right: 1em;
+  z-index: 2;
+  font-size: 0.8rem;
+  color: #888;
+}
+
+div[class~='language-html']:before,
+div[class~='language-markup']:before {
+  content: 'html';
+}
+
+div[class~='language-md']:before,
+div[class~='language-markdown']:before {
+  content: 'md';
+}
+
+div[class~='language-css']:before {
+  content: 'css';
+}
+
+div[class~='language-sass']:before {
+  content: 'sass';
+}
+
+div[class~='language-scss']:before {
+  content: 'scss';
+}
+
+div[class~='language-less']:before {
+  content: 'less';
+}
+
+div[class~='language-stylus']:before {
+  content: 'styl';
+}
+
+div[class~='language-js']:before,
+div[class~='language-javascript']:before {
+  content: 'js';
+}
+
+div[class~='language-ts']:before,
+div[class~='language-typescript']:before {
+  content: 'ts';
+}
+
+div[class~='language-json']:before {
+  content: 'json';
+}
+
+div[class~='language-rb']:before,
+div[class~='language-ruby']:before {
+  content: 'rb';
+}
+
+div[class~='language-py']:before,
+div[class~='language-python']:before {
+  content: 'py';
+}
+
+div[class~='language-sh']:before,
+div[class~='language-bash']:before {
+  content: 'sh';
+}
+
+div[class~='language-php']:before {
+  content: 'php';
+}
+
+div[class~='language-go']:before {
+  content: 'go';
+}
+
+div[class~='language-rust']:before {
+  content: 'rust';
+}
+
+div[class~='language-java']:before {
+  content: 'java';
+}
+
+div[class~='language-c']:before {
+  content: 'c';
+}
+
+div[class~='language-yaml']:before {
+  content: 'yaml';
+}
+
+div[class~='language-dockerfile']:before {
+  content: 'dockerfile';
+}
+
+div[class~='language-vue']:before {
+  content: 'vue';
+}
+
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ *
+ * @author Rose Pritchard
+ */
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}
diff --git a/sites/.vitepress/devui-theme/styles/custom-blocks.css b/sites/.vitepress/devui-theme/styles/custom-blocks.css
new file mode 100644
index 00000000..ee52d4c0
--- /dev/null
+++ b/sites/.vitepress/devui-theme/styles/custom-blocks.css
@@ -0,0 +1,70 @@
+.custom-block.tip,
+.custom-block.warning,
+.custom-block.danger {
+  margin: 1rem 0;
+  border-left: 0.5rem solid;
+  padding: 0.1rem 1.5rem;
+  overflow-x: auto;
+}
+
+.custom-block.tip {
+  background-color: #f3f5f7;
+  border-color: var(--c-brand);
+}
+
+.custom-block.warning {
+  border-color: #e7c000;
+  color: #6b5900;
+  background-color: rgba(255, 229, 100, 0.3);
+}
+
+.custom-block.warning .custom-block-title {
+  color: #b29400;
+}
+
+.custom-block.warning a {
+  color: var(--c-text);
+}
+
+.custom-block.danger {
+  border-color: #c00;
+  color: #4d0000;
+  background-color: #ffe6e6;
+}
+
+.custom-block.danger .custom-block-title {
+  color: #900;
+}
+
+.custom-block.danger a {
+  color: var(--c-text);
+}
+
+.custom-block.details {
+  position: relative;
+  display: block;
+  border-radius: 2px;
+  margin: 1.6em 0;
+  padding: 1.6em;
+  background-color: #eee;
+}
+
+.custom-block.details h4 {
+  margin-top: 0;
+}
+
+.custom-block.details figure:last-child,
+.custom-block.details p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.custom-block.details summary {
+  outline: none;
+  cursor: pointer;
+}
+
+.custom-block-title {
+  margin-bottom: -0.4rem;
+  font-weight: 600;
+}
diff --git a/sites/.vitepress/devui-theme/styles/layout.css b/sites/.vitepress/devui-theme/styles/layout.css
new file mode 100644
index 00000000..8d9e0a8e
--- /dev/null
+++ b/sites/.vitepress/devui-theme/styles/layout.css
@@ -0,0 +1,236 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.4;
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  line-height: 1.4;
+  font-family: var(--font-family-base);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--c-text);
+  background-color: var(--c-bg);
+  direction: ltr;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+main {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
+  font-weight: 600;
+}
+
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+  opacity: 1;
+}
+
+h1 {
+  margin-top: 1.5rem;
+  font-size: 1.9rem;
+}
+
+@media screen and (min-width: 420px) {
+  h1 {
+    font-size: 2.2rem;
+  }
+}
+
+h2 {
+  margin-top: 2.25rem;
+  margin-bottom: 1.25rem;
+  border-bottom: 1px solid var(--c-divider);
+  padding-bottom: 0.3rem;
+  line-height: 1.25;
+  font-size: 1.65rem;
+  /* overflow-x: auto; */
+}
+
+h2 + h3 {
+  margin-top: 1.5rem;
+}
+
+h3 {
+  margin-top: 2rem;
+  font-size: 1.35rem;
+}
+
+h4 {
+  font-size: 1.15rem;
+}
+
+p,
+ol,
+ul {
+  margin: 1rem 0;
+  line-height: 1.7;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+a {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a.header-anchor {
+  float: left;
+  margin-top: 0.125em;
+  margin-left: -0.87em;
+  padding-right: 0.23em;
+  font-size: 0.85em;
+  opacity: 0;
+}
+
+a.header-anchor:hover,
+a.header-anchor:focus {
+  text-decoration: none;
+}
+
+figure {
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+ul,
+ol {
+  padding-left: 1.25em;
+}
+
+li > ul,
+li > ol {
+  margin: 0;
+}
+
+table {
+  display: block;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+tr {
+  border-top: 1px solid #dfe2e5;
+}
+
+tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+th,
+td {
+  border: 1px solid #dfe2e5;
+  padding: 0.6em 1em;
+}
+
+blockquote {
+  margin: 1rem 0;
+  border-left: 0.2rem solid #dfe2e5;
+  padding: 0.25rem 0 0.25rem 1rem;
+  font-size: 1rem;
+  color: #999;
+}
+
+blockquote > p {
+  margin: 0;
+}
+
+form {
+  margin: 0;
+}
+
+.theme.sidebar-open .sidebar-mask {
+  display: block;
+}
+
+.theme.no-navbar > h1,
+.theme.no-navbar > h2,
+.theme.no-navbar > h3,
+.theme.no-navbar > h4,
+.theme.no-navbar > h5,
+.theme.no-navbar > h6 {
+  margin-top: 1.5rem;
+  padding-top: 0;
+}
+
+.theme.no-navbar aside {
+  top: 0;
+}
+
+@media screen and (min-width: 720px) {
+  .theme.no-sidebar aside {
+    display: none;
+  }
+
+  .theme.no-sidebar main {
+    margin-left: 0;
+  }
+}
+
+.sidebar-mask {
+  position: fixed;
+  z-index: 2;
+  display: none;
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/sites/.vitepress/devui-theme/styles/sidebar-links.css b/sites/.vitepress/devui-theme/styles/sidebar-links.css
new file mode 100644
index 00000000..c15f53fd
--- /dev/null
+++ b/sites/.vitepress/devui-theme/styles/sidebar-links.css
@@ -0,0 +1,107 @@
+.sidebar-links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sidebar-link-item {
+  display: block;
+  margin: 0;
+  border-left: 0.25rem solid transparent;
+  color: var(--c-text);
+}
+
+a.sidebar-link-item:hover {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+a.sidebar-link-item.active {
+  color: var(--c-brand);
+}
+
+.sidebar > .sidebar-links {
+  padding: 0.75rem 0 5rem;
+}
+
+@media (min-width: 720px) {
+  .sidebar > .sidebar-links {
+    padding: 1.5rem 0;
+  }
+}
+
+.sidebar > .sidebar-links > .sidebar-link + .sidebar-link {
+  padding-top: 0.5rem;
+}
+
+@media (min-width: 720px) {
+  .sidebar > .sidebar-links > .sidebar-link + .sidebar-link {
+    padding-top: 1.25rem;
+  }
+}
+
+.sidebar > .sidebar-links > .sidebar-link > .sidebar-link-item {
+  padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.sidebar > .sidebar-links > .sidebar-link > a.sidebar-link-item.active {
+  border-left-color: var(--c-brand);
+  font-weight: 600;
+}
+
+.sidebar
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-link-item {
+  display: block;
+  padding: 0.35rem 1.5rem 0.35rem 2rem;
+  line-height: 1.4;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.sidebar
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > a.sidebar-link-item.active {
+  border-left-color: var(--c-brand);
+  font-weight: 600;
+}
+
+.sidebar
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-link-item {
+  display: block;
+  padding: 0.3rem 1.5rem 0.3rem 3rem;
+  line-height: 1.4;
+  font-size: 0.9rem;
+  font-weight: 400;
+}
+
+.sidebar
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-links
+  > .sidebar-link
+  > .sidebar-link-item {
+  display: block;
+  padding: 0.3rem 1.5rem 0.3rem 4rem;
+  line-height: 1.4;
+  font-size: 0.9rem;
+  font-weight: 400;
+}
diff --git a/sites/.vitepress/devui-theme/styles/vars.css b/sites/.vitepress/devui-theme/styles/vars.css
new file mode 100644
index 00000000..78ec1203
--- /dev/null
+++ b/sites/.vitepress/devui-theme/styles/vars.css
@@ -0,0 +1,74 @@
+/** Base Styles */
+:root {
+  /**
+   * Colors
+   * --------------------------------------------------------------------- */
+
+  --c-white: #ffffff;
+  --c-white-dark: #f8f8f8;
+  --c-black: #000000;
+
+  --c-divider-light: rgba(60, 60, 67, 0.12);
+  --c-divider-dark: rgba(84, 84, 88, 0.48);
+
+  --c-text-light-1: #2c3e50;
+  --c-text-light-2: #476582;
+  --c-text-light-3: #90a4b7;
+
+  --c-brand: #3eaf7c;
+  --c-brand-light: #4abf8a;
+
+  /**
+   * Typography
+   * --------------------------------------------------------------------- */
+
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+
+  /**
+   * Z Indexes
+   *
+   * Algolia SearchBox has a z-index of 200, so make sure not to go above
+   * that value.
+   * --------------------------------------------------------------------- */
+
+  --z-index-navbar: 10;
+  --z-index-sidebar: 6;
+
+  /**
+   * Shadows
+   * --------------------------------------------------------------------- */
+
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+
+  /**
+   * Sizes
+   * --------------------------------------------------------------------- */
+
+  --header-height: 3.6rem;
+}
+
+/** Fallback Styles */
+:root {
+  --c-divider: var(--c-divider-light);
+
+  --c-text: var(--c-text-light-1);
+  --c-text-light: var(--c-text-light-2);
+  --c-text-lighter: var(--c-text-light-3);
+
+  --c-bg: var(--c-white);
+  --c-bg-accent: var(--c-white-dark);
+
+  --code-line-height: 24px;
+  --code-font-family: var(--font-family-mono);
+  --code-font-size: 14px;
+  --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+  --code-bg-color: #282c34;
+}
diff --git a/sites/.vitepress/devui-theme/support/sideBar.d.ts b/sites/.vitepress/devui-theme/support/sideBar.d.ts
new file mode 100644
index 00000000..5d8cc85a
--- /dev/null
+++ b/sites/.vitepress/devui-theme/support/sideBar.d.ts
@@ -0,0 +1,18 @@
+import { DefaultTheme } from '../config';
+export declare function isSideBarConfig(sidebar: DefaultTheme.SideBarConfig | DefaultTheme.MultiSideBarConfig): sidebar is DefaultTheme.SideBarConfig;
+export declare function isSideBarGroup(item: DefaultTheme.SideBarItem): item is DefaultTheme.SideBarGroup;
+export declare function isSideBarEmpty(sidebar?: DefaultTheme.SideBarConfig): boolean;
+/**
+ * Get the `SideBarConfig` from sidebar option. This method will ensure to get
+ * correct sidebar config from `MultiSideBarConfig` with various path
+ * combinations such as matching `guide/` and `/guide/`. If no matching config
+ * was found, it will return `auto` as a fallback.
+ */
+export declare function getSideBarConfig(sidebar: DefaultTheme.SideBarConfig | DefaultTheme.MultiSideBarConfig, path: string): DefaultTheme.SideBarConfig;
+/**
+ * Get flat sidebar links from the sidebar items. This method is useful for
+ * creating the "next and prev link" feature. It will ignore any items that
+ * don't have `link` property and removes `.md` or `.html` extension if a
+ * link contains it.
+ */
+export declare function getFlatSideBarLinks(sidebar: DefaultTheme.SideBarItem[]): DefaultTheme.SideBarLink[];
diff --git a/sites/.vitepress/devui-theme/support/sideBar.js b/sites/.vitepress/devui-theme/support/sideBar.js
new file mode 100644
index 00000000..54c95bea
--- /dev/null
+++ b/sites/.vitepress/devui-theme/support/sideBar.js
@@ -0,0 +1,46 @@
+import { isArray, ensureStartingSlash, removeExtention } from '../utils';
+export function isSideBarConfig(sidebar) {
+    return sidebar === false || sidebar === 'auto' || isArray(sidebar);
+}
+export function isSideBarGroup(item) {
+    return item.children !== undefined;
+}
+export function isSideBarEmpty(sidebar) {
+    return isArray(sidebar) ? sidebar.length === 0 : !sidebar;
+}
+/**
+ * Get the `SideBarConfig` from sidebar option. This method will ensure to get
+ * correct sidebar config from `MultiSideBarConfig` with various path
+ * combinations such as matching `guide/` and `/guide/`. If no matching config
+ * was found, it will return `auto` as a fallback.
+ */
+export function getSideBarConfig(sidebar, path) {
+    if (isSideBarConfig(sidebar)) {
+        return sidebar;
+    }
+    path = ensureStartingSlash(path);
+    for (const dir in sidebar) {
+        // make sure the multi sidebar key starts with slash too
+        if (path.startsWith(ensureStartingSlash(dir))) {
+            return sidebar[dir];
+        }
+    }
+    return 'auto';
+}
+/**
+ * Get flat sidebar links from the sidebar items. This method is useful for
+ * creating the "next and prev link" feature. It will ignore any items that
+ * don't have `link` property and removes `.md` or `.html` extension if a
+ * link contains it.
+ */
+export function getFlatSideBarLinks(sidebar) {
+    return sidebar.reduce((links, item) => {
+        if (item.link) {
+            links.push({ text: item.text, link: removeExtention(item.link) });
+        }
+        if (isSideBarGroup(item)) {
+            links = [...links, ...getFlatSideBarLinks(item.children)];
+        }
+        return links;
+    }, []);
+}
diff --git a/sites/.vitepress/devui-theme/utils.d.ts b/sites/.vitepress/devui-theme/utils.d.ts
new file mode 100644
index 00000000..68258968
--- /dev/null
+++ b/sites/.vitepress/devui-theme/utils.d.ts
@@ -0,0 +1,25 @@
+import { Route } from 'vitepress';
+export declare const hashRE: RegExp;
+export declare const extRE: RegExp;
+export declare const endingSlashRE: RegExp;
+export declare const outboundRE: RegExp;
+export declare function isNullish(value: any): value is null | undefined;
+export declare function isArray(value: any): value is any[];
+export declare function isExternal(path: string): boolean;
+export declare function isActive(route: Route, path?: string): boolean;
+export declare function normalize(path: string): string;
+export declare function joinUrl(base: string, path: string): string;
+/**
+ * get the path without filename (the last segment). for example, if the given
+ * path is `/guide/getting-started.html`, this method will return `/guide/`.
+ * Always with a trailing slash.
+ */
+export declare function getPathDirName(path: string): string;
+export declare function ensureSlash(path: string): string;
+export declare function ensureStartingSlash(path: string): string;
+export declare function ensureEndingSlash(path: string): string;
+/**
+ * Remove `.md` or `.html` extention from the given path. It also converts
+ * `index` to slush.
+ */
+export declare function removeExtention(path: string): string;
diff --git a/sites/.vitepress/devui-theme/utils.js b/sites/.vitepress/devui-theme/utils.js
new file mode 100644
index 00000000..51ad485c
--- /dev/null
+++ b/sites/.vitepress/devui-theme/utils.js
@@ -0,0 +1,63 @@
+export const hashRE = /#.*$/;
+export const extRE = /(index)?\.(md|html)$/;
+export const endingSlashRE = /\/$/;
+export const outboundRE = /^[a-z]+:/i;
+export function isNullish(value) {
+    return value === null || value === undefined;
+}
+export function isArray(value) {
+    return Array.isArray(value);
+}
+export function isExternal(path) {
+    return outboundRE.test(path);
+}
+export function isActive(route, path) {
+    if (path === undefined) {
+        return false;
+    }
+    const routePath = normalize(`/${route.data.relativePath}`);
+    const pagePath = normalize(path);
+    return routePath === pagePath;
+}
+export function normalize(path) {
+    return decodeURI(path).replace(hashRE, '').replace(extRE, '');
+}
+export function joinUrl(base, path) {
+    const baseEndsWithSlash = base.endsWith('/');
+    const pathStartsWithSlash = path.startsWith('/');
+    if (baseEndsWithSlash && pathStartsWithSlash) {
+        return base.slice(0, -1) + path;
+    }
+    if (!baseEndsWithSlash && !pathStartsWithSlash) {
+        return `${base}/${path}`;
+    }
+    return base + path;
+}
+/**
+ * get the path without filename (the last segment). for example, if the given
+ * path is `/guide/getting-started.html`, this method will return `/guide/`.
+ * Always with a trailing slash.
+ */
+export function getPathDirName(path) {
+    const segments = path.split('/');
+    if (segments[segments.length - 1]) {
+        segments.pop();
+    }
+    return ensureEndingSlash(segments.join('/'));
+}
+export function ensureSlash(path) {
+    return ensureEndingSlash(ensureStartingSlash(path));
+}
+export function ensureStartingSlash(path) {
+    return /^\//.test(path) ? path : `/${path}`;
+}
+export function ensureEndingSlash(path) {
+    return /(\.html|\/)$/.test(path) ? path : `${path}/`;
+}
+/**
+ * Remove `.md` or `.html` extention from the given path. It also converts
+ * `index` to slush.
+ */
+export function removeExtention(path) {
+    return path.replace(/(index)?(\.(md|html))?$/, '') || '/';
+}
diff --git a/sites/.vitepress/theme/index.ts b/sites/.vitepress/theme/index.ts
index 8d4209c5..7a5ebb45 100644
--- a/sites/.vitepress/theme/index.ts
+++ b/sites/.vitepress/theme/index.ts
@@ -1,5 +1,5 @@
 import DevUI from '../../../devui/vue-devui'
-import Theme from 'vitepress/dist/client/theme-default'
+import Theme from '../devui-theme'
 
 export default {
   ...Theme,
diff --git a/sites/components/alert/index.md b/sites/components/alert/index.md
new file mode 100644
index 00000000..498a2793
--- /dev/null
+++ b/sites/components/alert/index.md
@@ -0,0 +1,23 @@
+# Alert 警告
+
+显示警告信息，需要用户关注的信息的组件。
+
+### 何时使用
+
+当页面需要向用户发出警告信息时。
+
+### 基本用法
+
+<d-alert type="success" :closeable="false"> success </d-alert>
+<d-alert type="danger" :closeable="false"> danger </d-alert>
+<d-alert type="warning" :closeable="false"> warning </d-alert>
+<d-alert type="info" :closeable="false"> info </d-alert>
+<d-alert type="simple" :closeable="false"> simple </d-alert>
+
+```html
+<d-alert type="success" :closeable="false"> success </d-alert>
+<d-alert type="danger" :closeable="false"> danger </d-alert>
+<d-alert type="warning" :closeable="false"> warning </d-alert>
+<d-alert type="info" :closeable="false"> info </d-alert>
+<d-alert type="simple" :closeable="false"> simple </d-alert>
+```
\ No newline at end of file
diff --git a/sites/components/avatar/index.md b/sites/components/avatar/index.md
new file mode 100644
index 00000000..51a55438
--- /dev/null
+++ b/sites/components/avatar/index.md
@@ -0,0 +1,23 @@
+# Avatar 头像
+
+显示用户头像的组件。
+
+### 何时使用
+
+当需要显示用户头像时。
+
+### 头像显示的基本规则
+
+头像组件传入'name'属性时，会根据一定的规则显示头像的字段，具体规则参见API。
+
+<d-avatar style="text-align: right" gender="Female" name="组件头像"></d-avatar>
+<d-avatar name="MyAvatar"></d-avatar>
+<d-avatar name="Avatar1 Avatar2"></d-avatar>
+<d-avatar name="1Avatar"></d-avatar>
+
+```html
+<d-avatar style="text-align: right" gender="Female" name="组件头像"></d-avatar>
+<d-avatar name="MyAvatar"></d-avatar>
+<d-avatar name="Avatar1 Avatar2"></d-avatar>
+<d-avatar name="1Avatar"></d-avatar>
+```
\ No newline at end of file
diff --git a/sites/components/button/index.md b/sites/components/button/index.md
index 0f6e4401..82c6470e 100644
--- a/sites/components/button/index.md
+++ b/sites/components/button/index.md
@@ -1 +1,27 @@
-# Button 按钮
\ No newline at end of file
+# Button 按钮
+
+按钮用于开始一个即时操作。
+
+### 何时使用
+
+标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
+
+### 主要按钮
+
+<d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
+<d-button :disabled="true">Disabled</d-button>
+
+```html
+<d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
+<d-button :disabled="true">Disabled</d-button>
+```
+
+### 次要按钮
+
+<d-button bsStyle="common" style="margin-right: 8px">Common</d-button>
+<d-button bsStyle="common" :disabled="true">Disabled</d-button>
+
+```html
+<d-button bsStyle="common" style="margin-right: 8px">Common</d-button>
+<d-button bsStyle="common" :disabled="true">Disabled</d-button>
+```
\ No newline at end of file
diff --git a/sites/components/checkbox/index.md b/sites/components/checkbox/index.md
new file mode 100644
index 00000000..ee370b2b
--- /dev/null
+++ b/sites/components/checkbox/index.md
@@ -0,0 +1,34 @@
+# CheckBox 复选框
+
+多选框。
+
+### 何时使用
+
+1. 在一组选项中进行多项选择；
+2. 单独使用可以表示在两个状态之间切换，可以和提交操作结合。
+
+### 基本用法
+
+<d-checkbox label="Checked" :isShowTitle="false" v-model:checked="checked"> </d-checkbox>
+<d-checkbox label="Not checked" :isShowTitle="false" v-model:checked="unchecked"> </d-checkbox>
+
+```html
+<d-checkbox label="Checked" :isShowTitle="false" v-model:checked="checked"> </d-checkbox>
+<d-checkbox label="Not checked" :isShowTitle="false" v-model:checked="unchecked"> </d-checkbox>
+```
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const checked = ref(true)
+    const unchecked = ref(false)
+
+    return {
+      checked,
+      unchecked,
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/sites/components/panel/index.md b/sites/components/panel/index.md
new file mode 100644
index 00000000..10c3ae76
--- /dev/null
+++ b/sites/components/panel/index.md
@@ -0,0 +1,74 @@
+# Panel 面板
+
+内容面板，用于内容分组。
+
+### 何时使用
+
+当页面内容需要进行分组显示时使用，一般包含头部、内容区域、底部三个部分。
+
+### 基本用法
+
+<section>
+  <d-panel type="primary" :isCollapsed="isCollapsed" :showAnimation="true">
+    <d-panel-header>
+      Panel with foldable
+      <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
+    </d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel :isCollapsed="isCollapsed" :hasLeftPadding="false" :showAnimation="true">
+    <d-panel-header>
+      Panel has no left padding
+      <em class="icon icon-chevron-down"></em>
+    </d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel>
+    <d-panel-header>Panel with header and footer</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+    <d-panel-footer>This is footer</d-panel-footer>
+  </d-panel>
+</section>
+
+
+```html
+<section>
+  <d-panel type="primary" :isCollapsed="isCollapsed" :showAnimation="true">
+    <d-panel-header>
+      Panel with foldable
+      <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
+    </d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel :isCollapsed="isCollapsed" :hasLeftPadding="false" :showAnimation="true">
+    <d-panel-header>
+      Panel has no left padding
+      <em class="icon icon-chevron-down"></em>
+    </d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel>
+    <d-panel-header>Panel with header and footer</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+    <d-panel-footer>This is footer</d-panel-footer>
+  </d-panel>
+</section>
+```
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const isCollapsed = ref(true)
+
+    return {
+      isCollapsed,
+    }
+  }
+})
+</script>
diff --git a/sites/components/radio/index.md b/sites/components/radio/index.md
new file mode 100644
index 00000000..99241365
--- /dev/null
+++ b/sites/components/radio/index.md
@@ -0,0 +1,33 @@
+# Radio 单选框
+
+单选框。
+
+### 何时使用
+
+用户要从一个数据集中选择单个选项，且能并排查看所有可选项，选项数量在2~7之间时，建议使用单选按钮。
+
+### 横向排列
+
+<d-radio v-model:checked="checked">checked</d-radio>
+<d-radio v-model:checked="unchecked">unchecked</d-radio>
+
+```html
+<d-radio v-model:checked="checked">checked</d-radio>
+<d-radio v-model:checked="unchecked">unchecked</d-radio>
+```
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const checked = ref(true)
+    const unchecked = ref(false)
+
+    return {
+      checked,
+      unchecked,
+    }
+  }
+})
+</script>
diff --git a/sites/components/tabs/index.md b/sites/components/tabs/index.md
new file mode 100644
index 00000000..1fe14767
--- /dev/null
+++ b/sites/components/tabs/index.md
@@ -0,0 +1,7 @@
+# Tabs 选项卡切换
+
+选项卡切换组件。
+
+### 何时使用
+
+用户需要通过平级的区域将大块内容进行收纳和展现，保持界面整洁。
diff --git a/sites/components/tags-input/index.md b/sites/components/tags-input/index.md
new file mode 100644
index 00000000..4a962755
--- /dev/null
+++ b/sites/components/tags-input/index.md
@@ -0,0 +1,44 @@
+# TagsInput 标签输入
+
+输入标签组件。
+
+### 何时使用
+
+当用户需要输入多个标签时。
+
+### 基本用法
+
+<d-tags-input
+  v-model:tags="state.tags"
+  v-model:suggestionList="state.suggestionList"
+  display-property="name"
+  placeholder="请输入名字"
+  no-data="暂无数据"
+></d-tags-input>
+
+```html
+<d-tags-input
+  v-model:tags="state.tags"
+  v-model:suggestionList="state.suggestionList"
+  display-property="name"
+  placeholder="请输入名字"
+  no-data="暂无数据"
+></d-tags-input>
+```
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const state = reactive({
+      tags: [{name: '123'}],
+      suggestionList: [{name: 'item1'}]
+    })
+
+    return {
+      state,
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/sites/components/text-input/index.md b/sites/components/text-input/index.md
new file mode 100644
index 00000000..15088452
--- /dev/null
+++ b/sites/components/text-input/index.md
@@ -0,0 +1,16 @@
+# Text Input 文本框
+
+文本输入框。
+
+### 何时使用
+
+需要手动输入文字使用。
+
+### 基本用法
+
+<h4>Default</h4>
+<d-text-input placeholder="Please Enter" id="textInput"></d-text-input>
+<h4>Disabled</h4>
+<d-text-input placeholder="Please Enter" :disabled="true"></d-text-input>
+<h4>Error</h4>
+<d-text-input placeholder="Please Enter" :error="true"></d-text-input>
diff --git a/sites/index.md b/sites/index.md
index 6eedf662..3380e069 100644
--- a/sites/index.md
+++ b/sites/index.md
@@ -10,7 +10,7 @@
 
 推荐使用@vite/cli创建你的项目
 
-```
+```sh
 yarn create vite my-vue-app --template vue-ts
 ```
 
@@ -18,7 +18,7 @@ yarn create vite my-vue-app --template vue-ts
 
 进入你的项目文件夹，使用yarn安装DevUI
 
-```
+```sh
 yarn add vue-devui
 
 # 可选，字体图标库, 部分Demo依赖此字体库
@@ -29,7 +29,7 @@ yarn add vue-devui
 
 main.ts
 
-```
+```js
 import DevUI from 'vue-devui'
 import 'vue-devui/style.css'
 
@@ -38,6 +38,6 @@ createApp(App).use(DevUI).mount(#app)
 
 ### 4. 启动开发调试
 
-```
+```sh
 yarn dev
 ```
\ No newline at end of file
-- 
Gitee