Dashy Installation and Config

Preface

Dashy is an open-source customizable dashboard software that requires self-deployment. My use case is to place links of frequently visited websites. This post mainly documents some problems encountered during installation and usage.

Installation

Docker compose:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
version: "3"

services:
dashy:
image: lissy93/dashy:2.1.2
container_name: dashy
volumes:
- /opt/docker/dashy/conf.yml:/app/public/conf.yml
- /opt/docker/dashy/dashboard-icons:/app/public/item-icons
network_mode: bridge
ports:
- 54000:80
environment:
- TZ=Asia/Shanghai
restart: unless-stopped
healthcheck:
test: ['CMD', 'node', '/app/services/healthcheck']
interval: 1m30s
timeout: 10s
retries: 3
start_period: 40s
  • config.yml is the core configuration file. I prefer directly modifying it rather than using the UI to make changes and then save them to disk.

Setting Icons

There are many types of icons. I often use "Local Icons", "Font Awesome", and "Simple Icons".

Local Icons

Local icons are simply local images. The file extensions can be png and svg, but not ico.

Local icons must be placed under /app/public/item-icons/. Dashy only recognizes relative paths within this directory. In Docker compose, I map the local directory /opt/docker/dashy/dashboard-icons to that directory. This local directory is a clone of the dashboard-icons project.

The icons in the dashboard-icons project are some commonly used software icons, but there are no icons for Chinese software. Of course, we can also download icons and put them in this directory.

Since the icons in this directory are all colored images, while the latter two types of icons are black and white, I prefer this method.

Some examples:

1
2
3
4
# Icons from the dashboard-icons project
- icon: svg/portainer.svg
# Icons downloaded and stored in the 'downloaded' folder
- icon: downloaded/AutoBangumi.svg

Font Awesome

Naming convention: [category] [name]

Examples: fas fa-rocket, fab fa-monero

Taking the envelope as an example:

In HTML code, the name is fa-envelope, but the category needs to be abbreviated by ourselves as far.

image-20240404105243668

In VUE code, the category is correct, but the name is not.

image-20240404105359193

It's not clear where to directly copy the value of icon.

If you want to use pro icons, you need to configure the license key in appConfig.fontAwesomeKey, usually a 10-character string.

Simple Icons

The icons on this website are also commonly used software, however, including Chinese software.

Naming convention: si-[name]

Examples: si-googlechromesi-bilibili

The name here can be directly copied from the official website (click on the text and it will be automatically copied):

image-20240404110008224image-20240404110022088

Clicking on '.NET' will copy dotnet, while clicking on '365 Data Science' will copy 365datascience. It can be seen that manual typing these words should be avoided as it is prone to errors.

Example Display

image-20240404110533178

Reference