Additions to monitor and bookmarks widgets

docs/configuration.md

@@ -491,7 +491,6 @@ Placeholders:
 
 `{POST-ID}` - the ID of the post
 
-
 ### Reddit
 Display a list of posts from a specific subreddit.
 
@@ -682,11 +681,12 @@ You can hover over the "ERROR" text to view more information.
 
 Properties for each site:
 
-| Name | Type | Required |
+| Name | Type | Required | Default |
-| ---- | ---- | -------- |
+| ---- | ---- | -------- | ------- |
-| title | string | yes |
+| title | string | yes | |
-| url | string | yes |
+| url | string | yes | |
-| icon | string | no |
+| icon | string | no | |
+| same-tab | boolean | no | false |
 
 `title`
 
@@ -700,6 +700,10 @@ The URL which will be requested and its response will determine the status of th
 
 Optional URL to an image which will be used as the icon for the site. Can be an external URL or internal via [server configured assets](#assets-path).
 
+`same-tab`
+
+Whether to open the link in the same or a new tab.
+
 ### Releases
 Display a list of releases for specific repositories on Github. Draft releases and prereleases will not be shown.
 
@@ -816,14 +820,39 @@ An array of groups which can optionally have a title and a custom color.
 | Name | Type | Required | Default |
 | ---- | ---- | -------- | ------- |
 | title | string | no | |
-| color | HSL | no | the primary theme color |
+| color | HSL | no | the primary color of the theme |
 | links | array | yes | |
 
 ###### Properties for each link
-| Name | Type | Required |
+| Name | Type | Required | Default |
-| ---- | ---- | -------- |
+| ---- | ---- | -------- | ------- |
-| title | string | yes |
+| title | string | yes | |
-| url | string | yes |
+| url | string | yes | |
+| icon | string | no | |
+| same-tab | boolean | no | false |
+| hide-arrow | boolean | no | false |
+
+`icon`
+
+URL pointing to an image. You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix:
+
+```yaml
+icon: si:gmail
+icon: si:youtube
+icon: si:reddit
+```
+
+> [!WARNING]
+>
+> Simple Icons are loaded externally and are hosted on `cdnjs.cloudflare.com`, if you do not wish to depend on a 3rd party you are free to download the icons individually and host them locally.
+
+`same-tab`
+
+Whether to open the link in the same tab or a new one.
+
+`hide-arrow`
+
+Whether to hide the colored arrow on each link.
 
 ### Calendar
 Display a calendar.

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"`
+			Title        string `yaml:"title"`
-			URL   string `yaml:"url"`
+			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:"-"`