Glance Widgets

Init date: April 12, 2024

Glance Widgets is a collection of widgets for the Glance - self-hosted dashboard.

It provides a variety of widgets that can be used to display different types of information on the dashboard.

Widgets

Last.FM Recently Played

GitHub link

This widget displays the last 5 tracks played on Last.FM. It uses the Last.FM API to fetch the data and displays it in a simple list format. It can also be expanded to show 5 more tracks.

The widget is designed to be simple and easy to use, with a clean and modern design.

Here is the code for the widget:

- type: custom-api
  title: Last.fm
  cache: 60s
  url: http://ws.audioscrobbler.com/2.0/
  parameters:
    method: user.getRecentTracks
    user: ${LASTFM_USERNAME}
    api_key: ${LASTFM_API_KEY}
    format: json
    limit: 10
  template: |
    <ul class="list list-gap-10 collapsible-container" data-collapse-after="5">
      {{ range .JSON.Array "recenttracks.track" }}
        <li class="flex items-center gap-10">
          <img src={{ .String "image.2.#text" }} style="border-radius: 5px; min-width: 5rem; max-width: 5rem;" class="card">
          <div class="flex-1">
            <p class="color-positive size-h5">{{ .String "artist.#text" }}</p>
            <p class="size-h5">{{ .String "name" }}</p>
            <p class="size-h6">
              {{ if .String "@attr.nowplaying" }}
                <span class="color-positive">Now playing</span>
              {{ else }}
                <span class="color-subdue" {{ .String "date.#text" | parseRelativeTime "02 Jan 2006, 15:04" }}></span>
              {{ end }}
            </p>
          </div>
        </li>
      {{ end }}
    </ul>

Hardcover Currently Reading

GitHub Link

This widget showcases the currently reading book from Hardcover app. It uses the Hardcover GraphQL API to fetch the data and displays it in a simple list format.

This one is a bit more complex than the Last.FM widget, as it requires GraphQL queries to fetch the data. It was my first encounter with GraphQL, and I found it to be quite interesting.

- type: custom-api
  title: Hardcover
  cache: 3h
  url: https://api.hardcover.app/v1/graphql
  headers:
    content-type: application/json
    authorization: ${HARDCOVER_API_KEY}
  body:
    query: |
      query MyQuery {
        me {
          user_books(where: {status_id: {_eq: 2}}, order_by: {first_read_date: desc}) {
            id
            user_book_reads(
              limit: 1,
              order_by: {started_at: desc_nulls_last}
            ) {
              id
              started_at
              progress
              edition {
                image {
                  url
                }
                cached_contributors
              }
            }
            book {
              title
              slug
            }
          }
        }
      }
  template: |
    <ul class="list list-gap-10 collapsible-container" data-collapse-after="5">
      {{ range .JSON.Array "data.me.0.user_books" }}
        <li class="flex items-center gap-10">
          <div style="border-radius: 5px; max-height: 10rem; max-width: 6rem; overflow: hidden;">
            <img src="{{ .String "user_book_reads.0.edition.image.url" }}" class="card" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
          </div>
          <div class="flex-1">
            <a class="size-h4 color-highlight" href="https://hardcover.app/books/{{ .String "book.slug" }}">{{ .String "book.title" }}</a>
            <ul class="list-horizontal-text size-h5">
              {{ range .Array "user_book_reads.0.edition.cached_contributors" }}
                {{ if not (.String "contribution") }}
                  <li>{{ .String "author.name" }}</li>
                {{ end }}
              {{ end }}
            </ul>
            <ul class="list-horizontal-text" >
              <li>{{ .String "user_book_reads.0.started_at" }}</li>
              <li>{{ .Int "user_book_reads.0.progress" }}%</li>
            </ul>
          </div>
        </li>
      {{ end }}
    </ul>