+
+function MyWidget() {
+ function setup(button: ColorButton) {
+
+ }
+
+ return
+}
+```
diff --git a/docs/src/content/docs/getting-started/installation.mdx b/docs/src/content/docs/getting-started/installation.mdx
new file mode 100644
index 0000000..c1f4060
--- /dev/null
+++ b/docs/src/content/docs/getting-started/installation.mdx
@@ -0,0 +1,92 @@
+---
+title: Installation
+description: How to install Astal
+sidebar:
+ order: 1
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components"
+
+## Nix
+
+maintainer: [@Aylur](https://github.com/Aylur)
+
+Read more about it on the [nix page](../nix)
+
+## Arch
+
+maintainer: [@kotontrion](https://github.com/kotontrion)
+
+
+
+
+```bash
+yay -S libastal-git
+```
+
+
+
+
+```bash
+yay -S libastal-meta
+```
+
+
+
+
+```bash
+yay -S aylurs-gtk-shell-git
+```
+
+
+
+
+## From Source
+
+```bash
+git clone https://github.com/Aylur/Astal.git
+cd Astal
+```
+
+
+
+
+```bash
+sudo dnf install meson
+
+meson setup --prefix /usr build
+meson install -C build
+```
+
+
+
+
+```bash
+sudo pacman -Syu meson
+
+arch-meson build
+meson install -C build
+```
+
+
+
+
+```bash
+sudo apk add meson
+
+meson setup --prefix /usr build
+meson install -C build
+```
+
+
+
+
+```bash
+sudo apt install meson
+
+meson setup --prefix /usr build
+meson install -C build
+```
+
+
+
diff --git a/docs/src/content/docs/getting-started/introduction.md b/docs/src/content/docs/getting-started/introduction.md
new file mode 100644
index 0000000..cb46b29
--- /dev/null
+++ b/docs/src/content/docs/getting-started/introduction.md
@@ -0,0 +1,28 @@
+---
+title: Introduction
+description: What is Astal?
+sidebar:
+ order: 0
+---
+
+## 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](/libastal) has some Gtk widgets that come packaged,
+the most important one is the [Window](/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.
+
+## Why Astal?
+
+What makes Astal convenient to use is not the core library, as it could easily be replaced
+by the standard library of any of your favorite language that has bindings to Gtk, it is the
+accompanying libraries (_formerly known as "services" in AGS_)
+
+Have you ever wanted to write a custom bar, custom notification popups
+or an applauncher, but gave up because writing a workspace widget,
+implementing the notification daemon or handling a search filter was too much of a hassle?
+
+Astal libraries have you [covered](/astal/libraries/overview), you don't have to worry about these,
+you just define the layout, style it with CSS and that's it.
diff --git a/docs/src/content/docs/getting-started/languages.md b/docs/src/content/docs/getting-started/languages.md
new file mode 100644
index 0000000..08dda01
--- /dev/null
+++ b/docs/src/content/docs/getting-started/languages.md
@@ -0,0 +1,64 @@
+---
+title: Supported Languages
+description: Choosing a language to get started
+banner:
+ content: 🚧 Examples are in the works. 🚧
+---
+
+## JavaScript
+
+The main intended usage of Astal is in TypeScript with [AGS](/astal/ags/first-widgets).
+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
+The runtime is [GJS](https://gitlab.gnome.org/GNOME/gjs) and **not** nodejs
+:::
+
+Examples:
+
+- TODO
+
+## Lua
+
+Similar to how there is a [TypeScript]() lib for GJS, there is also an accompanying library for [Lua]().
+Unfortunately, I have encountered very heavy [performance issues]() with [lgi](https://github.com/lgi-devs/lgi),
+and so currently I don't recommend using Lua for full desktop shells, but only for static
+components that don't render child nodes dynamically, bars and panels for example.
+
+Examples:
+
+- TODO
+
+## Python
+
+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.
+
+Examples:
+
+- TODO
+
+## Vala
+
+Vala is a language that simply put uses C# syntax and compiles to C.
+It is the language most of Astal is written in.
+
+Examples:
+
+- TODO
+
+## C
+
+I don't recommend using C as it requires quite a lot of boilerplate.
+
+Examples:
+
+- TODO
+
+## Other languages
+
+There a few more that supports gobject-introspection, most notably Haskell, Rust and C++.
+If you are interested and feel like contributing, PRs are welcome for bindings, and examples.
diff --git a/docs/src/content/docs/getting-started/nix.md b/docs/src/content/docs/getting-started/nix.md
new file mode 100644
index 0000000..8a1df7a
--- /dev/null
+++ b/docs/src/content/docs/getting-started/nix.md
@@ -0,0 +1,8 @@
+---
+title: Nix
+description: Usage with the Nix package manager
+sidebar:
+ hidden: true
+---
+
+## Nix
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
new file mode 100644
index 0000000..17cb867
--- /dev/null
+++ b/docs/src/content/docs/index.mdx
@@ -0,0 +1,67 @@
+---
+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 beautiful and functional 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/reference/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";
+
+
+
+ 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).
+
+
+ Includes modules to work with Network, Bluetooth, Battery, Audio and more.
+ See the list of included [Libraries](./libraries/overview).
+
+
+ With Astal you work with Gtk directly. You are not limited to only a set of
+ them. See the list of [Widgets](./libraries/widgets) that come bundled.
+
+
+ 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).
+
+
+
+## Showcases
+
+
+ {showcases.map((showcase) =>
+ Array.isArray(showcase) ? (
+
+ {showcase.map((elem) => (
+
+ ))}
+
+ ) : (
+
+ )
+ )}
+
diff --git a/docs/src/content/docs/libraries/overview.md b/docs/src/content/docs/libraries/overview.md
new file mode 100644
index 0000000..e39d746
--- /dev/null
+++ b/docs/src/content/docs/libraries/overview.md
@@ -0,0 +1,8 @@
+---
+title: Libraries
+description: Overview of incuded Astal Libraries
+sidebar:
+ order: 0
+---
+
+## Libs
diff --git a/docs/src/content/showcases.ts b/docs/src/content/showcases.ts
new file mode 100644
index 0000000..0082c93
--- /dev/null
+++ b/docs/src/content/showcases.ts
@@ -0,0 +1,13 @@
+type Showcase = {
+ author: string
+ src: string
+ url: string
+}
+
+type Grid =
+ | [T, T]
+ | [T, T, T, T]
+
+export const showcases: Array> = [
+ { author: "Aylur", src: "/astal/showcase/aylur1.png", url: "https://github.com/Aylur/dotfiles" },
+]
diff --git a/docs/src/env.d.ts b/docs/src/env.d.ts
new file mode 100644
index 0000000..acef35f
--- /dev/null
+++ b/docs/src/env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/docs/src/style.css b/docs/src/style.css
new file mode 100644
index 0000000..b6a0047
--- /dev/null
+++ b/docs/src/style.css
@@ -0,0 +1,72 @@
+/* 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;
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 0000000..d435423
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ }
+ }
+}
diff --git a/flake.nix b/flake.nix
index 5d2503f..9b99a57 100644
--- a/flake.nix
+++ b/flake.nix
@@ -29,6 +29,11 @@
in {
packages.${system} = rec {
default = astal;
+ docs = import ./docs {
+ inherit pkgs;
+ astal = self.packages.${system};
+ };
+
astal = with pkgs; lib "astal" ./core [gtk3 gtk-layer-shell];
apps = with pkgs; lib "astal-apps" ./lib/apps [json-glib];
auth = with pkgs; lib "astal-auth" ./lib/auth [pam];