<div align="center">

</div>

👋 Introduction

Greetings, visitors. This is a repository of various useless GUI widgets that may or, may not enchance the look of your current desktop interface. I will walk you through each and every step of the installation process so, make sure to hit that lik- follow everything in a step-by-step fashion.

And if you are here to borrow code then you may skip this README <samp>Obviously</samp>.

🚒 Procedure

A brief explanation of explanation (explanception!). This section is optional but it wouldn't hurt to gloss over it.

• Introduction, brief description and greetings.
• Procedure, explanception.
• Showcase. Brief showcase, two screenshots of the project in action.
• Assumptions. Conditions and constraints.
• Structure. Project structure and design decisions.
• <samp>MAKE IT STOP!</samp>
• Dependencies. Modules, packages, scripts and resources that are required.
• Configuration. Setting things up.
• Hacking. Advanced configuration.
• Gallery.
• Samples.
• End Goals.
• Not Goals.
• Tips. Useless shit.
• FAQ.
• Credits. Acknowledgements.
• TODOs.
• License.

🖼 Showcase

🤔 Assumptions

List of conditions and constraints that are needed to be fulfilled. This section solely to reduce some headaches. This is done because I do not want to spend an extensive amount of time writing instructions for several Linux distributions.

I will choose Archlinux as a reference frame as I have only used Archlinux, Manjaro and EndeavourOS in the past. So, following are roughly some assumptions that I will follow:

• You are using either Archlinux or, an Arch-based distro like Manjaro.
• You already have an editor, a browser and necessary utilities installed like sudo, git, etc.
• You have python installed.
• You are using an AUR helper.
• You are using bspwm as your window manager.
• You are using sxhkd as your keyboard daemon.
• You use pulseaudio.

🌿 Structure

This is an important section for those who want to borrow some piece of functionality for use in their projects. This section will paint a general idea of how stuff is being linked to one another so, you can have a general idea for handling or, understanding a bug if one appears (which it will at some point).

🌿 General structure

├── assets
├── src
│   ├── scss
│   ├── shell
│   └── yuck
└── themes

• assets contains images, graphics and svgs for use in the project.
• src.scss contains all theming files. Theming is done using SCSS. So, all of the files in this directory will also be SCSS.
• src.yuck contains markup files, all of which are of YUCK filetype.
• src.shell contains various scripts.
• themes this will also contain only SCSS files. <samp>Why not have them in src.scss then?</samp> Because organization. That's it.

🌿 src substructure

This structure will seem familiar to webdevs.

src
├── scss
│   ├── bolt
│   ├── lumin
│   └── vertigo
└── yuck
    ├── bolt
    ├── lumin
    └── vertigo

As you might have guessed. The modules in the scss directory, style the classes that are defined in the yuck directory. For instance, the module lumin will have scss.lumin which will contain styling specific to widgets defined in yuck.lumin only.

📚 Style Overrides

There is a _override.scss file which supplied for the purpose of overriding and testing your own stylings. I have made this in order to contain different designs for the same widget.

Layouts

There is a _layout.yuck in every widget module (eg: src/yuck/lumin/_layout.yuck) which acts like a mini-configuration. Tweak the values if you wish to do so 😉.

The above is the transparent version of the bar which is different to that shown in the showcase.

🔽 Dependencies

This section is divided into 2 parts:

• Main Dependencies
• Python Dependencies

🔽 Main Dependencies

Execute this in your terminal <samp>(if you dare.)</samp>.

yay --sync base-devel rustup python python-pip eww-git  \
  dunst bspwm sxkhd gobject-introspection imagemagick   \
  mpd mpc playerctl pamixer rofi redshift zsh jq todo-bin --needed
# NOTE: use paru or, a AUR helper of your choice or, do the dirty work yourself.

• rustup is needed for compiling eww.
• For pipewire users you need to replace all of the matches of pamixer in this repository with appropriate commands. You may use nvim-telescope's live-grep feature to get the matches conveniently and elegantly.
• For dunst you need to have have a specific configuration, which you can grab from the Samples section.
• And it should be a given that bspwm and sxkhd are already configured.

🔽 Python Dependencies

Inspect the packages that you are about to install from requirements.txt. Then run the following command in your terminal while in vile's root.

But, before that we need to create a .venv as the PEP 0668 is clinically insane.

cd ~/.config/eww
python -m venv .venv
source ./.venv/bin/activate
pip install --requirement=requirements.txt

Configuration

Start by placing vile into ~/.config and rename vile to eww. Or, you can use symlinks as shown below.

git clone --depth 1 https://github.com/dharmx/vile.git ~/Downloads
ln -s ~/Downloads/vile ~/.config/eww
## do not remove ~/Downloads/vile

Now, right after doing that you need to make the scripts executable.

chmod +x ~/Downloads/vile/src/shell/*

You need to install the fonts that are being used in this repo. Which can be found here. Lastly, do not forget to update the font caches after you do install them fc-cache -frv.

Caviar Dreams
Sagetarius
Phosphor
Dosis
Poiret One
monoMMM_5
Iosevka
Modum
Koulen
Feather
Lato

This is a very very very important section. As the previous one, this section is also divided into various parts.

• Environment Variables.
• API Setups
• JSON / Script Configurations
• Layout Configurations
• Dependency Configurations
• Headless Testing / Trial Run.

Environment Variables

Start by reading the xdg-utils and xdg-vars articles from the ArchWiki. Then you need to setup those variables by adding some lines in your shellrc. Anyways, I will be using ZSH for this so, we will add those environment variables by editing the ~/.zshenv file first (create it if it doesn't exist).

Then just append these lines to the file.

export XDG_CONFIG_HOME="$HOME/.config"
export XDG_CACHE_HOME="$HOME/.cache"
export XDG_MUSIC_DIR="$HOME/Music"
export XDG_PICTURES_DIR="$HOME/Pictures"

On top of that you would need to add these as well.

# NOTE: Add defaults of your choice as these may not be your taste.
export TERMINAL=st ## kitty for example
export BROWSER=firefox ## brave for example
export VISUAL=neovide ## nano for example
export EDITOR=nvim ## vim for example

See more info on what these variables do here.

API Setups

Starting with the easiest. Firstly you need to go to the OpenWeather website and grab your API key. Do this by creating an account and logging into the site. Then go to the api_keys tab and press the generate button after typing a name in the textfield. And if you already have a default key then use that instead.

Anyways, take a note of that key value as we will need it later.

JSON and Script Configurations

Copy the ewwrc from the Samples section and remove all of the comments. Then the first thing you'd need to do is add the tokens that you noted from the previous section. For example the tokens.openweather field.

Note: You may skip this if you do not plan to use clime and chrono see the Galley section.

Take a l