PR #17 update documentation

README.md

@@ -7,7 +7,7 @@ If you already use [eww](https://github.com/elkowar/eww) for your widgets, would
 The Eww Notification Daemon, or End for short, allows you to do exactly that. It leverages eww's `literal` widget to dynamically display 
 libnotify notifications. You define the eww widgets that are used to display a notification and the eww window that they will appear in. 
 
-![Basic Eww Notifications](.github/basic.png)
+![Example Eww Notifications](.github/screenshot.png)
 
 ## Getting Started
 You can either build the project yourself or use one of the prebuilt binaries under Releases.
@@ -149,5 +149,5 @@ The Notification Specification defines two different ways of attaching images to
 
 
 #### Example Configuration 
-You can find a basic complete example configuration in [EXAMPLE.md](EXAMPLE.md)
+You can find a basic complete example configuration in the example folder.
 

example/README.md

@@ -0,0 +1,7 @@
+# Example Config
+
+This folder contains an example config that implements a basic widget for general notifications, and a special "low battery" widget. Images work as well!
+
+![Notification Example](../.github/screenshot.png)
+
+![Notification with images](../.github/images.png)

example/end/config.toml

@@ -0,0 +1,9 @@
+[config]
+eww-window = "notification-frame"
+eww-default-notification-key = "end-notification"
+max-notifications = 10
+notification-orientation = "v"
+
+timeout.urgency.low = 5 
+timeout.urgency.normal = 10
+timeout.urgency.critical = 0

example/eww/colors.scss

@@ -0,0 +1,4 @@
+
+$end-default-bg: #3a454a;
+$end-default-fg: #d3c6aa;
+$red: #e67e80

example/eww/eww.scss

@@ -0,0 +1,40 @@
+@import 'colors'
+
+$bgcolor: rgba(0, 0, 0, 0);
+
+* {
+  all: unset;
+}
+
+.end-default-notification-box {
+  background-color: $end-default-bg;
+  padding: 12px;
+  padding-left: 8px;
+  margin: 12px;
+  border-radius: 10px;
+}
+
+.notification-text {
+  color: $end-default-fg;
+  font-family: 'FantasqueSansM Nerd Font Mono';
+}
+
+.notification-title {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.notification-content {
+  font-size: .8em;
+}
+
+.content-box {
+  margin-left: 12px;
+}
+
+.battery-icon {
+  color: $red;
+  font-size: 2.1em;
+  margin-right: 48px;
+  margin-left: 24px;
+}

example/eww/eww.yuck

@@ -0,0 +1,88 @@
+;; Notifications
+(defvar end-notifications '')
+
+(defwindow notification-frame
+ :monitor 0
+ :geometry (geometry 
+   :x "0px"
+   :y "0px"
+   :width "480px"
+   :height "0px"
+   :anchor "top right")
+ :stacking "fg"
+ :windowtype "dialog"
+ :passthrough true
+ :wm-ignore true
+ (literal :content end-notifications))
+
+(defwidget end-notification
+  [notification]
+  (literal :content {
+    notification.hints["type"] == "battery" 
+    ? '(battery-notification :notification notification)'
+    : '(base-notification :notification notification)' }))
+
+(defwidget base-notification
+  [notification]
+  (eventbox
+    :onclick "end close ${notification.id}" ; use the end close command to implement "click-to-dismiss"
+    :valign "start"
+    :height 100
+    (box
+      :class "end-default-notification-box"
+      :orientation "horizontal"
+      :space-evenly false
+      (image
+        :path {notification.hints["image-path"]} ; end sets this property if the notification contains an image
+        :image-width 100
+        :image-height 100
+      )
+      (box
+        :class "content-box"
+        :orientation "vertical"
+        :space-evenly "false"
+        (label 
+          :class "notification-text notification-title"
+          :valign "start"
+          :yalign 0
+          :xalign 0
+          :text {notification.summary})
+        (label
+          :class "notification-text notification-content"
+          :valign "start"
+          :yalign 0
+          :xalign 0
+          :vexpand true
+          :wrap true
+          :text {notification.body})))))
+
+(defwidget battery-notification
+  [notification]
+  (eventbox
+    :onclick "end close ${notification.id}" 
+    (box
+      :class "end-default-notification-box"
+      :orientation "horizontal"
+      :space-evenly false
+      (label
+        :class "notification-text battery-icon"
+        :yalign 0.5
+        :xalign 0.5
+        :text "󰁺"
+      )
+      (box
+        :orientation "vertical"
+        :hexpand true
+        (label 
+          :class "notification-text notification-title"
+          :hexpand true
+          :yalign 0.5
+          :xalign 0
+          :text "Low Battery")
+        (label
+          :class "notification-text"
+          :vexpand true
+          :hexpand true
+          :yalign 0.5
+          :xalign 0
+          :text "${EWW_BATTERY["BAT0"]["capacity"]}% remaining"))))) ; of course we can still use eww built-ins!