docs: migrate to vitepress

vitepress feels a bit more polished and clean

.gitattributes

@@ -1,3 +1,4 @@
 *.mjs linguist-language=TypeScript
 *.js linguist-language=TypeScript
+*.vue linguist-vendored
 *.h linguist-vendored

.github/workflows/pages.yml

@@ -1,8 +1,9 @@
-name: Deploy to GitHub Pages
+name: Deploy VitePress site to Pages
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
+  workflow_dispatch:
 
 permissions:
   contents: read
@@ -10,22 +11,42 @@ permissions:
   id-token: write
 
 jobs:
-  build:
+  vitepress:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout your repository using git
+      - name: Checkout
         uses: actions/checkout@v4
-      - name: Install, build, and upload your site
-        uses: withastro/action@v2
         with:
-          path: ./docs
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: docs
+
+      - name: Build with VitePress
+        run: npm run build
+        working-directory: docs
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/dist
 
   deploy:
-    needs: build
-    runs-on: ubuntu-latest
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
+    needs: vitepress
+    runs-on: ubuntu-latest
+    name: Deploy
     steps:
       - name: Deploy to GitHub Pages
         id: deployment

docs/.gitignore

@@ -1,7 +1,7 @@
 dist/
 result/
+.vitepress/cache/
 
-.astro/
 node_modules/
 
 npm-debug.log*

docs/.vitepress/config.ts

@@ -0,0 +1 @@
+export { default as default } from "../vitepress.config"

docs/.vitepress/theme/index.ts

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

docs/README.md

@@ -1,8 +1,7 @@
 # Astal Docs
 
