Containr/templates/glance.md

Glance Dashboard Template

Overview

Glance is a self-hosted dashboard that puts all your feeds in one place. It's designed to be simple, fast, and easy to use.

Quick Start

# Create docker-compose.yml with the content below
docker-compose up -d

Docker Compose

version: '3.8'

services:
  glance:
    image: glanceapp/glance:latest
    container_name: glance
    restart: unless-stopped
    ports:
      - "8080:8080"
    environment:
      - TZ=America/New_York
    volumes:
      - ./glance.yml:/app/glance.yml:ro
      - ./glance-data:/app/data
    networks:
      - glance-network

volumes:
  glance-data:

networks:
  glance-network:
    driver: bridge

Configuration File (glance.yml)

server:
  port: 8080
  host: 0.0.0.0

pages:
  - name: Home
    columns: 3
    widgets:
      - type: calendar
        week-start: monday
        time-format: 12h
        show-week-numbers: true
        show-weekdays: true
        locale: en-US
        
      - type: bookmarks
        bookmarks:
          - title: GitHub
            url: https://github.com
            icon: https://github.com/favicon.ico
          - title: Reddit
            url: https://reddit.com
            icon: https://reddit.com/favicon.ico
          - title: YouTube
            url: https://youtube.com
            icon: https://youtube.com/favicon.ico
            
      - type: weather
        location: New York, NY
        units: imperial
        forecast-days: 5
        show-hourly: true
        api-key: your-openweather-api-key
        
      - type: rss
        feeds:
          - title: Tech News
            url: https://techcrunch.com/feed/
            limit: 5
          - title: Hacker News
            url: https://hnrss.org/frontpage
            limit: 5
        refresh-interval: 15m
        
      - type: search
        engines:
          - name: Google
            url: https://www.google.com/search?q=
          - name: DuckDuckGo
            url: https://duckduckgo.com/?q=
          - name: Wikipedia
            url: https://en.wikipedia.org/wiki/
            
      - type: clock
        format: 12h
        show-date: true
        show-seconds: false
        timezone: America/New_York
        
      - type: system
        show-cpu: true
        show-memory: true
        show-disk: true
        show-network: true
        refresh-interval: 5s
        
      - type: docker
        containers:
          - name: pihole
            icon: pi-hole
          - name: nextcloud
            icon: nextcloud
          - name: jellyfin
            icon: jellyfin
        show-status: true
        show-stats: true
        
      - type: iframe
        title: Grafana Dashboard
        url: http://grafana.yourdomain.com/d/overview
        height: 400
        
      - type: html
        title: Custom HTML
        content: |
          <h3>Welcome to Glance!</h3>
          <p>This is your personal dashboard.</p>
          <button onclick="alert('Hello!')">Click me</button>
        height: 200

  - name: Work
    columns: 2
    widgets:
      - type: calendar
        week-start: monday
        time-format: 24h
        locale: en-US
        
      - type: bookmarks
        bookmarks:
          - title: Company Portal
            url: https://portal.company.com
            icon: https://portal.company.com/favicon.ico
          - title: Email
            url: https://mail.company.com
            icon: https://mail.company.com/favicon.ico
          - title: Jira
            url: https://jira.company.com
            icon: https://jira.company.com/favicon.ico
            
      - type: rss
        feeds:
          - title: Company News
            url: https://company.com/news/feed
            limit: 3
          - title: Industry News
            url: https://industry.com/feed
            limit: 3
            
      - type: clock
        format: 24h
        show-date: true
        timezone: America/New_York

  - name: Media
    columns: 2
    widgets:
      - type: bookmarks
        bookmarks:
          - title: Jellyfin
            url: http://jellyfin.yourdomain.com
            icon: http://jellyfin.yourdomain.com/favicon.ico
          - title: Plex
            url: http://plex.yourdomain.com
            icon: http://plex.yourdomain.com/favicon.ico
          - title: Spotify
            url: https://open.spotify.com
            icon: https://open.spotify.com/favicon.ico
            
      - type: weather
        location: Los Angeles, CA
        units: imperial
        forecast-days: 3
        api-key: your-openweather-api-key
        
      - type: rss
        feeds:
          - title: Movie News
            url: https://movieweb.com/feed
            limit: 5
          - title: Music News
            url: https://pitchfork.com/feed
            limit: 5

