Toolkit: Separate Author from Thumbnail for unique links

toolkit/scss/toolkit.scss

@@ -17,6 +17,7 @@ $error: $primary;
 $dark-heading: #444;
 $dark-heading-hover: #3a3a3a;
 $dark-body: #333;
+$dark-body-hover: #2a2a2a;
 $dark-text: #f5f5f5;
 $dark-text-hover: #e5e5e5;
 $dark-border: #555;
@@ -83,25 +84,15 @@ img {
         background-color: $white;
         border-color: $border-light;
     }
-
-    a.toolkit-thumbnail:hover .toolkit-thumbnail--content {
-        background-color: $lighter-background;
-        border-color: $secondary-border-hover;
-    }
 }
 .toolkit-dark .toolkit-thumbnails {
     color: $dark-text;
-    background-color: $dark-body;
+    background-color: $dark;
 
     .toolkit-thumbnail--content {
-        background-color: $dark-heading;
+        background-color: $dark-body;
         border-color: $dark-border;
     }
-
-    a.toolkit-thumbnail:hover .toolkit-thumbnail--content {
-        background-color: $dark-heading-hover;
-        border-color: $dark-border-hover;
-    }
 }
 
 .toolkit-select {

toolkit/src/thumbnail.rs

@@ -2,22 +2,27 @@ use crate::image::Image;
 use crate::tile::{Indicator, IndicatorColor};
 use std::rc::Rc;
 
+pub(crate) struct ThumbnailPart {
+    pub(crate) text: String,
+    pub(crate) href: String,
+}
+
 pub struct Thumbnail {
     image: Rc<dyn Image>,
-    pub(crate) title: String,
-    pub(crate) author: String,
+    pub(crate) href: String,
+    pub(crate) title: Option<String>,
+    pub(crate) author: Option<ThumbnailPart>,
     pub(crate) indicator: Option<Indicator>,
-    pub(crate) href: Option<String>,
 }
 
 impl Thumbnail {
-    pub fn new(image: impl Image + 'static, title: &str, author: &str) -> Self {
+    pub fn new(image: impl Image + 'static, href: &str) -> Self {
         Thumbnail {
             image: Rc::new(image),
-            title: title.to_owned(),
-            author: author.to_owned(),
+            href: href.to_owned(),
+            title: None,
+            author: None,
             indicator: None,
-            href: None,
         }
     }
 
@@ -29,8 +34,16 @@ impl Thumbnail {
         self
     }
 
-    pub fn link(mut self, href: &str) -> Self {
-        self.href = Some(href.to_owned());
+    pub fn title(mut self, text: &str) -> Self {
+        self.title = Some(text.to_owned());
+        self
+    }
+
+    pub fn author(mut self, text: &str, href: &str) -> Self {
+        self.author = Some(ThumbnailPart {
+            text: text.to_owned(),
+            href: href.to_owned(),
+        });
         self
     }
 

toolkit/templates/thumbnail.rs.html

@@ -1,15 +1,37 @@
+@use crate::templates::image;
 @use crate::{templates::link, Link};
-@use crate::templates::thumbnail_inner;
 @use crate::thumbnail::Thumbnail;
 
 @(thumb: &Thumbnail)
 
-@if let Some(href) = &thumb.href {
-    @:link(&Link::current_tab(href).plain(true).class("toolkit-thumbnail"), {
-        @:thumbnail_inner(thumb)
-    })
-} else {
-    <div class="toolkit-thumbnail">
-        @:thumbnail_inner(thumb)
+<div class="toolkit-thumbnail">
+    <div class="toolkit-thumbnail--content">
+        @:link(&Link::current_tab(&thumb.href).plain(true), {
+            <div class="toolkit-thumbnail--image">
+                @if let Some(indicator) = &thumb.indicator {
+                    <div class="@indicator.class_string()">
+                        @indicator.text
+                    </div>
+                }
+                @:image(thumb.image())
+            </div>
+        })
+        <div class="toolkit-thumbnail--meta">
+            @if let Some(title) = &thumb.title {
+                <div class="toolkit-thumbnail--title">
+                    @:link(&Link::current_tab(&thumb.href).plain(true), {
+                        @title
+                    })
+                </div>
+            }
+            @if let Some(author) = &thumb.author {
+                <div class="toolkit-thumbnail--author">
+                    <span class="toolkit-thumbnail--by">by</span>
+                    @:link(&Link::current_tab(&author.href).plain(true), {
+                        @author.text
+                    })
+                </div>
+            }
+        </div>
     </div>
-}
+</div>

toolkit/templates/thumbnail_inner.rs.html

@@ -1,23 +0,0 @@
-@use crate::templates::image;
-@use crate::thumbnail::Thumbnail;
-
-@(thumb: &Thumbnail)
-
-<div class="toolkit-thumbnail--content">
-    <div class="toolkit-thumbnail--image">
-        @if let Some(indicator) = &thumb.indicator {
-            <div class="@indicator.class_string()">
-                @indicator.text
-            </div>
-        }
-        @:image(thumb.image())
-    </div>
-    <div class="toolkit-thumbnail--meta">
-        <div class="toolkit-thumbnail--title">
-            @thumb.title
-        </div>
-        <div class="toolkit-thumbnail--author">
-            @thumb.author
-        </div>
-    </div>
-</div>