docs: remove ags related docs

ags documentation will live on its own site

8 files changed, 130 insertions, 317 deletions

diff --git a/docs/guide/getting-started/installation.md b/docs/guide/getting-started/installation.md
index fa7863e..e32b6a9 100644
--- a/docs/guide/getting-started/installation.md
+++ b/docs/guide/getting-started/installation.md
@@ -1,11 +1,5 @@
 # Installation
 
-## Nix
-
-maintainer: [@Aylur](https://github.com/Aylur)
-
-Read more about it on the [nix page](./nix#astal)
-
 ## Arch
 
 maintainer: [@kotontrion](https://github.com/kotontrion)
@@ -22,7 +16,13 @@ yay -S libastal-meta
 
 :::
 
-## Bulding libastal from source
+## Nix
+
+maintainer: [@Aylur](https://github.com/Aylur)
+
+Read more about it on the [nix page](./nix#astal)
+
+## Bulding From Source
 
 1. Install the following dependencies
 
diff --git a/docs/guide/getting-started/nix.md b/docs/guide/getting-started/nix.md
index 1e0572e..6bc5d9b 100644
--- a/docs/guide/getting-started/nix.md
+++ b/docs/guide/getting-started/nix.md
@@ -5,13 +5,15 @@ next:
 ---
 # Nix
 
-## Astal
-
 Using Astal on Nix will require you to package your project.
 
+## TypeScript
+
+Using [AGS](https://aylur.github.io/ags/) as the bundler.
+
 :::code-group
 
-```nix [<i class="devicon-lua-plain"></i> Lua]
+```nix [<i class="devicon-nixos-plain"></i> flake.nix]
 {
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
@@ -19,80 +21,49 @@ Using Astal on Nix will require you to package your project.
       url = "github:aylur/astal";
       inputs.nixpkgs.follows = "nixpkgs";
     };
+    ags = {
+      url = "github:aylur/ags";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
   };
 
-  outputs = { self, nixpkgs, astal }: let
+  outputs = { self, nixpkgs, astal, ags }: let
     system = "x86_64-linux";
     pkgs = nixpkgs.legacyPackages.${system};
   in {
-    packages.${system}.default = astal.lib.mkLuaPackage {
-      inherit pkgs;
-      src = ./path/to/project; # should contain init.lua
-
-      # add extra glib packages or binaries
-      extraPackages = [
-        astal.packages.${system}.battery
-        pkgs.dart-sass
+    packages.${system}. default = pkgs.stdenvNoCC.mkDerivation rec {
+      name = "my-shell";
+      src = ./.;
+
+      nativeBuildInputs = [
+        ags.packages.${system}.default
+        pkgs.wrapGAppsHook
+        pkgs.gobject-introspection
       ];
-    };
-  };
-}
-```
 
-```nix [<i class="devicon-python-plain"></i> Python]
-# Not documented yet
-```
-
-```nix [<i class="devicon-vala-plain"></i> Vala]
-# keep in mind that this is just the nix derivation
-# and you still have to use some build tool like meson
-{
-  inputs = {
-    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
-    astal.url = "github:aylur/astal";
-  };
-
-  outputs = { self, nixpkgs, astal }: let
-    system = "x86_64-linux";
-    pkgs = nixpkgs.legacyPackages.${system};
-  in {
-    packages.${system} = {
-      default = pkgs.stdenv.mkDerivation {
-        name = "my-shell";
-        src = ./.;
-
-        nativeBuildInputs = with pkgs; [
-          meson
-          ninja
-          pkg-config
-          vala
-          gobject-introspection
-        ];
+      buildInputs = with astal.packages.${system}; [
+        astal3
+        io
+        # any other package
+      ];
 
-        # add extra packages
-        buildInputs = [
-          astal.packages.${system}.astal
-        ];
-      };
+      installPhase = ''
+        mkdir -p $out/bin
+        ags bundle app.ts $out/bin/${name}
+      '';
     };
   };
 }
 ```
 
-```nix [<i class="devicon-typescript-plain"></i> TypeScript]
-# The usage of AGS (read below) is recommended
-# Usage without AGS is not yet documented
-```
-
 :::
 
-## AGS
-
-The recommended way to use [AGS](../typescript/first-widgets#first-widgets) on NixOS is through the home-manager module.
-
-Example content of a `flake.nix` file that contains your `homeConfigurations`.
+:::tip
+You can use any other bundler too like `esbuild`
+which is what `ags` uses under the hood.
+:::
 
-<!--TODO: remove v2 after merge-->
+## Lua
 
 :::code-group
 
@@ -100,28 +71,26 @@ Example content of a `flake.nix` file that contains your `homeConfigurations`.
 {
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
-    home-manager = {
-      url = "github:nix-community/home-manager";
+    astal = {
+      url = "github:aylur/astal";
       inputs.nixpkgs.follows = "nixpkgs";
     };
-
-    # add ags https://github.com/Aylur/ags/pull/504
-    ags.url = "github:aylur/ags/v2";
   };
 
-  outputs = { home-manager, nixpkgs, ... }@inputs:
-  let
+  outputs = { self, nixpkgs, astal }: let
     system = "x86_64-linux";
-  in
-  {
-    homeConfigurations."${username}" = home-manager.lib.homeManagerConfiguration {
-      pkgs = import nixpkgs { inherit system; };
-
-      # pass inputs as specialArgs
-      extraSpecialArgs = { inherit inputs; };
+    pkgs = nixpkgs.legacyPackages.${system};
+  in {
+    packages.${system}.default = astal.lib.mkLuaPackage {
+      inherit pkgs;
+      name = "my-shell"; # how to name the executable
+      src = ./path/to/project; # should contain init.lua
 
-      # import your home.nix
-      modules = [ ./home-manager/home.nix ];
+      # add extra glib packages or binaries
+      extraPackages = [
+        astal.packages.${system}.battery
+        pkgs.dart-sass
+      ];
     };
   };
 }
@@ -129,65 +98,58 @@ Example content of a `flake.nix` file that contains your `homeConfigurations`.
 
 :::
 
-Example content of `home.nix` file
+## Python
 
 :::code-group
 
-```nix [<i class="devicon-nixos-plain"></i> home.nix]
-{ inputs, pkgs, ... }:
-{
-  # add the home manager module
-  imports = [ inputs.ags.homeManagerModules.default ];
-
-  programs.ags = {
-    enable = true;
-    configDir = ../ags;
-
-    # additional packages to add to gjs's runtime
-    extraPackages = with pkgs; [
-      inputs.ags.packages.${pkgs.system}.battery
-      fzf
-    ];
-  };
-}
+```nix [<i class="devicon-nixos-plain"></i> flake.nix]
+# Not documented yet
 ```
 
 :::
 
-AGS by default only includes the core `astal3/astal4` and `astal-io` libraries.
-If you want to include any other [library](../libraries/references) you have to add them to `extraPackages`.
-You can also add binaries which will be added to the gjs runtime.
-
-:::warning
-The `configDir` option symlinks the given path to `~/.config/ags`.
-If you already have your source code there leave it as `null`.
-:::
+## Vala
 
-The AGS flake does not expose the `astal` cli to the home environment, you have to do that yourself if you want:
+Keep in mind that this is just the nix derivation
+and you still have to use some build tool like meson.
 
 :::code-group
 
-```nix [<i class="devicon-nixos-plain"></i> home.nix]
-home.packages = [ inputs.ags.packages.${pkgs.system}.io ];
-```
-
-```sh [<i class="devicon-bash-plain"></i> sh]
-astal --help
-```
-
-:::
-
-Same applies to the `extraPackages` option, it does not expose the passed packages to the home environment.
-To make astal cli tools available to home environments, you have to add them yourself:
-
-:::code-group
+```nix [<i class="devicon-nixos-plain"></i> flake.nix]
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+    astal = {
+      url = "github:aylur/astal";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+  };
 
-```nix [<i class="devicon-nixos-plain"></i> home.nix]
-home.packages = [ inputs.ags.packages.${pkgs.system}.notifd ];
-```
+  outputs = { self, nixpkgs, astal }: let
+    system = "x86_64-linux";
+    pkgs = nixpkgs.legacyPackages.${system};
+  in {
+    packages.${system}.default = pkgs.stdenv.mkDerivation {
+      name = "my-shell";
+      src = ./.;
+
+      nativeBuildInputs = with pkgs; [
+        meson
+        ninja
+        pkg-config
+        vala
+        gobject-introspection
+      ];
 
-```sh [<i class="devicon-bash-plain"></i> sh]
-astal-notifd --help
+      buildInputs = [
+        astal.packages.${system}.io
+        astal.packages.${system}.astal3
+        astal.packages.${system}.battery
+        # add extra packages
+      ];
+    };
+  };
+}
 ```
 
 :::
diff --git a/docs/guide/lua/first-widgets.md b/docs/guide/lua/first-widgets.md
index efc1c4f..70cfe0c 100644
--- a/docs/guide/lua/first-widgets.md
+++ b/docs/guide/lua/first-widgets.md
@@ -13,8 +13,7 @@ local App = require("astal.gtk3.app")
 App:start({
     main = function()
         -- you will instantiate Widgets here
-        -- or setup anything else if you need
-        print("hi")
+        -- and setup anything else if you need
     end
 })
 ```
@@ -22,7 +21,7 @@ App:start({
 :::
 
 Then run `lua init.lua` in the terminal, and that's it!
-Now you have an instance running with Lua.
+Now you have an Astal instance running written in Lua.
 
 ## Root of every shell component: Window
 
diff --git a/docs/guide/lua/theming.md b/docs/guide/lua/theming.md
index 502e8e9..4f556fc 100644
--- a/docs/guide/lua/theming.md
+++ b/docs/guide/lua/theming.md
@@ -39,7 +39,7 @@ App:start({
 :::
 
 :::warning
-When using relative paths, so for example `./style.css` keep in mind that they
+When using relative paths, for example `./style.css` keep in mind that they
 will be relative to the current working directory.
 :::
 
diff --git a/docs/guide/typescript/cli-app.md b/docs/guide/typescript/cli-app.md
index 85b117c..9217acc 100644
--- a/docs/guide/typescript/cli-app.md
+++ b/docs/guide/typescript/cli-app.md
@@ -6,7 +6,6 @@ Depending on gtk version import paths will differ
 
 ```ts
 import { App } from "astal/gtk3"
-
 import { App } from "astal/gtk4"
 ```
 
@@ -53,20 +52,11 @@ App.start({
 })
 ```
 
-:::code-group
-
-```sh [astal]
+```sh
 astal say hi
 # hi cli
 ```
 
-```sh [ags]
-ags request "say hi"
-# hi cli
-```
-
-:::
-
 If you want to run arbitrary JavaScript from CLI, you can use `App.eval`
 which will evaluate the passed string as the body of an `async` function.
 
@@ -128,18 +118,10 @@ When assigning the `application` prop make sure `name` comes before.
 Props are set sequentially and if name is applied after application it won't work.
 :::
 
-:::code-group
-
 ```sh [astal]
 astal -t Bar
 ```
 
-```sh [ags]
-ags toggle Bar
-```
-
-:::
-
 ## Bundled scripts
 
 The produced scripts when bundling can run as the main instance
diff --git a/docs/guide/typescript/first-widgets.md b/docs/guide/typescript/first-widgets.md
index 96a1275..a467382 100644
--- a/docs/guide/typescript/first-widgets.md
+++ b/docs/guide/typescript/first-widgets.md
@@ -2,41 +2,26 @@
 
 ## Getting Started
 
-Start by initializing a project
+Start by importing the singleton
+[Astal.Application](https://aylur.github.io/libastal/astal3/class.Application.html) instance.
 
-```sh
-ags init
-```
+:::code-group
 
-then run `ags run` in the terminal
+```ts [app.ts]
+import { App } from "astal/gtk3"
 
-```sh
-ags run
+App.start({
+    main() {
+        // you will instantiate Widgets here
+        // and setup anything else if you need
+    }
+})
 ```
 
-:::details Usage without AGS
-🚧 Not yet documented. 🚧
-:::
-
-That's it! You have now a custom written bar using Gtk.
-
-:::tip
-AGS will transpile every `.ts`, `.jsx` and `.tsx` files into regular JavaScript, then
-it will bundle everything into a single JavaScript file which then GJS can execute.
 :::
 
-The AGS init command will generate the following files
-
-```txt
-.
-├── @girs/              # generated types
-├── widget/
-│   └── Bar.tsx
-├── app.ts              # entry proint
-├── env.d.ts            # additional types
-├── style.css
-└── tsconfig.json       # needed by LSPs
-```
+After your [bundle step](./installation.md) run `gjs -m app.js`, and that's it!
+Now you have an Astal instance running written in TypeScript.
 
 ## Root of every shell component: Window
 
diff --git a/docs/guide/typescript/installation.md b/docs/guide/typescript/installation.md
index e0f1bd5..0c19325 100644
--- a/docs/guide/typescript/installation.md
+++ b/docs/guide/typescript/installation.md
@@ -1,89 +1,19 @@
 # Installation
 
-It is recommended to use [AGS](https://github.com/aylur/ags)
+It is recommended to use [AGS](https://aylur.github.io/ags/)
 to scaffold and run projects in TypeScript.
 
 It lets you
 
 - generate TypeScript types using [ts-for-gir](https://github.com/gjsify/ts-for-gir)
-- generate a tsconfig which is used by LSPs
-- bundle your TypeScript and JavaScript code using [esbuild](https://esbuild.github.io/).
+- generate a tsconfig which is used by LSPs to provide intellisense
+- bundle your TypeScript and JavaScript code using [esbuild](https://esbuild.github.io/)
 
 :::details Trivia
 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+TypeScript+JSX projects.
+JavaScript/TypeScript. Now it serves as a scaffolding tool for Astal+TypeScript projects.
 :::
 
-## Nix
-
-maintainer: [@Aylur](https://github.com/Aylur)
-
-Read more about it on the [nix page](../getting-started/nix#ags)
-
-You can try without installing.
-
-<!--TODO: remove v2 after merge-->
-```sh
-nix run github:aylur/ags/v2#agsFull -- --help
-```
-
-## From source
-
-1. [Install Astal](../getting-started/installation.md) if you have not already
-
-2. Install the Astal GJS package
-
-```sh
-git clone https://github.com/aylur/astal /tmp/astal
-cd /tmp/astal/lang/gjs
-meson setup --prefix /usr build
-meson install -C build
-```
-
-:::tip
-You might be wondering why it is recommended to install a JavaScript
-package on the system instead of installing it as a node module.
-It is solely to keep it in **sync** with the core `astal-io` and `astal3`/`astal4` package.
-:::
-
-3. Install the following dependencies
-
-:::code-group
-
-```sh [<i class="devicon-archlinux-plain"></i> Arch]
-sudo pacman -Syu go npm gjs
-```
-
-```sh [<i class="devicon-fedora-plain"></i> Fedora]
-sudo dnf install golang npm gjs
-```
-
-```sh [<i class="devicon-ubuntu-plain"></i> Ubuntu]
-sudo apt install golang-go npm gjs
-```
-
-:::
-
-3. Clone the repo and Install
-
-<!--TODO: remove v2 after merge-->
-```sh
-git clone https://github.com/aylur/ags.git /tmp/ags
-cd /tmp/ags
-git checkout v2 # https://github.com/Aylur/ags/pull/504
-go install
-```
-
-:::tip
-`go install` installs the `ags` binary to `$GOPATH/bin` so make sure its in your `$PATH`.
-You can move it to another directory if you like. For example
-
-```sh
-sudo mv $GOPATH/bin/ags /usr/bin/ags
-```
-
-:::
-
-## Without AGS
+## Setting up a project
 
 🚧 Setting up a dev environment without AGS is not yet documented. 🚧
diff --git a/docs/guide/typescript/theming.md b/docs/guide/typescript/theming.md
index 10a3981..5944c4e 100644
--- a/docs/guide/typescript/theming.md
+++ b/docs/guide/typescript/theming.md
@@ -23,28 +23,24 @@ You can pass a path to a file or css as a string in `App.start`
 :::code-group
 
 ```ts [app.ts]
-import style from "inline:./style.css"
-
-const inlineCssInCode = `
-window {
-    background-color: transparent;
-}
+const inlineCss = `
+    window {
+        background-color: transparent;
+    }
 `
 
 App.start({
-    css: "./style.css",
-    css: style,
-    css: `${SRC}/style.css'`,
     css: inlineCss,
+    css: "./style.css",
+    css: "/path/to/style.css",
 })
 ```
 
 :::
 
-:::info
-When using AGS the global `SRC` will point to the directory `app.ts` is in.
-AGS will set the current working directory to `--config`, so `./style.css` also works.
-If you are not using AGS you should inline import CSS instead.
+:::warning
+When using relative paths, for example `./style.css` keep in mind that they
+will be relative to the current working directory.
 :::
 
 ## Css Property on Widgets
@@ -90,20 +86,11 @@ 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)
 
-::: code-group
-
-```sh [astal]
+```sh
 # to bring up the inspector run
 astal --inspector
 ```
 
-```sh [ags]
-# to bring up the inspector run
-ags --inspector
-```
-
-:::
-
 ## Using SCSS
 
 Gtk's CSS only supports a subset of what the web offers.
@@ -126,54 +113,22 @@ npm install -g sass # not packaged on Ubuntu
 
 :::
 
-Importing `scss` files will simply return transpiled css.
-
 :::code-group
 
 ```ts [app.ts]
-import style from "./style.scss"
+import { exec } from "astal/process"
+
+exec("sass", "./style.scss", "/tmp/style.css")
 
 App.start({
-    css: style,
+    css: "/tmp/style.css",
     main() {},
 })
 ```
 
 :::
 
-:::details Without AGS
-AGS uses a plugin to transpile scss files before importing them.
-If you are not using AGS, you can use a plugin for your chosen bundler.
-:::
-
 :::tip
-If you for example want to set scss varibles from JS,
-You can inline import, compose, and transpile yourself.
-
-```ts [app.ts]
-import style1 from "inline:./style1.scss"
-import style2 from "inline:./style2.scss"
-
-const tmpscss = "/tmp/style.scss"
-const target = "/tmp/style.css"
-
-writeFile(tmpscss, `
-  $var1: red;
-  $var1: blue;
-  ${style1}
-  ${style1}
-`)
-
-exec(`sass ${tmpscss} ${target}`)
-
-App.start({
-    css: target,
-})
-
-```
-
-:::
-
-:::info
-If you want other preprocessors support builtin open an Issue.
+You could also transpile scss into css using a bundler
+and simply passing the path of the resulting css file to `css`.
 :::