TDvorak/Containr
1
0
Fork 0
mirror of https://github.com/Dvorinka/Containr.git synced 2026-06-04 04:22:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
08cb5754f3321c3a0280e674c412698c0625dd83
Containr/templates/glance.md
T
Tomas Dvorak 08cb5754f3 small fix, don't worry about it
2026-04-10 12:02:36 +02:00

575 lines
14 KiB
Markdown
Raw Blame History

# 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
```bash
# Create docker-compose.yml with the content below
docker-compose up -d
```
## Docker Compose
```yaml
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)
```yaml
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
```yaml
- 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
```yaml
- type: bookmarks
bookmarks:
- title: Site Name
url: https://example.com
icon: https://example.com/favicon.ico
description: Optional description
category: Optional category
```
### Weather Widget
```yaml
- 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
```yaml
- 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
```yaml
- 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
```yaml
- type: clock
format: 12h # 12h/24h
show-date: true # true/false
show-seconds: false # true/false
timezone: America/New_York # Timezone
```
### System Widget
```yaml
- 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
```yaml
- 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
```yaml
- 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
```yaml
- 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**:
```bash
# Create glance.yml
touch glance.yml
# Copy the example configuration above
```
2. **Get Weather API Key**:
```bash
# Get API key from https://openweathermap.org/api
```
3. **Deploy**:
```bash
docker-compose up -d
```
4. **Access**: Open http://localhost:8080
5. **Customize**: Edit glance.yml to your preferences
## Reverse Proxy (Traefik)
```yaml
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
```bash
# 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
```yaml
# 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
```yaml
# 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
```yaml
- 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
```yaml
- 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
```yaml
- 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
```yaml
- 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
```bash
# 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
```yaml
- 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
```yaml
- 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
```yaml
- 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
```
Reference in New Issue View Git Blame Copy Permalink