.github | ||
hooks | ||
public | ||
src | ||
.browserslistrc | ||
.dockerignore | ||
.eslintrc.js | ||
.gitignore | ||
babel.config.js | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
Dockerfile | ||
Dockerfile.arm32v7 | ||
Dockerfile.arm64v8 | ||
LICENSE | ||
package.json | ||
README.md | ||
screenshot.png | ||
vue.config.js | ||
yarn.lock |
Homer
A dead simple static HOMepage for your servER to keep your s
ervices on hand, from a simple yaml
configuration file.
Live demo • Chat
Table of Contents
Features
- yaml file configuration
- Installable (pwa)
- Search
- Grouping
- Theme customization
- Offline heathcheck
- keyboard shortcuts:
/
Start searching.Escape
Stop searching.Enter
Open the first matching result (respects the bookmark's_target
property).Alt
/Option
+Enter
Open the first matching result in a new tab.
Getting started
Homer is a full static html/js dashboard, generated from the source in /src
using webpack. It's meant to be served by an HTTP server, it will not work if you open dist/index.html directly over file:// protocol.
Using docker
docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/local/assets/:/www/assets b4bz/homer:latest
Using the release tarball (prebuilt, ready to use)
Download and extract the latest the latest release (homer.zip
) from the release page, rename the config.yml.dist
file to config.yml
, and put it behind a webserver.
wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip
unzip homer.zip
cd homer
cp config.yml.dist config.yml
npx serve # or python -m http.server 8010 or apache, nginx ...
Build manually
# Using yarn (recommended)
yarn install
yarn build
# **OR** Using npm
npm install
npm run build
Then your dashboard is ready to use in the /dist
directory.
Configuration
Title, icons, links, colors, and services can be configured in the config.yml
file (located in project root directory once built, or in the public/
directory in developement mode), using yaml format.
---
# Homepage configuration
# See https://fontawesome.com/icons for icons options
title: "App dashboard"
subtitle: "Homer"
logo: "assets/homer.png"
# Alternatively a fa icon can be provided:
# icon: "fas fa-skull-crossbones"
header: true # Set to false to hide the header
footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.header:
# Optional theming
theme: default # 'default' or one of the theme available in 'src/assets/themes'.
# Here is the exaustive list of customization parameters
# However all value are optional and will fallback to default if not set.
# if you want to change only some of the colors, feel free to remove all unused key.
colors:
light:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#f5f5f5"
card-background: "#ffffff"
text: "#363636"
text-header: "#424242"
text-title: "#303030"
text-subtitle: "#424242"
card-shadow: rgba(0, 0, 0, 0.1)
link-hover: "#363636"
dark:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#131313"
card-background: "#2b2b2b"
text: "#eaeaea"
text-header: "#ffffff"
text-title: "#fafafa"
text-subtitle: "#f5f5f5"
card-shadow: rgba(0, 0, 0, 0.4)
link-hover: "#ffdd57"
# Optional message
message:
# url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
style: "is-warning"
title: "Optional message!"
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any links
links:
- name: "Link 1"
icon: "fab fa-github"
url: "https://github.com/bastienwirtz/homer"
target: "_blank" # optional html tag target attribute
- name: "link 2"
icon: "fas fa-book"
url: "https://github.com/bastienwirtz/homer"
# Services
# First level array represent a group.
# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
services:
- name: "Application"
icon: "fa fa-code-fork"
items:
- name: "Awesome app"
logo: "assets/tools/sample.png"
# Alternatively a fa icon can be provided:
# icon: "fab fa-jenkins"
subtitle: "Bookmark example"
tag: "app"
url: "https://www.reddit.com/r/selfhosted/"
target: "_blank" # optional html tag target attribute
- name: "Another one"
logo: "assets/tools/sample2.png"
subtitle: "Another application"
tag: "app"
# Optional tagstyle
tagstyle: "is-success"
url: "#"
- name: "Other group"
icon: "fas fa-heartbeat"
items:
- name: "Another app"
logo: "assets/tools/sample.png"
subtitle: "Another example"
tag: "other"
url: "https://www.reddit.com/r/selfhosted/"
target: "_blank" # optionnal html a tag target attribute
If you choose to fetch message information from an endpoint, the output format should be:
{
"style": null,
"title": "Lorem ipsum 42",
"content": "LA LA LA Lorem ipsum dolor sit amet, ....."
}
null
value or missing keys will be ignored and value from the config.yml
will be used if available.
Empty values (either in config.yml
or the endpoint data) will hide the element (ex: set "title": ""
to hide the title bar).
Style Options
Homer uses bulma CSS, which provides a modifiers syntax. You'll notice in the config there is a tagstyle
option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors:
is-info
(blue)is-success
(green)is-warning
(yellow)is-danger
(red)
You can read the bulma modifiers page for other options regarding size, style, or state.
Roadmap
- Add more themes.
- Add support for custom service card (add custom feature to some service / app link)
Development
# Using yarn (recommended)
yarn install
yarn serve
# **OR** Using npm
npm install
npm run serve
Themes
Themes are meant to be simple customization (written in scss).
To addd a new theme, just add a file in the theme directory, and put all style in the body #app.theme-<name>
scope. Then import it in the main style file.
// `src/assets/themes/my-awesome-theme.scss`
body #app.theme-my-awesome-theme. { ... }
// `src/assets/app.scss`
// Themes import
@import "./themes/sui.scss";
...
@import "./themes/my-awesome-theme.scss";