Provide an example configuration (with space for more!) (#99)

README.md

@@ -9,10 +9,17 @@ Documentation can be found [here](https://elkowar.github.io/eww/main)
 
 # Contribewwting
 
-If you want to contribute anything, like adding new widgets, features or subcommands, you should definitly do so.
+If you want to contribute anything, like adding new widgets, features or subcommands (Including sample configs), you should definitly do so.
 
 ## Steps
 1. Fork this repo
-2. install dependencies
-3. smash your head against the keyboard from frustration (coding is hard)
-4. open a pull request once you're finished.
+2. Install dependencies
+3. Smash your head against the keyboard from frustration (coding is hard)
+4. Open a pull request once you're finished.
+
+# Examples 
+
+An example of an eww bar: 
+
+![Example 1](./examples/eww-bar/eww-bar.png)
+

docs/content/main/configuration.md

@@ -10,6 +10,8 @@ For specific built in widgets `<box>, <text>, <slider>, etc` see [Widget Documen
 
 ### Placing the configuration file
 
+Note: Example configuration files can be found in the `examples` directory of the repository and are showcased in [Examples](@/main/examples.md).
+
 The configuration file and the scss file should lay in `$XDG_CONFIG_HOME/eww` (or, if unset, `$HOME/.config/eww`). The XML file should be named `eww.xml` and the scss should be named `eww.scss`
 So the directory structure should look like this:
 ```

docs/content/main/examples.md

@@ -0,0 +1,12 @@
++++
+title = "Examples"
+slug = "Sample configs"
+weight = 5
++++
+
+## Example Configurations
+
+These configurations of eww are available in the `examples/` directory of the [repo](https://github.com/elkowar/eww).
+
+An eww bar configuration:
+![Example 1](./examples/eww-bar/eww-bar.png)

examples/eww-bar/eww.scss

@@ -0,0 +1,65 @@
+* {
+  all: unset; //Unsets everything so you can style everything from scratch
+}
+
+//Global Styles
+window {
+  background-color: #121212;
+  color: #ffd5cd;
+  font-family: Iosevka;
+}
+
+button {
+  all: unset;
+  background-color: #121212;
+  padding: 10px;
+}
+
+// Styles on classes (see eww.xml for more information)
+
+.sidestuff slider {
+  all: unset;
+  color: #ffd5cd;
+}
+
+.slider-vol scale trough highlight {
+  all: unset;
+  background-color: #D35D6E;
+  color: #000000;
+  border-radius: 10px;
+}
+.slider-vol scale trough {
+  all: unset;
+  background-color: #4e4e4e;
+  border-radius: 50px;
+  min-height: 3px;
+  min-width: 50px;
+  margin-left: 10px;
+  margin-right: 20px;
+}
+.slider-ram scale trough highlight {
+  all: unset;
+  background-color: #D35D6E;
+  color: #000000;
+  border-radius: 10px;
+}
+.slider-ram scale trough {
+  all: unset;
+  background-color: #4e4e4e;
+  border-radius: 50px;
+  min-height: 3px;
+  min-width: 50px;
+  margin-left: 10px;
+  margin-right: 20px;
+}
+.label-ram {
+  font-size: large;
+}
+.time {
+  padding-right: 10px;
+}
+.workspaces button:hover {
+  color: #D35D6E;
+}
+
+  

examples/eww-bar/eww.xml

@@ -0,0 +1,103 @@
+<!-- The main eww configuration file. This is where your widgets and how they appear on the screen and what they
+contain are defined. -->
+
+<eww>
+  <definitions>
+    <!-- This is the place where you structure your widgets, align them and stuff. -->
+
+    <def name="bar"> <!-- Starts the definition of a widget named main -->
+      <box orientation="h" hexpand="true">
+        <workspaces/>
+        <music/>
+        <sidestuff/>
+      </box>
+    </def>
+    <def name="sidestuff">
+      <box class="sidestuff" orientation="h" space-evenly="false" halign="end">
+          <slider-vol/>
+          <slider-ram/>
+          <time/>
+      </box>
+    </def>
+
+    <def name="workspaces">
+        <box orientation="h" class="workspaces" space-evenly="true" halign="start"> <!-- Your workspaces.-->
+          <button onclick="wmctrl -s 0">1</button>  
+          <button onclick="wmctrl -s 1">2</button>  
+          <button onclick="wmctrl -s 2">3</button>
+          <button onclick="wmctrl -s 3">4</button>  
+          <button onclick="wmctrl -s 4">5</button>  
+          <button onclick="wmctrl -s 5">6</button>  
+          <button onclick="wmctrl -s 6">7</button>  
+          <button onclick="wmctrl -s 7">8</button>  
+          <button onclick="wmctrl -s 8">9</button>  
+        </box>
+    </def>
+    <def name="music">
+        <box orientation="h" class="music" halign="center" space-evenly="false">
+          <!-- An image. We won't be using it, but it might be handy if you ever need it. -->
+          <!-- <image path="/home/user/.config/eww/icons/music.svg"/> -->
+
+             {{music}} <!--This is how you use variables.-->
+        </box>
+    </def>
+    <def name="slider-vol">
+      <!--A basic volume slider-->
+      <box orientation="h" class="slider-vol" space-evenly="false">
+        <box class="label-vol"></box>
+        <scale min="0" max="101" value="{{volume}}" onchange="amixer -D pulse sset Master {}%"/> 
+      </box>
+    </def>
+    <def name="slider-ram">
+      <!--A basic RAM slider-->
+      <box orientation="h" class="slider-ram" space-evenly="false">
+        <box class="label-ram"></box>
+        <scale min="0" active="false" max="101" value="{{ram-used}}"/>
+      </box>
+    </def>
+    <def name="time">
+      <!--Time-->
+      <box class="time">{{hour}}:{{min}} {{month}} {{number_day}}, {{year_full}}</box>
+    </def>
+  </definitions>
+
+  <variables>
+
+	  <!-- Music vars -->
+    <!-- These are your variables. Like they say, they run a script, and then output that to the variable. In
+    the following var, we get music info from playerctl. -->
+	 
+    <script-var name="music" interval="5s">playerctl metadata --format '{{ artist }} - {{ title }}'</script-var>
+
+
+    <!--Volume var-->    
+    <!-- If your vars get too complex to write down here, you can use an external script and paste it's path here as well, as shown below.
+     -->
+
+    <script-var name="volume" interval="16ms">~/.config/eww/scripts/getvol</script-var>
+
+    <!--Date vars-->
+    <script-var name="number_day" interval="5h">date "+%d"</script-var>
+    <script-var name="month" interval="10h">date "+%b"</script-var>
+    <script-var name="min" interval="10s">date "+%M"</script-var>
+    <script-var name="hour" interval="1m">date "+%H"</script-var>
+    <script-var name="year_full" interval="15h">date "+%Y"</script-var>
+
+    <!--RAM var-->
+    <script-var name="ram-used" interval="1s">~/.config/eww/scripts/getram</script-var>
+
+    <!--Battery charge var-->
+    <script-var name="battery-remaining" interval="2m">cat /sys/class/power_supply/BAT0/capacity</script-var>
+
+  </variables>
+
+  <windows>
+    <!-- These are the windows -->
+    <window name="bar">
+      <geometry x="0%" y="0%" width="100%" height="4%"/> <!--Specifies geometry-->
+      <widget>
+        <bar/> <!--This is the def we created earlier-->
+      </widget>
+    </window>
+  </windows>
+</eww>

examples/eww-bar/scripts/getram

@@ -0,0 +1,2 @@
+#!/bin/sh
+printf "%.0f\n" $(free -m | grep Mem | awk '{print ($3/$2)*100}')

examples/eww-bar/scripts/getvol

@@ -0,0 +1,2 @@
+#!/bin/sh
+amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'

src/main.rs

@@ -90,10 +90,8 @@ fn main() {
                 } else {
                     log::info!("Initializing Eww server.");
                     let _ = std::fs::remove_file(&*crate::IPC_SOCKET_PATH);
-
                     println!("Run `eww logs` to see any errors, warnings or information while editing your configuration.");
                     server::initialize_server(config)?;
-
                 }
             }
         }

src/server.rs

@@ -20,7 +20,7 @@ pub fn initialize_server(config_dir_override: Option<std::path::PathBuf>) -> Res
     });
     let (ui_send, mut ui_recv) = tokio::sync::mpsc::unbounded_channel();
 
-    let config_file_path = config_dir_override.unwrap_or(crate::CONFIG_DIR.join("eww.xml")); 
+    let config_file_path = config_dir_override.unwrap_or(crate::CONFIG_DIR.join("eww.xml"));
 
     let config_dir = config_file_path
         .parent()