Dashboard - Mondo Docs

Overview

Homer is a simple, static dashboard that allows you to organize your server applications and bookmarks into a clean, modern interface. This document covers the deployment and configuration of Homer using Docker Compose with Traefik as a reverse proxy.

Service Details

Component	Value
URL	https://dash.trymondo.com
Image	b4bz/homer:v25.04.1
Container Name	homer
Port	8080 (internal)
Network	traefik-net (external)
Volume	./assets (configuration and customization)

Architecture

Homer is deployed as a single container that serves a static dashboard:

                  ┌─────────────┐
 HTTPS Request    │   Traefik   │
─────────────────▶│             │
                  └──────┬──────┘
                         │
                         ▼
                  ┌─────────────┐
                  │    Homer    │
                  │  Dashboard  │
                  └──────┬──────┘
                         │
                         ▼
                  ┌─────────────┐
                  │  ./assets   │
                  │   Volume    │
                  └─────────────┘

Traefik: Provides HTTPS termination and routing
Homer Container: Serves the static dashboard
Assets Volume: Contains configuration and customization files

Prerequisites

Docker Engine (24.0+)
Docker Compose v2
Traefik reverse proxy configured and running
External traefik-net network
DNS configured for dash.trymondo.com

Deployment Configuration

Directory Structure

/opt/apps/homer/
├── docker-compose.yml       # Main configuration file
├── docker-compose.override.yml  # (Optional) Resource limits
└── assets/                  # Homer configuration files
    ├── config.yml           # Dashboard configuration
    ├── icons/               # Custom icons
    └── logos/               # Custom logos

Docker Compose File

services:
  homer:
    image: b4bz/homer:v25.04.1
    container_name: homer
    volumes:
      - ./assets:/www/assets
    environment:
      - INIT_ASSETS=1
    labels:
      - 'traefik.enable=true'
      - 'traefik.http.routers.homer.rule=Host(`dash.trymondo.com`)'
      - 'traefik.http.routers.homer.entrypoints=websecure'
      - 'traefik.http.routers.homer.tls=true'
      - 'traefik.http.routers.homer.tls.certresolver=production'
      - 'traefik.http.services.homer.loadbalancer.server.port=8080'
      - 'traefik.http.routers.homer.middlewares=secureHeaders@file'
      - 'diun.enable=true'
    networks:
      - traefik-net
    restart: unless-stopped

networks:
  traefik-net:
    external: true

Resource Limits (Optional)

For improved stability, you can add resource constraints using a docker-compose.override.yml file:

services:
  homer:
    deploy:
      resources:
        limits:
          memory: 128M
          cpus: '0.2'

Deployment Instructions

Create the deployment directory:
```
mkdir -p /opt/apps/homer/assets
```

Create the docker-compose.yml file:

nano /opt/apps/homer/docker-compose.yml

Create the optional resource limits file:

nano /opt/apps/homer/docker-compose.override.yml

Deploy the service:

cd /opt/apps/homer
docker compose up -d

Verify the service is running:
```
docker compose ps
```

Configuration

Basic `config.yml` Setup

After deploying Homer, you’ll need to configure your dashboard. When the INIT_ASSETS=1 environment variable is set, Homer will create a default configuration on first launch. Edit the configuration file:

nano /opt/apps/homer/assets/config.yml

Here’s a basic example configuration:

---
title: 'Mondo Dashboard'
subtitle: 'Self-hosted services'
logo: 'logo.png'
# Optional theme customization
theme: default
colors:
  light:
    primary: '#3367d6'
  dark:
    primary: '#3367d6'

# Optional message
message:
  style: 'is-info'
  title: 'Welcome to the Mondo MOPS Dashboard!'
  content: 'This dashboard provides quick access to all Mondo services.'

# Services displayed on the dashboard
services:
  - name: 'DevOps'
    icon: 'fas fa-code-branch'
    items:
      - name: 'Traefik'
        logo: 'assets/tools/traefik.png'
        subtitle: 'Reverse Proxy'
        tag: 'infrastructure'
        url: 'https://traefik.trymondo.com'
      - name: 'Portainer'
        logo: 'assets/tools/portainer.png'
        subtitle: 'Container Management'
        tag: 'infrastructure'
        url: 'https://portainer.trymondo.com'
      - name: 'Gitea'
        logo: 'assets/tools/gitea.png'
        subtitle: 'Git Server'
        tag: 'tools'
        url: 'https://git.trymondo.com'

  - name: 'Applications'
    icon: 'fas fa-cloud'
    items:
      - name: 'Outline Wiki'
        logo: 'assets/tools/outline.png'
        subtitle: 'Knowledge Base'
        tag: 'app'
        url: 'https://wiki.trymondo.com'
      - name: 'Mautic'
        logo: 'assets/tools/mautic.png'
        subtitle: 'Marketing Automation'
        tag: 'app'
        url: 'https://outreach.trymondo.com'
      - name: 'N8N'
        logo: 'assets/tools/n8n.png'
        subtitle: 'Workflow Automation'
        tag: 'app'
        url: 'https://automations.trymondo.com'

