> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trymondo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboard

> dash.trymondo.com is the first place to go to see an overview of all the services on the MOPS platform.

<img src="https://mintcdn.com/mondo/jyUDzGOjMUFtU9fz/images/dash-screenshot.png?fit=max&auto=format&n=jyUDzGOjMUFtU9fz&q=85&s=3af351ec9019c7f5fd8188788330123a" alt="Homepager" width="3802" height="2304" data-path="images/dash-screenshot.png" />

## 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](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

```yaml theme={null}
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:

```yaml theme={null}
services:
  homer:
    deploy:
      resources:
        limits:
          memory: 128M
          cpus: '0.2'
```

## Deployment Instructions

1. Create the deployment directory:

   ```bash theme={null}
   mkdir -p /opt/apps/homer/assets
   ```

2. Create the `docker-compose.yml` file:

   ```bash theme={null}
   nano /opt/apps/homer/docker-compose.yml
   ```

3. Create the optional resource limits file:

   ```bash theme={null}
   nano /opt/apps/homer/docker-compose.override.yml
   ```

4. Deploy the service:

   ```bash theme={null}
   cd /opt/apps/homer
   docker compose up -d
   ```

5. Verify the service is running:
   ```bash theme={null}
   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:

```bash theme={null}
nano /opt/apps/homer/assets/config.yml
```

Here's a basic example configuration:

```yaml theme={null}
---
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:

1. Create directories for your assets:

   ```bash theme={null}
   mkdir -p /opt/apps/homer/assets/icons
   mkdir -p /opt/apps/homer/assets/logos
   mkdir -p /opt/apps/homer/assets/tools
   ```

2. Add your custom images to these directories

3. Reference them in your `config.yml` file

### Theme Customization

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

```yaml theme={null}
# 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:

```yaml theme={null}
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:

```bash theme={null}
# Backup the assets directory
tar -czf homer-assets-backup-$(date +%Y%m%d).tar.gz -C /opt/apps/homer assets
```

### Updates

To update Homer:

1. Update the image tag in `docker-compose.yml`

2. Apply the update:

   ```bash theme={null}
   cd /opt/apps/homer
   docker compose pull
   docker compose up -d
   ```

3. Check logs for any issues:
   ```bash theme={null}
   docker compose logs
   ```

## Troubleshooting

### Dashboard Not Loading

If the dashboard is not loading:

1. Check if the container is running:

   ```bash theme={null}
   docker compose ps
   ```

2. Verify the assets volume is correctly mounted:

   ```bash theme={null}
   docker compose exec homer ls -la /www/assets
   ```

3. Check for errors in the logs:
   ```bash theme={null}
   docker compose logs
   ```

### Configuration Issues

If the dashboard does not reflect your configuration changes:

1. Verify the syntax of your `config.yml`:

   ```bash theme={null}
   cd /opt/apps/homer/assets
   yamllint config.yml
   ```

2. Restart the container to reload the configuration:

   ```bash theme={null}
   docker compose restart
   ```

3. Check file permissions:
   ```bash theme={null}
   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:

```yaml theme={null}
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:

```yaml theme={null}
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:

```bash theme={null}
nano /opt/apps/homer/assets/custom.css
```

Then reference it in your `config.yml`:

```yaml theme={null}
stylesheet: 'assets/custom.css'
```

## Additional Resources

* [Official Homer Documentation](https://github.com/bastienwirtz/homer)
* [Homer Demo Page](https://homer-demo.netlify.app/)
* [Traefik Documentation](https://doc.traefik.io/traefik/)

## Integration Examples

### Adding Mondo Services

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

```yaml theme={null}
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'
```