Update README.md

This commit is contained in:
Magnus Åhall 2023-07-26 05:45:53 +00:00
parent d55f8f4a8f
commit e7b58fdd63

110
README.md
View File

@ -1,62 +1,25 @@
# Dashie # 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. 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
[<img src="./images/screenshots/dashie_default.png" width="20%" height="20%">](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_default.png)
[<img src="./images/screenshots/dashie_colorful.png" width="20%" height="20%">](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_colorful.png)
[<img src="./images/screenshots/dashie_gruvbox.png" width="20%" height="20%">](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_gruvbox.png)
[<img src="./images/screenshots/dashie_subdued.png" width="20%" height="20%">](https://git.ahall.se/magnus/dashie/raw/branch/main/images/screenshots/dashie_subdued.png)
# Installation # 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 ## Dashboard YAML files
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
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. 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.
@ -102,3 +65,50 @@ sections:
url: https://spotify.com url: https://spotify.com
icon: music 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.
```