Add hero image support with <xeblog-hero>

Also lightens the JavaScript load and shifts ad impressions to only when
people from Reddit and Hacker News visit. I may have this include
Twitter in the future.

Signed-off-by: Xe <me@christine.website>

1 files changed, 38 insertions, 0 deletions

diff --git a/src/tmpl/mod.rs b/src/tmpl/mod.rs
new file mode 100644
index 0000000..29d75f6
--- /dev/null
+++ b/src/tmpl/mod.rs
@@ -0,0 +1,38 @@
+use maud::{html, Markup};
+
+pub mod nag;
+
+pub fn xeblog_hero(file: String, prompt: Option<String>) -> Markup {
+    html! {
+        figure.hero style="margin:0" {
+            picture style="margin:0" {
+                source type="image/avif" srcset={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) ".avif"};
+                source type="image/webp" srcset={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) ".webp"};
+                img style="padding:0" alt={"hero image " (file)} src={"https://cdn.xeiaso.net/file/christine-static/hero/" (file) "-smol.png"};
+            }
+            figcaption { "Image generated by MidJourney" @if let Some(prompt) = prompt { " -- " (prompt) } }
+        }
+    }
+}
+
+pub fn xeblog_conv(name: String, mood: String, body: Markup) -> Markup {
+    let name_lower = name.clone().to_lowercase();
+
+    html! {
+        .conversation {
+            ."conversation-picture"."conversation-smol" {
+                picture {
+                    source type="image/avif" srcset={"https://cdn.xeiaso.net/file/christine-static/stickers/" (name_lower) "/" (mood) ".avif"};
+                    source type="image/webp" srcset={"https://cdn.xeiaso.net/file/christine-static/stickers/" (name_lower) "/" (mood) ".webp"};
+                    img alt={(name) " is " (mood)} src={"https://cdn.xeiaso.net/file/christine-static/stickers/" (name_lower) "/" (mood) ".png"};
+                }
+            }
+            ."conversation-chat" {
+                "<"
+                b { (name) }
+                "> "
+                (body)
+            }
+        }
+    }
+}