docs(wiki): update screenshots and examples

examples/config.corn

@@ -4,19 +4,20 @@ let {
         all_monitors = false
         name_map = {
             1 = "ﭮ"
-            2 = ""
+            2 = "icon:firefox"
             3 = ""
-            Games = ""
+            Games = "icon:steam"
             Code = ""
         }
     }
 
+    $focused = { type = "focused" }
+
     $launcher = {
         type = "launcher"
         favorites = ["firefox" "discord" "Steam"]
         show_names = false
         show_icons = true
-        icon_theme = "Paper"
     }
 
     $mpd_local = { type = "mpd" music_dir = "/home/jake/Music" }
@@ -24,52 +25,65 @@ let {
 
     $sys_info = {
         type = "sys_info"
-        format = ["{cpu_percent}% " "{memory_percent}% "]
+
+        interval.memory = 30
+        interval.cpu = 1
+        interval.temps = 5
+        interval.disks = 300
+        interval.networks = 3
+
+        format = [
+            " {cpu_percent}% | {temp_c:k10temp_Tccd1}°C"
+            " {memory_used} / {memory_total} GB ({memory_percent}%)"
+            "| {swap_used} / {swap_total} GB ({swap_percent}%)"
+            " {disk_used:/} / {disk_total:/} GB ({disk_percent:/}%)"
+            "李 {net_down:enp39s0} / {net_up:enp39s0} Mbps"
+            "猪 {load_average:1} | {load_average:5} | {load_average:15}"
+            " {uptime}"
+        ]
     }
 
     $tray = { type = "tray" }
-    $clock = {
-        type = "clock"
-        // show-if = "500:[ $(($(date +%s) % 2)) -eq 0 ]"
-        show_if.cmd = "exit 0"
-        show_if.interval = 500
-    }
+
+    $clock = { type = "clock" }
 
     $phone_battery = {
         type = "script"
         cmd = "/home/jake/bin/phone-battery"
+
+        show_if.cmd = "/home/jake/bin/phone-connected"
+        show_if.interval = 500
     }
 
-    $log_tail = {
-        type = "script"
-        path = "tail -f /home/jake/.local/share/ironbar/error.log"
-        mode = "watch"
+    // -- begin custom --
+    $button = { type = "button" name="power-btn" label = "" on_click = "popup:toggle" }
+
+    $popup = {
+        type = "box"
+        orientation = "vertical"
+        widgets = [
+            { type = "label" name = "header" label = "Power menu" }
+            {
+                type = "box"
+                widgets = [
+                    { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
+                    { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
+                ]
+            }
+            { type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" }
+        ]
     }
 
     $power_menu = {
         type = "custom"
         class = "power-menu"
 
-        bar = [ { type = "button" name="power-btn" label = "" on_click = "popup:toggle" } ]
-
-        popup = [ {
-            type = "box"
-            orientation = "vertical"
-            widgets = [
-                { type = "label" name = "header" label = "Power menu" }
-                {
-                    type = "box"
-                    widgets = [
-                        { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
-                        { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
-                    ]
-                }
-                { type = "label" name = "uptime" label = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}" }
-            ]
-        } ]
+        bar = [ $button ]
+        popup = [ $popup ]
 
         tooltip = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"
     }
+    // -- end custom --
 
     $left = [ $workspaces $launcher ]
     $right = [ $mpd_local $mpd_server $phone_battery $sys_info $power_menu $clock ]

examples/config.json

@@ -1,43 +1,133 @@
 {
+  "anchor_to_edges": true,
+  "end": [
+    {
+      "music_dir": "/home/jake/Music",
+      "player_type": "mpd",
+      "truncate": {
+        "length": 100,
+        "mode": "end"
+      },
+      "type": "music"
+    },
+    {
+      "host": "chloe:6600",
+      "player_type": "mpd",
+      "truncate": "end",
+      "type": "music"
+    },
+    {
+      "cmd": "/home/jake/bin/phone-battery",
+      "show_if": {
+        "cmd": "/home/jake/bin/phone-connected",
+        "interval": 500
+      },
+      "type": "script"
+    },
+    {
+      "format": [
+        " {cpu_percent}% | {temp_c:k10temp_Tccd1}°C",
+        " {memory_used} / {memory_total} GB ({memory_percent}%)",
+        "| {swap_used} / {swap_total} GB ({swap_percent}%)",
+        " {disk_used:/} / {disk_total:/} GB ({disk_percent:/}%)",
+        "李 {net_down:enp39s0} / {net_up:enp39s0} Mbps",
+        "猪 {load_average:1} | {load_average:5} | {load_average:15}",
+        " {uptime}"
+      ],
+      "interval": {
+        "cpu": 1,
+        "disks": 300,
+        "memory": 30,
+        "networks": 3,
+        "temps": 5
+      },
+      "type": "sys_info"
+    },
+    {
+      "bar": [
+        {
+          "label": "",
+          "name": "power-btn",
+          "on_click": "popup:toggle",
+          "type": "button"
+        }
+      ],
+      "class": "power-menu",
+      "popup": [
+        {
+          "orientation": "vertical",
+          "type": "box",
+          "widgets": [
+            {
+              "label": "Power menu",
+              "name": "header",
+              "type": "label"
+            },
+            {
+              "type": "box",
+              "widgets": [
+                {
+                  "class": "power-btn",
+                  "label": "<span font-size='40pt'></span>",
+                  "on_click": "!shutdown now",
+                  "type": "button"
+                },
+                {
+                  "class": "power-btn",
+                  "label": "<span font-size='40pt'></span>",
+                  "on_click": "!reboot",
+                  "type": "button"
+                }
+              ]
+            },
+            {
+              "label": "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}",
+              "name": "uptime",
+              "type": "label"
+            }
+          ]
+        }
+      ],
+      "tooltip": "Up: {{30000:uptime -p | cut -d ' ' -f2-}}",
+      "type": "custom"
+    },
+    {
+      "type": "clock"
+    }
+  ],
+  "icon_theme": "Paper",
+  "position": "bottom",
   "start": [
     {
+      "bar": [
+        {
+          "size": 32,
+          "src": "file:///path/to/image.jpg",
+          "type": "image"
+        }
+      ],
+      "type": "custom"
+    },
+    {
+      "all_monitors": false,
+      "name_map": {
+        "1": "ﭮ",
+        "2": "icon:firefox",
+        "3": "",
+        "Code": "",
+        "Games": "icon:steam"
+      },
       "type": "workspaces"
     },
     {
-      "type": "launcher",
-      "icon_theme": "Paper",
       "favorites": [
         "firefox",
         "discord",
         "Steam"
       ],
-      "show_names": false
-    }
-  ],
-  "end": [
-    {
-      "type": "mpd"
-    },
-    {
-      "type": "mpd",
-      "host": "chloe:6600"
-    },
-    {
-      "path": "/home/jake/bin/phone-battery",
-      "type": "script"
-    },
-    {
-      "format": [
-        "{cpu_percent}% ",
-        "{memory_percent}% "
-      ],
-      "type": "sys_info"
-    },
-    {
-      "type": "tray"
-    },
-    {
-      "type": "clock"
+      "show_icons": true,
+      "show_names": false,
+      "type": "launcher"
     }
   ]
-}
+}

examples/config.toml

@@ -0,0 +1,118 @@
+anchor_to_edges = true
+icon_theme = 'Paper'
+position = 'bottom'
+
+[[end]]
+music_dir = '/home/jake/Music'
+player_type = 'mpd'
+type = 'music'
+
+[end.truncate]
+length = 100
+mode = 'end'
+
+[[end]]
+host = 'chloe:6600'
+player_type = 'mpd'
+truncate = 'end'
+type = 'music'
+
+[[end]]
+cmd = '/home/jake/bin/phone-battery'
+type = 'script'
+
+[end.show_if]
+cmd = '/home/jake/bin/phone-connected'
+interval = 500
+
+[[end]]
+type = 'sys_info'
+format = [
+    ' {cpu_percent}% | {temp_c:k10temp_Tccd1}°C',
+    ' {memory_used} / {memory_total} GB ({memory_percent}%)',
+    '| {swap_used} / {swap_total} GB ({swap_percent}%)',
+    ' {disk_used:/} / {disk_total:/} GB ({disk_percent:/}%)',
+    '李 {net_down:enp39s0} / {net_up:enp39s0} Mbps',
+    '猪 {load_average:1} | {load_average:5} | {load_average:15}',
+    ' {uptime}',
+]
+
+[end.interval]
+cpu = 1
+disks = 300
+memory = 30
+networks = 3
+temps = 5
+
+[[end]]
+class = 'power-menu'
+tooltip = '''Up: {{30000:uptime -p | cut -d ' ' -f2-}}'''
+type = 'custom'
+
+[[end.bar]]
+label = ''
+name = 'power-btn'
+on_click = 'popup:toggle'
+type = 'button'
+
+[[end.popup]]
+orientation = 'vertical'
+type = 'box'
+
+[[end.popup.widgets]]
+label = 'Power menu'
+name = 'header'
+type = 'label'
+
+[[end.popup.widgets]]
+type = 'box'
+
+[[end.popup.widgets.widgets]]
+class = 'power-btn'
+label = '''<span font-size='40pt'></span>'''
+on_click = '!shutdown now'
+type = 'button'
+
+[[end.popup.widgets.widgets]]
+class = 'power-btn'
+label = '''<span font-size='40pt'></span>'''
+on_click = '!reboot'
+type = 'button'
+
+[[end.popup.widgets]]
+label = '''Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}'''
+name = 'uptime'
+type = 'label'
+
+[[end]]
+type = 'clock'
+
+[[start]]
+type = 'custom'
+
+[[start.bar]]
+size = 32
+src = 'file:///path/to/image.jpg'
+type = 'image'
+
+[[start]]
+all_monitors = false
+type = 'workspaces'
+
+[start.name_map]
+1 = 'ﭮ'
+2 = 'icon:firefox'
+3 = ''
+Code = ''
+Games = 'icon:steam'
+
+[[start]]
+show_icons = true
+show_names = false
+type = 'launcher'
+favorites = [
+    'firefox',
+    'discord',
+    'Steam',
+]
+

examples/config.yaml

@@ -0,0 +1,97 @@
+anchor_to_edges: true
+icon_theme: Paper
+position: bottom
+
+start:
+  - bar:
+      - size: 32
+        src: file:///path/to/image.jpg
+        type: image
+    type: custom
+
+  - all_monitors: false
+    name_map:
+      '1': ﭮ
+      '2': icon:firefox
+      '3': 
+      Code: 
+      Games: icon:steam
+    type: workspaces
+
+  - favorites:
+      - firefox
+      - discord
+      - Steam
+    show_icons: true
+    show_names: false
+    type: launcher
+
+end:
+  - music_dir: /home/jake/Music
+    player_type: mpd
+    truncate:
+      length: 100
+      mode: end
+    type: music
+
+  - host: chloe:6600
+    player_type: mpd
+    truncate: end
+    type: music
+
+  - cmd: /home/jake/bin/phone-battery
+    show_if:
+      cmd: /home/jake/bin/phone-connected
+      interval: 500
+    type: script
+
+  - format:
+      -  {cpu_percent}% | {temp_c:k10temp_Tccd1}°C
+      -  {memory_used} / {memory_total} GB ({memory_percent}%)
+      - '| {swap_used} / {swap_total} GB ({swap_percent}%)'
+      -  {disk_used:/} / {disk_total:/} GB ({disk_percent:/}%)
+      - 李 {net_down:enp39s0} / {net_up:enp39s0} Mbps
+      - 猪 {load_average:1} | {load_average:5} | {load_average:15}
+      -  {uptime}
+    interval:
+      cpu: 1
+      disks: 300
+      memory: 30
+      networks: 3
+      temps: 5
+    type: sys_info
+
+  - bar:
+      - label: 
+        name: power-btn
+        on_click: popup:toggle
+        type: button
+    class: power-menu
+    popup:
+      - orientation: vertical
+        type: box
+        widgets:
+          - label: Power menu
+            name: header
+            type: label
+          - type: box
+            widgets:
+              - class: power-btn
+                label: <span font-size='40pt'></span>
+                on_click: '!shutdown now'
+                type: button
+              - class: power-btn
+                label: <span font-size='40pt'></span>
+                on_click: '!reboot'
+                type: button
+          - label: 'Uptime: {{30000:uptime -p | cut -d '' '' -f2-}}'
+            name: uptime
+            type: label
+    tooltip: 'Up: {{30000:uptime -p | cut -d '' '' -f2-}}'
+    type: custom
+
+  - type: clock
+
+
+
+

examples/custom.corn

@@ -1,29 +0,0 @@
-let {
-    $button = { type = "button" name="power-btn" label = "" on_click = "popup:toggle" }
-
-    $popup = {
-        type = "box"
-        orientation = "vertical"
-        widgets = [
-            { type = "label" name = "header" label = "Power menu" }
-            {
-                type = "box"
-                widgets = [
-                    { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
-                    { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
-                ]
-            }
-            { type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" }
-        ]
-    }
-
-    $power_menu = {
-        type = "custom"
-        class = "power-menu"
-
-        bar = [ $button ]
-        popup = [ $popup ]
-    }
-} in {
-    end = [ $power_menu { type = "clock" }  ]
-}

examples/style.css

@@ -1,31 +1,19 @@
 * {
     /* `otf-font-awesome` is required to be installed for icons */
     font-family: Noto Sans Nerd Font, sans-serif;
-    /* font-family: 'Jetbrains Mono', monospace;*/
     font-size: 16px;
 
-    /*color: white;*/
-    /*background-color: #2d2d2d;*/
-    /*background-color: red;*/
     border: none;
-
-    /*opacity: 0.4;*/
 }
 
 #bar {
     border-top: 1px solid #424242;
 }
 
-.container {
+.background, .container {
     background-color: #2d2d2d;
 }
 
-/* test  34543*/
-
-#right > * + * {
-    margin-left: 20px;
-}
-
 #workspaces .item {
     color: white;
     background-color: #2d2d2d;
@@ -57,7 +45,7 @@
 
 #launcher .focused {
     color: white;
-    background-color: black;
+    background-color: #1c1c1c;
     border-bottom: 4px solid #6699cc;
 }
 
@@ -66,25 +54,54 @@
     background-color: #8f0a0a;
 }
 
+#popup-launcher .popup-item {
+    color: white;
+    background-color: #2d2d2d;
+    border-radius: 0;
+}
+
+#popup-launcher .popup-item:hover {
+    background-color: #1c1c1c;
+}
+
+#popup-launcher .popup-item:not(:first-child) {
+    border-top: 1px solid white;
+}
+
 #clock {
     color: white;
     background-color: #2d2d2d;
     font-weight: bold;
+    margin-left: 5px;
+}
+
+#clock:hover {
+    background-color: #1c1c1c;
 }
 
 #script {
+    padding-left: 10px;
     color: white;
 }
 
 #sysinfo {
