Embed local and YouTube videos

.github/workflows/deploy.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Build project
         run: mvn verify --no-transfer-progress
       - name: Build site
-        run: java --enable-preview -cp "app/*" zone.nox.Main
+        run: java --enable-preview -cp "app/*" zone.nox.Main --target global
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5

nox.zone/src/main/java/zone/nox/Main.java

@@ -7,18 +7,24 @@
 
 import java.nio.file.Path;
 import java.util.List;
+import java.util.Optional;
 
 public class Main {
 
 	private static final Path POSTS = Path.of("nox.zone/src/main/resources/posts").toAbsolutePath();
 	private static final Path RESOURCES = Path.of("nox.zone/src/main/resources/resources").toAbsolutePath();
+	private static final Path VIDEOS = Path.of("nox.zone/src/main/resources/videos").toAbsolutePath();
+
+	public record Config(Optional<String> target) { }
 
 	public static void main(String[] args) {
-		var ginevra = Ginevra.initialize(args);
-		var outliner = ginevra.newOutliner();
+		var ginevraWithConfig = Ginevra.initialize(args, Config.class);
+		var outliner = ginevraWithConfig.ginevra().newOutliner();
 
 		var resources = outliner.sourceBinaryFiles("resources", RESOURCES);
 		outliner.storeResource(resources);
+		var videos = outliner.sourceBinaryFiles("videos", VIDEOS);
+		outliner.storeResource(videos);
 
 		var content = outliner.sourceTextFiles("posts", POSTS);
 		var markdown = outliner.transformMarkdown(content, Post.Md.class);
@@ -27,7 +33,7 @@ public static void main(String[] args) {
 				Post.fromMd(postMd.data()))));
 		outliner.store(posts, "posts");
 
-		outliner.generate(new Landing());
+		outliner.generate(new Landing(Target.from(ginevraWithConfig.config())));
 
 		outliner.build().run();
 	}

nox.zone/src/main/java/zone/nox/Target.java

@@ -0,0 +1,30 @@
+package zone.nox;
+
+public enum Target {
+
+	DEV, LOCAL_PRODUCTION, GLOBAL_PRODUCTION;
+
+	static Target from(Main.Config config) {
+		return switch (config.target().orElse("dev")) {
+			case "dev" -> DEV;
+			case "local" -> LOCAL_PRODUCTION;
+			case "global" -> GLOBAL_PRODUCTION;
+			default -> throw new IllegalArgumentException();
+		};
+	}
+
+	public boolean embedLocalVideo() {
+		return switch (this) {
+			case DEV, LOCAL_PRODUCTION -> true;
+			case GLOBAL_PRODUCTION -> false;
+		};
+	}
+
+	public boolean embedYouTubeVideo() {
+		return switch (this) {
+			case DEV, GLOBAL_PRODUCTION -> true;
+			case LOCAL_PRODUCTION -> false;
+		};
+	}
+
+}

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

@@ -36,6 +36,10 @@ public static Header header(Post post, int level) {
 		return new Header(Optional.of(post.title()), post.summary(), post.date(), level);
 	}
 
+	public static PostBlock post(Post post) {
+		return new PostBlock(post);
+	}
+
 	private static final LocalDateTime FIRST_DAY_2024 = LocalDate.of(2024, 4, 24).atTime(0, 0);
 	private static final DateTimeFormatter ABSOLUTE_DATE = DateTimeFormatter.ofPattern("yyyy-MM-dd / HH:mm 'NTZ'");
 	private static final DateTimeFormatter TIME = DateTimeFormatter.ofPattern("HH:mm 'NTZ'");

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

