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.

Home Dashboard

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:

  1. Make glance.yml using a preconfigured page
  2. run: docker run -d -p 8080:8080 -v ./glance.yml:/app/glance.yml glanceapp/glance
  3. 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.

  1. Navigate to a channel you want to find the ID for (e.g. @kurzgesagt)
  2. Right click > View page source
  3. Search /channel, and you’ll find something like content="https://www.youtube.com/channel/UCsXVk37bltHxD1rDPwtNM8Q" or href="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.

Architecture

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