kikipoulet · kikipoulet · May 25, 2024 · May 25, 2024 · May 25, 2024 · May 25, 2024
diff --git a/README.md b/README.md
@@ -35,6 +35,12 @@ Visit [SukiUI on Nuget.org](https://www.nuget.org/packages/SukiUI)
 
 Download `SukiUI-dev` in artifacts
 
+## 📄 Documentation
+
+[SukiUI Documentation](https://kikipoulet.github.io/SukiUI/) *WIP*
+
+[Wiki](https://github.com/kikipoulet/SukiUI/wiki)
+
 ## 📱 UI Theme 
 
 ##### SukiUI contains a theme for AvaloniaUI's base controls with support for Light/Dark themes.

diff --git a/docs/docs/.vitepress/config.mts b/docs/docs/.vitepress/config.mts
diff --git a/docs/docs/.vitepress/config/en.mts b/docs/docs/.vitepress/config/en.mts
@@ -0,0 +1,124 @@
+import { defineConfig } from 'vitepress'
+
+export const en = defineConfig({
+  description: "A Desktop UI Library for Avalonia",
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Documentation', link: '/documentation' }
+    ],
+
+    sidebar: [
+      {
+        text: 'Get Started',
+        items: [
+          { text: 'Introduction', link: '/documentation/getting-started/introduction' },
+          { text: 'Installation', link: '/documentation/getting-started/installation' },
+          { text: 'Launch', link: '/documentation/getting-started/launch' },
+        ]
+      },
+      {
+        text: 'Theming',
+        items: [
+          { text: 'Basic', link: '/documentation/theming/basic' },
+          { text: 'Light & Dark', link: '/documentation/theming/theme' },
+          { text: 'Color', link: '/documentation/theming/theme-color' },
+        ]
+      },
+      {
+        text: 'Controls',
+        items: [
+          {
+            text: 'Navigation',
+            items: [
+              { text: 'SideMenu', link: '/documentation/controls/navigation/sidemenu' },
+            ]
+          },
+          {
+            text: 'Layout',
+            items: [
+              { text: 'GlassCard', link: '/documentation/controls/layout/glasscard' },
+              { text: 'TabControl', link: '/documentation/controls/layout/tabcontrol' },
+              { text: 'StackPage', link: '/documentation/controls/layout/stackpage' },
+              { text: 'SettingsLayout', link: '/documentation/controls/layout/settingslayout' },
+              { text: 'SukiWindow', link: '/documentation/controls/layout/sukiwindow' },
+            ]
+          },
+          {
+            text: 'Inputs',
+            items: [
+              { text: 'Button', link: '/documentation/controls/inputs/button' },
+              { text: 'DropDownButton', link: '/documentation/controls/inputs/dropdownbutton' },
+              { text: 'ToggleSwitch', link: '/documentation/controls/inputs/toggleswitch' },
+              { text: 'ToggleButton', link: '/documentation/controls/inputs/togglebutton' },
+              { text: 'Slider', link: '/documentation/controls/inputs/slider' },
+              { text: 'ComboBox', link: '/documentation/controls/inputs/combobox' },
+              { text: 'NumericUpDown', link: '/documentation/controls/inputs/numericupdown' },
+              { text: 'TextBox', link: '/documentation/controls/inputs/textbox' },
+              { text: 'CheckBox', link: '/documentation/controls/inputs/checkbox' },
+              { text: 'RadioButton', link: '/documentation/controls/inputs/radiobutton' },
+              { text: 'ContextMenu', link: '/documentation/controls/inputs/contextmenu' },
+            ]
+          },
+          {
+            text: 'Text',
+            items: [
+              { text: 'AutoCompleteBox', link: '/documentation/controls/text/autocompletebox' },
+              { text: 'TextBox', link: '/documentation/controls/text/textbox' },
+            ]
+          },
+          {
+            text: 'Date & Time',
+            items: [
+              { text: 'Calendar', link: '/documentation/controls/datetime/calendar' },
+              { text: 'DatePicker', link: '/documentation/controls/datetime/datepicker' },
+            ]
+          },
+          {
+            text: 'Progress',
+            items: [
+              { text: 'WaveProgress', link: '/documentation/controls/progress/waveprogress' },
+              { text: 'Stepper', link: '/documentation/controls/progress/stepper' },
+              { text: 'CircleProgressBar', link: '/documentation/controls/progress/circleprogressbar' },
+              { text: 'Loading', link: '/documentation/controls/progress/loading' },
+              { text: 'ProgressBar', link: '/documentation/controls/progress/progressbar' },
+            ]
+          },
+          {
+            text: 'Data Presentation',
+            items: [
+              { text: 'DataGrid', link: '/documentation/controls/data/datagrid' },
+              { text: 'ListBox', link: '/documentation/controls/data/listbox' },
+              { text: 'TreeView', link: '/documentation/controls/data/treeview' },
+              { text: 'GroupBox', link: '/documentation/controls/data/groupbox' },
+              { text: 'BusyArea', link: '/documentation/controls/data/busyarea' },
+              { text: 'Expander', link: '/documentation/controls/data/expander' },
+            ]
+          },
+          {
+            text: 'System',
+            items: [
+              { text: 'FilePicker', link: '/documentation/controls/system/filepicker' },
+            ]
+          }
+        ]
+      },
+      {
+        text: 'Notification',
+        items: [
+          { text: 'Dialog', link: '/documentation/notification/dialog' },
+          { text: 'Toast', link: '/documentation/notification/toast' },
+          { text: 'MessageBox', link: '/documentation/notification/messagebox' },
+        ]
+      },
+      {
+        text: 'Style',
+        items: [
+          { text: 'Text', link: '/documentation/style/text' },
+          { text: 'Color', link: '/documentation/style/color' },
+          { text: 'Icon', link: '/documentation/style/icon' },
+        ]
+      }
+    ]
+  }
+})
diff --git a/docs/docs/.vitepress/config/index.mts b/docs/docs/.vitepress/config/index.mts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitepress'
+import { shared } from './shared.mts'
+import { en } from './en.mts'
+import { zh } from './zh.mts'
+
+export default defineConfig({
+  ...shared,
+  locales: {
+    root: { label: 'English', ...en },
+    zh: { label: '简体中文', ...zh }
+  }
+})
diff --git a/docs/docs/.vitepress/config/shared.mts b/docs/docs/.vitepress/config/shared.mts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitepress'
+
+export const shared = defineConfig({
+  base: '/SukiUI/',
+  title: "SukiUI",
+
+  themeConfig: {
+    logo: { src: '/suki.webp', width: 24, height: 24 },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/kikipoulet/SukiUI' }
+    ]
+  }
+})
diff --git a/docs/docs/.vitepress/config/zh.mts b/docs/docs/.vitepress/config/zh.mts
@@ -0,0 +1,124 @@
+import { defineConfig } from 'vitepress'
+
+export const zh = defineConfig({
+  description: "一个 Avalonia 控件库",
+  themeConfig: {
+    nav: [
+      { text: '主页', link: '/zh' },
+      { text: '文档', link: '/zh/documentation' }
+    ],
+
+    sidebar: [
+      {
+        text: '开始',
+        items: [
+          { text: '介绍', link: '/zh/documentation/getting-started/introduction' },
+          { text: '安装', link: '/zh/documentation/getting-started/installation' },
+          { text: '启动应用', link: '/zh/documentation/getting-started/launch' },
+        ]
+      },
+      {
+        text: '主题',
+        items: [
+          { text: '主题实例', link: '/zh/documentation/theming/basic' },
+          { text: '明暗主题切换', link: '/zh/documentation/theming/theme' },
+          { text: '主题色', link: '/zh/documentation/theming/theme-color' },
+        ]
+      },
+      {
+        text: '控件',
+        items: [
+          {
+            text: 'Navigation',
+            items: [
+              { text: 'SideMenu', link: '/zh/documentation/controls/navigation/sidemenu' },
+            ]
+          },
+          {
+            text: 'Layout',
+            items: [
+              { text: 'GlassCard', link: '/zh/documentation/controls/layout/glasscard' },
+              { text: 'TabControl', link: '/zh/documentation/controls/layout/tabcontrol' },
+              { text: 'StackPage', link: '/zh/documentation/controls/layout/stackpage' },
+              { text: 'SettingsLayout', link: '/zh/documentation/controls/layout/settingslayout' },
+              { text: 'SukiWindow', link: '/zh/documentation/controls/layout/sukiwindow' },
+            ]
+          },
+          {
+            text: 'Inputs',
+            items: [
+              { text: 'Button', link: '/zh/documentation/controls/inputs/button' },
+              { text: 'DropDownButton', link: '/zh/documentation/controls/inputs/dropdownbutton' },
+              { text: 'ToggleSwitch', link: '/zh/documentation/controls/inputs/toggleswitch' },
+              { text: 'ToggleButton', link: '/zh/documentation/controls/inputs/togglebutton' },
+              { text: 'Slider', link: '/zh/documentation/controls/inputs/slider' },
+              { text: 'ComboBox', link: '/zh/documentation/controls/inputs/combobox' },
+              { text: 'NumericUpDown', link: '/zh/documentation/controls/inputs/numericupdown' },
+              { text: 'TextBox', link: '/zh/documentation/controls/inputs/textbox' },
+              { text: 'CheckBox', link: '/zh/documentation/controls/inputs/checkbox' },
+              { text: 'RadioButton', link: '/zh/documentation/controls/inputs/radiobutton' },
+              { text: 'ContextMenu', link: '/zh/documentation/controls/inputs/contextmenu' },
+            ]
+          },
+          {
+            text: 'Text',
+            items: [
+              { text: 'AutoCompleteBox', link: '/zh/documentation/controls/text/autocompletebox' },
+              { text: 'TextBox', link: '/zh/documentation/controls/text/textbox' },
+            ]
+          },
+          {
+            text: 'Date & Time',
+            items: [
+              { text: 'Calendar', link: '/zh/documentation/controls/datetime/calendar' },
+              { text: 'DatePicker', link: '/zh/documentation/controls/datetime/datepicker' },
+            ]
+          },
+          {
+            text: 'Progress',
+            items: [
+              { text: 'WaveProgress', link: '/zh/documentation/controls/progress/waveprogress' },
+              { text: 'Stepper', link: '/zh/documentation/controls/progress/stepper' },
+              { text: 'CircleProgressBar', link: '/zh/documentation/controls/progress/circleprogressbar' },
+              { text: 'Loading', link: '/zh/documentation/controls/progress/loading' },
+              { text: 'ProgressBar', link: '/zh/documentation/controls/progress/progressbar' },
+            ]
+          },
+          {
+            text: 'Data Presentation',
+            items: [
+              { text: 'DataGrid', link: '/zh/documentation/controls/data/datagrid' },
+              { text: 'ListBox', link: '/zh/documentation/controls/data/listbox' },
+              { text: 'TreeView', link: '/zh/documentation/controls/data/treeview' },
+              { text: 'GroupBox', link: '/zh/documentation/controls/data/groupbox' },
+              { text: 'BusyArea', link: '/zh/documentation/controls/data/busyarea' },
+              { text: 'Expander', link: '/zh/documentation/controls/data/expander' },
+            ]
+          },
+          {
+            text: 'System',
+            items: [
+              { text: 'FilePicker', link: '/zh/documentation/controls/system/filepicker' },
+            ]
+          }
+        ]
+      },
+      {
+        text: '通知',
+        items: [
+          { text: 'Dialog', link: '/zh/documentation/notification/dialog' },
+          { text: 'Toast', link: '/zh/documentation/notification/toast' },
+          { text: 'MessageBox', link: '/zh/documentation/notification/messagebox' },
+        ]
+      },
+      {
+        text: '样式',
+        items: [
+          { text: 'Text', link: '/zh/documentation/style/text' },
+          { text: 'Color', link: '/zh/documentation/style/color' },
+          { text: 'Icon', link: '/zh/documentation/style/icon' },
+        ]
+      }
+    ]
+  }
+})
diff --git a/docs/docs/documentation/controls/data/busyarea.md b/docs/docs/documentation/controls/data/busyarea.md
diff --git a/docs/docs/documentation/controls/data/datagrid.md b/docs/docs/documentation/controls/data/datagrid.md
diff --git a/docs/docs/documentation/controls/data/expander.md b/docs/docs/documentation/controls/data/expander.md
diff --git a/docs/docs/documentation/controls/data/groupbox.md b/docs/docs/documentation/controls/data/groupbox.md
diff --git a/docs/docs/documentation/controls/data/listbox.md b/docs/docs/documentation/controls/data/listbox.md
diff --git a/docs/docs/documentation/controls/data/treeview.md b/docs/docs/documentation/controls/data/treeview.md
diff --git a/docs/docs/documentation/controls/datetime/calendar.md b/docs/docs/documentation/controls/datetime/calendar.md
diff --git a/docs/docs/documentation/controls/datetime/datepicker.md b/docs/docs/documentation/controls/datetime/datepicker.md
diff --git a/docs/docs/documentation/controls/inputs/button.md b/docs/docs/documentation/controls/inputs/button.md
diff --git a/docs/docs/documentation/controls/inputs/checkbox.md b/docs/docs/documentation/controls/inputs/checkbox.md
diff --git a/docs/docs/documentation/controls/inputs/combobox.md b/docs/docs/documentation/controls/inputs/combobox.md
diff --git a/docs/docs/documentation/controls/inputs/contextmenu.md b/docs/docs/documentation/controls/inputs/contextmenu.md
diff --git a/docs/docs/documentation/controls/inputs/dropdownbutton.md b/docs/docs/documentation/controls/inputs/dropdownbutton.md
diff --git a/docs/docs/documentation/controls/inputs/numericupdown.md b/docs/docs/documentation/controls/inputs/numericupdown.md
diff --git a/docs/docs/documentation/controls/inputs/radiobutton.md b/docs/docs/documentation/controls/inputs/radiobutton.md
diff --git a/docs/docs/documentation/controls/inputs/slider.md b/docs/docs/documentation/controls/inputs/slider.md
diff --git a/docs/docs/documentation/controls/inputs/textbox.md b/docs/docs/documentation/controls/inputs/textbox.md
diff --git a/docs/docs/documentation/controls/inputs/togglebutton.md b/docs/docs/documentation/controls/inputs/togglebutton.md
diff --git a/docs/docs/documentation/controls/inputs/toggleswitch.md b/docs/docs/documentation/controls/inputs/toggleswitch.md
diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md
diff --git a/docs/docs/documentation/controls/layout/settingslayout.md b/docs/docs/documentation/controls/layout/settingslayout.md
diff --git a/docs/docs/documentation/controls/layout/stackpage.md b/docs/docs/documentation/controls/layout/stackpage.md
diff --git a/docs/docs/documentation/controls/layout/sukiwindow.md b/docs/docs/documentation/controls/layout/sukiwindow.md
diff --git a/docs/docs/documentation/controls/layout/tabcontrol.md b/docs/docs/documentation/controls/layout/tabcontrol.md
diff --git a/docs/docs/documentation/controls/navigation/sidemenu.md b/docs/docs/documentation/controls/navigation/sidemenu.md
diff --git a/docs/docs/documentation/controls/progress/circleprogressbar.md b/docs/docs/documentation/controls/progress/circleprogressbar.md
diff --git a/docs/docs/documentation/controls/progress/loading.md b/docs/docs/documentation/controls/progress/loading.md
diff --git a/docs/docs/documentation/controls/progress/progressbar.md b/docs/docs/documentation/controls/progress/progressbar.md
diff --git a/docs/docs/documentation/controls/progress/stepper.md b/docs/docs/documentation/controls/progress/stepper.md
diff --git a/docs/docs/documentation/controls/progress/waveprogress.md b/docs/docs/documentation/controls/progress/waveprogress.md
diff --git a/docs/docs/documentation/controls/system/filepicker.md b/docs/docs/documentation/controls/system/filepicker.md
diff --git a/docs/docs/documentation/controls/text/autocompletebox.md b/docs/docs/documentation/controls/text/autocompletebox.md
diff --git a/docs/docs/documentation/controls/text/textbox.md b/docs/docs/documentation/controls/text/textbox.md
diff --git a/docs/docs/documentation/getting-started/installation.md b/docs/docs/documentation/getting-started/installation.md
@@ -0,0 +1,55 @@
+# Installation
+
+::: info
+When this page was written, the latest Avalonia version was `11.1.0-beta2` with SukiUI version `6.0.0-beta6`
+:::
+
+SukiUI can be installed in two ways:
+- [Nuget](https://www.nuget.org/packages/SukiUI) **Recommended**
+- CI Artifacts from [Github Action](https://github.com/kikipoulet/SukiUI/actions/workflows/build.yml)
+
+## Prepare your application
+
+The following picture shows packages already installed with the default `Avalonia Template`:
+
+![](/getting-started/introduction-default-package-list.webp "default package list")
+
+In these packages, `Avalonia.Themes.Fluent` will no longer be necessary and can be removed.
+
+::: tip
+About `Avalonia Template`: [Set up an editor](https://docs.avaloniaui.net/docs/get-started/set-up-an-editor)
+:::
+
+## Install latest SukiUI package
+
+The Nuget installation is suitable for most users, but if you want to use the latest build, you can download the dll from Github Action after the automatic build.
+
+### Via Nuget
+
+```
+dotnet add package SukiUI --version 6.0.0
+```
+
+::: tip
+Visit [SukiUI on Nuget](https://www.nuget.org/packages/SukiUI) for more information
+:::
+
+### Via Github Action
+
+1. Visit [SukiUI CI](https://github.com/kikipoulet/SukiUI/actions/workflows/build.yml)
+2. Select the latest workflow
+![](/getting-started/introduction-workflow.webp "workflow")
+
+3. Download the artifact
+![](/getting-started/introduction-artifact.webp "artifact")
+
+4. Add reference
+![](/getting-started/introduction-reference.webp "reference")
+
+5. Select `SukiUI.dll` you downloaded
+
+::: tip
+The package list should be:
+
+![](/getting-started/introduction-final-package-list.webp "package list")
+:::