diff --git a/README.md b/README.md index dc6684b..8326745 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,25 @@ # Dashie -Dashie is a simple personal dashboard with themes and multiple pages, generated per visit from the YAML configuration files. The YAML configuration files have to be edited by hand. +Dashie is a simple personal dashboard with themes and multiple pages, generated on the fly from the YAML configuration files. There is no multiuser support right now. -Inspired by Dashy, https://dashy.to/. +A shoutout to Dashy, https://dashy.to/, which Dashie is visually heavily inspired by. + +## Screenshots +[](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_default.png) +[](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_colorful.png) +[](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_gruvbox.png) +[](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_subdued.png) # Installation -Copy examples/*.yaml to the web root, and put everything on a webserver serving the directory statically. +Copy examples/*.yaml to the web root (or write `start.yaml` from scratch instead), and put everything on a webserver serving the directory statically. -# Themes +# YAML files +The YAML configuration files have to be edited by hand right now. -The themes.yaml file in the web root has the following format per theme: +In the future dashie is probably going to get a server written in Go, enabling interactive editing and possibly multiuser support. -```yaml -gruvbox: # Name of theme. - page: - text: "#bdae93" # Color of the page name. - background: "#282828 url('/images/backgrounds/gruvbox.svg')" # background color/image of the page. - header: "#504945" # Background color of the header section. - footer: # Colors for the footer (The 'Dashie v[x]' line). - show: true # Show or hide the footer. - text: "#a89984" - background: "#504945" - - page_select: # Colors for the page boxes. - text: "#bdae93" - background: "#3c3836" - - theme_select: # Colors for the theme selector. - text: "#bdae93" - background: "#3c3c36" - border: "#665c54" - - section: - background: "#504945" - shadow: "10px 10px 15px 0px rgba(0, 0, 0, 0.25)" - # These colors will be used in a roundrobin fashion when displaying - # sections, if a section is not explicitly using a color index. - # The first is the border color, the second is the section label color. - borders: - - ["#fb4934", "#eee"] - - ["#b8bb26", "#333"] - - ["#fabd2f", "#333"] - - ["#458588", "#eee"] - - ["#fe8019", "#333"] - - ["#689d6a", "#333"] - - item: - label: # The label can be left blank to receive the same color as the section border. - background: "#282828" - description: "#d5c4a1" - url: "#a89984" - icon: # Icon can be left blank, same behaviour as label. - hover: brighter # Determines mouse pointer hovering over section background color. - #Can be brighter, darker or anything else to disable behaviour. -``` - -# Dashboard YAML files +## Dashboard YAML files Icons use the Material Design Icons library, see https://pictogrammers.com/library/mdi/ for a searchable list of icons. To use the abacus icon, type "abacus" in the icon property of the section items. @@ -101,4 +64,51 @@ sections: - label: Spotify url: https://spotify.com icon: music +``` + +## Themes +The themes.yaml file in the web root has the following format per theme: + +```yaml +gruvbox: # Name of theme. + page: + text: "#bdae93" # Color of the page name. + background: "#282828 url('/images/backgrounds/gruvbox.svg')" # background color/image of the page. + header: "#504945" # Background color of the header section. + footer: # Colors for the footer (The 'Dashie v[x]' line). + show: true # Show or hide the footer. + text: "#a89984" + background: "#504945" + + page_select: # Colors for the page boxes. + text: "#bdae93" + background: "#3c3836" + + theme_select: # Colors for the theme selector. + text: "#bdae93" + background: "#3c3c36" + border: "#665c54" + + section: + background: "#504945" + shadow: "10px 10px 15px 0px rgba(0, 0, 0, 0.25)" + # These colors will be used in a roundrobin fashion when displaying + # sections, if a section is not explicitly using a color index. + # The first is the border color, the second is the section label color. + borders: + - ["#fb4934", "#eee"] + - ["#b8bb26", "#333"] + - ["#fabd2f", "#333"] + - ["#458588", "#eee"] + - ["#fe8019", "#333"] + - ["#689d6a", "#333"] + + item: + label: # The label can be left blank to receive the same color as the section border. + background: "#282828" + description: "#d5c4a1" + url: "#a89984" + icon: # Icon can be left blank, same behaviour as label. + hover: brighter # Determines mouse pointer hovering over section background color. + #Can be brighter, darker or anything else to disable behaviour. ``` \ No newline at end of file