Widget Types

Calendar Widget

- type: calendar
  week-start: monday        # monday/sunday
  time-format: 12h          # 12h/24h
  show-week-numbers: true   # true/false
  show-weekdays: true       # true/false
  locale: en-US             # Locale code
  timezone: America/New_York # Timezone

Bookmarks Widget

- type: bookmarks
  bookmarks:
    - title: Site Name
      url: https://example.com
      icon: https://example.com/favicon.ico
      description: Optional description
      category: Optional category

Weather Widget

- type: weather
  location: "New York, NY"     # City, State or City, Country
  units: imperial             # imperial/metric
  forecast-days: 5           # Number of days (1-7)
  show-hourly: true           # Show hourly forecast
  api-key: your-openweather-api-key

RSS Widget

- type: rss
  feeds:
    - title: Feed Name
      url: https://example.com/feed.xml
      limit: 5                # Number of items
      refresh-interval: 15m   # Refresh interval
      show-description: true  # Show item descriptions
      show-thumbnail: true    # Show thumbnails

Search Widget

- type: search
  engines:
    - name: Google
      url: https://www.google.com/search?q=
      icon: https://google.com/favicon.ico
    - name: DuckDuckGo
      url: https://duckduckgo.com/?q=
      icon: https://duckduckgo.com/favicon.ico
    - name: Wikipedia
      url: https://en.wikipedia.org/wiki/
      icon: https://wikipedia.org/favicon.ico

Clock Widget

- type: clock
  format: 12h                 # 12h/24h
  show-date: true            # true/false
  show-seconds: false        # true/false
  timezone: America/New_York # Timezone

System Widget

- type: system
  show-cpu: true             # Show CPU usage
  show-memory: true          # Show memory usage
  show-disk: true            # Show disk usage
  show-network: true         # Show network usage
  refresh-interval: 5s      # Refresh interval

Docker Widget

- type: docker
  containers:
    - name: container-name
      icon: icon-name
      status-url: http://container:port/status
  show-status: true          # Show container status
  show-stats: true           # Show container stats

Iframe Widget

- type: iframe
  title: Widget Title
  url: https://example.com
  height: 400                # Height in pixels
  width: 100%                # Width in percentage
  border: none               # Border style

HTML Widget

- type: html
  title: Widget Title
  content: |
    <h3>Custom HTML Content</h3>
    <p>This can include any HTML content.</p>
    <script>
      // JavaScript code here
      console.log('Hello from Glance!');
    </script>
  height: 200                # Height in pixels

Setup Guide

1. Create Configuration:

   # Create glance.yml
   touch glance.yml
   # Copy the example configuration above
   

2. Get Weather API Key:

   # Get API key from https://openweathermap.org/api
   

3. Deploy:

   docker-compose up -d
   

4. Access: Open http://localhost:8080

5. Customize: Edit glance.yml to your preferences

Reverse Proxy (Traefik)

labels:
  - "traefik.enable=true"
  - "traefik.http.routers.glance.rule=Host(`glance.yourdomain.com`)"
  - "traefik.http.routers.glance.tls=true"
  - "traefik.http.routers.glance.tls.certresolver=letsencrypt"
  - "traefik.http.services.glance.loadbalancer.server.port=8080"

Backup Strategy

# Backup configuration
cp glance.yml glance.yml.backup

# Backup data
docker run --rm -v glance-data:/app/data -v $(pwd):/backup alpine tar czf /backup/glance-data-backup.tar.gz -C /app/data .

# Restore data
docker run --rm -v glance-data:/app/data -v $(pwd):/backup alpine tar xzf /backup/glance-data-backup.tar.gz -C /app/data

# Restart after restore
docker-compose restart glance

Performance Optimization

# For better performance
environment:
  - TZ=America/New_York

# Resource limits
deploy:
  resources:
    limits:
      memory: 256M
      cpus: '0.5'
    reservations:
      memory: 128M
      cpus: '0.2'

Security

• Use HTTPS in production
• Network access control
• Regular backups
• Monitor access logs

Customization

Custom CSS

# Add custom CSS to your HTML widget
- type: html
  content: |
    <style>
      .custom-widget {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 10px;
      }
    </style>
    <div class="custom-widget">
      <h3>Custom Styled Widget</h3>
    </div>

Custom JavaScript