+    margin-left: 10px;
     color: white;
 }
 
+#sysinfo #item {
+    margin-left: 5px;
+}
+
+#tray {
+    margin-left: 10px;
+}
+
 #tray .item {
     background-color: #2d2d2d;
 }
 
-#mpd {
+#music {
     background-color: #2d2d2d;
     color: white;
 }
@@ -119,30 +136,77 @@
     background-color: #6699cc;
 }
 
-#popup-mpd {
+#music:hover {
+    background-color: #1c1c1c;
+}
+
+#popup-music {
     color: white;
     padding: 1em;
 }
 
-#popup-mpd #album-art {
-    /*border: 1px solid #424242;*/
+#popup-music #album-art {
     margin-right: 1em;
 }
 
-#popup-mpd #title .icon, #popup-mpd #title .label {
+#popup-music #title .icon *, #popup-music #title .label {
     font-size: 1.7em;
 }
 
-#popup-mpd #controls * {
+#popup-music #controls * {
     border-radius: 0;
     background-color: #2d2d2d;
     color: white;
 }
 
-#popup-mpd #controls *:disabled {
+#popup-music #controls *:disabled {
     color: #424242;
 }
 
+#popup-music #volume > box:last-child label {
+    margin-left: 6px;
+}
+
 #focused {
     color: white;
 }
