Swap docs to vitepress

docs/.vitepress/config.mts

@@ -0,0 +1,28 @@
+import { defineConfig } from "vitepress";
+
+export default defineConfig({
+    outDir: '../../.build/docs',
+    cacheDir: '../../.build/temp',
+    cleanUrls: true,
+
+    title: 'QMK WSL',
+    description: 'A pre-configured WSL distro for working with the QMK CLI',
+
+    head: [['link', { rel: 'icon', href: '/logo.png' }]],
+
+    themeConfig: {
+        logo: '/logo.png',
+        sidebar: [
+            { text: 'Getting Started', link: '/guide' },
+            { text: 'Frequently Asked Questions', link: '/faq' },
+            { text: 'Contributing', link: '/dev' },
+        ],
+        socialLinks: [
+            { icon: "discord", link: "https://discord.gg/qmk" },
+            { icon: "github", link: "https://github.com/qmk/qmk_distro_wsl" },
+        ],
+        footer: {
+            message: 'This project is maintained by QMK collaborators and contributors like you!'
+        }
+    }
+});

docs/.vitepress/theme/custom.css

@@ -0,0 +1,21 @@
+:root {
+    --vp-button-sponsor-border: transparent;
+    --vp-button-sponsor-text: var(--vp-c-white);
+    --vp-button-sponsor-bg: var(--vp-c-yellow-3);
+    --vp-button-sponsor-hover-border: transparent;
+    --vp-button-sponsor-hover-text: var(--vp-c-white);
+    --vp-button-sponsor-hover-bg: var(--vp-c-yellow-2);
+    --vp-button-sponsor-active-border: transparent;
+    --vp-button-sponsor-active-text: var(--vp-c-white);
+    --vp-button-sponsor-active-bg: var(--vp-c-yellow-1);
+
+    --vp-nav-logo-height: 32px;
+
+    --vp-layout-max-width: calc(98% + 64px);
+
+    --vp-sidebar-width: 300px;
+}
+
+.VPDoc.has-aside .content-container {
+    max-width: unset !important;
+}

docs/.vitepress/theme/index.mjs

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme

docs/faq.md

@@ -21,7 +21,7 @@ Files within the WSL filesystem can be flashed directly by using
 
 For example,
 
-<img :src="$withBase('/wsl_toolbox.png')" alt="toolbox example" width="70%">
+![toolbox example"](/wsl_toolbox.png)
 
 ## How can I access my firmware files?
 

docs/guide.md

@@ -2,18 +2,18 @@
 
 1. Install [WSL2](https://docs.microsoft.com/en-us/windows/wsl/install-win10)  
 1. Install the [latest release](https://github.com/qmk/qmk_distro_wsl/releases/latest)  
-<img :src="$withBase('/install.png')" alt="install example" width="70%">
+![install example"](/install.png)
 1. Open the `QMK WSL` shortcut  
-<img :src="$withBase('/shortcut.png')" alt="shortcut example" width="40%">
+![shortcut example"](/shortcut.png)
 1. Run `qmk-admin` and complete the quickstart wizard  
-<img :src="$withBase('/setup.png')" alt="wizard example" width="70%">
-<img :src="$withBase('/quickstart_1.png')" alt="wizard example" width="70%">
-<img :src="$withBase('/quickstart_2.png')" alt="wizard example" width="70%">
-<img :src="$withBase('/quickstart_3.png')" alt="wizard example" width="70%">
+![wizard example"](/setup.png)
+![wizard example"](/quickstart_1.png)
+![wizard example"](/quickstart_2.png)
+![wizard example"](/quickstart_3.png)
 1. Run [`qmk compile`](https://docs.qmk.fm/#/newbs_getting_started?id=_4-test-your-build-environment)  
-<img :src="$withBase('/compile.png')" alt="compile example" width="70%">
+![compile example"](/compile.png)
 1. Profit!  
-<img :src="$withBase('/finish.png')" alt="built firmware example" width="70%">
+![built firmware example"](/finish.png)
 
 ## Next Steps
 

docs/index.md

@@ -0,0 +1,25 @@
+---
+layout: home
+hero:
+  name: QMK WSL
+  tagline: A pre-configured WSL distro for working with the QMK CLI
+  image:
+    src: /logo.png
+  actions:
+    - theme: brand
+      text: Get Started →
+      link: /guide
+    - theme: sponsor
+      text: Latest Version ↓
+      link: https://github.com/qmk/qmk_distro_wsl/releases/latest
+---
+
+<div align="center">
+
+Based on the exact same environment as QMK uses for CI, this installer package aims to give you a QMK build environment with as little effort as possible.
+
+![terminal example"](/terminal.png)
+
+Not using Windows? Go directly to the [Tutorial](https://docs.qmk.fm/#/newbs) to get started.
+
+</div>

package.json

@@ -5,13 +5,10 @@
   "author": "zvecr <[email protected]>",
   "license": "GPL-3.0",
   "devDependencies": {
-    "vuepress": "^1.9.10"
+    "vitepress": "^1.2.0"
   },
   "scripts": {
-    "serve": "vuepress dev docs",
-    "build": "vuepress build docs"
-  },
-  "dependencies": {
-    "vuepress-theme-default-prefers-color-scheme": "^2.0.0"
+    "serve": "vitepress dev  --host 0.0.0.0 docs",
+    "build": "vitepress build docs"
   }
 }