Additions to monitor and bookmarks widgets

internal/assets/static/main.css

@@ -33,6 +33,7 @@
     --color-widget-background: hsl(var(--color-widget-background-hsl-values));
     --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm))));
     --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
+    --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
 
     --ths: var(--bgh), calc(var(--bgs) * var(--tsm));
     --color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
@@ -80,7 +81,7 @@
 
 .visited-indicator:not(.text-truncate)::after,
 .visited-indicator.text-truncate::before,
-.bookmarks-link::after {
+.bookmarks-link:not(.bookmarks-link-no-arrow)::after {
     content: '↗';
     margin-left: 0.5em;
     display: inline-block;
@@ -590,10 +591,31 @@ body {
     color: var(--bookmarks-group-color);
 }
 
-.bookmarks-link::after {
+.bookmarks-group .bookmarks-link::after {
     color: var(--bookmarks-group-color);
 }
 
+.bookmarks-icon-container {
+    margin-block: 0.1rem;
+    background-color: var(--color-widget-background-highlight);
+    border-radius: var(--border-radius);
+    padding: 0.5rem;
+}
+
+.bookmarks-icon {
+    width: 20px;
+    height: 20px;
+    opacity: 0.8;
+}
+
+.simple-icon {
+    opacity: 0.7;
+}
+
+:root:not(.light-scheme) .simple-icon {
+    filter: invert(1);
+}
+
 .calendar-day {
     width: calc(100% / 7);
     text-align: center;

internal/assets/templates/bookmarks.html

@@ -7,7 +7,14 @@
         {{ if ne .Title "" }}<div class="bookmarks-group-title size-h3 margin-bottom-3">{{ .Title }}</div>{{ end }}
         <ul class="list list-gap-2">
         {{ range .Links }}
-            <li><a href="{{ .URL }}" class="bookmarks-link color-highlight size-h4" target="_blank" rel="noreferrer">{{ .Title }}</a></li>
+            <li class="flex items-center gap-10">
+                {{ if ne "" .Icon }}
+                <div class="bookmarks-icon-container">
+                    <img class="bookmarks-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .Icon }}" alt="" loading="lazy">
+                </div>
+                {{ end }}
+                <a href="{{ .URL }}" class="bookmarks-link {{ if .HideArrow }}bookmarks-link-no-arrow {{ end }}color-highlight size-h4" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
+            </li>
         {{ end }}
         </ul>
     </li>

internal/assets/templates/monitor.html

@@ -8,7 +8,7 @@
         <img class="monitor-site-icon" src="{{ .IconUrl }}" alt="" loading="lazy">
         {{ end }}
         <div>
-            <a class="size-h3 color-highlight" href="{{ .Url }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
+            <a class="size-h3 color-highlight" href="{{ .Url }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
             <ul class="list-horizontal-text">
                 {{ if not .Status.Error }}
                 <li>{{ .StatusText }}</li>

internal/widget/bookmarks.go

@@ -2,6 +2,7 @@ package widget
 
 import (
 	"html/template"
+	"strings"
 
 	"github.com/glanceapp/glance/internal/assets"
 )
@@ -13,14 +14,33 @@ type Bookmarks struct {
 		Title string         `yaml:"title"`
 		Color *HSLColorField `yaml:"color"`
 		Links []struct {
-			Title string `yaml:"title"`
-			URL   string `yaml:"url"`
+			Title        string `yaml:"title"`
+			URL          string `yaml:"url"`
+			Icon         string `yaml:"icon"`
+			IsSimpleIcon bool   `yaml:"-"`
+			SameTab      bool   `yaml:"same-tab"`
+			HideArrow    bool   `yaml:"hide-arrow"`
 		} `yaml:"links"`
 	} `yaml:"groups"`
 }
 
 func (widget *Bookmarks) Initialize() error {
 	widget.withTitle("Bookmarks").withError(nil)
+
+	for g := range widget.Groups {
+		for l := range widget.Groups[g].Links {
+			if widget.Groups[g].Links[l].Icon == "" {
+				continue
+			}
+
+			if strings.HasPrefix(widget.Groups[g].Links[l].Icon, "si:") {
+				icon := strings.TrimPrefix(widget.Groups[g].Links[l].Icon, "si:")
+				widget.Groups[g].Links[l].IsSimpleIcon = true
+				widget.Groups[g].Links[l].Icon = "https://cdnjs.cloudflare.com/ajax/libs/simple-icons/11.14.0/" + icon + ".svg"
+			}
+		}
+	}
+
 	widget.cachedHTML = widget.render(widget, assets.BookmarksTemplate)
 
 	return nil

internal/widget/monitor.go

@@ -49,6 +49,7 @@ type Monitor struct {
 		Title       string           `yaml:"title"`
 		Url         string           `yaml:"url"`
 		IconUrl     string           `yaml:"icon"`
+		SameTab     bool             `yaml:"same-tab"`
 		Status      *feed.SiteStatus `yaml:"-"`
 		StatusText  string           `yaml:"-"`
 		StatusStyle string           `yaml:"-"`