Add horizontal-cards-2 style for RSS widget

docs/configuration.md

@@ -393,6 +393,7 @@ Example:
 | style | string | no | vertical-list |
 | feeds | array | yes |
 | thumbnail-height | float | no | 10 |
+| card-height | float | no | 27 |
 | limit | integer | no | 25 |
 | collapse-after | integer | no | 5 |
 
@@ -407,9 +408,16 @@ Used to change the appearance of the widget. Possible values are `vertical-list`
 
 ![preview of horizontal-cards style for RSS widget](images/rss-feed-horizontal-cards-preview.png)
 
+`horizontal-cards-2`
+
+![preview of horizontal-cards-2 style for RSS widget](images/rss-widget-horizontal-cards-2-preview.png)
+
 ##### `thumbnail-height`
 Used to modify the height of the thumbnails. Works only when the style is set to `horizontal-cards`. The default value is `10` and the units are `rem`, if you want to for example double the height of the thumbnails you can set it to `20`.
 
+##### `card-height`
+Used to modify the height of cards when using the `horizontal-cards-2` style. The default value is `27` and the units are `rem`.
+
 ##### `feeds`
 An array of RSS/atom feeds. The title can optionally be changed.
 

internal/assets/static/main.css

@@ -826,6 +826,43 @@ body {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
+.rss-card-2 {
+    position: relative;
+    height: var(--rss-card-height, 27rem);
+    overflow: hidden;
+}
+
+.rss-card-2::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image: linear-gradient(
+        0deg,
+        var(--color-widget-background),
+        hsla(var(--color-widget-background-hsl-values), 0.8) 6rem, transparent 14rem
+    );
+    z-index: 2;
+}
+
+.rss-card-2-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /* +1px is required to fix some weird graphical bug where the image overflows on the bottom in firefox */
+    border-radius: calc(var(--border-radius) + 1px);
+    opacity: 0.9;
+    z-index: 1;
+}
+
+.rss-card-2-content {
+    position: absolute;
+    inset-inline: 0;
+    bottom: var(--widget-content-vertical-padding);
+    z-index: 3;
+}
+
 .twitch-category-thumbnail {
     width: 5rem;
     border-radius: var(--border-radius);

internal/assets/templates.go

@@ -26,7 +26,8 @@ var (
 	VideosGridTemplate            = compileTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html")
 	StocksTemplate                = compileTemplate("stocks.html", "widget-base.html")
 	RSSListTemplate               = compileTemplate("rss-list.html", "widget-base.html")
-	RSSCardsTemplate              = compileTemplate("rss-cards.html", "widget-base.html")
+	RSSHorizontalCardsTemplate    = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
+	RSSHorizontalCards2Template   = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
 	MonitorTemplate               = compileTemplate("monitor.html", "widget-base.html")
 	TwitchGamesListTemplate       = compileTemplate("twitch-games-list.html", "widget-base.html")
 	TwitchChannelsTemplate        = compileTemplate("twitch-channels.html", "widget-base.html")

internal/assets/templates/rss-horizontal-cards-2.html

@@ -0,0 +1,28 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content-classes" }}widget-content-frameless{{ end }}
+
+{{ define "widget-content" }}
+<div class="carousel-container">
+    <div class="cards-horizontal carousel-items-container"{{ if ne 0.0 .CardHeight }} style="--rss-card-height: {{ .CardHeight }}rem;"{{ end }}>
+        {{ range .Items }}
+        <div class="card rss-card-2 widget-content-frame thumbnail-container">
+            {{ if ne "" .ImageURL }}
+            <img class="rss-card-2-image thumbnail" loading="lazy" src="{{ .ImageURL }}" alt="">
+            {{ else }}
+            <svg class="rss-card-2-image" style="transform: scale(0.35) translateY(-25%)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--color-text-subdue)">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+            </svg>
+            {{ end }}
+            <div class="rss-card-2-content padding-inline-widget">
+                <a href="{{ .Link }}" title="{{ .Title }}" class="block text-truncate color-primary-if-not-visited" target="_blank" rel="noreferrer">{{ .Title }}</a>
+                <ul class="list-horizontal-text flex-nowrap margin-top-5">
+                    <li class="shrink-0" title="{{ .PublishedAt | formatTime }}" {{ dynamicRelativeTimeAttrs .PublishedAt }}>{{ .PublishedAt | relativeTime }}</li>
+                    <li class="shrink min-width-0 text-truncate">{{ .ChannelName }}</li>
+                </ul>
+            </div>
+        </div>
+        {{ end }}
+    </div>
+</div>
+{{ end }}

internal/assets/templates/rss-cards.html → internal/assets/templates/rss-horizontal-cards.html

@@ -4,7 +4,7 @@
 
 {{ define "widget-content" }}
 <div class="carousel-container">
-    <div class="cards-horizontal carousel-items-container"{{ if ne 0.0 .ThumbnailHeight }}style="--rss-thumbnail-height: {{ .ThumbnailHeight }}rem;"{{ end }}>
+    <div class="cards-horizontal carousel-items-container"{{ if ne 0.0 .ThumbnailHeight }} style="--rss-thumbnail-height: {{ .ThumbnailHeight }}rem;"{{ end }}>
         {{ range .Items }}
         <div class="card widget-content-frame thumbnail-container">
             {{ if ne "" .ImageURL }}

internal/widget/rss.go

@@ -14,6 +14,7 @@ type RSS struct {
 	FeedRequests    []feed.RSSFeedRequest `yaml:"feeds"`
 	Style           string                `yaml:"style"`
 	ThumbnailHeight float64               `yaml:"thumbnail-height"`
+	CardHeight      float64               `yaml:"card-height"`
 	Items           feed.RSSFeedItems     `yaml:"-"`
 	Limit           int                   `yaml:"limit"`
 	CollapseAfter   int                   `yaml:"collapse-after"`
@@ -34,6 +35,10 @@ func (widget *RSS) Initialize() error {
 		widget.ThumbnailHeight = 0
 	}
 
+	if widget.CardHeight < 0 {
+		widget.CardHeight = 0
+	}
+
 	return nil
 }
 
@@ -53,7 +58,11 @@ func (widget *RSS) Update(ctx context.Context) {
 
 func (widget *RSS) Render() template.HTML {
 	if widget.Style == "horizontal-cards" {
-		return widget.render(widget, assets.RSSCardsTemplate)
+		return widget.render(widget, assets.RSSHorizontalCardsTemplate)
+	}
+
+	if widget.Style == "horizontal-cards-2" {
+		return widget.render(widget, assets.RSSHorizontalCards2Template)
 	}
 
 	return widget.render(widget, assets.RSSListTemplate)