From 4dbb5975c0aade035dbd6b3e852d7ba581fcda21 Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Sat, 29 Jun 2024 15:55:17 +0100
Subject: [PATCH] Allow setting custom CSS classes for individual widgets

---
 docs/configuration.md                      | 6 ++++++
 internal/assets/templates/widget-base.html | 4 ++--
 internal/widget/widget.go                  | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 7946606..9a8c2be 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -235,6 +235,8 @@ theme:
 > .widget-type-rss a {
 >     font-size: 1.5rem;
 > }
+>
+> In addition, you can also use the `css-class` property which is available on every widget to set custom class names for individual widgets.
 
 
 ## Pages & Columns
@@ -356,6 +358,7 @@ pages:
 | type | string | yes |
 | title | string | no |
 | cache | string | no |
+| css-class | string | no |
 
 #### `type`
 Used to specify the widget.
@@ -377,6 +380,9 @@ cache: 1d  # 1 day
 >
 > Not all widgets can have their cache duration modified. The calendar and weather widgets update on the hour and this cannot be changed.
 
+#### `css-class`
+Set custom CSS classes for the specific widget instance.
+
 ### RSS
 Display a list of articles from multiple RSS feeds.
 
diff --git a/internal/assets/templates/widget-base.html b/internal/assets/templates/widget-base.html
index e37d53f..c32f9d0 100644
--- a/internal/assets/templates/widget-base.html
+++ b/internal/assets/templates/widget-base.html
@@ -1,4 +1,4 @@
-<div class="widget widget-type-{{ .GetType }}">
+<div class="widget widget-type-{{ .GetType }}{{ if ne "" .CSSClass }} {{ .CSSClass }}{{ end }}">
     <div class="widget-header">
         <div class="uppercase">{{ .Title }}</div>
         {{ if and .Error .ContentAvailable }}
@@ -7,7 +7,7 @@
         <div class="notice-icon notice-icon-minor" title="{{ .Notice }}"></div>
         {{ end }}
     </div>
-    <div class="widget-content {{ if .ContentAvailable }}{{ block "widget-content-classes" . }}{{ end }}{{ end }}">
+    <div class="widget-content{{ if .ContentAvailable }} {{ block "widget-content-classes" . }}{{ end }}{{ end }}">
         {{ if .ContentAvailable }}
             {{ block "widget-content" . }}{{ end }}
         {{ else }}
diff --git a/internal/widget/widget.go b/internal/widget/widget.go
index 0ccb3de..574db1d 100644
--- a/internal/widget/widget.go
+++ b/internal/widget/widget.go
@@ -119,6 +119,7 @@ const (
 type widgetBase struct {
 	Type                string        `yaml:"type"`
 	Title               string        `yaml:"title"`
+	CSSClass            string        `yaml:"css-class"`
 	CustomCacheDuration DurationField `yaml:"cache"`
 	ContentAvailable    bool          `yaml:"-"`
 	Error               error         `yaml:"-"`