diff --git a/docs/configuration.md b/docs/configuration.md index 771aea0..1e3997d 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -511,6 +511,7 @@ Example: | ---- | ---- | -------- | ------- | | subreddit | string | yes | | | style | string | no | vertical-list | +| thumbnails | boolean | no | false | | limit | integer | no | 15 | | collapse-after | integer | no | 5 | | comments-url-template | string | no | https://www.reddit.com/{POST-PATH} | @@ -533,6 +534,15 @@ Used to change the appearance of the widget. Possible values are `vertical-list` ![](images/reddit-widget-vertical-cards-preview.png) +##### `thumbnails` +Shows or hides thumbnails next to the post. This only works if the `style` is `vertical-list`. Preview: + +![](images/reddit-widget-vertical-list-thumbnails.png) + +> [!NOTE] +> +> Thumbnails don't work for some subreddits due to Reddit's API not returning the thumbnail URL. No workaround for this yet. + ##### `limit` The maximum number of posts to show. diff --git a/docs/images/reddit-widget-vertical-list-thumbnails.png b/docs/images/reddit-widget-vertical-list-thumbnails.png new file mode 100644 index 0000000..7176bf6 Binary files /dev/null and b/docs/images/reddit-widget-vertical-list-thumbnails.png differ diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 31c49c0..29ea47f 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -567,6 +567,21 @@ body { -webkit-box-orient: vertical; } +.forum-post-list-item { + display: flex; + gap: 1.2rem; +} + +.forum-post-list-thumbnail { + flex-shrink: 0; + width: 6rem; + height: 4rem; + border-radius: var(--border-radius); + object-fit: cover; + border: 1px solid var(--color-separator); + margin-top: 0.2rem; +} + .bookmarks-group { --bookmarks-group-color: var(--color-primary); } @@ -975,6 +990,14 @@ body { --widget-content-horizontal-padding: 10px; --content-bounds-padding: 10px; } + + .forum-post-list-item { + flex-flow: row-reverse; + } + + svg.forum-post-list-thumbnail { + display: none + } } .size-h1 { font-size: var(--font-size-h1); } diff --git a/internal/assets/templates/forum-posts.html b/internal/assets/templates/forum-posts.html index 856f259..aaa377e 100644 --- a/internal/assets/templates/forum-posts.html +++ b/internal/assets/templates/forum-posts.html @@ -4,15 +4,32 @@ diff --git a/internal/widget/hacker-news.go b/internal/widget/hacker-news.go index 1025d06..d36081c 100644 --- a/internal/widget/hacker-news.go +++ b/internal/widget/hacker-news.go @@ -15,6 +15,7 @@ type HackerNews struct { Limit int `yaml:"limit"` CollapseAfter int `yaml:"collapse-after"` CommentsUrlTemplate string `yaml:"comments-url-template"` + Thumbnails bool `yaml:"-"` } func (widget *HackerNews) Initialize() error { diff --git a/internal/widget/reddit.go b/internal/widget/reddit.go index b884ac6..2d0e944 100644 --- a/internal/widget/reddit.go +++ b/internal/widget/reddit.go @@ -15,6 +15,7 @@ type Reddit struct { Posts feed.ForumPosts `yaml:"-"` Subreddit string `yaml:"subreddit"` Style string `yaml:"style"` + Thumbnails bool `yaml:"thumbnails"` CommentsUrlTemplate string `yaml:"comments-url-template"` Limit int `yaml:"limit"` CollapseAfter int `yaml:"collapse-after"`