summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorAylur <[email protected]>2024-11-12 01:22:51 +0000
committerAylur <[email protected]>2024-11-12 01:23:13 +0000
commit17aeb9ef945848befdbce0be76ffbeffe27c24d6 (patch)
treed9ef10f45e95339d6479d975edec1104acae0191 /docs
parent2a9bb96f056f25c95b330984cfe7ac484db6c9c6 (diff)
docs: remove ags related docs
ags documentation will live on its own site
Diffstat (limited to 'docs')
-rw-r--r--docs/guide/getting-started/installation.md14
-rw-r--r--docs/guide/getting-started/nix.md208
-rw-r--r--docs/guide/lua/first-widgets.md5
-rw-r--r--docs/guide/lua/theming.md2
-rw-r--r--docs/guide/typescript/cli-app.md20
-rw-r--r--docs/guide/typescript/first-widgets.md41
-rw-r--r--docs/guide/typescript/installation.md80
-rw-r--r--docs/guide/typescript/theming.md77
-rw-r--r--docs/package.json2
9 files changed, 131 insertions, 318 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`.
:::
diff --git a/docs/package.json b/docs/package.json
index fea7e8f..ad76c9a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,5 +1,5 @@
{
- "name": "docs",
+ "name": "astal-docs",
"type": "module",
"devDependencies": {
"@eslint/js": "^9.12.0",