Homer

I recently switched from Heimdall to Homer, a really simple, yet beautiful, static dashboard developed by Bastien Wirtz.

Installation

The installation was really easy:

wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip
unzip homer.zip
cd homer
cp assets/config.yml.dist assets/config.yml

No More PHP!

While Heimdall is a great software, I definitely won't miss having to deal with PHP dependencies. Thank you, Homer, and good riddance!

Configuration and Content

The entire configuration, as well as the content, of the dashboard is done by editing the config.yaml file in the assets directory.

Here is an exemplary configuration for the first version of the DT Lenneng dashboard.

Layout

title: "Dësch-Tennis Lenneng"
subtitle: "Ping-Pong an Theater"
logo: "dtl.png"

header: true
footer: '<p>Powered by Homer. 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>'

theme: default
colors:
  light:
    highlight-primary: "#333333"
    highlight-secondary: "#999999"
    highlight-hover: "#ff9900"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "#363636"
    text-header: "#ffffff"
    text-title: "#303030"
    text-subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link-hover: "#ff9900"
  dark:
    highlight-primary: "#333333"
    highlight-secondary: "#999999"
    highlight-hover: "#ff9900"
    background: "#333333"
    card-background: "#2b2b2b"
    text: "#eaeaea"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link-hover: "#ff9900"

Links

links:
  - name: "Homer"
    icon: "fab fa-github"
    url: "https://github.com/bastienwirtz/homer"
    target: "_blank"
  - name: "DTL"
    icon: "fa fa-home"
    url: "https://www.dtl.lu"
    target: "_blank"
  - name: "FLTT"
    icon: "fa fa-table-tennis"
    url: "https://www.fltt.lu/"
    target: "_blank"
  - name: "Gemeng Lenneng"
    icon: "fa fa-heart"
    url: "https://lenningen.lu"
    target: "_blank"

Content

The content consists of a message and three columns showcasing the currently available services:

message:
  style: "is-dark" 
  title: "Wëllkomm um Dashboard vum Dësch-Tennis Lenneng"
  icon: "fa fa-table-tennis"
  content: ""

services:
  - name: "Dësch-Tennis"
    icon: "fas fa-table-tennis"
    items:
      - name: "Reservatioun 'Op der Bréck'"
        logo: "assets/tools/dtl.png"
        subtitle: "BalleJaune"
        tag: "web"
        url: "https://ballejaune.com/dtl"
        target: "_blank"
      - name: "FLTT Schutzkonzept"
        logo: "assets/tools/fltt.png"
        subtitle: "COVID-19"
        tag: "web"
        url: "https://www.fltt.lu/news/fiche-news/schutzkonzept-zur-ausubung-des-tt-sports-im-rahmen-der-covid-19-pandemie"
        target: "_blank"

  - name: "Theater"
    icon: "fas fa-mask"
    items:
      - name: "TheaterFlix"
        logo: "assets/tools/theater.png"
        subtitle: "Streaming"
        tag: "web"
        url: "https://movies.bell0bytes.eu"
        target: "_blank"

  - name: "Veräin"
    icon: "fas fa-heart"
    items:
      - name: "Sponsormapp"
        logo: "assets/tools/sponsoring.png"
        subtitle: "Sponsoring"
        tag: "web"
        url: "https://u.pcloud.link/publink/show?code=qAb"
        target: "_blank"