docs: Add example for data structures

docs/src/configuration.md

@@ -264,6 +264,8 @@ If you want to display a list of values, you can use the `for`-Element to fill a
 This can be useful in many situations, for example when generating a workspace list from a JSON representation of your workspaces.
 In many cases, this can be used instead of `literal`, and should most likely be preferred in those cases.
 
+To see how to declare and use more advanced data structures, check out the [data structures example](/examples/data-structures/eww.yuck).
+
 ## Splitting up your configuration
 
 As time passes, your configuration might grow larger and larger. Luckily, you can easily split up your configuration into multiple files!

docs/src/examples.md

@@ -4,3 +4,7 @@ These configurations of eww are available in the `examples/` directory of the [r
 
 An eww bar configuration:
 ![Example bar](https://github.com/elkowar/eww/raw/master/examples/eww-bar/eww-bar.png)
+
+A demo on how to declare and use data structures:
+
+![Data structure example](/examples/data-structures/data-structures-preview.png)

examples/data-structures/eww.scss

@@ -0,0 +1,29 @@
+* {
+ all: unset;
+}
+
+.layout {
+ padding: 8px;
+ border: 1px solid black;
+ border-radius: 4px;
+ background-color: bisque;
+ font-size: 16px;
+ color: black;
+}
+
+.animalLayout {
+ margin: 0 4px;
+}
+
+.animal {
+ font-size: 24px;
+ transition: 0.2s;
+ border-radius: 4px;
+ background-color: rgba(0, 0, 0, 0);
+ border: 0 solid lightcoral;
+}
+
+.animal.selected {
+ background-color: rgba(0, 0, 0, 0.2);
+ border-width: 2px;
+}

examples/data-structures/eww.yuck

@@ -0,0 +1,73 @@
+(defvar stringArray `[
+ "🦝",
+ "🐱",
+ "🐵",
+ "🦁",
+ "🐹",
+ "🦊"
+]`)
+
+(defvar object `{
+ "🦝": "racoon",
+ "🐱": "cat",
+ "🐵": "ape",
+ "🦁": "lion",
+ "🐹": "hamster",
+ "🦊": "fox"
+}`)
+
+; You could also create an array of objects:
+; (defvar objectArray `[{ "emoji": "🦝", "name": "racoon" }, { "emoji": "🦊", "name": "fox" }]`)
+
+(defvar selected `🦝`)
+
+(defwidget animalButton [emoji]
+ (box
+ :class "animalLayout"
+ (eventbox
+ :class `animal ${selected == emoji ? "selected" : ""}`
+ :cursor "pointer"
+ :onhover "eww update selected=${emoji}"
+ emoji
+ )
+ )
+)
+
+(defwidget animalRow []
+ (box
+ :class "animals"
+ :orientation "horizontal"
+ :halign "center"
+ (for animal in stringArray
+ (animalButton
+ :emoji animal
+ )
+ )
+ )
+)
+
+(defwidget currentAnimal []
+ (box
+ `${object[selected]} ${selected}`
+ )
+)
+
+(defwidget layout []
+ (box
+ :class "layout"
+ :orientation "vertical"
+ :halign "center"
+ (animalRow)
+ (currentAnimal)
+ )
+)
+
+(defwindow data-structures
+ :monitor 0
+ :exclusive false
+ :focusable false
+ :geometry (geometry
+ :anchor "center"
+ )
+ (layout)
+)