A Dashboard at a Glance
Problem Statement
I like a lot of different topics and sometimes I’m inspired to focus on one specific topic at a time. This may involve finding posts on Reddit or Youtube, but going to that platform can quickly lead me astray, down a rabbit hole of something unrelated.
Solution: Glance, a way to build a custom dashboard with feeds from tools like Reddit and YouTube. It can also be extended.
This is what we’re going to build, self-hosted via Docker.
tldr: You can find a gist with the full yaml here.
Glance
Quickstart
See the install guide here on how to run it from docker. Even quicker:
- Make glance.yml using a preconfigured page
- run:
docker run -d -p 8080:8080 -v ./glance.yml:/app/glance.yml glanceapp/glance
- Navigate to http://localhost:8080
You should review the configuration guide for the options you’re able to use when setting up your dashboard.
glance.yml
For a simple layout, with two small columns with one large column in the middle, you can do something like this:
# glance.yml
pages:
- name: Home
columns:
- size: small
widgets:
- type: calendar
- type: weather
location: Denver, Colorado, United States
units: imperial
hour-format: 24h
- size: full
widgets:
- type: hacker-news
limit: 15
collapse-after: 3
- type: videos
channels:
- UCsXVk37bltHxD1rDPwtNM8Q # kurzgesagt
- size: small
widgets:
- type: twitch-channels
channels:
- smallant
- type: markets
markets:
- symbol: SPY
name: S&P 500
- symbol: BTC-USD
name: Bitcoin
I’m running Glance through docker compose, and theses are my settings. You’ll need to modify the location of glance.yml for your own setup. You also probably don’t need the environment variables I use, or DNS settings.
docker-compose
# docker-compose.yml
version: '3.7'
services:
glance:
image: glanceapp/glance
volumes:
- /volume1/docker/configs/glance/glance.yml:/app/glance.yml
ports:
- 32789:8080
environment:
- TZ=America/Denver
- PUID=1026
- PGID=101
dns:
- 1.1.1.1
restart: unless-stopped
Get Youtube Channel IDs
When you get to adding in the YouTube subscriptions that you want to have on a page, you’ll need the channel ID instead of the name. I’ll walk you through finding it.
- Navigate to a channel you want to find the ID for (e.g. @kurzgesagt)
- Right click > View page source
- Search
/channel
, and you’ll find something likecontent="https://www.youtube.com/channel/UCsXVk37bltHxD1rDPwtNM8Q"
orhref="https://www.youtube.com/channel/UCsXVk37bltHxD1rDPwtNM8Q"
. The channel ID is everything after/channel/
.
Custom iframe
I wanted to pull in the books I’m currently reading. For this I use Literal.club, and they have a way to embed widgets on a page with javascript. The downside is that at the time of writing, Glance doesn’t support Javascript in the HTML widget (though I hear it’s being worked on).
To get around this, I opted to host a simple nginx container, with some HTML that loads this widget, then I’ll include this container’s page in an iframe in the Glance dashboard.
Directory Structure
docker-compose.yml
/path/to/literal-widget/index.html
/path/to/literal-widget/Dockerfile
glance.yml iframe
# glance.yml
pages:
- name: Home
columns:
- size: small
widgets:
# ...
- type: iframe
title: Currently Reading
source: http://192.168.1.50:8080 # update to the IP address you're hosting this on
height: 250
# ...
docker-compose.yml
Add the literal-widget to your existing docker-compose containing the Glance app.
# docker-compose.yml
services:
# ...
literal-widget:
build:
context: /path/to/literal-widget
dockerfile: Dockerfile
ports:
- "8080:80"
restart: unless-stopped
# ...
Dockerfile for nginx
# Dockerfile
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80
index.html
Note: The extra CSS is to match the current theme that I’m using in Glance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Currently Reading</title>
<style>
html, body {
margin: 0;
padding: 10;
background-color: #21232C;
color: #FFFFFF;
}
#literal-widget > div > a > div > div.literal-book-item__info > div.literal-book-item__title {
color: #FFFFFF;
}
#literal-widget > div > a {
text-decoration: none;
}
#literal-widget > div > a > div > div.literal-book-item__info > div.literal-book-item__authors {
color: #7CD0AF;
}
</style>
</head>
<body>
<div id="literal-widget" handle="erikhorton" status="IS_READING" layout="list"></div>
<script src="https://literal.club/js/widget.js"></script>
</body>
</html>
That’s it! Refer back to the gist with the full yaml and customize it to your liking.
Next Steps
- See discussions for ideas
- Join the Discord to answer questions, and additional ideas
- Write a widget, maybe pull in feeds from Bluesky or X