Beginning of the union (docs - releases)

docs/.vitepress/config.mts

@@ -7,7 +7,8 @@
 // If the subfolder is e.g. 'docs/dist', the env var BASE_DIR should be set to '/docs/dist/'.
 //////////////////////////////////////////////////////////////////////////
 
-import { defineConfig, withBase } from 'vitepress'
+import { defineConfig } from 'vitepress'
+import tabsPlugin from '@red-asuka/vitepress-plugin-tabs'
 import { head, navbar_EN, navbar_DE, sidebar_EN, sidebar_DE } from './configs'
 import path from 'path'
 import fs from 'fs'
@@ -20,6 +21,11 @@ export default defineConfig({
   titleTemplate: ":title · Hyperion documentation",
   description: "Hyperion Ambient Light documentation",
   lastUpdated: true,
+  markdown: {
+    config: (md) => {
+      tabsPlugin(md)
+    },
+  },
   themeConfig: {
     siteTitle: '',
     externalLinkIcon: true,

docs/.vitepress/configs/navbar/de.ts

@@ -6,7 +6,7 @@ export const navbar_DE: any = [
         text: 'Anleitungen',
         items: [
           { text: 'Einführung', link: '/de/user/Introduction.md' },
-          { text: 'Erste Schritte', link: '/de/user/GettingStarted.md' },
+          { text: 'Erste Schritte', link: '/de/user/gettingstarted/Overview.md' },
           { text: 'Konfigurieren', link: '/de/user/Configuration.md' },
           { text: 'LED Hardware', link: '/de/user/leddevices/Overview.md' },
           { text: 'HyperBian', link: '/de/user/HyperBian.md' }

docs/.vitepress/configs/navbar/en.ts

@@ -6,7 +6,7 @@ export const navbar_EN: any = [
         text: 'General',
         items: [
           { text: 'Introduction', link: '/user/Introduction.md' },
-          { text: 'Getting Started', link: '/user/GettingStarted.md' },
+          { text: 'Getting Started', link: '/user/gettingstarted/Overview.md' },
           { text: 'Configuration', link: '/user/Configuration.md' },
           { text: 'LED Hardware', link: '/user/leddevices/Overview.md' },
           { text: 'HyperBian', link: '/user/HyperBian.md' }

docs/.vitepress/configs/sidebar/de.ts

@@ -4,7 +4,20 @@ export const sidebar_DE: any = {
       text: 'Allgemein',
       items: [
         { text: 'Einführung', link: '/de/user/Introduction.md' },
-        { text: 'Erste Schritte', link: '/de/user/GettingStarted.md' },
+        {
+          text: 'Erste Schritte',
+          items: [
+            { text: 'Übersicht', link: '/de/user/gettingstarted/Overview.md' },
+            { text: 'Installieren',
+              collapsed: true,
+              items: [
+                { text: 'Linux', link: '/de/user/gettingstarted/Linux.md' },
+                { text: 'Windows', link: '/de/user/gettingstarted/Windows.md' },
+                { text: 'macOS', link: '/de/user/gettingstarted/macOS.md' }
+              ]
+            }
+          ]
+        },
         { text: 'Konfigurieren', link: '/de/user/Configuration.md' },
         {
           text: 'LED Hardware',

docs/.vitepress/configs/sidebar/en.ts

@@ -4,7 +4,20 @@ export const sidebar_EN: any = {
       text: 'General',
       items: [
         { text: 'Introduction', link: '/user/Introduction.md' },
-        { text: 'Getting Started', link: '/user/GettingStarted.md' },
+        {
+          text: 'Getting Started',
+          items: [
+            { text: 'Overview', link: '/user/gettingstarted/Overview.md' },
+            { text: 'Installation',
+              collapsed: true,
+              items: [
+                { text: 'Linux', link: '/user/gettingstarted/Linux.md' },
+                { text: 'Windows', link: '/user/gettingstarted/Windows.md' },
+                { text: 'macOS', link: '/user/gettingstarted/macOS.md' }
+              ]
+            }
+          ]
+        },
         { text: 'Configuration', link: '/user/Configuration.md' },
         {
           text: 'LED Hardware',

docs/.vitepress/theme/index.ts

@@ -1,11 +1,13 @@
 import DefaultTheme from 'vitepress/theme'
 import { h } from 'vue'
+import { Tab, Tabs } from 'vue3-tabs-component'
 import ExtendedLayout from './components/ExtendedLayout.vue'
 import ImageWrap from './components/ImageWrap.vue'
 import Contributors from './components/Contributors.vue'
 import FloatingVue from 'floating-vue'
 
 import 'floating-vue/dist/style.css'
+import '@red-asuka/vitepress-plugin-tabs/dist/style.css'
 import './styles/index.css'
 
 export default {
@@ -14,6 +16,8 @@ export default {
     return h(ExtendedLayout)
   },
   enhanceApp({ app }) {
+    app.component('Tab', Tab)
+    app.component('Tabs', Tabs)
     app.component('ImageWrap', ImageWrap)
     app.component('Contributors', Contributors)
     app.use(FloatingVue)

docs/de/index.md

@@ -16,7 +16,7 @@ hero:
   actions:
     - theme: brand
       text: 🚀 Los geht's
-      link: /de/user/GettingStarted.md
+      link: /de/user/gettingstarted/Overview.md
     - theme: alt
       text: Was ist Hyperion?
       link: /de/user/Introduction.md

docs/de/user/GettingStarted.md

@@ -129,9 +129,6 @@ Ersetze ${USER} durch den Benutzernamen, wenn der Benutzer zuvor mit der Option
 systemctl status hyperion@${USER}
 ```
 
-
-
-
 <style>
     .vp-doc table {
         display: table;