From a6da973ddc540604eea4333abf289e726c5e7f99 Mon Sep 17 00:00:00 2001 From: streetturtle Date: Mon, 24 Sep 2018 19:18:45 -0400 Subject: [PATCH] update instructions --- _widgets/brightness-widget.md | 30 +++++++++++++++++--- _widgets/cpu-widget.md | 32 +++++++++++++-------- _widgets/ram-widget.md | 25 +++++++++++++++-- _widgets/spotify-shell.md | 8 ++++-- _widgets/spotify-widget.md | 44 +++++++++++++++++++++-------- _widgets/translate-shell.md | 7 ++++- _widgets/volume-widget.md | 2 ++ _widgets/volumearc-widget.md | 47 +++++++++++++++++++++---------- _widgets/volumebar-widget.md | 52 +++++++++++++++++++++++++---------- _widgets/weather-widget.md | 44 ++++++++++++++++++++++++----- assets/css/style.scss | 12 +++++++- assets/css/syntax1.scss | 5 ++-- 12 files changed, 236 insertions(+), 72 deletions(-) diff --git a/_widgets/brightness-widget.md b/_widgets/brightness-widget.md index 43f706c..eec0aa8 100644 --- a/_widgets/brightness-widget.md +++ b/_widgets/brightness-widget.md @@ -4,13 +4,11 @@ layout: page # Brightness widget -![Brightness widget]({{'/assets/img/screenshots/brightness-wid-1.png' | relative_url }}) - -This widget represents current brightness level. +This widget represents current brightness level: ![Brightness widget]({{'/assets/img/screenshots/brightness-wid-1.png' | relative_url }}) ## Installation -Firstly you need to get the current brightness level. There are two options: +First you need to get the current brightness level. There are two options: - using `xbacklight` command (depending on your video card (I guess) it may or may not work) @@ -34,8 +32,32 @@ Firstly you need to get the current brightness level. There are two options: light -G 49.18 ``` + Depending on the chosen option change `GET_BRIGHTNESS_CMD` variable in **brightness.lua**. +Then clone this repo under **~/.config/awesome/**: + +```bash +git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ +``` + +Require spotify-widget at the beginning of **rc.lua**: + +```lua +local brightness_widget = require("awesome-wm-widgets.brightness-widget.brightness") +``` + +Add widget to the tasklist: + +```lua +s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + brightness_widget, + ... +``` + Then in **rc.lua** add the import on top of the file and then add widget to the wibox: ```lua diff --git a/_widgets/cpu-widget.md b/_widgets/cpu-widget.md index e97d1d0..4d2dd2c 100644 --- a/_widgets/cpu-widget.md +++ b/_widgets/cpu-widget.md @@ -23,15 +23,25 @@ and calculates the percentage. ## Installation -Clone/download repo and use widget in **rc.lua**: +1. Clone this repo under **~/.config/awesome/** -```lua -require("awesome-wm-widgets.cpu-widget.cpu-widget") -... -s.mytasklist, -- Middle widget - { -- Right widgets - layout = wibox.layout.fixed.horizontal, - ... - cpu_widget, - ... -``` + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + +1. Require spotify-widget at the beginning of **rc.lua**: + + ```lua + local cpu_widget = require("awesome-wm-widgets.cpu-widget.cpu-widget") + ``` + +1. Add widget to the tasklist: + + ```lua + s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + cpu_widget, + ... + ``` diff --git a/_widgets/ram-widget.md b/_widgets/ram-widget.md index 7f52ced..a1eb6ff 100644 --- a/_widgets/ram-widget.md +++ b/_widgets/ram-widget.md @@ -5,8 +5,29 @@ layout: page This widget shows the RAM usage. When clicked another widget appears with more detailed information: -![screenshot]({{'/assets/img/screenshots/ram-widget.gif' | relative_url }}) +![screenshot]({{'/assets/img/screenshots/ram-widget.gif' | relative_url }}){:.center-image} ## Installation -Please refer to the [installation](https://github.com/streetturtle/awesome-wm-widgets#installation) section of the repo. +1. Clone this repo under **~/.config/awesome/** + + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + +1. Require spotify-widget at the beginning of **rc.lua**: + + ```lua + local ram_widget = require("awesome-wm-widgets.ram-widget.ram-widget") + ``` + +1. Add widget to the tasklist: + + ```lua + s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + ram_widget, + ... + ``` diff --git a/_widgets/spotify-shell.md b/_widgets/spotify-shell.md index f2d8dc4..754ac93 100644 --- a/_widgets/spotify-shell.md +++ b/_widgets/spotify-shell.md @@ -4,7 +4,7 @@ layout: page # Spotify Shell -![demo]({{'/assets/img/screenshots/spotify-shell.gif' | relative_url }}) +![demo]({{'/assets/img/screenshots/spotify-shell.gif' | relative_url }}){:.center-image} ## Features @@ -61,6 +61,10 @@ Keyboard navigation (copied from [`awful.prompt`](https://awesomewm.org/doc/api/ 1. Clone this repo under **~/.config/awesome/** + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + 1. Require spotify-shell at the beginning of **rc.lua**: ```lua @@ -70,7 +74,7 @@ Keyboard navigation (copied from [`awful.prompt`](https://awesomewm.org/doc/api/ 1. Add a shortcut which will show Spotify Shell widget: ```lua - awful.key({ modkey, }, "d", function () spotify_shell.launch() end, {description = "spotify shell", group = "music"}), + awful.key({ modkey, }, "d", function () spotify_shell.launch() end, {description = "spotify shell", group = "music"}), ``` 1. It uses icon from [Papirus Icon Theme](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme). So you should either install this icon theme, or download an icon you want to use and provide path to it in **spotify-shell.lua**. diff --git a/_widgets/spotify-widget.md b/_widgets/spotify-widget.md index 0993c88..2d63bf6 100644 --- a/_widgets/spotify-widget.md +++ b/_widgets/spotify-widget.md @@ -20,17 +20,37 @@ Note that widget uses the Arc icon theme, so it should be [installed](https://gi ## Installation -First you need to have spotify CLI installed. Here is how you can do it (except widget part): [pavelmakhov.com/2016/02/awesome-wm-spotify](http://pavelmakhov.com/2016/02/awesome-wm-spotify) +1. Install [sp](https://gist.github.com/streetturtle/fa6258f3ff7b17747ee3) - CLI client for [Spotify for Linux](https://www.spotify.com/ca-en/download/linux/): -To use this widget clone repo under **~/.config/awesome/** and then add it in **rc.lua**: + ```bash + $ sudo git clone https://gist.github.com/fa6258f3ff7b17747ee3.git ~/dev/ + $ sudo ln -s ~/dev/sp /usr/local/bin/ + ``` + + Check if it works by running `sp help`. + +1. Get an 'id' and 'secret' from [developer.spotify.com](https://beta.developer.spotify.com/documentation/general/guides/app-settings/) and paste it in the header of the `sp` (`SP_ID` and `SP_SECRET`) - this enables search feature. + +1. Clone this repo under **~/.config/awesome/** + + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + +1. Require spotify-widget at the beginning of **rc.lua**: + + ```lua + local spotify_widget = require("awesome-wm-widgets.spotify-widget.spotify") + ``` + +1. Add widget to the tasklist: + + ```lua + s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + spotify_widget, + ... + ``` -```lua -local spotify_widget = require("awesome-wm-widgets.spotify-widget.spotify") -... -s.mytasklist, -- Middle widget - { -- Right widgets - layout = wibox.layout.fixed.horizontal, - ... - spotify_widget, - ... -``` diff --git a/_widgets/translate-shell.md b/_widgets/translate-shell.md index 20c5856..fc1c5b1 100644 --- a/_widgets/translate-shell.md +++ b/_widgets/translate-shell.md @@ -5,7 +5,7 @@ layout: page This widget allows quickly translate words or phrases without opening a browser - just using Awesome. To provide direction of the translation add the 2 letters code of the source and target languages at the end of the phrase, for example _hello enfr_ will translate _hello_ from English to French. This widget is based on [Yandex.Translate API](https://tech.yandex.com/translate/). -![demo]({{'/assets/img/screenshots/translate-shell.gif' | relative_url }}) +![demo]({{'/assets/img/screenshots/translate-shell.gif' | relative_url }}){:.center-image} ## Controls @@ -16,6 +16,11 @@ This widget allows quickly translate words or phrases without opening a browser ## Installation 1. Clone repo under **~/.config/awesome/** + + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + 1. Get an [API key](https://translate.yandex.com/developers/keys) and paste it in **translate.lua** as value of the `API_KEY` variable 1. Require widget in **rc.lua**: diff --git a/_widgets/volume-widget.md b/_widgets/volume-widget.md index a1146c2..6cd8bed 100644 --- a/_widgets/volume-widget.md +++ b/_widgets/volume-widget.md @@ -10,6 +10,8 @@ Note that widget uses the Arc icon theme, so it should be [installed](https://gi ## Installation + + - clone/copy **volume.lua** file; - include `volume.lua` and add volume widget to your wibox in rc.lua: diff --git a/_widgets/volumearc-widget.md b/_widgets/volumearc-widget.md index 8b8702b..998a080 100644 --- a/_widgets/volumearc-widget.md +++ b/_widgets/volumearc-widget.md @@ -5,24 +5,41 @@ layout: page Almost the same as [volumebar widget](https://github.com/streetturtle/awesome-wm-widgets/tree/master/volumebar-widget), but using arcchart: -![screenshot]({{'/assets/img/screenshots/volumearc-widget.gif' | relative_url }}) - -Supports: - - scroll up - increase volume, - - scroll down - decrease volume, - - left click - mute/unmute. +![screenshot]({{'/assets/img/screenshots/volumearc-widget.gif' | relative_url }}){:.center-image} ## Installation -Clone repo, include widget and use it in **rc.lua**: +1. Clone this repo under **~/.config/awesome/** + + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + +1. Require volumearc widget at the beginning of **rc.lua**: + + ```lua + local volumearc_widget = require("awesome-wm-widgets.volumearc-widget.volumearc") + ``` + +1. Add widget to the tasklist: + + ```lua + s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + volumearc_widget, + ... + ``` + +## Control volume + +To mute/unmute click on the widget. To increase/decrease volume scroll up or down when mouse cursor is over the widget. + +If you want to control volume level by keyboard shortcuts add following lines in shortcut section of the **rc.lua** (the commands could be slightly different depending on your PC configuration): ```lua -require("volumearc") -... -s.mytasklist, -- Middle widget - { -- Right widgets - layout = wibox.layout.fixed.horizontal, - ... - volumearc_widget, - ... +awful.key({ modkey}, "[", function () awful.spawn("amixer -D pulse sset Master 5%-") end, {description = "increase volume", group = "custom"}), +awful.key({ modkey}, "]", function () awful.spawn("amixer -D pulse sset Master 5%+") end, {description = "decrease volume", group = "custom"}), +awful.key({ modkey}, "\", function () awful.spawn("amixer -D pulse set Master +1 toggle") end, {description = "mute volume", group = "custom"}), ``` diff --git a/_widgets/volumebar-widget.md b/_widgets/volumebar-widget.md index 8c3848d..35c5b19 100644 --- a/_widgets/volumebar-widget.md +++ b/_widgets/volumebar-widget.md @@ -5,27 +5,49 @@ layout: page Almost the same as volume widget, but more minimalistic: -![screenshot]({{'/assets/img/screenshots/volumebar-widget.gif' | relative_url }}) +![screenshot]({{'/assets/img/screenshots/volumebar-widget.gif' | relative_url }}){:.center-image} Supports - scroll up - increase volume, - scroll down - decrease volume, - left click - mute/unmute. - ## Installation - - Clone repo, include widget and use it in **rc.lua**: - - ```lua - require("volumebar") -... -s.mytasklist, -- Middle widget - { -- Right widgets - layout = wibox.layout.fixed.horizontal, - ... - volumebar_widget, - ... - ``` +## Installation + +1. Clone this repo under **~/.config/awesome/** + + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + +1. Require volumearc widget at the beginning of **rc.lua**: + + ```lua + local volumebar_widget = require("awesome-wm-widgets.volumebar-widget.volumebar") + ``` + +1. Add widget to the tasklist: + + ```lua + s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + volumebar_widget, + ... + ``` + +## Control volume + +To mute/unmute click on the widget. To increase/decrease volume scroll up or down when mouse cursor is over the widget. + +If you want to control volume level by keyboard shortcuts add following lines in shortcut section of the **rc.lua** (the commands could be slightly different depending on your PC configuration): + +```lua +awful.key({ modkey}, "[", function () awful.spawn("amixer -D pulse sset Master 5%-") end, {description = "increase volume", group = "custom"}), +awful.key({ modkey}, "]", function () awful.spawn("amixer -D pulse sset Master 5%+") end, {description = "decrease volume", group = "custom"}), +awful.key({ modkey}, "\", function () awful.spawn("amixer -D pulse set Master +1 toggle") end, {description = "mute volume", group = "custom"}), +``` ## Troubleshooting diff --git a/_widgets/weather-widget.md b/_widgets/weather-widget.md index 3a3e2ad..a1ddac5 100644 --- a/_widgets/weather-widget.md +++ b/_widgets/weather-widget.md @@ -3,18 +3,48 @@ layout: page --- # Weather widget -![Weather Widget]({{'/assets/img/screenshots/weather-widget.png' | relative_url }}) +![Weather Widget]({{'/assets/img/screenshots/weather-widget.png' | relative_url }}){:.center-image} Note that widget uses the Arc icon theme, so it should be [installed](https://github.com/horst3180/arc-icon-theme#installation) first under **/usr/share/icons/Arc/** folder. ## Installation - - install lua socket -```bash -$ sudo apt-get install lua-socket -``` +1. Install lua socket - to make HTTP calls to get the weather information. + + ```bash + $ sudo apt-get install lua-socket + ``` + +1. Download json parser for lua from [github.com/rxi/json.lua](https://github.com/rxi/json.lua) and place it under **~/.config/awesome/** (don't forget to star a repo ): + + ```bash + wget -P ~/.config/awesome/ https://raw.githubusercontent.com/rxi/json.lua/master/json.lua + ``` + +1. Get Open Weather Map app id here: [openweathermap.org/appid](https://openweathermap.org/appid) and place it in the widget's header. + +1. Clone this repo under **~/.config/awesome/**: + + ```bash + git clone https://github.com/streetturtle/awesome-wm-widgets.git ~/.config/awesome/ + ``` + +1. Require volumearc widget at the beginning of **rc.lua**: + + ```lua + local weather_widget = require("awesome-wm-widgets.weather-widget.weather") + ``` + +1. Add widget to the tasklist: + + ```lua + s.mytasklist, -- Middle widget + { -- Right widgets + layout = wibox.layout.fixed.horizontal, + ... + weather_widget, + ... + ``` - - download json parser for lua: https://github.com/rxi/json.lua - - get Open Weather Map app id here: https://openweathermap.org/appid You can read how it works in more details [here](http://pavelmakhov.com/2017/02/weather-widget-for-awesome-wm) diff --git a/assets/css/style.scss b/assets/css/style.scss index 1778263..9cabd6b 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -101,6 +101,12 @@ footer { } } +.section { + ul > li { + list-style-type: disc; + } +} + .widget { transition: all 2s linear; } @@ -138,6 +144,7 @@ header, main, footer { } #particles-js { + padding-left: 300px; height: 193px; width: 100%; position: absolute; @@ -149,7 +156,6 @@ header, main, footer { display: block; } - .fade-in { opacity: 1; animation-name: fadeInOpacity; @@ -192,6 +198,10 @@ img { max-width: 100%; height: auto; } +img.center-image { + margin: 0 auto; + display: block; +} @font-face { diff --git a/assets/css/syntax1.scss b/assets/css/syntax1.scss index 21c4cc1..39a6c5b 100644 --- a/assets/css/syntax1.scss +++ b/assets/css/syntax1.scss @@ -21,6 +21,7 @@ $attributes: #9876AA; $comments: #75715e; $linenos: #A9B7C6; .highlight, .highlighter-rouge { + font-size: 14px; margin-bottom: 1.5em; color: $foreground; background-color: $background; @@ -59,8 +60,8 @@ $linenos: #A9B7C6; -moz-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.5); } -.highlight, .highlighter-rouge -img, +.highlight, .highlighter-rouge, +p > img, p > nobr > code, li > code, h5 > code,