docs: add initial docs

README.md

@@ -1,12 +1,10 @@
-# Aylur's Gtk Shell
+# AGS
 
 CLI around [Astal](https://github.com/aylur/astal) to scaffold and run projects.
 Astal is a set of libraries written in Vala/C that makes writing a Desktop Shell easy.
 It also has an accompanying JavaScript library which lets you write Desktop Shells in JSX running on GJS.
 GJS is a JavaScript runtime built on Firefox's SpiderMonkey JavaScript engine and the GNOME platform libraries, the same runtime [GNOME Shell](https://gitlab.gnome.org/GNOME/gnome-shell) runs on.
 
-It was heavily inspired by [EWW](https://github.com/elkowar/eww).
-
 ## Get started
 
-To get started read the [wiki](https://aylur.github.io/astal/ags/first-widgets).
+To get started read the [wiki](https://aylur.github.io/ags).

docs/.gitignore

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

docs/.vitepress/config.ts

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

docs/.vitepress/theme/index.ts

@@ -0,0 +1,5 @@
+import DefaultTheme from "vitepress/theme"
+import "../../vitepress.theme.css"
+import "devicon/devicon.min.css"
+
+export default DefaultTheme

docs/guide/astal-cli.md

@@ -0,0 +1,3 @@
+# Astal CLI
+
+🚧 WIP 🚧

docs/guide/bundle.md

@@ -0,0 +1,3 @@
+# Bundling projects
+
+🚧 WIP 🚧

docs/guide/init.md

@@ -0,0 +1,3 @@
+# Setting up a project
+
+🚧 WIP 🚧

docs/guide/install.md

@@ -0,0 +1,37 @@
+# Installation
+
+## Arch
+
+maintainer: [@kotontrion](https://github.com/kotontrion)
+
+```sh [<i class="devicon-archlinux-plain"></i> Arch]
+yay -S aylurs-gtk-shell-git
+```
+
+## Nix
+
+maintainer: [@Aylur](https://github.com/Aylur)
+
+Read more about it on the [nix page](./nix)
+
+## From Source
+
+1. Install [Astal](https://aylur.github.io/astal/guide/getting-started/installation)
+
+2. Install the Astal js package
+
+```sh [<i class="devicon-linux-plain"></i> From Source]
+git clone https://github.com/aylur/astal
+cd astal/lang/gjs
+meson setup --prefix /usr build
+meson install -C build
+```
+
+2. Install AGS
+
+```sh [<i class="devicon-linux-plain"></i> From Source]
+# Install AGS
+git clone https://github.com/aylur/ags.git
+cd ags
+go build
+```

docs/guide/nix.md

@@ -0,0 +1,102 @@
+# Usage on NixOS
+
+The recommended way is to use the home-manager module.
+
+Example content of a `flake.nix` file that contains your `homeConfigurations`.
+:::code-group
+
+```nix [<i class="devicon-nixos-plain"></i> flake.nix]
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+    home-manager = {
+      url = "github:nix-community/home-manager";
+      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
+    system = "x86_64-linux";
+  in
+  {
+    homeConfigurations."${username}" = home-manager.lib.homeManagerConfiguration {
+      pkgs = import nixpkgs { inherit system; };
+
+      # pass inputs as specialArgs
+      extraSpecialArgs = { inherit inputs; };
+
+      # import your home.nix
+      modules = [ ./home-manager/home.nix ];
+    };
+  };
+}
+```
+
+:::
+
+Example content of `home.nix` file
+
+:::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
+    ];
+  };
+}
+```
+
+:::
+
+AGS by default only includes the core `astal3`, `astal4` and `astal-io` libraries.
+If you want to include any other [library](https://aylur.github.io/astal/guide/libraries/references#astal-libraries) 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`.
+:::
+
+The AGS flake does not expose the `astal` cli to the home environment, you have to do that yourself if you want:
+
+:::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 environment, you have to add them yourself:
+
+:::code-group
+
+```nix [<i class="devicon-nixos-plain"></i> home.nix]
+home.packages = [ inputs.ags.packages.${pkgs.system}.notifd ];
+```
+
+```sh [<i class="devicon-bash-plain"></i> sh]
+astal-notifd --help
+```
+
+:::

docs/guide/types.md

@@ -0,0 +1,3 @@
+# Generating TypeScript types
+
+🚧 WIP 🚧

docs/index.md

@@ -0,0 +1,122 @@
+---
+layout: home
+pageClass: home-page
+
+hero:
+  name: "AGS"
+  text: "Scaffolding CLI for Astal+TypeScript"
+  tagline: Initialize, bundle, or run Astal projects written in TypeScript/JavaScript with a single command
+  image: https://aylur.github.io/astal/icon.svg
+  actions:
+    - theme: brand
+      text: Guide
+      link: /guide/install
+    - theme: alt
+      text: Astal Documentation
+      link: https://aylur.github.io/astal/
+
+features:
+  - title: Initialize projects
+    details: With <code>ags init</code> you can initialize a project, which generates a tsconfig.json and a basic example.
+  - title: Bundle projects
+    details: With <code>ags bundle</code> you can bundle your project into a single executable script.
+  - title: Run projects
+    details: With <code>ags run</code> you can run a projects without bundling them first.
+  - title: Generate TypeScript types.
+    details: With <code>ags types</code> you can generate types from GObject based libraries.
+---
+
+<br>
+<br>
+
+# Quick Start
+
+1. Install
+
+:::code-group
+
+```sh [<i class="devicon-archlinux-plain"></i> Arch]
+yay -S aylurs-gtk-shell-git
+```
+
+```sh [<i class="devicon-nixos-plain"></i> NixOS]
+nix shell github:aylur/ags # ags in a temporary shell
+```
+
+:::
+
+2. Initialize a project
+
+```sh
+ags init
+```
+
+3. Run the project
+
+```sh
+ags run
+```
+
+4. Read the Astal Documentation to start developing
+
+[Astal Documentation](https://aylur.github.io/astal/guide/typescript/first-widgets)
+
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-purple-3), var(--vp-c-brand-3));
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-purple-3), var(--vp-c-brand-3));
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+: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 code {
+    background-color: var(--vp-code-line-highlight-color);
+    color: var(--vp-code-color);
+    padding: 2px;
+    border-radius: 4px;
+    padding: 3px 6px;
+  }
+
+  .VPFooter {
+    background-color: transparent !important;
+    border: none;
+  }
+
+  .VPNavBar:not(.top) {
+    background-color: transparent !important;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+
+    div.divider {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style>