sali

sali is a toolkit to easily build greetd frontends

The goal of this project is to create an easy-to-use and easy-to-understand way of builing greetd frontends using gtk4 components. It allows to create a login frontend in a fully declarative way without writing any code whilst it's main features are:

• Creating a custom layout tree using predefined components
• Selecting between one or more run configurations

Dependencies

You'll need the following dependencies installed on your system:

• gtk4
• gtk4-layer-shell

Depending on your distribution the names may differ, the above names are for the Arch and AUR packages

Configuration

Everything is configured through a yaml configuration file which is per default located at ~/.config/sali/config.yaml. A custom path can be specified using the --config or -c argument. It supports the following fields:

Field	Description	Default value
monitors	Map of monitor configurations which assigns a name for each monitor	-
main_monitor	Name of the monitor on which the layout tree should be rendered	-
username	Optional default username which is prefilled in the username field	none
styles	Array of paths from where to load stylesheets. It supports css as well as scss stylesheets	[]
classes	Css class names which are used to indicate some states, the fields are defined here	Default Classes
runners	Map of run configurations which assigns a name for each runner	-
default_runner	Name of the runner which should be preselected in the runner dropdown	none
layout	The layout tree of the window on the main monitor	Default Layout

The following is an example configuration:

monitors:
  left:
    output: DP-1
    background: /path/to/left/background/image.jpg
  center:
    output: DP-2
    background: /path/to/center/background/image.jpg
  right:
    output: DP-3
    background: [255, 0, 255]

main_monitor: center

styles: [ "~/.config/sali/styles.scss" ]

runners:
  hyprland:
    display_name: Hyprland
    run: Hyprland &> /tmp/hyprland-session.log
    exit_cmd: hyprctl dispatch exit

default_runner: hyprland

layout:
  type: box
  halign: fill
  valign: fill
  children:
    - type: box
      classes: [ "container" ]
      children:
        - type: datetime
    - type: box
      classes: [ "container" ]
      children:
        - type: username
        - type: password

Monitor

A monitor is a representation of a display output. If a background is set a new background layer window is created for this monitor

Field	Description	Default value
output	Name of the display output on this monitor (e.g. DP-1)	-
background	Background of the monitor, either path to a background image or rgb color in array form (e.g. [255, 0, 255])	-

Classes

A set of css classes which are applied to windows which can't be set through the layout tree or which are applied to components based on some conditions

Field	Description	Default value
background	Css classes which are applied to the background windows	["background"]
window	Css classes which are applied to the window holding the layout tree	["window"]
field_error	Css class which is applied to the username/password fields when there was a login error	error
field_empty	Css class which is applied to the username/password fields when they are empty	empty

Runner

A run configuration which is executed when a login attempt succeeds

Field	Description	Default value
display_name	The name displayed in the runner dropdown when this runner is selected	-
run	The command to run when a login attempt with this runner succeeds	-
env	A list of environment variables to set for the commands	[]
exit_cmd	Command to run aftera successfuly login attempt to exit the greeter environment By default it simply exists the sali application	none

Layout

The layout is the main part of the configuration. It specifies a node tree in which your UI components should be ordered. Each component directly maps to a gtk4 component which should make styling pretty straight forward.

In the following section you'll see a detailed documentation of all components available. Should a gtk4 component you need be missing feel free to open an issue. Please keep in mind the goal of this project is not to become the next gtk wrapper for creating widgets like ags or eww but rather be a toolkit for easily creating greetd frontends using gtk

Box

The box component is the main building block for any layout. It is the only component which can hold children and it can be used for alignment

A box component can be added to the layout tree using type: box and the attributes below. Internally it's used to create an Box widget

Attribute	Description	Default value
classes	Css classes which are applied to the box	["box"]
halign	Horizontal alignment, either: center, fill, start, end, baseline or start	center
valign	Vertical alignment, either: center, fill, start, end, baseline or start	center
hexpand	Boolean whether the box should expand horizontally	true
vexpand	Boolean whether the box should expand vertically	true
width	Requested width in pixels	500
spacing	Spacing between the children of the box in pixels	12
orientation	Orientation of the children, either: vertical or horizontal	vertical
children	Array of components which are nested inside the box	[]

Password field

The password field is a mandatory component which is used to enter the password for the user. It can be added to the layout tree using type: password and the attributes below. Internally it's used to create an Entry widget which has it's characters set to invisible

Note

The password field is an unique component: If it's defined multiple times only the first password field in the layout tree is used and the other ones are ignored

Attribute	Description	Default value
classes	Css classes which are applied to the password field	["input", "password"]
placeholder	Placeholder text	Password

Username field

The username field is an optional component which is used to enter the username for the user to log in. Should no username be specified in the config the component becomes mandatory since it's not known for which user the login attempt is otherwise. If an username is set in the config it's value is prefilled into the input field

The username field can be added to the layout tree using type: username and the attributes below. Internally it's used to create an Entry widget

Note

The username field is an unique component: If it's defined multiple times only the first username field in the layout tree is used and the other ones are ignored

Attribute	Description	Default value
classes	Css classes which are applied to the username field	["input", "username"]
placeholder	Placeholder text	Username

Runner dropdown

The runner dropdown is an optional component which can be used to select which runner should be used on a successful login attempt. Should no default_runner be specified in the config the component becomes mandatory since it's not known which runner to use otherwise. If a default_runner is set in the config it's value is preselected in the dropdown

The runner dropdown can be added to the layout tree using type: runner and the attributes below. Internally it's used to create a DropDown widget

Note

The runner dropdown is an unique component: If it's defined multiple times only the first runner dropdown in the layout tree is used and the other ones are ignored

Attribute	Description	Default value
classes	Css classes which are applied to the runner dropdown	["runner", "dropdown"]

DateTime label

The datetime label component can be used to display the current date or time. It can be added to the layout tree using type: datetime and the attributes below. Interally, it's used to create a Label widget

Attribute	Description	Default value
classes	Css classes which are applied to the datetime label	["label", "datetime"]
format	Date format in strftime syntax	%H:%M
interval	Intervall in which the label should be updated in milliseconds	1000

Label

The label component can be used to display some static text. It can be added to the layout tree using type: label and the attributes below. Interally, it's used to create a Label widget

Attribute	Description	Default value
classes	Css classes which are applied to the label	["label"]
label	Text of the label	-

Button

The button component can be used to run some command on click. It can be added to the layout tree using type: button and the attributes below. Interally, it's used to create a Button widget

Attribute	Description	Default value
classes	Css classes which are applied to the button	["button"]
label	Text of the button	-
command	Command to run when the button is clicked	-