-[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
-
-This directory contains the Astal documentation website. Hosted at [aylur.github.io/astal](https://aylur.github.io/astal/)
+This directory contains the Astal documentation and Library references.
+Hosted at [aylur.github.io/astal](https://aylur.github.io/astal/) and [aylur.github.io/libastal](https://aylur.github.io/libastal/)
 
 ## Commands
 

docs/ags/cli-app.md

@@ -1,9 +1,4 @@
----
-title: CLI and App
-description: Reference of the singleton App instance
-sidebar:
-    order: 3
----
+# CLI and App
 
 `App` is a singleton **instance** of [Astal.Application](/astal/reference/class.Application.html).
 
@@ -13,8 +8,9 @@ import { App } from "astal"
 
 ## Entry point
 
-```tsx
-// app.ts
+:::code-group
+
+```ts [app.ts]
 App.start({
     main() {
         // setup anything
@@ -23,7 +19,9 @@ App.start({
 })
 ```
 
-:::caution
+:::
+
+:::warning
 You can not instantiate widgets outside of the main function.
 :::
 
@@ -32,7 +30,6 @@ You can not instantiate widgets outside of the main function.
 You can run multiple instance by defining a unique instance name.
 
 ```tsx
-// app.ts
 App.start({
     instanceName: "my-instance", // defaults to "astal"
     main() {},
@@ -44,7 +41,6 @@ App.start({
 If you want to interact with an instance from the cli, you can do so by sending a message.
 
 ```ts
-// app.ts
 App.start({
     main() {},
     requestHandler(request: string, res: (response: any) => void) {
@@ -70,7 +66,6 @@ If you want to run arbitrary JavaScript from cli, you can use `App.eval`.
 It will evaluate the passed string as the body of an `async` function.
 
 ```ts
-// app.ts
 App.start({
     main() {},
     requestHandler(js: string, res) {
@@ -107,8 +102,9 @@ The first time you run your bundled script the `main` function gets executed.
 While that instance is running any subsequent execution of the script will call
 the `client` function.
 
-```ts
-// main.ts
+:::code-group
+
+```ts [main.ts]
 App.start({
     // main instance
     main(...args: Array<string>) {
@@ -127,3 +123,5 @@ App.start({
     },
 })
 ```
+
+:::

docs/ags/faq.md

@@ -1,7 +1,4 @@
----
-title: FAQ
-description: Frequently asked question, common issues, tips and tricks
----
+# Frequently asked question, common issues, tips and tricks
 
 ## Monitor id does not match compositor
 
@@ -39,7 +36,7 @@ const HOME = exec("echo $HOME") // does not work
 shell environment, so the above example just passes `$HOME` as a string literal
 to the `echo` program.
 
-:::caution[Please don't do this]
+:::danger Please don't do this
 You could pass it to bash, but that is a horrible approach.
 
 ```tsx
@@ -74,7 +71,7 @@ App.start({
 })
 ```
 
-:::note
+:::info
 If there is a name clash with an icon from your current icon pack
 the icon pack will take precedence
 :::

docs/ags/first-widgets.md

@@ -1,34 +1,26 @@
----
-title: First Widgets
-description: Getting started with creating widgets
-sidebar:
-    order: 0
----
-
-import { FileTree } from "@astrojs/starlight/components"
-import { Tabs, TabItem } from "@astrojs/starlight/components"
+# First Widgets
 
 AGS is the predecessor of Astal, which was written purely in TypeScript and so only supported
 JavaScript/TypeScript. Now it serves as a scaffolding tool for Astal projects in TypeScript.
 While what made AGS what it is, is now part of the Astal project, for simplicity we will
 refer to the Astal TypeScript lib as AGS.
 
-## JavaScript
-
+:::tip
 If you are not familiar with the JavaScript syntax [MDN](https://developer.mozilla.org/en-US/)
 and [javascript.info](https://javascript.info/) have great references.
+:::
 
 ## Getting Started
 
 Start by initializing a project
 
-```bash
+```sh
 ags --init
 ```
 
 then run `ags` in the terminal
 
-```bash
+```sh
 ags
 ```
 
@@ -40,39 +32,27 @@ it will bundle everything into a single javascript file which then GJS can execu
 The bundler used is [esbuild](https://esbuild.github.io/).
 :::
 
-The generated project structure is the following:
-
-<FileTree>
-
-- @girs/ generated types with [ts-for-gir](https://github.com/gjsify/ts-for-gir)
-- widget
-  - Bar.tsx
-- app.ts entry point of our app
-- style.css
-- env.d.ts informs the LSP about the environment
-- tsconfig.json configuration of the LSP
-
-</FileTree>
-
 ## Root of every shell component: Window
 
 Astal apps are composed of widgets. A widget is a piece of UI that has its own logic and style.
 A widget can be as small as a button or an entire bar.
 The top level widget is always a [Window]() which will hold all widgets.
 
-```tsx
-// widget/Bar.tsx
+::: code-group
+
+```tsx [widget/Bar.tsx]
 function Bar(monitor = 0) {
-    return (
-        <window className="Bar" monitor={monitor}>
+    return <window className="Bar" monitor={monitor}>
         <box>Content of the widget</box>
     </window>
-    )
 }
 ```
 
-```tsx
-// app.ts
+:::
+
+::: code-group
+
+```ts [app.ts]
 import Bar from "./widget/Bar"
 
 App.start({
@@ -83,24 +63,24 @@ App.start({
 })
 ```
 
+:::
+
 ## Creating and nesting widgets
 
 Widgets are JavaScript functions which return Gtk widgets,
 either by using JSX or using a widget constructor.
 
-<Tabs>
-  <TabItem label="markup">
+:::code-group
 
-```tsx
+```tsx [MyButton.tsx]
 function MyButton(): JSX.Element {
-    return <button onClicked="echo hello">Clicke Me!</button>
+    return <button onClicked="echo hello">
+        Clicke Me!
+    </button>
 }
 ```
 
-  </TabItem>
-  <TabItem label="constructor functions">
-
-```tsx
+```ts [MyButton.ts]
 import { Widget } from "astal"
 
 function MyButton(): Widget.Button {
@@ -111,10 +91,9 @@ function MyButton(): Widget.Button {
 }
 ```
 
-  </TabItem>
-</Tabs>
+:::
 
-:::note
+:::info
 The only difference between the two is the return type.
 Using markup the return type is always `Gtk.Widget` (globally available as `JSX.Element`),
 while using constructors the return type is the type of the widget.
@@ -125,14 +104,12 @@ Now that you have declared `MyButton`, you can nest it into another component.
 
 ```tsx
 function MyBar() {
-    return (
-        <window>
+    return <window>
         <box>
             Click The button
             <MyButton />
         </box>
     </window>
-    )
 }
 ```
 
@@ -198,7 +175,7 @@ function MyWidget() {
 }
 ```
 
-:::note
+:::info
 As you can guess from the above snippet, [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values are not rendered.
 :::
 
@@ -244,7 +221,7 @@ function MyButton() {
 }
 ```
 
-:::note
+:::info
 Attributes prefixed with `on` will connect to a `signal` of the widget.
 Their types are not generated, but written by hand, which means not all of them are typed.
 Refer to the Gtk and Astal docs to have a full list of them.
@@ -268,22 +245,18 @@ function MyWidget({ myprop, child, children }: Props) {
 
 ```tsx
 // child prop of MyWidget is the box
-return (
-    <MyWidget myprop="hello">
+return <MyWidget myprop="hello">
     <box />
-    </MyWidget>
-)
+</MyWidget>
 ```
 
 ```tsx
 // children prop of MyWidget is [box, box, box]
-return (
-    <MyWidget myprop="hello">
+return <MyWidget myprop="hello">
     <box />
     <box />
     <box />
-    </MyWidget>
-)
+</MyWidget>
 ```
 
 ## State management
@@ -317,7 +290,7 @@ function Counter() {
 }
 ```
 
-:::note
+:::info
 Bindings have an `.as()` method which lets you transform the assigned value.
 In the case of a Label, its label property expects a string, so it needs to be
 turned to a string first.
@@ -330,13 +303,11 @@ turned to a string first.
 const v = Variable(0)
 const transform = (v) => v.toString()
 
-// these two are equivalent
-return (
-    <box>
+return <box>
+    {/* these two are equivalent */}
     <label label={bind(v).as(transform)} />
     <label label={v(transform)} />
-    </box>
-)
+</box>
 ```
 
 :::
@@ -378,14 +349,14 @@ return <box>
 <box>
 ```
 
-:::caution
+:::warning
 Only bind children of the `box` widget. Gtk does not cleanup widgets by default,
 they have to be explicitly destroyed. The box widget is a special container that
 will implicitly call `.destroy()` on its removed child widgets.
 You can disable this behavior by setting the `noImplicityDestroy` property.
 :::
 
-:::note
+:::info
 The above example destroys and recreates every widget in the list everytime
 the value of the `Variable` changes. There might be cases where you would
 want to handle child creation yourself, because you don't want to lose the
@@ -416,7 +387,7 @@ return <MyContainer>
 </MyContainer>
 ```
 
-:::note
+:::info
 You can pass the followings as children:
 
 - widgets
@@ -424,6 +395,6 @@ You can pass the followings as children:
 - bindings of widgets,
 - bindings of deeply nested arrays of widgets
 
-falsy values are not rendered and anything not from this list
+[falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values are not rendered and anything not from this list
 will be coerced into a string and rendered as a label
 :::

docs/ags/theming.md

@@ -11,7 +11,7 @@ Since the widget toolkit is **GTK3** theming is done with **CSS**.
 - [GTK CSS Overview wiki](https://docs.gtk.org/gtk3/css-overview.html)
 - [GTK CSS Properties Overview wiki](https://docs.gtk.org/gtk3/css-properties.html)
 
-:::caution[GTK is not the web]
+:::warning GTK is not the web
 While most features are implemented in GTK,
 you can't assume anything that works on the web will work with GTK.
 Refer to the [GTK docs](https://docs.gtk.org/gtk3/css-overview.html)
@@ -25,14 +25,15 @@ To make them more custom, you can apply stylesheets to them.
 
 You can pass a path to a file or css as a string in `App.start`
 
-```tsx
+:::code-group
+
+```ts [app.ts]
 const inlineCss = `
 window {
     background-color: transparent;
 }
 `
 
-// app.ts
 App.start({
     css: "/home/username/.config/ags/style.css",
     css: `${SRC}/style.css'`,
@@ -40,21 +41,23 @@ App.start({
 })
 ```
 
-:::note
+:::
+
+:::info
 The global `SRC` will point to the directory `app.ts` is in.
 You can pass a relative path, but its resolution will be relative to the current working directory.
 :::
 
 ## Css Property on Widgets
 
-```tsx
+```ts
 Widget.Label({
     css: "color: blue; padding: 1em;",
     label: "hello",
 })
 ```
 
-:::note
+:::info
 The `css` property of a widget will not cascade to its children.
 :::
 
@@ -62,11 +65,11 @@ The `css` property of a widget will not cascade to its children.
 
 You can apply additional styles at runtime.
 
-```tsx
+```ts
 App.apply_css("/path/to/file.css")
 ```
 
-```tsx
+```ts
 App.apply_css(`
 window {
     background-color: transparent;
@@ -74,11 +77,11 @@ window {
 `)
 ```
 
-```tsx
+```ts
 App.reset_css() // reset if need
 ```
 
-:::caution
+:::warning
 `App.apply_css` will apply on top of other stylesheets applied before.
 You can reset stylesheets with `App.resetCss`
 :::
@@ -88,15 +91,16 @@ You can reset stylesheets with `App.resetCss`
 If you are not sure about the widget hierarchy or any CSS selector,
 you can use the [GTK inspector](https://wiki.gnome.org/Projects/GTK/Inspector)
 
-```bash
+```sh
 # to bring up the inspector run
 ags --inspector
 ```
 
 ## Using pre-processors like SCSS
 
-```tsx
-// app.ts
+:::code-group
+
+```ts [app.ts]
 // main scss file
 const scss = `${SRC}/style.scss`
 
@@ -111,3 +115,5 @@ App.config({
     main() {},
 })
 ```
+
+:::

docs/ags/utilities.md

@@ -1,9 +1,4 @@
----
-title: Utilities
-description: Reference of bultin utility functions
-sidebar:
-    order: 5
----
+# Utilities
 
 ## File functions
 
@@ -163,7 +158,7 @@ execAsync(["bash", "-c", "/path/to/script.sh"])
     .catch((err) => console.error(err))
 ```
 
-:::caution
+:::warning
 `subprocess`, `exec`, and `execAsync` executes the passed executable as is.
 They are **not** executed in a shell environment,
 they do **not** expand env variables like `$HOME`,

docs/ags/variable.md

@@ -1,9 +1,4 @@
----
-title: Variable
-description: Reference of the builtin Variable type
-sidebar:
-    order: 6
----
+# Variable
 
 ```js
 import { Variable } from "astal"
@@ -35,7 +30,7 @@ Widget.Label({
 })
 ```
 
-:::caution
+:::warning
 Make sure to make the transform functions pure. The `.get()` function can be called
 anytime by `astal` especially when `deriving`, so make sure there are no sideeffects.
 :::
@@ -69,7 +64,7 @@ Using `.poll` and `.watch` we can start subprocess and capture their
 output in `Variables`. They can poll and watch at the same time, but they
 can only poll/watch one subprocess.
 
-:::caution
+:::warning
 The command parameter is passed to [execAsync](/astal/ags/utilities/#executing-external-commands-and-scripts)
 which means they are **not** executed in a shell environment,
 they do **not** expand env variables like `$HOME`,
@@ -127,7 +122,7 @@ This will stop the interval and force exit the subprocess and disconnect gobject
 myVar.drop()
 ```
 
-:::caution
+:::warning
 Don't forget to drop them when they are defined inside widgets
 with either `.poll`, `.watch` or `.observe`
 

docs/ags/widget.md

@@ -1,9 +1,4 @@
----
-title: Widget
-description: Reference of the builtin and gtk widgets
-sidebar:
-    order: 4
----
+# Widget
 
 ## AGS widget properties
 
@@ -143,7 +138,7 @@ function MyWidget() {
 }
 ```
 
-:::note
+:::info
 Signal properties have to be annotated manually for TypeScript.
 You can reference [Gtk3](https://gjs-docs.gnome.org/gtk30~3.0/)
 and [Astal](/astal/reference#classes) for available signals.

docs/astro.config.mjs

@@ -1,44 +0,0 @@
-import { defineConfig } from "astro/config"
-import starlight from "@astrojs/starlight"
-
-export default defineConfig({
-    site: "https://aylur.github.io",
-    base: "astal",
-    integrations: [
-        starlight({
-            title: "Astal",
-            editLink: {
-                baseUrl: "https://github.com/Aylur/Astal/tree/main/docs",
-            },
-            social: {
-                github: "https://github.com/Aylur/Astal",
-                discord: "https://discord.gg/CXQpHwDuhY",
-            },
-            customCss: ["./src/style.css"],
-            favicon: "./favicon.ico",
-            sidebar: [
-                { label: "Getting Started", autogenerate: { directory: "/getting-started" } },
-                { label: "AGS", autogenerate: { directory: "/ags" } },
-                {
-                    label: "Libraries",
-                    items: [
-                        "libraries/references",
-                        { label: "Astal", link: "/reference" },
-                        { label: "Apps", link: "/reference/apps" },
-                        { label: "Auth", link: "/reference/auth" },
-                        { label: "Battery", link: "/reference/battery" },
-                        { label: "Bluetooth", link: "/reference/bluetooth" },
-                        { label: "Hyprland", link: "/reference/hyprland" },
-                        { label: "Mpris", link: "/reference/mpris" },
-                        { label: "Network", link: "/reference/network" },
-                        { label: "Notifd", link: "/reference/notifd" },
-                        { label: "PowerProfiles", link: "/reference/powerprofiles" },
-                        { label: "River", link: "/reference/river" },
-                        { label: "Tray", link: "/reference/tray" },
-                        { label: "WirePlumber", link: "/reference/wireplumber" },
-                    ],
-                }
-            ]
-        }),
-    ],
-})

docs/getting-started/installation.md

@@ -1,40 +1,28 @@
----
-title: Installation
-description: How to install Astal
-sidebar:
-    order: 1
----
-
-import { Tabs, TabItem } from "@astrojs/starlight/components"
+# Installation
 
 ## Nix
 
 maintainer: [@Aylur](https://github.com/Aylur)
 
-Read more about it on the [nix page](../nix)
+Read more about it on the [nix page](./nix)
 
 ## Arch
 
 maintainer: [@kotontrion](https://github.com/kotontrion)
 
-<Tabs>
-  <TabItem label="Core Library">
+:::code-group
 
-```bash
+```sh [Core Library]
 yay -S libastal-git
 ```
 
-  </TabItem>
-  <TabItem label="Every Library">
-
-```bash
+```sh [Every Library]
 yay -S libastal-meta
 ```
 
-  </TabItem>
-</Tabs>
+:::
 
-## Bulding core from source
+## Bulding libastal from source
 
 1. Clone the repo
 
@@ -45,43 +33,29 @@ cd astal/core
 
 2. Install the following dependencies
 
-<Tabs>
-  <TabItem label="Fedora">
+:::code-group
 
-```bash
+```sh [Fedora]
 sudo dnf install meson gcc valac gtk3-devel gtk-layer-shell-devel
 ```
 
-  </TabItem>
-  <TabItem label="Arch">
-
-```bash
+```sh [Arch]
 sudo pacman -Syu meson vala gtk3 gtk-layer-shell gobject-introspection
 ```
 
-  </TabItem>
-  <TabItem label="Alpine">
-
-```bash
+```sh [Alpine]
 sudo apk add meson g++ vala gtk+3.0-dev gtk-layer-shell-dev gobject-introspection-dev
 ```
 
-  </TabItem>
-  <TabItem label="Ubuntu">
-
-```bash
+```sh [Ubuntu]
 sudo apt install meson valac libgtk3-dev libgtk-layer-shell-dev gobject-introspection
 ```
 
-  </TabItem>
-  <TabItem label="openSUSE">
-
-```bash
+```bash [openSUSE]
 sudo zypper install gcc meson vala gtk3-devel gtk-layer-shell-devel gobject-introspection-devel
 ```
 
-  </TabItem>
-</Tabs>
+:::
 
 3. Build and install with `meson`
 
@@ -90,10 +64,10 @@ meson setup build
 meson install -C build
 ```
 
-:::note
+:::info
 Most distros recommend manual installs in `/usr/local`,
 which is what `meson` defaults to. If you want to install to `/usr`
-instead which most package managers do, you set the `prefix` option:
+instead which most package managers do, set the `prefix` option:
 
 ```bash
 meson setup --prefix /usr build

docs/getting-started/introduction.md

@@ -1,15 +1,10 @@
----
-title: Introduction
-description: What is Astal?
-sidebar:
-    order: 0
----
+# Introduction
 
 ## What is Astal?
 
 Astal (_meaning "desk"_) is a bundle of libraries built using [GLib](https://docs.gtk.org/glib/) in Vala and C.
-The core library [libastal](/astal/reference) has some Gtk widgets that come packaged,
-the most important one is the [Window](/astal/reference/class.Window.html) which is the main toplevel component using [gtk-layer-shell](https://github.com/wmww/gtk-layer-shell).
+The core library [libastal](https://aylur.github.io/libastal) has some Gtk widgets that come packaged,
+the most important one is the [Window](https://aylur.github.io/libastal/class.Window.html) which is the main toplevel component using [gtk-layer-shell](https://github.com/wmww/gtk-layer-shell).
 This is what allows us to use Gtk as shell components on Wayland.
 libastal also comes with some utility functions such as running external processes,
 reading, writing and monitoring files.

docs/getting-started/nix.md

@@ -0,0 +1 @@
+# Nix

docs/getting-started/supported-languages.md

@@ -1,9 +1,4 @@
----
-title: Supported Languages
-description: Choosing a language to get started
-banner:
-  content: 🚧 Examples are in the works. 🚧
----
+# Supported Languages
 
 ## JavaScript
 
@@ -11,7 +6,7 @@ The main intended usage of Astal is in TypeScript with [AGS](/astal/ags/first-wi
 It supports JSX and has a state management solution similar to web frameworks.
 Only a minimal knowledge of JavaScript's syntax is needed to get started.
 
-:::tip
+:::info
 The runtime is [GJS](https://gitlab.gnome.org/GNOME/gjs) and **not** nodejs
 :::
 
@@ -35,7 +30,7 @@ Examples:
 There is a WIP [library for python](), to make it behave similar to the above two
 but I don't plan on finishing it, because I'm not a fan of python.
 If you are interested in picking it up, feel free to open a PR.
-Nonetheless you can still use python the OOP way [pygobject]() intended it.
+Nonetheless you can still use python the OOP way [pygobject](https://pygobject.gnome.org/tutorials/gobject/subclassing.html) intended it.
 
 Examples:
 

docs/index.md

@@ -0,0 +1,72 @@
+---
+layout: home
+pageClass: home-page
+
+hero:
+  name: "Astal"
+  text: "Library and Framework for building Desktop Shells"
+  tagline: "The best way to make <i>beautiful</i> <b>and</b> <i>functional</i> wayland widgets!"
+  image: /front-image.png
+  actions:
+    - theme: brand
+      text: What is Astal?
+      link: /getting-started/introduction
+    - theme: alt
+      text: Get Started
+      link: /getting-started/installation
+    - theme: alt
+      text: References
+      link: /libraries/references
+
+features:
+  - title: Use Your Preferred Language
+    details: The main focus of Astal is TypeScript using JSX. But you can use the libraries in any language that supports <a href="https://en.wikipedia.org/wiki/List_of_language_bindings_for_GTK">Gobject Introspection</a>.
+  - title: No bash scripts needed
+    details: Includes modules to work with Network, Bluetooth, Battery, Audio and more.
+  - title: Use any Gtk widget
+    details: With Astal you work with Gtk directly. You are not limited to only a set of them.
+---
+<script setup>
+import Showcases from './showcases/Showcases.vue'
+</script>
+
+<Showcases />
+
+<!--TODO: add feature icons-->
+<!--TODO: add icons for buttons https://github.com/vuejs/vitepress/pull/3795-->
+
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand-1), var(--vp-c-brand-3));
+}
+
+:root {
+  --overlay-gradient: color-mix(in srgb, var(--vp-c-brand-1), transparent 55%);
+}
+
+.dark {
+  --overlay-gradient: color-mix(in srgb, var(--vp-c-brand-1), transparent 85%);
+}
+
+.home-page {
+  background:
+    linear-gradient(215deg, var(--overlay-gradient), transparent 40%),
+    radial-gradient(var(--overlay-gradient), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
+    radial-gradient(var(--overlay-gradient), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
+
+  .VPFeature a {
+    font-weight: bold;
+  }
+
+  .VPNavBar {
+    background-color: transparent !important;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+
+    div.divider {
+      display: none;
+    }
+  }
+}
+</style>

docs/libraries/references.md

@@ -0,0 +1,44 @@
+# References
+
+The references of the libraries are annotated for the C language.
+Reading their documentation will vary depending on the language they are used in.
+
+<!--TODO: list some examples on how to read docs,-->
+<!--for example the difference between C enums and gjs enums-->
+
+## Additional references
+
+### GJS
+
+- [gjs-docs.gnome.org](https://gjs-docs.gnome.org/): Library references annotated for GJS
+- [gjs.guide](https://gjs.guide/): GJS and GObject guide
+
+### Python
+
+- [pgi-docs](https://lazka.github.io/pgi-docs/): Library references annotated for Python
+- [pygobject.gnome.org](https://pygobject.gnome.org/): PyGObject reference and guide
+
+### Lua
+
+- [lua-lgi docs](https://github.com/lgi-devs/lgi/tree/master/docs): GObject bindings guide for Lua
+
+### Vala
+
+- [vala.dev](https://vala.dev/): Guide for the Vala language
+- [valadoc.org](https://valadoc.org/): Library references annotated for Vala
+
+## Astal Libraries
+
+- [Astal](https://aylur.github.io/libastal): libastal the core library, which has the widgets and utilites
+- [Apps](https://aylur.github.io/libastal/apps): Library and cli tool for querying applications
+- [Auth](https://aylur.github.io/libastal/auth): Authentication library using PAM
+- [Battery](https://aylur.github.io/libastal/battery): DBus proxy library for upower daemon
+- [Bluetooth](https://aylur.github.io/libastal/bluetooth): Library to control bluez over dbus
+- [Hyprland](https://aylur.github.io/libastal/hyprland): Library and cli tool for Hyprland IPC socket
+- [Mpris](https://aylur.github.io/libastal/mpris): Library and cli tool for controlling media players
+- [Network](https://aylur.github.io/libastal/network): NetworkManager wrapper library
+- [Notifd](https://aylur.github.io/libastal/notifd): A notification daemon library and cli tool
+- [PowerProfiles](https://aylur.github.io/libastal/powerprofiles): Library and cli to control upowerd powerprofiles
+- [River](https://aylur.github.io/libastal/river): Library and cli tool for getting status information of the river wayland compositor
+- [Tray](https://aylur.github.io/libastal/tray): A systemtray library and cli tool
+- [WirePlumber](https://aylur.github.io/libastal/wireplumber): A library for audio control using wireplumber

docs/package.json

@@ -1,19 +1,15 @@
 {
     "name": "docs",
     "type": "module",
-    "version": "0.0.1",
-    "scripts": {
-        "dev": "astro dev",
-        "start": "astro dev",
-        "build": "astro check && astro build",
-        "preview": "astro preview",
-        "astro": "astro"
+    "devDependencies": {
+        "vitepress": "^1.3.4",
+        "vitepress-plugin-auto-sidebar": "^1.2.0",
+        "vue": "^3.4.38"
     },
-    "dependencies": {
-        "@astrojs/check": "^0.9.3",
-        "@astrojs/starlight": "^0.26.1",
-        "astro": "^4.10.2",
-        "sharp": "^0.32.5",
-        "typescript": "^5.5.4"
+    "scripts": {
+        "dev": "vitepress dev",
+        "build": "vitepress build",
+        "preview": "vitepress preview",
+        "vitepress": "vitepress"
     }
 }

docs/prettier.config.mjs

@@ -1,6 +0,0 @@
-/** @type {import("prettier").Config} */
-export default {
-    tabWidth: 4,
-    semi: false,
-    singleQuote: false,
-};

docs/showcases/Showcase.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    src: { type: String, required: true },
+    author: { type: String, required: true },
+    url: { type: String, required: true }
+});
+</script>
+
+<template>
+    <figure>
+        <a :href="url">
+            <img :src="src" :alt="author" />
+        </a>
+        <figcaption>
+            <span>Author: {{ author }}</span>
+        </figcaption>
+    </figure>
+</template>
+
+<style scoped>
+img {
+    border-radius: 4px;
+}
+
+/* same as VPFeature */
+figure {
+    padding: 0.8rem;
+    padding-bottom: 0;
+    border-radius: 12px;
+    background-color: var(--vp-c-bg-soft);
+}
+
+figcaption {
+    text-align: center;
+    padding-top: .4em;
+    padding-bottom: .6em;
+}
+</style>

docs/showcases/Showcases.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import showcases from './showcases'
+import Showcase from './Showcase.vue'
+</script>
+
+<template>
+    <div class="Showcases">
+        <template v-for="(showcase, index) in showcases" :key="index">
+            <div v-if="Array.isArray(showcase)" class="row">
+                <div v-for="(elem, elemIndex) in showcase" :key="elemIndex" class="item"
+                    :class="`grid-${showcase.length}`">
+                    <Showcase v-bind="elem" />
+                </div>
+            </div>
+            <Showcase v-else v-bind="showcase" />
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.Showcases {
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.row {
+    display: flex;
+    gap: 24px;
+}
+
+/* TODO: responsiveness on mobile */
+.item.grid-2 {
+    width: calc(100% / 2);
+}
+
+.item.grid-3 {
+    width: calc(100% / 3);
+}
+
+.item.grid-4 {
+    width: calc(100% / 4);
+}
+</style>

docs/showcases/showcases.ts

@@ -4,10 +4,12 @@ type Showcase = {
     url: string
 }
 
-type Grid<T> =
+type Grid<T> = T
     | [T, T]
+    | [T, T, T]
     | [T, T, T, T]
 
-export const showcases: Array<Showcase | Grid<Showcase>> = [
+export default [
     { author: "Aylur", src: "/astal/showcase/aylur1.png", url: "https://github.com/Aylur/dotfiles" },
-]
+    // add more showcases here
+] satisfies Array<Grid<Showcase>>

docs/src/components/Showcase.astro

@@ -1,37 +0,0 @@
----
-interface Props {
-    src: string
-    author: string
-    url: string
-}
-
-const { src, author, url } = Astro.props
----
-
-<figure>
-    <a href={url}>
-        <img src={src} alt={author}>
-    </a>
-    <figcaption>
-        <span>Author: {author}</span>
-    </figcaption>
-</figure>
-
-<style>
-img {
-    border-radius: calc(var(--card-radius) - 8px);
-}
-
-figure {
-    padding: .8rem;
-    padding-bottom: 0;
-    border-radius: var(--card-radius);
-    background-color: color-mix(in srgb, var(--sl-color-black), var(--sl-color-white) 2%);
-    border: 1px solid var(--sl-color-gray-6);
-}
-
-figcaption {
-    text-align: center;
-    margin: 0;
-}
-</style>

docs/src/content/config.ts

@@ -1,6 +0,0 @@
-import { defineCollection } from 'astro:content';
-import { docsSchema } from '@astrojs/starlight/schema';
-
-export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
-};

docs/src/content/docs/getting-started/nix.md

@@ -1,8 +0,0 @@
----
-title: Nix
-description: Usage with the Nix package manager
-sidebar:
-  hidden: true
----
-
-## Nix

docs/src/content/docs/index.mdx

@@ -1,67 +0,0 @@
----
-title: Build Your Own Desktop Shell
-description: The best way to make beautiful and functional widgets on wayland
-template: splash
-banner:
-    content: 🚧 The library and this documentation is still under development. 🚧
-hero:
-    tagline: The best way to make <i>beautiful</i> <b>and</b> <i>functional</i> wayland widgets!
-    image:
-        file: ../../assets/front-image.png
-    actions:
-        - text: Get Started
-          link: /astal/getting-started/introduction/
-          icon: right-arrow
-          variant: primary
-        - text: Reference
-          link: /astal/libraries/references
-          icon: open-book
-          variant: secondary
-        - text: View on GitHub
-          link: https://github.com/Aylur/Astal
-          icon: github
-          variant: minimal
----
-
-import { Card, CardGrid } from "@astrojs/starlight/components"
-import { showcases } from "../showcases.ts"
-import Showcase from "../../components/Showcase.astro"
-
-<CardGrid>
-    <Card title="Use your preferred language" icon="seti:json">
-        The main focus of Astal is TypeScript using JSX. But you can use the
-        libraries in any language that supports [Gobject
-        Introspection](https://en.wikipedia.org/wiki/List_of_language_bindings_for_GTK).
-    </Card>
-    <Card title="No bash scripts needed" icon="pencil">
-        Includes modules to work with Network, Bluetooth, Battery, Audio and
-        more. See the list of included [Libraries](/astal/libraries/overview).
-    </Card>
-    <Card title="Use any Gtk widget" icon="puzzle">
-        With Astal you work with Gtk directly. You are not limited to only a set
-        of them. See the list of [Widgets](/astal/libraries/widgets) that come
-        bundled.
-    </Card>
-    <Card title="Examples" icon="open-book">
-        Have a look at some simple and not simple [examples](./config/examples).
-        In [TypeScript](https://github.com/Aylur/Astal/tree/main/examples/ts),
-        [Lua](https://github.com/Aylur/Astal/tree/main/examples/lua),
-        [Python](https://github.com/Aylur/Astal/tree/main/examples/python).
-    </Card>
-</CardGrid>
-
-## Showcases
-
-<div class="showcases">
-    {showcases.map((showcase) =>
-        Array.isArray(showcase) ? (
-            <CardGrid>
-                {showcase.map((elem) => (
-                    <Showcase {...elem} />
-                ))}
-            </CardGrid>
-        ) : (
-            <Showcase {...showcase} />
-        ),
-    )}
-</div>

docs/src/content/docs/libraries/references.md

@@ -1,49 +0,0 @@
----
-title: References
-description: References of libraries
-sidebar:
-    order: 0
----
-
-The references of the libraries are annotated for the C language.
-Reading their documentation will vary depending on the language they are used in.
-
-TODO: list some examples on how to read docs,
-for example the difference between C enums and gjs enums
-
-## Additional references
-
-### GJS
-
-- [gjs-docs.gnome.org](https://gjs-docs.gnome.org/): Library references annotated for GJS
-- [gjs.guide](https://gjs.guide/): GJS and GObject guide
-
-### Python
-
-- [pgi-docs](https://lazka.github.io/pgi-docs/): Library references annotated for Python
-- [pygobject.gnome.org](https://pygobject.gnome.org/): PyGObject reference and guide
-
-### Lua
-
-- [lua-lgi docs](https://github.com/lgi-devs/lgi/tree/master/docs): GObject bindings guide for Lua
-
-### Vala
-
-- [vala.dev](https://vala.dev/): Guide for the Vala language
-- [valadoc.org](https://valadoc.org/): Library references annotated for Vala
-
-## Astal Libraries
-
-- [Astal](/reference): libastal the core library, which has the widgets and utilites
-- [Apps](/reference/apps): Library and cli tool for querying applications
-- [Auth](/reference/auth): Authentication library using PAM
-- [Battery](/reference/battery): DBus proxy library for upower daemon
-- [Bluetooth](/reference/bluetooth): Library to control bluez over dbus
-- [Hyprland](/reference/hyprland): Library and cli tool for Hyprland IPC socket
-- [Mpris](/reference/mpris): Library and cli tool for controlling media players
-- [Network](/reference/network): NetworkManager wrapper library
-- [Notifd](/reference/notifd): A notification daemon library and cli tool
-- [PowerProfiles](/reference/powerprofiles): Library and cli to control upowerd powerprofiles
-- [River](/reference/river): Library and cli tool for getting status information of the river wayland compositor
-- [Tray](/reference/tray): A systemtray library and cli tool
-- [WirePlumber](/reference/wireplumber): A library for audio control using wireplumber

docs/src/env.d.ts

@@ -1,2 +0,0 @@
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />

docs/src/style.css

@@ -1,72 +0,0 @@
-/* Dark mode colors. */
-:root {
-    --sl-color-accent-low: #10243e;
-    --sl-color-accent: #3584e4;
-    --sl-color-accent-high: #99c1f1;
-    --sl-color-white: #ffffff;
-    --sl-color-gray-1: #eeeeee;
-    --sl-color-gray-2: #c2c2c2;
-    --sl-color-gray-3: #8b8b8b;
-    --sl-color-gray-4: #585858;
-    --sl-color-gray-5: #383838;
-    --sl-color-gray-6: #272727;
-    --sl-color-black: #171718;
-}
-
-/* Light mode colors. */
-:root[data-theme='light'] {
-    --sl-color-accent-low: #c5d9f2;
-    --sl-color-accent: #156ac7;
-    --sl-color-accent-high: #11325b;
-    --sl-color-white: #181818;
-    --sl-color-gray-1: #272727;
-    --sl-color-gray-2: #383838;
-    --sl-color-gray-3: #585858;
-    --sl-color-gray-4: #8b8b8b;
-    --sl-color-gray-5: #c2c2c2;
-    --sl-color-gray-6: #eeeeee;
-    --sl-color-gray-7: #f6f6f6;
-    --sl-color-black: #ffffff;
-}
-
-:root {
-    --card-radius: 7px;
-}
-
-article.card {
-    border-radius: var(--card-radius);
-    background-color: color-mix(in srgb, var(--sl-color-black), var(--sl-color-white) 2%);
-    border-color: var(--sl-color-gray-6);
-}
-
-/* landing page gradient */
-:root {
-    --overlay-gradient: color-mix(in srgb, var(--sl-color-accent), transparent 85%);
-}
-
-:root[data-theme='light'] {
-    --overlay-gradient: color-mix(in srgb, var(--sl-color-accent), transparent 55%);
-}
-
-[data-has-hero] .page {
-    background:
-        linear-gradient(215deg, var(--overlay-gradient), transparent 40%),
-        radial-gradient(var(--overlay-gradient), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
-        radial-gradient(var(--overlay-gradient), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
-}
-
-[data-has-hero] header {
-    border-bottom: 1px solid transparent;
-    background-color: transparent;
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
-}
-
-[data-has-hero] .hero>img {
-    filter: drop-shadow(0 0 3rem var(--overlay-gradient));
-}
-
-div.showcases {
-    display: flex;
-    flex-direction: column;
-}

docs/tsconfig.json

@@ -1,10 +0,0 @@
-{
-    "extends": "astro/tsconfigs/strict",
-    "compilerOptions": {
-        "paths": {
-            "@/*": [
-                "./src/*"
-            ]
-        }
-    }
-}

docs/vitepress.config.ts

@@ -0,0 +1,103 @@
+import { defineConfig } from 'vitepress'
+
+function reference(lib = "") {
+    return `https://aylur.github.io/libastal${lib}`
+}
+
+function github(url = "") {
+    return `https://github.com/aylur/astal${url}`
+}
+
+export default defineConfig({
+    title: "Astal",
+    description: "Documentation website of the Astal project",
+
+    outDir: "./dist",
+    base: "/astal/",
+    cleanUrls: true,
+
+    lastUpdated: true,
+    ignoreDeadLinks: true, // FIXME:
+
+    head: [
+        ['link', { rel: 'icon', href: '/astal/favicon.ico' }],
+    ],
+
+    themeConfig: {
+        // logo: "",
+        //
+
+        nav: [{
+            text: '0.1.0',
+            items: [
+                { text: 'Contributing', link: github("/blob/main/CONTRIBUTING.md") },
+                { text: 'Changelog', link: github("/blob/main/CHANGELOG.md") },
+            ],
+        }],
+
+        sidebar: [
+            {
+                text: 'Getting Started',
+                base: "/getting-started",
+                collapsed: false,
+                items: [
+                    { text: 'Introduction', link: '/introduction' },
+                    { text: 'Installation', link: '/installation' },
+                    { text: 'Supported Languages', link: '/supported-languages' },
+                ],
+            },
+            {
+                text: 'AGS',
+                base: "/ags",
+                collapsed: false,
+                items: [
+                    { text: 'First Widgets', link: '/first-widgets' },
+                    { text: 'Theming', link: '/theming' },
+                    { text: 'CLI and App', link: '/cli-app' },
+                    { text: 'Widget', link: '/widget' },
+                    { text: 'Utilities', link: '/utilities' },
+                    { text: 'Variable', link: '/variable' },
+                    { text: 'FAQ', link: '/faq' },
+                ],
+            },
+            {
+                text: 'Libraries',
+                collapsed: true,
+                items: [
+                    { text: 'References', link: '/libraries/references' },
+                    { text: "Astal", link: reference("") },
+                    { text: "Apps", link: reference("/apps") },
+                    { text: "Auth", link: reference("/auth") },
+                    { text: "Battery", link: reference("/battery") },
+                    { text: "Bluetooth", link: reference("/bluetooth") },
+                    { text: "Hyprland", link: reference("/hyprland") },
+                    { text: "Mpris", link: reference("/mpris") },
+                    { text: "Network", link: reference("/network") },
+                    { text: "Notifd", link: reference("/notifd") },
+                    { text: "PowerProfiles", link: reference("/powerprofiles") },
+                    { text: "River", link: reference("/river") },
+                    { text: "Tray", link: reference("/tray") },
+                    { text: "WirePlumber", link: reference("/wireplumber") },
+                ],
+            },
+        ],
+
+        socialLinks: [
+            { icon: 'github', link: github() },
+            { icon: 'discord', link: '"https://discord.gg/CXQpHwDuhY"' },
+        ],
+
+        editLink: {
+            pattern: github("edit/main/docs/:path"),
+            text: 'Edit this page on GitHub',
+        },
+
+        lastUpdated: {
+            text: 'Last updated',
+        },
+
+        search: {
+            provider: "local",
+        }
+    },
+})

docs/vitepress.theme.css

@@ -0,0 +1,126 @@
+/**
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+.VPNavBar .VPNavBarTitle span {
+    font-size: 1.4em;
+    font-weight: bold;
+    background: linear-gradient(120deg, var(--vp-c-brand-3), var(--vp-c-brand-1));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+}
+
+:root {
+    --vp-c-gray-1: #dddde3;
+    --vp-c-gray-2: #e4e4e9;
+    --vp-c-gray-3: #ebebef;
+    --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+
+    --vp-c-indigo-1: #3451b2;
+    --vp-c-indigo-2: #3a5ccc;
+    --vp-c-indigo-3: #5672cd;
+    --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
+
+    --vp-c-purple-1: #6f42c1;
+    --vp-c-purple-2: #7e4cc9;
+    --vp-c-purple-3: #8e5cd9;
+    --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
+
+    --vp-c-green-1: #18794e;
+    --vp-c-green-2: #299764;
+    --vp-c-green-3: #30a46c;
+    --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+
+    --vp-c-yellow-1: #915930;
+    --vp-c-yellow-2: #946300;
+    --vp-c-yellow-3: #9f6a00;
+    --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
+
+    --vp-c-red-1: #b8272c;
+    --vp-c-red-2: #d5393e;
+    --vp-c-red-3: #e0575b;
+    --vp-c-red-soft: rgba(244, 63, 94, 0.14);
+
+    --vp-c-sponsor: #db2777;
+}
+
+.dark {
+    --vp-c-gray-1: #515c67;
+    --vp-c-gray-2: #414853;
+    --vp-c-gray-3: #32363f;
+    --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+    --vp-c-indigo-1: #a8b1ff;
+    --vp-c-indigo-2: #5c73e7;
+    --vp-c-indigo-3: #3e63dd;
+    --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
+
+    --vp-c-purple-1: #c8abfa;
+    --vp-c-purple-2: #a879e6;
+    --vp-c-purple-3: #8e5cd9;
+    --vp-c-purple-soft: rgba(159, 122, 234, 0.16);
+
+    --vp-c-green-1: #3dd68c;
+    --vp-c-green-2: #30a46c;
+    --vp-c-green-3: #298459;
+    --vp-c-green-soft: rgba(16, 185, 129, 0.16);
+
+    --vp-c-yellow-1: #f9b44e;
+    --vp-c-yellow-2: #da8b17;
+    --vp-c-yellow-3: #a46a0a;
+    --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
+
+    --vp-c-red-1: #f66f81;
+    --vp-c-red-2: #f14158;
+    --vp-c-red-3: #b62a3c;
+    --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+}
+
+/* ---------- *
+ * Background *
+ * ---------- */
+
+:root {
+    --vp-c-bg: #ffffff;
+    --vp-c-bg-alt: #f6f6f7;
+    --vp-c-bg-elv: #ffffff;
+    --vp-c-bg-soft: #f6f6f7;
+}
+
+.dark {
+    --vp-c-bg: #1b1b1b;
+    --vp-c-bg-alt: #161617;
+    --vp-c-bg-elv: #202122;
+    --vp-c-bg-soft: #202122;
+}
+
+/** Borders */
+:root {
+    --vp-c-border: #c2c2c4;
+    --vp-c-divider: #e2e2e3;
+    --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+    --vp-c-border: #3c3d3e;
+    --vp-c-divider: #2e2e2e;
+    --vp-c-gutter: #000000;
+}
+
+/* ---- *
+ * Text *
+ * ---- */
+
+:root {
+    --vp-c-text-1: rgba(60, 60, 67);
+    --vp-c-text-2: rgba(60, 60, 67, 0.78);
+    --vp-c-text-3: rgba(60, 60, 67, 0.56);
+}
+
+.dark {
+    --vp-c-text-1: rgba(255, 255, 245, 0.86);
+    --vp-c-text-2: rgba(235, 235, 245, 0.6);
+    --vp-c-text-3: rgba(235, 235, 245, 0.38);
+}