A sweet dashboard I use on my homeserver with some self-hosted stuff...
honey is written in pure HTML CSS JS so dynamic backend or special webserver configuration is not required.
It works out-of-the-box as all operations are done client-side.
-
Download latest prebuilt archive from Releases.
-
Extract downloaded archive to your webserver root.
-
You're done!
docker run -p 4173:4173 -v /path/to/config:/app/dist/config:ro ghcr.io/dani3l0/honey:latest
-p 4173:4173- exposes HTTP port to your machine-v /path/to/config:/app/dist/config:ro- mounts config directory to your local filesystem in read-only mode (we don't need write permissions)
If you have custom icons or background images, you can freely put them in config dir.
Just remember to provide valid URLs (with /config prefix).
Configuration file is located at config/config.json.
The following keys are available under ui section.
Some of them are listed in Settings page and can be customized by end-user.
| Key name | Description | in Settings |
|---|---|---|
name |
Name shown at the main screen and the tab title. | ❌ |
desc |
Short description shown under title at the main screen. | ❌ |
icon |
Icon shown at the main screen and as site's favicon. | ❌ |
wallpaper |
Background image visible when dark mode is disabled. | ❌ |
wallpaper_dark |
Background image visible when dark mode is enabled. | ❌ |
dark_mode |
Tells whether dark mode is enabled by default. | ✅ |
open_new_tab |
Tells whether clicking on a service will open it in new tab by default. | ✅ |
blur |
Tells whether card background blur is enabled by default. | ✅ |
animations |
Tells whether UI animations are enabled by default. | ✅ |
services section is an array containing objects. Object's structure looks like this:
| Key name | Description |
|---|---|
name |
Your service's name. |
desc |
Short description shown under service's name. |
href |
URL address of your service. It is directly passed to <a> tag. |
icon |
Path to an icon of your service. |
Example:
...
{
"name": "CalDav",
"desc": "Simple CalDav server for calendar sync between various devices.",
"href": "caldav",
"icon": "img/preview/caldav.png"
},
...
honey is built on top of Vite.js. This tool allows faster development and offers various optimizations.
How to prepare a development environment:
# Download the source code
git clone https://github.com/dani3l0/honey && cd honey
# Install required modules
npm i
For coding. This will spin up a HTTP server on localhost:5173. Each time source file is saved, UI will automatically hot-reload so there is no need for ALT+TAB and F5.
npm run dev
Prepare project for production. This command will link and optimize project assets to take less space and require less bandwith. Prebuilt assets will be stored in dist directory and are ready to be put in a webserver root.
npm run build
Of course, some third-party resources are used in this project. I kanged them for self-hosting, easier development and to avoid compatibility issues.
-
Material Icons, for app icons at Services page
-
Google Fonts, for material icons on buttons and Quicksand font
-
honey icon - random icon found in DuckDuckGo Images
-
Wallpapers - very nice background images kanged from wallhaven
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent