programs: add eww

i should settle on a bar xddd

home/programs/eww/config/eww.scss

@@ -0,0 +1,24 @@
+* {
+    all: unset;
+}
+
+@import "./style/mixins.scss";
+@import "./style/menu.scss";
+@import "./style/music.scss";
+@import "./style/workspaces.scss";
+@import "./style/sysinfo.scss";
+
+.logo {
+    margin: 0.4rem 10rem 0.4rem 1rem;
+    border-radius: 8px;
+    background-color: $background;
+}
+
+.time {
+    font-size: 16px;
+    margin: 0.5rem 1.2rem 0.5rem 1rem;
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    border-radius: 8px;
+    background-color: $background;
+}

home/programs/eww/config/eww.yuck

@@ -0,0 +1,49 @@
+(include "./widgets/logo.yuck")
+(include "./widgets/workspaces.yuck")
+(include "./widgets/menu.yuck")
+(include "./widgets/time.yuck")
+(include "./widgets/music.yuck")
+(include "./widgets/sysinfo.yuck")
+(include "./vars.yuck")
+
+(defwidget left []
+  (box :orientation "h"
+    :halign "start"
+    (logo)
+    (workspaces)))
+
+(defwidget center[]
+  (box :orientation "h"
+    :halign "center"
+    (music)))
+
+(defwidget right []
+  (box :orientation "h"
+    :halign "end"
+    (cpu)
+    (time)
+    (menu)))
+
+
+(defwidget bar []
+  (centerbox :orientation "h"
+    (left)
+    (center)
+    (right)))
+
+
+(defwindow bar
+  :monitor 2
+  :windowtype "dock"
+  :geometry (geometry
+    :x "0%"
+    :y "0%"
+    :width "100%"
+    :height "47px"
+  :anchor "top center")
+  :stacking "fg"
+  :reserve (struts :distance "40px" :side "top")
+  :windowtype "dock"
+  :wm-ignore false
+  :exclusive true;
+  (bar))

home/programs/eww/config/scripts/get-music-cover.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+COVER_PATH=$1
+cd $COVER_PATH
+IMGPATH="$COVER_PATH/music_cover.png"
+playerctl -F metadata mpris:artUrl 2>/dev/null | while read -r COVER_URL; do
+    if [[ "$COVER_URL" = https* ]]; then
+        if [ ! -e "$COVER_PATH/$(basename "$COVER_URL")" ]; then
+            wget -N "$COVER_URL" -o /dev/null
+        fi
+
+        rm "$IMGPATH"
+        ln -s "$(basename "$COVER_URL")" "$IMGPATH"
+
+        echo "$IMGPATH"
+    elif [ "$COVER_URL" = "" ]; then
+        echo ""
+    else
+        echo "$COVER_URL"
+    fi
+done

home/programs/eww/config/style/colors.scss

@@ -0,0 +1,24 @@
+/* tokyonight */
+
+$red: #f7768e;
+$orange: #ff9e64;
+$yellow: #e0af68;
+$light-green: #9ece6a;
+$green: #73daca;
+$turquoise: #89ddff;
+$light-cyan: #b4f9f8;
+$teal: #2ac3de;
+$cyan: #7dcfff;
+$blue: #7aa2f7;
+$magenta: #bb9af7;
+$white: #c0caf5;
+$light-gray: #9aa5ce;
+$parameters: #cfc9c2;
+$comment: #565f89;
+$black: #414868;
+$foreground: #a9b1d6;
+$foreground-highlight: #c0caf5;
+$foreground-gutter: #363b54;
+$background: #1a1b26;
+$background-highlight: #30374b;
+$background-menu: #16161e;

home/programs/eww/config/style/menu.scss

