Prerequisites ​

You need to have SSH setup with GitHub.

To gain access to Marble, you need to be a sponsor. There are four tiers you can choose from: $10 to $25 a month. There are no differences between tiers other than price.

You can start a subscription and immediately cancel it, which will give you access for a month and revoke access at the end of the period.

Arch ​

Required dependencies

yay -S aylurs-gtk-shell-git libastal-meta fzf brightnessctl pnpm \
  libadwaita gtk4-layer-shell glycin glycin-gtk4 evolution-data-server

Nix ​

Example devShell using AGS.

# flake.nix
{
  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";

    astal = {
      url = "github:aylur/astal";
      inputs.nixpkgs.follows = "nixpkgs";
    };

    ags = {
      url = "github:aylur/ags";
      inputs.nixpkgs.follows = "nixpkgs";
      inputs.astal.follows = "astal";
    };

    marble = {
      url = "git+ssh://git@github.com/marble-shell/shell";
      inputs.nixpkgs.follows = "nixpkgs";
      inputs.astal.follows = "astal";
    };
  };

  outputs = inputs: let
    pkgs = inputs.nixpkgs.legacyPackages.x86_64-linux;
    ags = inputs.ags.packages.x86_64-linux;
    marble = inputs.marble.packages.x86_64-linux;
  in {
    devShells = {
      x86_64-linux = {
        default = pkgs.mkShell {
          buildInputs = [
            pkgs.pnpm
            (ags.default.override {
              extraPackages = [marble.marbleSetupHook];
            })
          ];
        };
      };
    };
  };
}

Enter dev shell

nix develop

Project Setup ​

1. Install npm dependencies

   sh

   mkdir my-shell
   cd my-shell
   pnpm add gnim github:marble-shell/kit
   pnpm add github:aylur/ags # optional
   pnpm add gnofi # optional

2. Generate types

   sh

   ags types -d .

   TIP

   Add @girs directory to .gitignore.

3. Create tsconfig.json in the root directory.

   json

   { "extends": "marble/tsconfig.json" }

4. Create app.tsx in the root directory which is going to be the entry point of the application.

   tsx

   import app from "ags/gtk4/app"
   import { Bar, Box, ClockLabel } from "marble/components"
   
   app.start({
     main() {
       void (
         <Bar
           position="top"
           center={
             <Box>
               <ClockLabel />
             </Box>
           }
         />
       )
     },
   })

Exmaple ​

For an example on how to use the components you can look at Aylur/marble-shell.