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
• Getting started
• Configuration
• Roadmap
• Developement

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

As a bind mount is used here, docker will not copy the initial content of the assets directory to the mounted directory. You can initialise your assets directory with the content provided in this repository

cp -r /public/assets/* /your/local/assets/

Alternatively if you just want to provide images/icons without customizing the other files (app manifest & pwa icons), you can mount a custom directory in the www directory and use it in your config.yml for icons path.

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

# Optional: Use external configuration file. 
# Using this will ignore remaining config in this file
# externalConfig: https://example.com/server-luci/config.yaml

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.

# 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";