Merge pull request #255 from 2q2code/main

Add Dashboard Icons support

docs/configuration.md

@@ -1177,7 +1177,7 @@ The URL which will be requested and its response will determine the status of th
 
 `icon`
 
-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). You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix:
+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). You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix or [Dashboard Icons](https://github.com/walkxcode/dashboard-icons) via a `di:` prefix:
 
 ```yaml
 icon: si:jellyfin
@@ -1464,7 +1464,7 @@ An array of groups which can optionally have a title and a custom color.
 
 `icon`
 
-URL pointing to an image. You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix:
+URL pointing to an image. You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix or [Dashboard Icons](https://github.com/walkxcode/dashboard-icons) via a `di:` prefix:
 
 ```yaml
 icon: si:gmail

internal/assets/static/main.css

@@ -1070,7 +1070,7 @@ details[open] .summary::after {
     opacity: 0.8;
 }
 
-:root:not(.light-scheme) .simple-icon {
+:root:not(.light-scheme) .flat-icon {
     filter: invert(1);
 }
 
@@ -1370,7 +1370,7 @@ details[open] .summary::after {
     transition: filter 0.3s, opacity 0.3s;
 }
 
-.monitor-site-icon.simple-icon {
+.monitor-site-icon.flat-icon {
     opacity: 0.7;
 }
 
@@ -1378,7 +1378,7 @@ details[open] .summary::after {
     opacity: 1;
 }
 
-.monitor-site:hover .monitor-site-icon:not(.simple-icon) {
+.monitor-site:hover .monitor-site-icon:not(.flat-icon) {
     filter: grayscale(0);
 }
 

internal/assets/templates/bookmarks.html

@@ -8,9 +8,9 @@
         <ul class="list list-gap-2">
         {{ range .Links }}
         <li class="flex items-center gap-10">
-            {{ if ne "" .Icon }}
+            {{ if ne "" .Icon.URL }}
             <div class="bookmarks-icon-container">
-                <img class="bookmarks-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .Icon }}" alt="" loading="lazy">
+                <img class="bookmarks-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" 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>

internal/assets/templates/monitor.html

@@ -21,8 +21,8 @@
 {{ end }}
 
 {{ define "site" }}
-{{ if .IconUrl }}
+{{ if .Icon.URL }}
-<img class="monitor-site-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .IconUrl }}" alt="" loading="lazy">
+<img class="monitor-site-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy">
 {{ end }}
 <div class="min-width-0">
     <a class="size-h3 color-highlight text-truncate block" href="{{ .URL }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>

internal/widget/bookmarks.go

@@ -13,30 +13,17 @@ 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"`
+			Icon      CustomIcon `yaml:"icon"`
-			IsSimpleIcon bool   `yaml:"-"`
+			SameTab   bool       `yaml:"same-tab"`
-			SameTab      bool   `yaml:"same-tab"`
+			HideArrow bool       `yaml:"hide-arrow"`
-			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
-			}
-
-			link := &widget.Groups[g].Links[l]
-			link.Icon, link.IsSimpleIcon = toSimpleIconIfPrefixed(link.Icon)
-		}
-	}
-
 	widget.cachedHTML = widget.render(widget, assets.BookmarksTemplate)
 
 	return nil

internal/widget/fields.go

@@ -177,13 +177,49 @@ func (f *OptionalEnvString) String() string {
 	return string(*f)
 }
 
-func toSimpleIconIfPrefixed(icon string) (string, bool) {
+type CustomIcon struct {
-	if !strings.HasPrefix(icon, "si:") {
+	URL        string
-		return icon, false
+	IsFlatIcon bool
+	// TODO: along with whether the icon is flat, we also need to know
+	// whether the icon is black or white by default in order to properly
+	// invert the color based on the theme being light or dark
+}
+
+func (i *CustomIcon) UnmarshalYAML(node *yaml.Node) error {
+	var value string
+	if err := node.Decode(&value); err != nil {
+		return err
 	}
 
-	icon = strings.TrimPrefix(icon, "si:")
+	prefix, icon, found := strings.Cut(value, ":")
-	icon = "https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/" + icon + ".svg"
+	if !found {
+		i.URL = value
+		return nil
+	}
 
-	return icon, true
+	switch prefix {
+	case "si":
+		i.URL = "https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/" + icon + ".svg"
+		i.IsFlatIcon = true
+	case "di":
+		// syntax: di:<icon_name>[.svg|.png]
+		// if the icon name is specified without extension, it is assumed to be wanting the SVG icon
+		// otherwise, specify the extension of either .svg or .png to use either of the CDN offerings
+		// any other extension will be interpreted as .svg
+		basename, ext, found := strings.Cut(icon, ".")
+		if !found {
+			ext = "svg"
+			basename = icon
+		}
+
+		if ext != "svg" && ext != "png" {
+			ext = "svg"
+		}
+
+		i.URL = "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/" + ext + "/" + basename + "." + ext
+	default:
+		i.URL = value
+	}
+
+	return nil
 }

internal/widget/monitor.go

@@ -48,8 +48,7 @@ type Monitor struct {
 		*feed.SiteStatusRequest `yaml:",inline"`
 		Status                  *feed.SiteStatus `yaml:"-"`
 		Title                   string           `yaml:"title"`
-		IconUrl                 string           `yaml:"icon"`
+		Icon                    CustomIcon       `yaml:"icon"`
-		IsSimpleIcon            bool             `yaml:"-"`
 		SameTab                 bool             `yaml:"same-tab"`
 		StatusText              string           `yaml:"-"`
 		StatusStyle             string           `yaml:"-"`
@@ -62,10 +61,6 @@ type Monitor struct {
 func (widget *Monitor) Initialize() error {
 	widget.withTitle("Monitor").withCacheDuration(5 * time.Minute)
 
-	for i := range widget.Sites {
-		widget.Sites[i].IconUrl, widget.Sites[i].IsSimpleIcon = toSimpleIconIfPrefixed(widget.Sites[i].IconUrl)
-	}
-
 	return nil
 }