diff options
Diffstat (limited to 'docs/guide')
| -rw-r--r-- | docs/guide/getting-started/installation.md | 14 | ||||
| -rw-r--r-- | docs/guide/getting-started/nix.md | 208 | ||||
| -rw-r--r-- | docs/guide/libraries/tray.md | 2 | ||||
| -rw-r--r-- | docs/guide/lua/examples.md | 4 | ||||
| -rw-r--r-- | docs/guide/lua/first-widgets.md | 5 | ||||
| -rw-r--r-- | docs/guide/lua/installation.md | 2 | ||||
| -rw-r--r-- | docs/guide/lua/theming.md | 2 | ||||
| -rw-r--r-- | docs/guide/lua/widget.md | 8 | ||||
| -rw-r--r-- | docs/guide/typescript/cli-app.md | 31 | ||||
| -rw-r--r-- | docs/guide/typescript/examples.md | 14 | ||||
| -rw-r--r-- | docs/guide/typescript/faq.md | 23 | ||||
| -rw-r--r-- | docs/guide/typescript/first-widgets.md | 126 | ||||
| -rw-r--r-- | docs/guide/typescript/gobject.md | 2 | ||||
| -rw-r--r-- | docs/guide/typescript/installation.md | 80 | ||||
| -rw-r--r-- | docs/guide/typescript/theming.md | 77 |
15 files changed, 232 insertions, 366 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/libraries/tray.md b/docs/guide/libraries/tray.md index 39dffc1..43b3aa6 100644 --- a/docs/guide/libraries/tray.md +++ b/docs/guide/libraries/tray.md @@ -62,7 +62,7 @@ sudo pacman -Syu meson gtk3 gobject-introspection libdbusmenu-gtk3 ``` ```sh [<i class="devicon-fedora-plain"></i> Fedora] -sudo dnf install meson gcc gtk3-devel libdbusmenu-gtk3 gobject-introspection-devel +sudo dnf install meson gcc gtk3-devel libdbusmenu-gtk3-devel gobject-introspection-devel ``` ```sh [<i class="devicon-ubuntu-plain"></i> Ubuntu] diff --git a/docs/guide/lua/examples.md b/docs/guide/lua/examples.md new file mode 100644 index 0000000..be46b6e --- /dev/null +++ b/docs/guide/lua/examples.md @@ -0,0 +1,4 @@ +# Lua examples + +## [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/lua/simple-bar) + 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/installation.md b/docs/guide/lua/installation.md index b99d8df..f647ed7 100644 --- a/docs/guide/lua/installation.md +++ b/docs/guide/lua/installation.md @@ -9,7 +9,7 @@ Read more about it on the [nix page](../getting-started/nix) ## Arch ```sh -yay -S lua-libastal-git +yay -S libastal-lua-git ``` ## From Source 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/lua/widget.md b/docs/guide/lua/widget.md index d9f99fa..593628e 100644 --- a/docs/guide/lua/widget.md +++ b/docs/guide/lua/widget.md @@ -139,18 +139,18 @@ These widgets are available by default in Lua. - Button: [Astal.Button](https://aylur.github.io/libastal/astal3/class.Button.html) - CenterBox: [Astal.CenterBox](https://aylur.github.io/libastal/astal3/class.CenterBox.html) - CircularProgress: [Astal.CircularProgress](https://aylur.github.io/libastal/astal3/class.CircularProgress.html) -- DrawingArea: [Gtk.DrawingArea](https://docs.gtk.org/gtk3/astal3/class.DrawingArea.html) -- Entry: [Gtk.Entry](https://docs.gtk.org/gtk3/astal3/class.Entry.html) +- DrawingArea: [Gtk.DrawingArea](https://docs.gtk.org/gtk3/class.DrawingArea.html) +- Entry: [Gtk.Entry](https://docs.gtk.org/gtk3/class.Entry.html) - Eventbox: [Astal.EventBox](https://aylur.github.io/libastal/astal3/class.EventBox.html) - Icon: [Astal.Icon](https://aylur.github.io/libastal/astal3/class.Icon.html) - Label: [Astal.Label](https://aylur.github.io/libastal/astal3/class.Label.html) - Levelbar: [Astal.LevelBar](https://aylur.github.io/libastal/astal3/class.LevelBar.html) - Overlay: [Astal.Overlay](https://aylur.github.io/libastal/astal3/class.Overlay.html) -- Revealer: [Gtk.Revealer](https://docs.gtk.org/gtk3/astal3/class.Revealer.html) +- Revealer: [Gtk.Revealer](https://docs.gtk.org/gtk3/class.Revealer.html) - Scrollable: [Astal.Scrollable](https://aylur.github.io/libastal/astal3/class.Scrollable.html) - Slider: [Astal.Slider](https://aylur.github.io/libastal/astal3/class.Slider.html) - Stack: [Astal.Stack](https://aylur.github.io/libastal/astal3/class.Stack.html) -- Switch: [Gtk.Switch](https://docs.gtk.org/gtk3/astal3/class.Switch.html) +- Switch: [Gtk.Switch](https://docs.gtk.org/gtk3/class.Switch.html) - Window: [Astal.Window](https://aylur.github.io/libastal/astal3/class.Window.html) ## Gtk4 diff --git a/docs/guide/typescript/cli-app.md b/docs/guide/typescript/cli-app.md index 85b117c..9b299aa 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. @@ -102,7 +92,7 @@ In order for Astal to know about your windows, you have to register them. You can do this by specifying a **unique** `name` and calling `App.add_window` ```tsx {4} -import { App } from "astal" +import { App } from "astal/gtk3" function Bar() { return <window name="Bar" setup={self => App.add_window(self)}> @@ -114,7 +104,7 @@ function Bar() { You can also invoke `App.add_window` by simply passing the `App` to the `application` prop. ```tsx {4} -import { App } from "astal" +import { App } from "astal/gtk3" function Bar() { return <window name="Bar" application={App}> @@ -128,24 +118,13 @@ 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 -and a "client" instance. +## Client -The first time you execute your bundled script the `main` function gets called. +The first time you execute your script the `main` function gets called. While that instance is running any subsequent execution of the script will call the `client` function. diff --git a/docs/guide/typescript/examples.md b/docs/guide/typescript/examples.md new file mode 100644 index 0000000..ec51e89 --- /dev/null +++ b/docs/guide/typescript/examples.md @@ -0,0 +1,14 @@ +# TypeScript Examples + +## Gtk3 + +### [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/js/simple-bar) + + +### [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/js/notifications) + +### [Applauncher](https://github.com/Aylur/astal/tree/main/examples/js/applauncher) + + +### [Media Player](https://github.com/Aylur/astal/tree/main/examples/js/media-player) + diff --git a/docs/guide/typescript/faq.md b/docs/guide/typescript/faq.md index 48c802c..4ee616b 100644 --- a/docs/guide/typescript/faq.md +++ b/docs/guide/typescript/faq.md @@ -7,7 +7,7 @@ the same as the compositor. Instead use the `gdkmonitor` property which expects a `Gdk.Monitor` object. ```tsx -import { App } from "astal" +import { App } from "astal/gtk3" function Bar(gdkmonitor) { return <window gdkmonitor={gdkmonitor} /> @@ -92,7 +92,7 @@ printerr("print this line to stderr") ## Populate the global scope with frequently accessed variables -It might be annoying to always import Gtk only for `Gtk.Align` enums. +It might be annoying to always import Gtk only for the `Gtk.Align` enum. :::code-group @@ -118,7 +118,7 @@ Object.assign(globalThis, { :::code-group -```tsx [Bar.tsx] +```tsx [Bar.tsx] {3} export default function Bar() { return <window> <box halign={START} /> @@ -131,11 +131,13 @@ export default function Bar() { :::code-group ```ts [app.ts] -import "./globals" +import "./globals" // don't forget to import it first // [!code ++] import Bar from "./Bar" App.start({ - main: Bar + main() { + Bar() + } }) ``` @@ -162,7 +164,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) { :::code-group ```ts [app.ts] -import { Gdk, Gtk } from "astal" +import { Gdk, Gtk } from "astal/gtk3" import Bar from "./Bar" function main() { @@ -197,11 +199,14 @@ These happen when accessing list type properties. Gjs fails to correctly bind import Notifd from "gi://AstalNotifd" const notifd = Notifd.get_default() -notifd.notifications // ❌ // [!code error] - -notifd.get_notifications() // ✅ +notifd.notifications // [!code --] +notifd.get_notifications() // [!code ++] ``` +:::tip +Open up an issue/PR to add a [workaround](https://github.com/Aylur/astal/blob/main/lang/gjs/src/overrides.ts). +::: + ## How to create regular floating windows Use `Gtk.Window` with [Widget.astalify](/guide/typescript/widget#how-to-use-non-builtin-gtk-widgets). diff --git a/docs/guide/typescript/first-widgets.md b/docs/guide/typescript/first-widgets.md index 96a1275..77b2f61 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 @@ -290,7 +275,7 @@ function Counter() { <label label={bind(count).as(num => num.toString())} /> <button onClicked={increment}> Click to increment - <button> + </button> </box> } ``` @@ -369,42 +354,75 @@ inner state of widgets that does not need to be recreated. In this case you can create a [custom reactive structure](./binding#example-custom-subscribable) ::: -When there is at least one `Binding` passed as a child, the `children` -parameter will always be a flattened `Binding<Array<JSX.Element>>`. -When there is a single `Binding` passed as a child, the `child` parameter will -be a `Binding<JSX.Element>` or a flattened `Binding<Array<JSX.Element>>`. +# How children are passed + +Here is full list of how children and bound children can be passed to custom widgets. ```tsx -import { type Binding } from "astal" +import Binding from "astal/binding" -function MyContainer({ children }: { - children?: Binding<Array<JSX.Element>> -}) { - // children is a Binding over an Array of widgets -} +function Parent(props: { + child?: JSX.Element | Binding<JSX.Element> | Binding<Array<JSX.Element>> + children?: Array<JSX.Element> | Binding<Array<JSX.Element>> +}) -return <MyContainer> - <box /> - {num(n => range(n).map(i => ( - <button> - {i.toString()} - <button/> - )))} - [ - [ - <button /> - ] - <button /> - ] -</MyContainer> +// { child: JSX.Element } +<Parent> + <child /> +</Parent> + +// { children: Array<JSX.Element> } +<Parent> + <child /> + <child /> +</Parent> + +// { child: Binding<JSX.Element> } +<Parent> + {variable(c => ( + <child /> + ))} +</Parent> + +// { child: Binding<Array<JSX.Element>> } +<Parent> + {variable(c => ( + <child /> + <child /> + ))} +</Parent> + +// { children: Binding<Array<JSX.Element>> } +<Parent> + <child /> + {variable(c => ( + <child /> + ))} +</Parent> + + +// { children: Binding<Array<JSX.Element>> } +<Parent> + <child /> + {variable(c => ( + <child /> + <child /> + ))} +</Parent> ``` +:::tip +If you have a widget where you pass widgets in various ways, you can +wrap `child` in `children` in a [`Subscribable`](./faq#custom-widgets-with-bindable-properties) and handle all cases +as if they were bindings. +::: + :::info You can pass the followings as children: - widgets - deeply nested arrays of widgets -- bindings of widgets, +- bindings of widgets - bindings of deeply nested arrays of widgets [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values are not rendered and anything not from this list diff --git a/docs/guide/typescript/gobject.md b/docs/guide/typescript/gobject.md index f7f001d..4e40845 100644 --- a/docs/guide/typescript/gobject.md +++ b/docs/guide/typescript/gobject.md @@ -74,7 +74,7 @@ class MyObj extends GObject.Object { declare myProp: string constructor() { - super({ myProp: "default-value" }) + super({ myProp: "default-value" } as any) } } ``` 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`. ::: |