docs: update images

docs/.vitepress/config.ts

@@ -7,7 +7,10 @@ export default defineConfig({
 	head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
 	themeConfig: {
 		logo: '/logo.svg',
-		nav: [{ text: 'Home', link: '/' }],
+		nav: [
+			{ text: 'Home', link: '/' },
+			{ text: 'Changelog', link: '/changelog' },
+		],
 		sidebar: [
 			{
 				text: 'Getting Started',
@@ -25,9 +28,21 @@ export default defineConfig({
 					{ text: 'Configuration', link: '/Configuration' },
 					{ text: 'Nix', link: '/Nix' },
 					{ text: 'NixOS', link: '/NixOS-options' },
-					{ text: 'Security', link: '/SECURITY' },
-					{ text: 'Contributing', link: '/CONTRIBUTING' },
-					{ text: 'Changelog', link: '/CHANGELOG' },
+					{
+						text: 'Features',
+						items: [
+							{ text: 'Single Sign-On (SSO)', link: '/features/sso' },
+							{ text: 'Headplane Agent / SSH', link: '/features/agent' },
+						],
+					},
+					{
+						text: 'Development',
+						collapsed: true,
+						items: [
+							{ text: 'Contributing', link: '/contributing' },
+							{ text: 'Security', link: '/security' },
+						],
+					},
 				],
 			},
 		],

docs/.vitepress/theme/custom.css

@@ -5,3 +5,13 @@ html.dark .light-only {
 html:not(.dark) .dark-only {
 	display: none !important;
 }
+
+figure {
+	padding: 1em;
+}
+
+figcaption {
+	text-align: center;
+	font-size: 0.9em;
+	margin-top: 0.5em;
+}

docs/features/agent.md

@@ -4,4 +4,10 @@ description: Configure the Headplane Agent for enhanced functionality.
 ---
 
 # Headplane Agent
+
+<figure>
+    <img src="../assets/ssh.png" />
+    <figcaption>SSH access via the browser</figcaption>
+</figure>
+
 TODO

docs/features/sso.md

@@ -4,4 +4,11 @@ description: Configure Single Sign-On (SSO) authentication for Headplane.
 ---
 
 # Single Sign-On (SSO)
+
+<figure>
+    <img class="dark-only" src="../assets/sso-dark.png" />
+    <img class="light-only" src="../assets/sso-light.png" />
+    <figcaption>SSO Configuration Page</figcaption>
+</figure>
+
 TODO

docs/install/index.md

@@ -1,6 +1,7 @@
---
+---
 title: Installation
 description: Get started with Headplane.
+outline: [2, 3]
 ---
 
 # Installation

docs/introduction.md

@@ -10,8 +10,11 @@ feature-rich VPN platform that rivals Tailscale's official offering. Headscale
 is a self-hosted implementation of the Tailscale control server, enabling users
 to create and manage their own private VPN networks via the Tailscale client.
 
-<img class="dark-only" src="./assets/preview-dark.png" />
-<img class="light-only" src="./assets/preview-light.png" />
+<figure>
+    <img class="dark-only" src="./assets/preview-dark.png" />
+    <img class="light-only" src="./assets/preview-light.png" />
+    <figcaption>Headplane Dashboard</figcaption>
+</figure>
 
 Headscale does not ship with any web UI by default, which is where Headplane
 comes in. Headplane provides a comprehensive web interface for managing your
@@ -24,8 +27,11 @@ Connect (OIDC), and detailed insights into your Tailnet's configuration and
 status. Things like DNS management, ACL editing, and Headscale configuration can
 all be done directly from the Headplane UI when compared to other Headscale UIs.
 
-<img class="dark-only" src="./assets/dns-dark.png" />
-<img class="light-only" src="./assets/dns-light.png" />
+<figure>
+    <img class="dark-only" src="./assets/dns-dark.png" />
+    <img class="light-only" src="./assets/dns-light.png" />
+    <figcaption>DNS management in Headplane</figcaption>
+</figure>
 
 Headplane aims to replicate the functionality offered by the official Tailscale
 product and dashboard, being one of the most feature complete Headscale UIs available.
@@ -36,3 +42,9 @@ These are some of the features that Headplane offers:
 - Support for OpenID Connect (OIDC) as a login provider
 - The ability to edit DNS settings and automatically provision Headscale
 - Configurability for Headscale's settings
+
+<figure>
+    <img class="dark-only" src="./assets/machine-dark.png" />
+    <img class="light-only" src="./assets/machine-light.png" />
+    <figcaption>Machine management in Headplane</figcaption>
+</figure>