Configure Twitter cards with thumbnail images

Author: nipafx

src/main/java/zone/nox/Site.java

@@ -19,6 +19,7 @@ public class Site implements SiteConfiguration {
 	private static final Path SOCIAL_LINKS = RESOURCES.resolve("social-icons");
 	private static final Path VIDEOS = Path.of("src/main/resources/videos").toAbsolutePath();
 	private static final Path IMAGES = Path.of("src/main/resources/images").toAbsolutePath();
+	private static final Path THUMBNAILS = Path.of("src/main/resources/thumbnails").toAbsolutePath();
 
 	private final Config config;
 
@@ -49,6 +50,9 @@ public Outline createOutline(Outliner outliner) {
 		outliner
 				.sourceBinaryFiles("images", IMAGES)
 				.storeResource(res -> "/" + IMAGES.getParent().relativize(res.file()));
+		outliner
+				.sourceBinaryFiles("thumbnails", THUMBNAILS)
+				.storeResource(res -> "/" + THUMBNAILS.getParent().relativize(res.file()));
 
 		outliner
 				.sourceTextFiles("posts", POSTS)
@@ -60,6 +64,11 @@ public Outline createOutline(Outliner outliner) {
 		outliner.generate(new PostPage(Target.from(config)));
 		outliner.generate(new FourOhFour());
 		outliner.generateStaticResources(Path.of(""), "favicon.ico");
+		outliner.generateStaticResources(
+				Path.of("thumbnails"),
+				"/thumbnails/12-last-year.jpg",
+				"/thumbnails/13-mexico.jpg"
+		);
 
 		return outliner.build();
 	}

src/main/java/zone/nox/components/Components.java

@@ -8,7 +8,7 @@
 
 public class Components {
 
-	public static Layout layout = new Layout(null, null, List.of());
+	public static Layout layout = new Layout(null, null, Optional.empty(), List.of());
 
 	public static Header header = new Header();
 

src/main/java/zone/nox/components/Layout.java

@@ -11,16 +11,18 @@
 import java.nio.charset.StandardCharsets;
 import java.util.List;
 import java.util.Locale;
+import java.util.Optional;
 
 import static dev.nipafx.ginevra.html.HtmlElement.body;
 import static dev.nipafx.ginevra.html.HtmlElement.div;
 import static dev.nipafx.ginevra.html.HtmlElement.document;
 import static dev.nipafx.ginevra.html.HtmlElement.head;
 import static dev.nipafx.ginevra.html.HtmlElement.meta;
+import static dev.nipafx.ginevra.util.CollectionUtils.plus;
 import static zone.nox.components.Components.footer;
 import static zone.nox.components.Components.header;
 
-public record Layout(String title, String description, List<? extends Element> content) implements Component {
+public record Layout(String title, String description, Optional<String> thumbnail, List<? extends Element> content) implements Component {
 
 	public record Style(Classes layout, Classes page, Classes header, Classes content, Classes footer, Css css) implements CssStyle { }
 
@@ -132,14 +134,24 @@ public record Style(Classes layout, Classes page, Classes header, Classes conten
 
 	@Override
 	public Element compose() {
+		var metaElements = List.of(
+				meta.name("viewport").content("width=device-width, initial-scale=1"),
+				meta.name("description").content(description),
+				meta.name("twitter:title").content(title),
+				meta.name("twitter:description").content(description)
+		);
+		var card = thumbnail.map(thumb -> List.of(
+						meta.name("twitter:image").content("https://nox.zone/thumbnails/" + thumb),
+						meta.name("twitter:card").content("summary_large_image")))
+				.orElse(List.of(meta.name("twitter:card").content("summary")));
+		metaElements = plus(metaElements, card);
+
 		return document
 				.language(Locale.US)
 				.head(head
 						.charset(StandardCharsets.UTF_8)
 						.title(title)
-						.children(
-								meta.name("viewport").content("width=device-width, initial-scale=1"),
-								meta.name("description").content(description)))
+						.children(metaElements))
 				.body(body
 						.classes(STYLE.layout)
 						.children(div
@@ -151,19 +163,23 @@ public Element compose() {
 	}
 
 	public Layout title(String title) {
-		return new Layout(title, this.description, this.content);
+		return new Layout(title, this.description, this.thumbnail, this.content);
 	}
 
 	public Layout description(String description) {
-		return new Layout(this.title, description, this.content);
+		return new Layout(this.title, description, this.thumbnail, this.content);
+	}
+
+	public Layout thumbnail(Optional<String> thumbnail) {
+		return new Layout(this.title, this.description, thumbnail, this.content);
 	}
 
 	public Layout content(List<? extends Element> children) {
-		return new Layout(this.title, this.description, children);
+		return new Layout(this.title, this.description, this.thumbnail, children);
 	}
 
 	public Layout content(Element... children) {
-		return new Layout(this.title, this.description, List.of(children));
+		return new Layout(this.title, this.description, this.thumbnail, List.of(children));
 	}
 
 }

src/main/java/zone/nox/data/Post.java

@@ -11,7 +11,7 @@
 import static java.util.function.Predicate.not;
 
 public record Post(
-		String title, String summary, String slug, Integer index, String name, LocalDateTime date,
+		String title, String summary, String slug, Integer index, String name, LocalDateTime date, Optional<String> thumbnail,
 		Optional<String> localFile, Optional<String> youTubeId, HtmlContent content)
 		implements Document {
 
@@ -31,7 +31,7 @@ public static Post fromMd(Md post) {
 				// setting it to the empty string
 				.filter(not(String::isBlank));
 		var content = post.contentParsedAsMarkdown();
-		return new Post(post.title(), post.summary(), slug, index, name, date, localFile, post.youTubeId(), content);
+		return new Post(post.title(), post.summary(), slug, index, name, date, post.thumbnail(), localFile, post.youTubeId(), content);
 	}
 
 	private static String[] getFileNameParts(Md post) {
@@ -45,7 +45,7 @@ private static String[] getFileNameParts(Md post) {
 	}
 
 	public record Md(
-			String title, String summary, Optional<String> localFile, Optional<String> youTubeId,
+			String title, String summary, Optional<String> thumbnail, Optional<String> localFile, Optional<String> youTubeId,
 			Path file, HtmlContent contentParsedAsMarkdown)
 			implements Document { }
 

src/main/java/zone/nox/templates/PostPage.java

@@ -41,6 +41,7 @@ private Element composePage(Post post) {
 		return layout
 				.title(post.title())
 				.description(post.summary())
+				.thumbnail(post.thumbnail())
 				.content(
 						postContent(post)
 								.embedLocalVideo(target.embedLocalVideo())

src/main/resources/posts/012--2025-04-13-1425--arrived.md

@@ -1,6 +1,7 @@
 ---
 title: "Nox Is Going Nowhere"
 summary: "Even after the blackout, Nox is still in Neotropolis"
+thumbnail: "12-last-year.jpg"
 ---
 
 Things didn't really go according to plan, a year ago.

src/main/resources/posts/013--2025-04-14-0806--usa.md

@@ -1,6 +1,7 @@
 ---
 title: "\"Sleep Now in the Fire\""
 summary: "The past shaped our present and the present shapes our future - don't let anyone tell you otherwise"
+thumbnail: "13-mexico.jpg"
 ---
 
 When we look at the world around us, we don't just see the present, we also see our past, the integral over the set of humanity's decisions.