@@ -0,0 +1,64 @@
+@import "./mixins.scss";
+@import "./colors.scss";
+
+.menubox {
+    border: 3px solid $background-highlight;
+    border-radius: 10px;
+    background-color: $background;
+}
+
+.menubox-header {
+    @include button-sizing;
+    font-size: 32px;
+    background-color: $background-highlight;
+    margin: 2rem;
+}
+
+.menubox-text {
+    @include button-sizing;
+    background-color: $background;
+}
+
+.menubox-widgets {
+    @include button-sizing();
+    background-color: $background-highlight;
+    margin: 2rem;
+    transition: all 100ms ease;
+    &:hover {
+        @include button-sizing();
+        background-color: $red;
+        transition: all 100ms ease;
+        color: $background-highlight;
+    }
+}
+
+.menu-widget {
+    font-size: 20px;
+    margin: 0.5rem 1.2rem 0.5rem 0.9rem;
+    padding-right: 0.3rem;
+    border-radius: 8px;
+    background-color: $background;
+}
+
+.cpu {
+    @include sysinfo();
+    color: $red;
+}
+
+.mem {
+    @include sysinfo();
+    color: $green;
+    font-size: 17px;
+}
+
+.storage {
+    @include sysinfo();
+    color: $blue;
+    font-size: 24px;
+}
+
+.info-box {
+    @include button-sizing;
+    background-color: $background-highlight;
+    margin: 2rem;
+}

home/programs/eww/config/style/mixins.scss

@@ -0,0 +1,23 @@
+@import "./colors.scss";
+
+@mixin workspace-font {
+    font-size: 20px;
+    font-weight: normal;
+}
+
+@mixin button-sizing {
+    margin: 10px;
+    border-radius: 16px;
+    padding: 10px 10px 10px 10px;
+    font-size: 32px;
+}
+
+@mixin sysinfo {
+    margin: 10px;
+    font-size: 24px;
+    background-color: $light-gray;
+}
+
+@mixin widget-border-radius {
+    border-radius: 8px;
+}

home/programs/eww/config/style/music.scss

