doc: preparation multi-version documentation support v5

.github/workflows/release.yml

@@ -76,4 +76,5 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: docs/.vitepress/dist
-          target-folder: docs
+          # this folder needs to be kept in sync with the base property in /docs/.vitepress/config.mts
+          target-folder: docs/v5

docs/.vitepress/config.mts

@@ -19,7 +19,8 @@ export default withMermaid({
   head: [['link', { rel: 'icon', href: 'favicon.ico' }]],
   title: 'Web Components',
   description: 'Component Library following the SIX Style Guide',
-  base: '/six-webcomponents/',
+  // keep this in sync with the target folder in the "Deploy Documentation" section of /.github/workflows/release.yml
+  base: '/six-webcomponents/v5/',
   lastUpdated: true,
 
   // https://vitepress.dev/reference/default-theme-config

docs/index.md

@@ -12,13 +12,13 @@ hero:
       link: /guide/readme
     - theme: alt
       text: Angular Example
-      link: https://six-group.github.io/six-webcomponents/demo/angular
+      link: https://six-group.github.io/six-webcomponents/v5/demo/angular
     - theme: alt
       text: Vue Example
-      link: https://six-group.github.io/six-webcomponents/demo/vue
+      link: https://six-group.github.io/six-webcomponents/v5/demo/vue
     - theme: alt
       text: React Example (experimental)
-      link: https://six-group.github.io/six-webcomponents/demo/react
+      link: https://six-group.github.io/six-webcomponents/v5/demo/react
 features:
   - title: Agnostic
     details:

docs/package.json

@@ -6,7 +6,7 @@
     "@six-group/ui-library": "*"
   },
   "devDependencies": {
-    "cpy-cli": "^5.0.0",
+    "shx": "^0.4.0",
     "mermaid": "^11.2.1",
     "node-html-parser": "^6.1.5",
     "rimraf": "^5.0.1",
@@ -20,9 +20,9 @@
     "build": "run-s clean generate:components build:doc copy:angular copy:vue copy:react",
     "preview": "vitepress preview",
     "build:doc": "vitepress build",
-    "copy:angular": "cpy '../examples/angular/dist/demo-app-angular/**/*' ./.vitepress/dist/demo/angular/",
-    "copy:vue": "cpy '../examples/vue/dist/**/*' ./.vitepress/dist/demo/vue/",
-    "copy:react": "cpy '../examples/react/dist/**/*' ./.vitepress/dist/demo/react/",
+    "copy:angular": "shx mkdir -p ./.vitepress/dist/demo/angular && shx cp -r ../examples/angular/dist/angular/browser/* ./.vitepress/dist/demo/angular/",
+    "copy:vue": "    shx mkdir -p ./.vitepress/dist/demo/vue     && shx cp -r ../examples/vue/dist/*                      ./.vitepress/dist/demo/vue/",
+    "copy:react": "  shx mkdir -p ./.vitepress/dist/demo/react   && shx cp -r ../examples/react/dist/*                    ./.vitepress/dist/demo/react/",
     "generate:components": "node scripts/components.mjs",
     "clean": "rimraf examples components .vitepress/dist"
   },

examples/angular/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --base-href /six-webcomponents/demo/angular/"
+    "build": "ng build --base-href /six-webcomponents/v5/demo/angular/"
   },
   "private": true,
   "dependencies": {

examples/angular/src/app/header/header.html

@@ -6,7 +6,7 @@
 
   <!-- logo -->
   <six-header-item>
-    <six-icon-button href="https://six-group.github.io/six-webcomponents/demo/angular/">
+    <six-icon-button href="https://six-group.github.io/six-webcomponents/v5/demo/angular/">
       <six-logo></six-logo>
     </six-icon-button>
   </six-header-item>

examples/react/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build --base=/six-webcomponents/v5/demo/react/",
     "preview": "vite preview"
   },
   "dependencies": {

examples/react/src/components/header/header.tsx

@@ -49,7 +49,7 @@ export function Header({ leftSidebar, toggleRightSidebar }: HeaderProps) {
       </SixHeaderItem>
 
       <SixHeaderItem>
-        <SixIconButton href={'https://six-group.github.io/six-webcomponents/demo/react/'}>
+        <SixIconButton href={'https://six-group.github.io/six-webcomponents/demo/v5/react/'}>
           <SixLogo />
         </SixIconButton>
       </SixHeaderItem>

examples/react/src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Home } from 'src/routes/home/home';
 import { Layout } from 'src/routes/layout/layout';
-import { BrowserRouter, Route, Routes } from 'react-router';
+import { HashRouter, Route, Routes } from 'react-router';
 import { Alert } from '@routes/alert/alert';
 import { TabGroup } from '@routes/tabGroup/tabGroup';
 import { Form } from '@routes/form/form';
@@ -13,7 +13,7 @@ import '@six-group/ui-library/dist/ui-library/ui-library.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter>
+    <HashRouter>
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
@@ -25,6 +25,6 @@ createRoot(document.getElementById('root')!).render(
           <Route path="*" element={<div>Page Not Found</div>} />
         </Route>
       </Routes>
-    </BrowserRouter>
+    </HashRouter>
   </StrictMode>
 );

examples/vue/package.json

@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "build-only": "cross-env BASE_URL=/six-webcomponents/demo/vue/ vite build",
+    "build-only": "cross-env BASE_URL=/six-webcomponents/v5/demo/vue/ vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"

examples/vue/src/App.vue

@@ -36,7 +36,7 @@ const searchActive = ref(false);
 
       <!-- logo -->
       <six-header-item>
-        <six-icon-button href="https://six-group.github.io/six-webcomponents/demo/vue/">
+        <six-icon-button href="https://six-group.github.io/six-webcomponents/v5/demo/vue/">
           <six-logo></six-logo>
         </six-icon-button>
       </six-header-item>