{"id":15721683,"url":"https://github.com/whysobad/sali","last_synced_at":"2026-04-11T21:36:46.747Z","repository":{"id":255021125,"uuid":"847096748","full_name":"WhySoBad/sali","owner":"WhySoBad","description":"A customizable greetd frontend using gtk4","archived":false,"fork":false,"pushed_at":"2024-09-30T09:00:20.000Z","size":81,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-25T09:12:17.813Z","etag":null,"topics":["greetd","greeter","gtk4","rust"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WhySoBad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-24T20:52:52.000Z","updated_at":"2024-09-30T09:00:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"04a28a43-5191-43c0-ac10-23d11a81d7c0","html_url":"https://github.com/WhySoBad/sali","commit_stats":null,"previous_names":["whysobad/sali"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/WhySoBad/sali","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhySoBad%2Fsali","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhySoBad%2Fsali/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhySoBad%2Fsali/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhySoBad%2Fsali/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WhySoBad","download_url":"https://codeload.github.com/WhySoBad/sali/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhySoBad%2Fsali/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274982141,"owners_count":25385328,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["greetd","greeter","gtk4","rust"],"created_at":"2024-10-03T22:01:38.564Z","updated_at":"2026-04-11T21:36:46.689Z","avatar_url":"https://github.com/WhySoBad.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sali\n\n\u003e sali is a toolkit to easily build greetd frontends\n\nThe goal of this project is to create an easy-to-use and easy-to-understand way\nof builing greetd frontends using gtk4 components. It allows to create a login\nfrontend in a fully declarative way without writing any code whilst it's main\nfeatures are:\n\n- Creating a custom layout tree using predefined components\n- Selecting between one or more run configurations\n\n## Dependencies\n\nYou'll need the following dependencies installed on your system:\n\n- `gtk4`\n- `gtk4-layer-shell`\n\n\u003e Depending on your distribution the names may differ, the above names are for\n\u003e the Arch and AUR packages\n\n## Configuration\n\nEverything is configured through a yaml configuration file which is per default\nlocated at `~/.config/sali/config.yaml`. A custom path can be specified using\nthe `--config` or `-c` argument. It supports the following fields:\n\n| Field            | Description                                                                                     | Default value     |\n| ---------------- | ----------------------------------------------------------------------------------------------- | ----------------- |\n| `monitors`       | Map of monitor configurations which assigns a name for each [monitor](#monitor)                 | -                 |\n| `main_monitor`   | Name of the monitor on which the layout tree should be rendered                                 | -                 |\n| `username`       | Optional default username which is prefilled in the username field                              | _none_            |\n| `styles`         | Array of paths from where to load stylesheets. It supports `css` as well as `scss` stylesheets  | `[]`              |\n| `classes`        | Css class names which are used to indicate some states, the fields are defined [here](#classes) | _Default Classes_ |\n| `runners`        | Map of run configurations which assigns a name for each [runner](#runner)                       | -                 |\n| `default_runner` | Name of the runner which should be preselected in the runner dropdown                           | _none_            |\n| `layout`         | The [layout tree](#layout) of the window on the main monitor                                    | _Default Layout_  |\n\nThe following is an example configuration:\n\n```yaml\nmonitors:\n  left:\n    output: DP-1\n    background: /path/to/left/background/image.jpg\n  center:\n    output: DP-2\n    background: /path/to/center/background/image.jpg\n  right:\n    output: DP-3\n    background: [255, 0, 255]\n\nmain_monitor: center\n\nstyles: [ \"~/.config/sali/styles.scss\" ]\n\nrunners:\n  hyprland:\n    display_name: Hyprland\n    run: Hyprland \u0026\u003e /tmp/hyprland-session.log\n    exit_cmd: hyprctl dispatch exit\n\ndefault_runner: hyprland\n\nlayout:\n  type: box\n  halign: fill\n  valign: fill\n  children:\n    - type: box\n      classes: [ \"container\" ]\n      children:\n        - type: datetime\n    - type: box\n      classes: [ \"container\" ]\n      children:\n        - type: username\n        - type: password\n```\n\n### Monitor\n\nA monitor is a representation of a display output. If a `background` is set a\nnew background layer window is created for this monitor\n\n| Field        | Description                                                                                                    | Default value |\n| ------------ | -------------------------------------------------------------------------------------------------------------- | ------------- |\n| `output`     | Name of the display output on this monitor (e.g. `DP-1`)                                                       | -             |\n| `background` | Background of the monitor, either path to a background image or rgb color in array form (e.g. `[255, 0, 255]`) | -             |\n\n### Classes\n\nA set of css classes which are applied to windows which can't be set through the\nlayout tree or which are applied to components based on some conditions\n\n| Field         | Description                                                                             | Default value    |\n| ------------- | --------------------------------------------------------------------------------------- | ---------------- |\n| `background`  | Css classes which are applied to the background windows                                 | `[\"background\"]` |\n| `window`      | Css classes which are applied to the window holding the layout tree                     | `[\"window\"]`     |\n| `field_error` | Css class which is applied to the username/password fields when there was a login error | `error`          |\n| `field_empty` | Css class which is applied to the username/password fields when they are empty          | `empty`          |\n\n### Runner\n\nA run configuration which is executed when a login attempt succeeds\n\n| Field          | Description                                                                                                                              | Default value |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `display_name` | The name displayed in the [runner dropdown](#runner-dropdown) when this runner is selected                                               | -             |\n| `run`          | The command to run when a login attempt with this runner succeeds                                                                        | -             |\n| `env`          | A list of environment variables to set for the commands                                                                                  | `[]`          |\n| `exit_cmd`     | Command to run aftera successfuly login attempt to exit the greeter environment \u003cbr /\u003e By default it simply exists the sali application  | _none_        |\n\n## Layout\n\nThe layout is the main part of the configuration. It specifies a node tree in\nwhich your UI components should be ordered. Each component directly maps to a\ngtk4 component which should make styling pretty straight forward.\n\nIn the following section you'll see a detailed documentation of all components\navailable. Should a gtk4 component you need be missing feel free to open an\nissue. Please keep in mind the goal of this project is **not to become the next\ngtk wrapper for creating widgets** like [ags](https://github.com/Aylur/ags) or\n[eww](https://github.com/elkowar/eww) but rather be a toolkit for easily\ncreating greetd frontends using gtk\n\n### Box\n\nThe box component is the main building block for any layout. It is the only\ncomponent which can hold children and it can be used for alignment\n\nA box component can be added to the layout tree using `type: box` and the\nattributes below. Internally it's used to create an\n[Box](https://docs.gtk.org/gtk4/class.Box.html) widget\n\n| Attribute     | Description                                                                           | Default value |\n| ------------- | ------------------------------------------------------------------------------------- | ------------- |\n| `classes`     | Css classes which are applied to the box                                              | `[\"box\"]`     |\n| `halign`      | Horizontal alignment, either: `center`, `fill`, `start`, `end`, `baseline` or `start` | `center`      |\n| `valign`      | Vertical alignment, either: `center`, `fill`, `start`, `end`, `baseline` or `start`   | `center`      |\n| `hexpand`     | Boolean whether the box should expand horizontally                                    | `true`        |\n| `vexpand`     | Boolean whether the box should expand vertically                                      | `true`        |\n| `width`       | Requested width in pixels                                                             | `500`         |\n| `spacing`     | Spacing between the children of the box in pixels                                     | `12`          |\n| `orientation` | Orientation of the children, either: `vertical` or `horizontal`                       | `vertical`    |\n| `children`    | Array of components which are nested inside the box                                   | `[]`          |\n\n### Password field\n\nThe password field is a mandatory component which is used to enter the password\nfor the user. It can be added to the layout tree using `type: password` and the\nattributes below. Internally it's used to create an\n[Entry](https://docs.gtk.org/gtk4/class.Entry.html) widget which has it's\ncharacters set to invisible\n\n\u003e [!NOTE]\n\u003e\n\u003e The password field is an unique component: If it's defined multiple times only\n\u003e the first password field in the layout tree is used and the other ones are\n\u003e ignored\n\n| Attribute     | Description                                         | Default value           |\n| ------------- | --------------------------------------------------- | ----------------------- |\n| `classes`     | Css classes which are applied to the password field | `[\"input\", \"password\"]` |\n| `placeholder` | Placeholder text                                    | `Password`              |\n\n### Username field\n\nThe username field is an optional component which is used to enter the username\nfor the user to log in. Should no `username` be specified in the config the\ncomponent becomes mandatory since it's not known for which user the login\nattempt is otherwise. If an `username` is set in the config it's value is\nprefilled into the input field\n\nThe username field can be added to the layout tree using `type: username` and\nthe attributes below. Internally it's used to create an\n[Entry](https://docs.gtk.org/gtk4/class.Entry.html) widget\n\n\u003e [!NOTE]\n\u003e\n\u003e The username field is an unique component: If it's defined multiple times only\n\u003e the first username field in the layout tree is used and the other ones are\n\u003e ignored\n\n| Attribute     | Description                                         | Default value           |\n| ------------- | --------------------------------------------------- | ----------------------- |\n| `classes`     | Css classes which are applied to the username field | `[\"input\", \"username\"]` |\n| `placeholder` | Placeholder text                                    | `Username`              |\n\n### Runner dropdown\n\nThe runner dropdown is an optional component which can be used to select which\nrunner should be used on a successful login attempt. Should no `default_runner`\nbe specified in the config the component becomes mandatory since it's not known\nwhich runner to use otherwise. If a `default_runner` is set in the config it's\nvalue is preselected in the dropdown\n\nThe runner dropdown can be added to the layout tree using `type: runner` and the\nattributes below. Internally it's used to create a\n[DropDown](https://docs.gtk.org/gtk4/class.DropDown.html) widget\n\n\u003e [!NOTE]\n\u003e\n\u003e The runner dropdown is an unique component: If it's defined multiple times\n\u003e only the first runner dropdown in the layout tree is used and the other ones\n\u003e are ignored\n\n| Attribute | Description                                          | Default value            |\n| --------- | ---------------------------------------------------- | ------------------------ |\n| `classes` | Css classes which are applied to the runner dropdown | `[\"runner\", \"dropdown\"]` |\n\n### DateTime label\n\nThe datetime label component can be used to display the current date or time. It\ncan be added to the layout tree using `type: datetime` and the attributes below.\nInterally, it's used to create a\n[Label](https://docs.gtk.org/gtk4/class.Label.html) widget\n\n| Attribute  | Description                                                                                       | Default value           |\n| ---------- | ------------------------------------------------------------------------------------------------- | ----------------------- |\n| `classes`  | Css classes which are applied to the datetime label                                               | `[\"label\", \"datetime\"]` |\n| `format`   | Date format in [strftime syntax](https://docs.rs/chrono/latest/chrono/format/strftime/index.html) | `%H:%M`                 |\n| `interval` | Intervall in which the label should be updated in milliseconds                                    | `1000`                  |\n\n### Label\n\nThe label component can be used to display some static text. It can be added to\nthe layout tree using `type: label` and the attributes below. Interally, it's\nused to create a [Label](https://docs.gtk.org/gtk4/class.Label.html) widget\n\n| Attribute | Description                                | Default value |\n| --------- | ------------------------------------------ | ------------- |\n| `classes` | Css classes which are applied to the label | `[\"label\"]`   |\n| `label`   | Text of the label                          | -             |\n\n### Button\n\nThe button component can be used to run some command on click. It can be added to\nthe layout tree using `type: button` and the attributes below. Interally, it's\nused to create a [Button](https://docs.gtk.org/gtk4/class.Button.html) widget\n\n| Attribute | Description                                 | Default value |\n| --------- | ------------------------------------------- | ------------- |\n| `classes` | Css classes which are applied to the button | `[\"button\"]`  |\n| `label`   | Text of the button                          | -             |\n| `command` | Command to run when the button is clicked   | -             |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhysobad%2Fsali","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhysobad%2Fsali","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhysobad%2Fsali/lists"}