Custom Icons and Logos

You can add custom icons and logos to your dashboard:

Create directories for your assets:

mkdir -p /opt/apps/homer/assets/icons
mkdir -p /opt/apps/homer/assets/logos
mkdir -p /opt/apps/homer/assets/tools

Add your custom images to these directories
Reference them in your config.yml file

Theme Customization

Homer supports multiple themes. To change the theme, update the theme property in config.yml:

# Available themes: default, sui, slate, minimal
theme: minimal

# Custom colors
colors:
  light:
    primary: '#34495e'
    background: '#f5f5f5'
  dark:
    primary: '#3498db'
    background: '#222222'

Traefik Integration

Homer is configured with the following Traefik settings:

Host Rule: dash.trymondo.com
Entrypoint: websecure (HTTPS)
TLS: Enabled with production certificate resolver
Backend Port: 8080
Middleware: secureHeaders for enhanced security

Update Monitoring

Homer is configured with Diun monitoring to automatically detect image updates:

labels:
  - 'diun.enable=true'

When a new version of the Homer image is available, Diun will send a notification.

Maintenance

Backup Strategy

Back up Homer’s configuration regularly:

# Backup the assets directory
tar -czf homer-assets-backup-$(date +%Y%m%d).tar.gz -C /opt/apps/homer assets

Updates

To update Homer:

Update the image tag in docker-compose.yml

Apply the update:

cd /opt/apps/homer
docker compose pull
docker compose up -d

Check logs for any issues:
```
docker compose logs
```

Troubleshooting

Dashboard Not Loading

If the dashboard is not loading:

Check if the container is running:
```
docker compose ps
```

Verify the assets volume is correctly mounted:

docker compose exec homer ls -la /www/assets

Check for errors in the logs:
```
docker compose logs
```

Configuration Issues

If the dashboard does not reflect your configuration changes:

Verify the syntax of your config.yml:

cd /opt/apps/homer/assets
yamllint config.yml

Restart the container to reload the configuration:
```
docker compose restart
```
Check file permissions:
```
chmod -R 755 /opt/apps/homer/assets
```

Advanced Customization

Adding Message of the Day

You can add a message of the day to your dashboard:

message:
  style: 'is-warning' # Options: is-info, is-success, is-warning, is-danger
  title: 'System Maintenance'
  content: 'Scheduled maintenance on Friday from 2-4 PM MST.'

Grouping Services

You can organize your services into groups:

services:
  - name: 'Infrastructure'
    icon: 'fas fa-server'
    items:
      # Infrastructure services...

  - name: 'Marketing'
    icon: 'fas fa-bullhorn'
    items:
      # Marketing services...

  - name: 'Development'
    icon: 'fas fa-code'
    items:
      # Development services...

Custom CSS

You can add custom CSS by creating a custom.css file:

nano /opt/apps/homer/assets/custom.css

Then reference it in your config.yml:

stylesheet: 'assets/custom.css'

Additional Resources

Integration Examples

Adding Mondo Services

Here’s an example of how to add all Mondo services to your Homer dashboard:

services:
  - name: 'Infrastructure'
    icon: 'fas fa-server'
    items:
      - name: 'Traefik'
        url: 'https://traefik.trymondo.com'
      - name: 'Portainer'
        url: 'https://portainer.trymondo.com'
      - name: 'Backrest'
        url: 'https://backrest.trymondo.com'

  - name: 'Marketing Tools'
    icon: 'fas fa-bullhorn'
    items:
      - name: 'Mautic'
        url: 'https://outreach.trymondo.com'
      - name: 'N8N'
        url: 'https://automations.trymondo.com'
      - name: 'EspoCRM'
        url: 'https://crm.trymondo.com'

  - name: 'Development'
    icon: 'fas fa-code'
    items:
      - name: 'Gitea'
        url: 'https://git.trymondo.com'
      - name: 'Woodpecker CI'
        url: 'https://ci.trymondo.com'

  - name: 'Collaboration'
    icon: 'fas fa-users'
    items:
      - name: 'Outline Wiki'
        url: 'https://wiki.trymondo.com'
      - name: 'Cal.com'
        url: 'https://cal.trymondo.com'
      - name: 'FilePizza'
        url: 'https://pizza.trymondo.com'

Introduction

Applications

Infrastructure

​Overview

​Service Details

​Architecture

​Prerequisites

​Deployment Configuration

​Directory Structure

​Docker Compose File

​Resource Limits (Optional)

​Deployment Instructions

​Configuration

​Basic config.yml Setup

​Custom Icons and Logos

​Theme Customization

​Traefik Integration

​Update Monitoring

​Maintenance

​Backup Strategy

​Updates

​Troubleshooting

​Dashboard Not Loading

​Configuration Issues

​Advanced Customization

​Adding Message of the Day

​Grouping Services

​Custom CSS

​Additional Resources

​Integration Examples

​Adding Mondo Services