- type: html
  content: |
    <script>
      // Auto-refresh widget
      setInterval(() => {
        fetch('https://api.example.com/data')
          .then(response => response.json())
          .then(data => {
            document.getElementById('data').textContent = data.value;
          });
      }, 5000);
    </script>
    <div id="data">Loading...</div>

Advanced Examples

Stock Ticker Widget

- type: html
  title: Stock Prices
  content: |
    <div id="stocks">
      <div>AAPL: <span id="aapl">Loading...</span></div>
      <div>GOOGL: <span id="googl">Loading...</span></div>
      <div>MSFT: <span id="msft">Loading...</span></div>
    </div>
    <script>
      // Fetch stock prices (you'd need a real API)
      const stocks = ['AAPL', 'GOOGL', 'MSFT'];
      stocks.forEach(stock => {
        fetch(`https://api.example.com/stocks/${stock}`)
          .then(response => response.json())
          .then(data => {
            document.getElementById(stock.toLowerCase()).textContent = data.price;
          });
      });
    </script>
  height: 150

Server Status Widget

- type: html
  title: Server Status
  content: |
    <div id="server-status">
      <div>Web Server: <span id="web-status">Checking...</span></div>
      <div>Database: <span id="db-status">Checking...</span></div>
      <div>API: <span id="api-status">Checking...</span></div>
    </div>
    <script>
      const services = [
        { name: 'web', url: 'https://example.com' },
        { name: 'db', url: 'http://localhost:5432' },
        { name: 'api', url: 'https://api.example.com' }
      ];
      
      services.forEach(service => {
        fetch(service.url)
          .then(response => {
            const status = response.ok ? '✅ Online' : '❌ Offline';
            document.getElementById(`${service.name}-status`).textContent = status;
          })
          .catch(() => {
            document.getElementById(`${service.name}-status`).textContent = '❌ Offline';
          });
      });
    </script>
  height: 150

Calendar Integration

- type: html
  title: Google Calendar
  content: |
    <iframe src="https://calendar.google.com/calendar/embed?src=your-email@gmail.com" 
            style="border: 0" width="100%" height="300" frameborder="0" scrolling="no">
    </iframe>
  height: 300

Troubleshooting

• Configuration errors: Check YAML syntax
• Widget not loading: Verify widget configuration
• Performance issues: Reduce refresh intervals
• API errors: Check API keys and URLs

Maintenance

# Restart service
docker-compose restart

# Update image
docker-compose pull && docker-compose up -d

# Check logs
docker-compose logs -f glance

# Validate configuration
docker exec glance glance --validate-config

Best Practices

1. Keep it simple: Don't overload your dashboard
2. Use appropriate refresh intervals: Don't refresh too frequently
3. Monitor performance: Keep an eye on resource usage
4. Secure your dashboard: Use authentication in production
5. Backup regularly: Save your configuration
6. Test widgets: Ensure all widgets work properly
7. Use HTTPS: Always use HTTPS in production
8. Organize pages: Group related widgets on separate pages

Mobile Support

• Glance is mobile-responsive
• Use touch-friendly widgets
• Consider mobile data usage
• Test on different screen sizes

Integration Examples

Home Assistant Integration

- type: html
  title: Home Assistant
  content: |
    <iframe src="http://homeassistant.local:8123/lovelace-dashboard" 
            style="border: 0" width="100%" height="400" frameborder="0">
    </iframe>
  height: 400

Grafana Integration

- type: html
  title: System Metrics
  content: |
    <iframe src="http://grafana.local:3000/d-solo/system-overview" 
            style="border: 0" width="100%" height="300" frameborder="0">
    </iframe>
  height: 300

Custom API Integration

- type: html
  title: API Status
  content: |
    <div id="api-status">
      <div>API Response Time: <span id="response-time">Checking...</span></div>
      <div>Last Updated: <span id="last-updated">-</span></div>
    </div>
    <script>
      const checkAPI = () => {
        const start = Date.now();
        fetch('https://api.example.com/health')
          .then(response => {
            const responseTime = Date.now() - start;
            document.getElementById('response-time').textContent = `${responseTime}ms`;
            document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
          })
          .catch(() => {
            document.getElementById('response-time').textContent = 'Error';
          });
      };
      
      checkAPI();
      setInterval(checkAPI, 30000); // Check every 30 seconds
    </script>
  height: 100