docs: update structure

Author: mrholek

docs/.vuepress/config.ts

@@ -7,6 +7,7 @@ import pkg from '../../package.json'
 const path = require('path')
 
 export default defineUserConfig<DefaultThemeOptions>({
+  base: `/vue/docs/${pkg.config.version_short}/`,
   lang: 'en-US',
   title: 'CoreUI for Vue.js',
   description: 'UI Components Library for Vue.js (Vue 3)',
@@ -71,180 +72,180 @@ export default defineUserConfig<DefaultThemeOptions>({
       {
         text: 'Getting started',
         icon: '<rect width="32" height="32" x="144" y="464" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="464" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="336" y="464" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M312,76.82v34.265a142.419,142.419,0,0,1,86.207,130.708C398.207,320.206,334.413,384,256,384S113.793,320.206,113.793,241.793A142.419,142.419,0,0,1,200,111.085V76.82c-68.671,23.373-118.207,88.5-118.207,164.973C81.793,337.851,159.942,416,256,416s174.207-78.149,174.207-174.207C430.207,165.316,380.671,100.193,312,76.82Z" class="ci-primary"></path><rect width="32" height="229.793" x="240" y="16" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect>',
-        link: `/${pkg.config.version_short}/getting-started/`,
+        link: `/getting-started/`,
         children: [
           {
             text: 'Introduction',
-            link: `/${pkg.config.version_short}/getting-started/introduction.html`,
+            link: `/getting-started/introduction.html`,
           },
         ],
       },
       {
         text: 'Layout',
         icon: `<path fill="var(--ci-primary-color, currentColor)" d="M16,64V448H496V64ZM464,240H192V96H464ZM192,272H312V416H192ZM48,96H160V416H48ZM344,416V272H464V416Z"></path>`,
-        link: `/${pkg.config.version_short}/layout/`,
+        link: `/layout/`,
         children: [
           {
             text: 'Breakpoints',
-            link: `/${pkg.config.version_short}/layout/breakpoints.html`,
+            link: `/layout/breakpoints.html`,
           },
           {
             text: 'Columns',
-            link: `/${pkg.config.version_short}/layout/columns.html`,
+            link: `/layout/columns.html`,
           },
           {
             text: 'Containers',
-            link: `/${pkg.config.version_short}/layout/containers.html`,
+            link: `/layout/containers.html`,
           },
           {
             text: 'Grid',
-            link: `/${pkg.config.version_short}/layout/grid.html`,
+            link: `/layout/grid.html`,
           },
           {
             text: 'Gutters',
-            link: `/${pkg.config.version_short}/layout/gutters.html`,
+            link: `/layout/gutters.html`,
           },
         ],
       },
       {
         text: 'Forms',
         icon: `<rect width="288" height="32" x="112" y="152" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="288" height="32" x="112" y="240" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="152" height="32" x="112" y="328" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M480,48H32V464H480ZM448,432H64V80H448Z" class="ci-primary"></path>`,
-        link: `/${pkg.config.version_short}/forms/`,
+        link: `/forms/`,
         children: [
           {
             text: 'Overview',
-            link: `/${pkg.config.version_short}/forms/overview.html`,
+            link: `/forms/overview.html`,
           },
           {
             text: 'Form control',
-            link: `/${pkg.config.version_short}/forms/form-control.html`,
+            link: `/forms/form-control.html`,
           },
           {
             text: 'Select',
-            link: `/${pkg.config.version_short}/forms/select.html`,
+            link: `/forms/select.html`,
           },
           {
             text: 'Checks & radios',
-            link: `/${pkg.config.version_short}/forms/checks-radios.html`,
+            link: `/forms/checks-radios.html`,
           },
           {
             text: 'Range',
-            link: `/${pkg.config.version_short}/forms/range.html`,
+            link: `/forms/range.html`,
           },
           {
             text: 'Floating labels',
-            link: `/${pkg.config.version_short}/forms/floating-labels.html`,
+            link: `/forms/floating-labels.html`,
           },
           {
             text: 'Input group',
-            link: `/${pkg.config.version_short}/forms/input-group.html`,
+            link: `/forms/input-group.html`,
           },
           {
             text: 'Layout',
-            link: `/${pkg.config.version_short}/forms/layout.html`,
+            link: `/forms/layout.html`,
           },
           {
             text: 'Validation',
-            link: `/${pkg.config.version_short}/forms/validation.html`,
+            link: `/forms/validation.html`,
           },
         ],
       },
       {
         text: 'Components',
         icon: '<path fill="var(--ci-primary-color, currentColor)" d="M410.989,16H101.011L16,237.029V496H496V237.029Zm-288,32H240V240H49.143ZM184,272H328v40H184ZM464,464H48V272H152v72H360V272H464ZM272,240V48H389.012l73.845,192Z" class="ci-primary"></path>',
-        link: `/${pkg.config.version_short}/components/`,
+        link: `/components/`,
         children: [
           {
             text: 'Accordion',
-            link: `/${pkg.config.version_short}/components/accordion.html`,
+            link: `/components/accordion.html`,
           },
           {
             text: 'Alert',
-            link: `/${pkg.config.version_short}/components/alert.html`,
+            link: `/components/alert.html`,
           },
           {
             text: 'Avatar',
-            link: `/${pkg.config.version_short}/components/avatar.html`,
+            link: `/components/avatar.html`,
           },
           {
             text: 'Badge',
-            link: `/${pkg.config.version_short}/components/badge.html`,
+            link: `/components/badge.html`,
           },
           {
             text: 'Breadcrumb',
-            link: `/${pkg.config.version_short}/components/breadcrumb.html`,
+            link: `/components/breadcrumb.html`,
           },
           {
             text: 'Buttons',
-            link: `/${pkg.config.version_short}/components/button.html`,
+            link: `/components/button.html`,
           },
           {
             text: 'Button Group',
-            link: `/${pkg.config.version_short}/components/button-group.html`,
+            link: `/components/button-group.html`,
           },
           {
             text: 'Callout',
-            link: `/${pkg.config.version_short}/components/callout.html`,
+            link: `/components/callout.html`,
           },
           {
             text: 'Card',
-            link: `/${pkg.config.version_short}/components/card.html`,
+            link: `/components/card.html`,
           },
           {
             text: 'Carousel',
-            link: `/${pkg.config.version_short}/components/carousel.html`,
+            link: `/components/carousel.html`,
           },
           {
             text: 'Close Button',
-            link: `/${pkg.config.version_short}/components/close-button.html`,
+            link: `/components/close-button.html`,
           },
           {
             text: 'Collapse',
-            link: `/${pkg.config.version_short}/components/collapse.html`,
+            link: `/components/collapse.html`,
           },
           {
             text: 'Dropdown',
-            link: `/${pkg.config.version_short}/components/dropdown.html`,
+            link: `/components/dropdown.html`,
           },
           {
             text: 'Footer',
-            link: `/${pkg.config.version_short}/components/footer.html`,
+            link: `/components/footer.html`,
           },
           {
             text: 'Header',
-            link: `/${pkg.config.version_short}/components/header.html`,
+            link: `/components/header.html`,
           },
           {
             text: 'Image',
-            link: `/${pkg.config.version_short}/components/image.html`,
+            link: `/components/image.html`,
           },
           {
             text: 'List Group',
-            link: `/${pkg.config.version_short}/components/list-group.html`,
+            link: `/components/list-group.html`,
           },
           {
             text: 'Modal',
-            link: `/${pkg.config.version_short}/components/modal.html`,
+            link: `/components/modal.html`,
           },
           {
             text: 'Nav',
-            link: `/${pkg.config.version_short}/components/nav.html`,
+            link: `/components/nav.html`,
           },
           {
             text: 'Navbar',
-            link: `/${pkg.config.version_short}/components/navbar.html`,
+            link: `/components/navbar.html`,
           },
           {
             text: 'Offcanvas',
-            link: `/${pkg.config.version_short}/components/offcanvas.html`,
+            link: `/components/offcanvas.html`,
           },
           {
             text: 'Pagination',
-            link: `/${pkg.config.version_short}/components/pagination.html`,
+            link: `/components/pagination.html`,
           },
           {
             text: 'Placeholders',
-            link: `/${pkg.config.version_short}/components/placeholders.html`,
+            link: `/components/placeholders.html`,
             disabled: true,
             badge: {
               color: 'warning',
@@ -253,35 +254,35 @@ export default defineUserConfig<DefaultThemeOptions>({
           },
           {
             text: 'Popover',
-            link: `/${pkg.config.version_short}/components/popover.html`,
+            link: `/components/popover.html`,
           },
           {
             text: 'Progress',
-            link: `/${pkg.config.version_short}/components/progress.html`,
+            link: `/components/progress.html`,
           },
           {
             text: 'Sidebar',
-            link: `/${pkg.config.version_short}/components/sidebar.html`,
+            link: `/components/sidebar.html`,
           },
           {
             text: 'Spinner',
-            link: `/${pkg.config.version_short}/components/spinner.html`,
+            link: `/components/spinner.html`,
           },
           {
             text: 'Table',
-            link: `/${pkg.config.version_short}/components/table.html`,
+            link: `/components/table.html`,
           },
           {
             text: 'Toast',
-            link: `/${pkg.config.version_short}/components/toast.html`,
+            link: `/components/toast.html`,
           },
           {
             text: 'Tooltip',
-            link: `/${pkg.config.version_short}/components/tooltip.html`,
+            link: `/components/tooltip.html`,
           },
           {
             text: 'Widgets',
-            link: `/${pkg.config.version_short}/components/widgets.html`,
+            link: `/components/widgets.html`,
           },
         ],
       },

docs/.vuepress/theme-coreui/src/client/clientAppEnhance.ts

@@ -20,8 +20,7 @@ export default defineClientAppEnhance(({ app, router }) => {
 
   // compat with @vuepress/plugin-docsearch and @vuepress/plugin-search
   app.component('NavbarSearch', () => {
-    const SearchComponent =
-      app.component('Docsearch') || app.component('SearchBox')
+    const SearchComponent = app.component('Docsearch') || app.component('SearchBox')
     if (SearchComponent) {
       return h(SearchComponent)
     }
@@ -30,8 +29,9 @@ export default defineClientAppEnhance(({ app, router }) => {
 
   // handle scrollBehavior with transition
   const scrollBehavior = router.options.scrollBehavior!
-  router.options.scrollBehavior = async (...args) => {
+  ;(router.options.scrollBehavior = async (...args) => {
     await useScrollPromise().wait()
     return scrollBehavior(...args)
-  }
+  }),
+    router.addRoute({ path: '/', redirect: '/getting-started/introduction.html' })
 })

docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts

@@ -4,6 +4,8 @@ import { RouterLink, useRoute } from 'vue-router'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { ResolvedSidebarItem } from '../../shared'
 
+import { withBase } from '@vuepress/client'
+
 import { CBadge, CNavGroup, CNavItem, CSidebarNav } from './../../../../../../src'
 import { CIcon } from '@coreui/icons-vue'
 
@@ -77,7 +79,7 @@ const renderItem = (item: ResolvedSidebarItem): VNode => {
           {
             active: props.isActive,
             disabled: item.disabled,
-            href: item.link,
+            href: withBase(item.link),
           },
           {
             default: () => [

docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue

@@ -0,0 +1,9 @@
+<template></template>
+
+<script>
+export default {
+  mounted() {
+    this.$router.push('/getting-started/introduction.html')
+  },
+}
+</script>