Add OpenGraph meta data and landing page thumbnail

Author: nipafx

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

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

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

@@ -22,7 +22,7 @@
 import static zone.nox.components.Components.footer;
 import static zone.nox.components.Components.header;
 
-public record Layout(String title, String description, Optional<String> thumbnail, List<? extends Element> content) implements Component {
+public record Layout(String slug, 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 { }
 
@@ -137,11 +137,18 @@ public Element compose() {
 		var metaElements = List.of(
 				meta.name("viewport").content("width=device-width, initial-scale=1"),
 				meta.name("description").content(description),
+				meta.name("og:type").content("website"),
+				// TODO: the root URL shouldn't be hard-coded
+				meta.name("og:url").content("https://nox.zone/" + slug),
+				meta.name("og:logo").content("https://nox.zone/favicon.ico"),
+				meta.name("og:title").content(title),
 				meta.name("twitter:title").content(title),
+				meta.name("og:description").content(description),
 				meta.name("twitter:description").content(description)
 		);
 		var card = thumbnail.map(thumb -> List.of(
 						// TODO: the root URL shouldn't be hard-coded
+						meta.name("og:image").content("https://nox.zone/thumbnails/" + thumb),
 						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")));
@@ -163,24 +170,28 @@ public Element compose() {
 										footer.classes(STYLE.footer))));
 	}
 
+	public Layout slug(String slug) {
+		return new Layout(slug, this.title, this.description, this.thumbnail, this.content);
+	}
+
 	public Layout title(String title) {
-		return new Layout(title, this.description, this.thumbnail, this.content);
+		return new Layout(this.slug, title, this.description, this.thumbnail, this.content);
 	}
 
 	public Layout description(String description) {
-		return new Layout(this.title, description, this.thumbnail, this.content);
+		return new Layout(this.slug, this.title, description, this.thumbnail, this.content);
 	}
 
 	public Layout thumbnail(Optional<String> thumbnail) {
-		return new Layout(this.title, this.description, thumbnail, this.content);
+		return new Layout(this.slug, this.title, this.description, thumbnail, this.content);
 	}
 
 	public Layout content(List<? extends Element> children) {
-		return new Layout(this.title, this.description, this.thumbnail, children);
+		return new Layout(this.slug, this.title, this.description, this.thumbnail, children);
 	}
 
 	public Layout content(Element... children) {
-		return new Layout(this.title, this.description, this.thumbnail, List.of(children));
+		return new Layout(this.slug, this.title, this.description, this.thumbnail, List.of(children));
 	}
 
 }

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

@@ -15,6 +15,7 @@ public HtmlPage compose() {
 		return new HtmlPage(
 				new Slug("404", Slug.SlugStyle.FILE),
 				layout
+						.slug("404.html")
 						.title("404")
 						.description("Page not found")
 						.content(

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

@@ -13,6 +13,7 @@
 
 import java.util.List;
 import java.util.Map.Entry;
+import java.util.Optional;
 import java.util.stream.Collectors;
 import java.util.stream.Stream;
 
@@ -56,8 +57,10 @@ public HtmlPage compose(@ForAllIn("posts") List<Post> posts) {
 	private Element composePage(List<Post> posts) {
 		var postsByYear = posts.stream().collect(Collectors.groupingBy(post -> post.date().getYear()));
 		return layout
+				.slug("")
 				.title("Radio Nox")
 				.description("News from the Shadows of Neotropolis.")
+				.thumbnail(Optional.of("landing.jpg"))
 				.content(div
 						.classes(STYLE.posts)
 						.children(postsByYear

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

@@ -39,6 +39,7 @@ public HtmlPage compose(@ForEachIn("posts") Post post) {
 
 	private Element composePage(Post post) {
 		return layout
+				.slug(post.slug())
 				.title(post.title())
 				.description(post.summary())
 				.thumbnail(post.thumbnail())