@@ -0,0 +1,125 @@
+package zone.nox.components;
+
+import dev.nipafx.ginevra.css.Css;
+import dev.nipafx.ginevra.css.CssStyle;
+import dev.nipafx.ginevra.css.CssStyled;
+import dev.nipafx.ginevra.html.Classes;
+import dev.nipafx.ginevra.html.CustomElement;
+import dev.nipafx.ginevra.html.Element;
+import dev.nipafx.ginevra.html.Video.Preload;
+import dev.nipafx.ginevra.outline.Resources;
+import zone.nox.data.Post;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import static dev.nipafx.ginevra.html.HtmlElement.div;
+import static dev.nipafx.ginevra.html.HtmlElement.video;
+import static dev.nipafx.ginevra.html.JmlElement.html;
+import static dev.nipafx.ginevra.html.JmlElement.nothing;
+import static zone.nox.components.Components.header;
+
+public record PostBlock(Post post, int level, boolean embedLocalVideo, boolean embedYouTubeVideo) implements CustomElement, CssStyled<PostBlock.Style> {
+
+	public record Style(Classes localVideo, Classes youTubeVideoContainer, Classes youTubeVideo, Css css) implements CssStyle { }
+	private static final Style STYLE = Css.parse(Style.class, """
+			.localVideo {
+				margin: 1em 2em 0.5em;
+				border: 1px dotted var(--yellow);
+			}
+			
+			.localVideo > video {
+				display: block;
+				width: 100% !important;
+				height: auto !important;
+			}
+			
+			/* the second container (below) can't have margins
+				because they screw up the 16:9 padding-top computation,
+				so we have *another* container, just for the margins */
+			.youTubeVideoContainer {
+				margin: 1em 2em 0.5em;
+				border: 1px dotted var(--yellow);
+			}
+			
+			.youTubeVideo {
+				position: relative;
+				overflow: hidden;
+				/* 16:9 portrait aspect ratio */
+				padding-top: 177.78%;
+			}
+			
+			.youTubeVideo > iframe {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border: 0;
+			}
+			""");
+
+	public PostBlock(Post post) {
+		this(post, 1, false, false);
+	}
+
+	@Override
+	public List<Element> compose() {
+		var children = new ArrayList<Element>();
+		children.add(header(post, level));
+		if (embedLocalVideo)
+			children.add(embeddedLocalVideo());
+		if (embedYouTubeVideo)
+			children.add(embeddedYouTubeVideo());
+		children.addAll(post.content());
+		return children;
+	}
+
+	private Element embeddedLocalVideo() {
+		return post
+				.localVideo()
+				.<Element> map(local -> div
+						.classes(STYLE.localVideo())
+						.children(video
+								.src(Resources.include(local + ".mp4"))
+								.poster(Resources.include(local + ".jpg"))
+								.height(711)
+								.width(400)
+								.preload(Preload.NONE)
+								.controls(true)))
+				.orElse(nothing);
+	}
+
+	private Element embeddedYouTubeVideo() {
+		return post
+				.youTubeId()
+				.<Element>map(id -> div
+						.classes(STYLE.youTubeVideoContainer())
+						.children(div
+								.classes(STYLE.youTubeVideo())
+								.children(html.literal("""
+										<iframe src="http://www.youtube.com/embed/%s" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+										</iframe>
+										""".formatted(id)))))
+				.orElse(nothing);
+	}
+
+	public PostBlock level(int level) {
+		return new PostBlock(post, level, embedLocalVideo, embedYouTubeVideo);
+	}
+
+	public PostBlock embedLocalVideo(boolean embedLocalVideo) {
+		return new PostBlock(post, level, embedLocalVideo, embedYouTubeVideo);
+	}
+
+	public PostBlock embedYouTubeVideo(boolean embedYouTubeVideo) {
+		return new PostBlock(post, level, embedLocalVideo, embedYouTubeVideo);
+	}
+
+	@Override
+	public Style style() {
+		return STYLE;
+	}
+
+}

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

@@ -6,17 +6,24 @@
 import java.time.LocalDateTime;
 import java.time.format.DateTimeFormatter;
 import java.util.List;
+import java.util.Optional;
 
-public record Post(String title, String summary, LocalDateTime date, List<Element> content) implements Document.Data {
+public record Post(
+		String title, String summary, LocalDateTime date,
+		Optional<String> localVideo, Optional<String> youTubeId, List<Element> content)
+		implements Document.Data {
 
 	private static final DateTimeFormatter DATE_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd-HHmm");
 
 	public static Post fromMd(Md post) {
 		var date = LocalDateTime.parse(post.date(), DATE_FORMAT);
 		var content = post.contentParsedAsMarkdown();
-		return new Post(post.title(), post.summary(), date, content);
+		return new Post(post.title(), post.summary(), date, post.localVideo(), post.youTubeId(), content);
 	}
 
-	public record Md(String title, String summary, String date, List<Element> contentParsedAsMarkdown) implements Document.Data { }
+	public record Md(
+			String title, String summary, String date,
+			Optional<String> localVideo, Optional<String> youTubeId, List<Element> contentParsedAsMarkdown)
+			implements Document.Data { }
 
 }

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

@@ -10,19 +10,19 @@
 import dev.nipafx.ginevra.outline.Query.RootQuery;
 import dev.nipafx.ginevra.outline.Resources;
 import dev.nipafx.ginevra.outline.Template;
+import zone.nox.Target;
 import zone.nox.data.Post;
 import zone.nox.data.Root;
 
 import java.nio.file.Path;
 import java.time.LocalDateTime;
-import java.util.ArrayList;
-import java.util.List;
 
 import static dev.nipafx.ginevra.html.HtmlElement.div;
 import static dev.nipafx.ginevra.html.HtmlElement.img;
 import static java.util.Comparator.comparing;
 import static zone.nox.components.Components.header;
 import static zone.nox.components.Components.layout;
+import static zone.nox.components.Components.post;
 
 public class Landing implements Template<Root>, CssStyled<Landing.Style> {
 
@@ -62,6 +62,12 @@ public record Style(Classes header, Classes posts, Classes post, Classes city, C
 			}
 			""");
 
+	private final Target target;
+
+	public Landing(Target target) {
+		this.target = target;
+	}
+
 	@Override
 	public Query<Root> query() {
 		return new RootQuery<>(Root.class);
@@ -82,18 +88,17 @@ private Element composePage(Root root) {
 						div.classes(STYLE.posts).children(root
 								.posts().stream()
 								.sorted(comparing(Post::date).reversed())
-								.map(this::composePost)
+								.map(post -> div
+										.classes(STYLE.post)
+										.children(post(post)
+												.level(2)
+												.embedLocalVideo(target.embedLocalVideo())
+												.embedYouTubeVideo(target.embedYouTubeVideo())))
 								.toList()),
 						img.classes(STYLE.city).src(Resources.include("city.webp"))
 				);
 	}
 
-	private Element composePost(Post post) {
-		var children = new ArrayList<Element>(List.of(header(post, 2)));
-		children.addAll(post.content());
-		return div.classes(STYLE.post).children(children);
-	}
-
 	@Override
 	public Style style() {
 		return STYLE;