Add a clock widget

It's a simple clock that shows the current time

Signed-off-by: Yarden Shoham <git@yardenshoham.com>

README.md

@@ -11,6 +11,7 @@
 * Weather
 * Bookmarks
 * Latest YouTube videos from specific channels
+* Clock
 * Calendar
 * Stocks
 * iframe

docs/configuration.md

@@ -17,6 +17,7 @@
   - [Repository](#repository)
   - [Bookmarks](#bookmarks)
   - [Calendar](#calendar)
+  - [Clock](#clock)
   - [Stocks](#stocks)
   - [Twitch Channels](#twitch-channels)
   - [Twitch Top Games](#twitch-top-games)
@@ -34,6 +35,7 @@ pages:
     columns:
       - size: small
         widgets:
+          - type: clock
           - type: calendar
 
           - type: rss
@@ -963,6 +965,19 @@ Whether to open the link in the same tab or a new one.
 
 Whether to hide the colored arrow on each link.
 
+### Clock
+Display a clock showing the current time.
+
+Example:
+
+```yaml
+- type: clock
+```
+
+Preview:
+
+![](images/clock-widget-preview.png)
+
 ### Calendar
 Display a calendar.
 

internal/assets/static/main.js

@@ -341,6 +341,20 @@ function afterContentReady(callback) {
     contentReadyCallbacks.push(callback);
 }
 
+function updateClocks(elements, formatter) {
+    const currentDate = new Date();
+    for (const elem of elements) {
+        elem.textContent = formatter.format(currentDate);
+    }
+}
+
+function setupClocks() {
+    const clockFormatter = new Intl.DateTimeFormat(undefined, {minute: "numeric", hour: "numeric"});
+    const elements = document.getElementsByClassName("glance-clock");
+    updateClocks(elements, clockFormatter)
+    setInterval(() => {updateClocks(elements, clockFormatter)}, 1000);
+}
+
 async function setupPage() {
     const pageElement = document.getElementById("page");
     const pageContentElement = document.getElementById("page-content");
@@ -349,6 +363,7 @@ async function setupPage() {
     pageContentElement.innerHTML = pageContent;
 
     try {
+        setupClocks()
         setupCarousels();
         setupCollapsibleLists();
         setupCollapsibleGrids();

internal/assets/templates.go

@@ -15,6 +15,7 @@ var (
 	PageTemplate                  = compileTemplate("page.html", "document.html", "page-style-overrides.gotmpl")
 	PageContentTemplate           = compileTemplate("content.html")
 	CalendarTemplate              = compileTemplate("calendar.html", "widget-base.html")
+	ClockTemplate                 = compileTemplate("clock.html", "widget-base.html")
 	BookmarksTemplate             = compileTemplate("bookmarks.html", "widget-base.html")
 	IFrameTemplate                = compileTemplate("iframe.html", "widget-base.html")
 	WeatherTemplate               = compileTemplate("weather.html", "widget-base.html")

internal/assets/templates/clock.html

@@ -0,0 +1,5 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+<div class="size-h2 color-highlight text-center glance-clock"></div>
+{{ end }}

internal/widget/clock.go

@@ -0,0 +1,23 @@
+package widget
+
+import (
+	"context"
+	"html/template"
+
+	"github.com/glanceapp/glance/internal/assets"
+)
+
+type Clock struct {
+	widgetBase `yaml:",inline"`
+}
+
+func (widget *Clock) Initialize() error {
+	widget.withTitle("Clock").withError(nil)
+	return nil
+}
+
+func (widget *Clock) Update(ctx context.Context) {}
+
+func (widget *Clock) Render() template.HTML {
+	return widget.render(widget, assets.ClockTemplate)
+}

internal/widget/widget.go

@@ -19,6 +19,8 @@ func New(widgetType string) (Widget, error) {
 	switch widgetType {
 	case "calendar":
 		return &Calendar{}, nil
+	case "clock":
+		return &Clock{}, nil
 	case "weather":
 		return &Weather{}, nil
 	case "bookmarks":