+
+.power-menu {
+    margin-left: 10px;
+}
+
+.power-menu #power-btn {
+    color: white;
+    background-color: #2d2d2d;
+}
+
+.power-menu #power-btn:hover {
+    background-color: #1c1c1c;
+}
+
+.popup-power-menu {
+    padding: 1em;
+}
+
+.popup-power-menu #header {
+    color: white;
+    font-size: 1.4em;
+    border-bottom: 1px solid white;
+    padding-bottom: 0.4em;
+    margin-bottom: 0.8em;
+}
+
+.popup-power-menu .power-btn {
+    color: white;
+    background-color: #2d2d2d;
+    border: 1px solid white;
+    padding: 0.6em 1em;
+}
+
+.popup-power-menu .power-btn + .power-btn {
+    margin-left: 1em;
+}
+
+.popup-power-menu .power-btn:hover {
+    background-color: #1c1c1c;
+}

examples/sys-info.corn

@@ -1,23 +0,0 @@
-{
-    end = [
-        {
-            type = "sys_info"
-
-            interval.memory = 30
-            interval.cpu = 1
-            interval.temps = 5
-            interval.disks = 300
-            interval.networks = 3
-
-            format = [
-                " {cpu_percent}% | {temp_c:k10temp_Tccd1}°C"
-                " {memory_used} / {memory_total} GB ({memory_percent}%)"
-                "| {swap_used} / {swap_total} GB ({swap_percent}%)"
-                " {disk_used:/} / {disk_total:/} GB ({disk_percent:/}%)"
-                "李 {net_down:enp39s0} / {net_up:enp39s0} Mbps"
-                "猪 {load_average:1} | {load_average:5} | {load_average:15}"
-                " {uptime}"
-            ]
-        }
-    ]
-}