@@ -0,0 +1,84 @@
+@import "./mixins.scss";
+@import "./colors.scss";
+
+.music {
+    @include widget-border-radius;
+    font-size: 15px;
+    background-color: $background;
+    margin: 0.5rem 2rem 0.5rem 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.music-cover {
+    @include widget-border-radius;
+    background-size: 42px 42px;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-top: 0.3rem;
+    margin-bottom: 0.3rem;
+    min-height: 2rem;
+    min-width: 4rem;
+    border-radius: 0.8rem;
+}
+
+.music-cover-big {
+    margin: 0rem;
+    background-size: 450px 450px;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 30%;
+}
+
+.music-widget {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1100px 1100px;
+    border: 3px solid $background-highlight;
+    border-radius: 0.7rem;
+}
+
+.music-widget-title {
+    @include widget-border-radius;
+    font-size: 24px;
+    margin: 2rem 2rem 0rem 1rem;
+    background-color: $background;
+    padding: 1.1rem;
+    border: 3px solid $background-highlight;
+}
+
+.music-controls {
+    @include button-sizing;
+    background-color: $background;
+    margin: 5rem 7rem 2rem 6rem;
+    padding: 0.4rem;
+    border-radius: 8px;
+    border: 3px solid $background-highlight;
+}
+
+.hover-play:hover {
+    background-color: $green;
+    transition: all 100ms ease-in;
+    color: $background-highlight;
+    border-radius: 5px;
+}
+
+.hover-pause:hover {
+    background-color: $red;
+    transition: all 200ms ease-in;
+    color: $background-highlight;
+    border-radius: 5px;
+}
+
+.close-button {
+    margin: 0.5rem 2rem 0rem 30rem;
+    background-color: $background;
+    border-radius: 8px;
+    padding: 0.5rem;
+    &:hover {
+        background-color: $red;
+        transition: all 100ms ease-in;
+        color: $background-highlight;
+        border-radius: 5px;
+    }
+}

home/programs/eww/config/style/sysinfo.scss

@@ -0,0 +1,14 @@
+@import "./mixins.scss";
+@import "./colors.scss";
+
+.sysinfo-cpu {
+    @include sysinfo;
+    color: $red;
+    margin: 0.1rem;
+}
+
+.sysinfo-mem {
+    @include sysinfo;
+    color: $green;
+    margin: 0.1rem;
+}

home/programs/eww/config/style/workspaces.scss

@@ -0,0 +1,27 @@
+@import "./mixins.scss";
+@import "./colors.scss";
+
+.workspaces {
+    @include widget-border-radius;
+    margin: 0.5rem 4rem 0.5rem 1rem;
+    padding-left: 1rem;
+    background-color: $background;
+}
+
+.ws0 {
+    color: $red;
+    @include workspace-font();
+}
+
+.ws1 {
+    color: $teal;
+    @include workspace-font();
+}
+.ws2 {
+    color: $cyan;
+    @include workspace-font();
+}
+.ws3 {
+    color: $blue;
+    @include workspace-font();
+}

home/programs/eww/config/vars.yuck

@@ -0,0 +1,14 @@
+(deflisten musicArtist :initial "-" "playerctl --follow metadata --format '{{ artist }}'")
+(deflisten musicTitle :initial "-" "playerctl --follow metadata --format '{{title}}'")
+(deflisten musicCover "sh ~/.config/eww/scripts/get-music-cover.sh ~/.config/eww/cache_directory")
+
+
+(defpoll time :interval "60s"
+  :initial "initial-value"
+`date +%H:%M`)
+
+(defpoll date :interval "60s"
+  :initial "initial-value"
+`date +%D-%Y`)
+
+(defpoll uptime :interval "1s" "uptime | awk '{print $3}' | tr ',' ' '")

home/programs/eww/config/widgets/container.yuck

@@ -0,0 +1,7 @@
+(defwidget container []
+  (box
+    :class "container"
+    :orientation "h"
+    (children)
+  )
+)

home/programs/eww/config/widgets/datetime.yuck

@@ -0,0 +1,9 @@
+(defpoll time :interval "60s"
+  :initial "initial-value"
+`date +%H:%M`)
+
+(defwidget time []
+  (box
+    :class "time"
+    (label
+    :text time)))

home/programs/eww/config/widgets/logo.yuck

@@ -0,0 +1,6 @@
+(defwidget logo []
+  (box
+    :class "logo"
+    (image :path "/home/notoh/Pictures/icons/nixos.png"
+      :image-width 24
+    :image-height 24)))

home/programs/eww/config/widgets/menu.yuck

@@ -0,0 +1,71 @@
+(defwidget menu []
+  (button
+    :onclick "eww open menu-window"
+    (label
+      :text "⏻"
+    :class "menu-widget")))
+
+
+(defwidget menubox []
+  (box
+    :orientation "v"
+    :space-evenly true
+    :class "menubox"
+    :spacing 0
+    (box :class "menubox-header"
+      :orientation "h"
+      (label :halign "start" :text time)
+      (label :halign "end" :text "おかえりなさい！"))
+    (box :class "info-box"
+      :orientation "h"
+      (circular-progress
+        :class "cpu"
+        :start-at 0
+        :thickness 6
+        :clockwise true
+        :value {EWW_CPU.avg}
+        (label
+          :style "font-size: 24px; margin-right: 0.1rem;"
+        :text "󰍛"))
+      (circular-progress
+        :class "mem"
+        :start-at 0
+        :thickness 6
+        :clockwise true
+        :value {EWW_RAM.used_mem_perc}
+        (label
+          :style "font-size: 24px; margin-right: 0.8rem;"
+        :text ""))
+      (circular-progress
+        :class "storage"
+        :start-at 0
+        :thickness 6
+        :clockwise true
+        :value {EWW_RAM.used_mem_perc}
+        (label
+          :style "font-size: 24px;"
+        :text ""))
+      (label
+      :text "  ${uptime}")
+    )
+    (box :class "menubox-widgets"
+      :orientation "h"
+      (button :class "menubox-widgets text" :onclick "reboot now" "")
+      (button :class "menubox-widgets text" :onclick "shutdown now" "")
+      (button :class "menubox-widgets text" :onclick "eww close menu-window" "")))
+)
+
+(defwindow menu-window
+  :monitor 2
+  :windowtype "dock"
+  :geometry (geometry
+    :x "0.9%"
+    :y "1.5%"
+    :width "25%"
+    :height "600px"
+  :anchor "top right")
+  :stacking "fg"
+  :windowtype "dock"
+  :wm-ignore true
+  :exclusive false
+  (menubox))

home/programs/eww/config/widgets/music.yuck

@@ -0,0 +1,55 @@
+(defwidget bar-art []
+  (box
+    :space-evenly false
+    (box :class "music-cover"
+      :style "background-image:url('${musicCover}');")
+    (eventbox
+      :onclick "eww open music-widget"
+      (label :class "music"
+      :text "${musicTitle}"))))
+
+
+
+(defwidget music-widget []
+  (box :class "music-widget"
+    (box :class "music-cover-big"
+      :space-evenly false
+      :orientation "h"
+      :style "background-image:url('${musicCover}');")
+    (box
+      :orientation "v"
+      :space-evenly false
+      :spacing 0
+      (box
+        (button
+          :class "close-button"
+          :onclick "eww close music-widget"
+          (label :text "" :style "font-size: 18px; margin-right: 0.5rem;")))
+      (label :class "music-widget-title" :text "${musicTitle}")
+      (label :class "music-widget-title" :text "${musicArtist}")
+      (box :class "music-c")
+      (box :class "music-controls"
+        :valign "center"
+        (button :class "hover-play" :onclick "playerctl play" "")
+        (button :class "hover-pause" :onclick "playerctl pause" "")))))
+
+
+(defwidget music []
+  (box
+    (bar-art)))
+
+(defwindow music-widget
+  :monitor 2
+  :windowtype "dock"
+  :namespace "music-widget"
+  :geometry (geometry
+    :x "0"
+    :y "1.5%"
+    :width "42%"
+    :height "550px"
+  :anchor "top center")
+  :stacking "fg"
+  :windowtype "dock"
+  :wm-ignore true
+  :exclusive false
+  (music-widget))

home/programs/eww/config/widgets/sysinfo.yuck

@@ -0,0 +1,21 @@
+(defwidget cpu []
+  (box
+    :spacing 5
+    (circular-progress
+      :class "sysinfo-cpu"
+      :start-at 0
+      :thickness 4
+      :clockwise true
+      :value {EWW_CPU.avg}
+      (label
+        :style "font-size: 13px; margin-right: 0.1rem;"
+      :text "󰍛"))
+    (circular-progress
+      :class "sysinfo-mem"
+      :start-at 0
+      :thickness 4
+      :clockwise true
+      :value {EWW_RAM.used_mem_perc}
+      (label
+        :style "font-size: 10px; margin-right: 0.3rem;"
+      :text ""))))

home/programs/eww/config/widgets/time.yuck

@@ -0,0 +1,5 @@
+(defwidget time []
+  (box
+    :class "time"
+    (label
+    :text time)))

home/programs/eww/config/widgets/workspaces.yuck

@@ -0,0 +1,16 @@
+(defwidget workspaces []
+  (box :class "workspaces"
+    :space-evenly true
+    :spacing 6
+    (button
+      :class "ws0"
+    :onclick "" " ")
+    (button
+      :class "ws1"
+    :onclick "" " ")
+    (button
+      :class "ws2"
+    :onclick "" " ")
+    (button
+      :class "ws3"
+    :onclick "" " ")))

home/programs/eww/default.nix

@@ -0,0 +1,12 @@
+{pkgs, ...}: {
+  home.packages = with pkgs; [
+    eww-wayland
+    playerctl
+    imagemagick
+  ];
+
+  programs.eww = {
+    enable = false;
+    package = pkgs.eww-wayland;
+  };
+}