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>

6 files changed, 126 insertions, 4 deletions

diff --git a/src/app/markdown.rs b/src/app/markdown.rs
index e69b6e7..f6ae342 100644
--- a/src/app/markdown.rs
+++ b/src/app/markdown.rs
@@ -7,7 +7,7 @@ use comrak::{
     ComrakPlugins,
 };
 use lazy_static::lazy_static;
-use lol_html::{rewrite_str, element, RewriteStrSettings, html_content::ContentType};
+use lol_html::{element, html_content::ContentType, rewrite_str, RewriteStrSettings};
 use std::cell::RefCell;
 use url::Url;
 
@@ -80,7 +80,7 @@ pub fn render(inp: &str) -> Result<String> {
                 let name = el.get_attribute("name").expect("wanted xeblog-conv to contain name");
                 let name_lower = name.clone().to_lowercase();
                 let mood = el.get_attribute("mood").expect("wanted xeblog-conv to contain mood");
-                
+
                 el.before(&format!(r#"
 <div class="conversation">
     <div class="conversation-picture conversation-smol">
@@ -95,6 +95,11 @@ pub fn render(inp: &str) -> Result<String> {
 
                 el.remove_and_keep_content();
                 Ok(())
+            }),
+            element!("xeblog-hero", |el| {
+                let file = el.get_attribute("file").expect("wanted xeblog-hero to contain file");
+                el.replace(&crate::tmpl::xeblog_hero(file, el.get_attribute("prompt")).0, ContentType::Html);
+                Ok(())
             })
         ],
         ..RewriteStrSettings::default()
diff --git a/src/handlers/blog.rs b/src/handlers/blog.rs
index f6aae06..6c66c97 100644
--- a/src/handlers/blog.rs
+++ b/src/handlers/blog.rs
@@ -4,6 +4,7 @@ use axum::{
     extract::{Extension, Path},
     response::Html,
 };
+use http::HeaderMap;
 use lazy_static::lazy_static;
 use prometheus::{opts, register_int_counter_vec, IntCounterVec};
 use std::sync::Arc;
@@ -72,10 +73,11 @@ pub async fn series_view(
     Ok(Html(result))
 }
 
-#[instrument(skip(state))]
+#[instrument(skip(state, headers))]
 pub async fn post_view(
     Path(name): Path<String>,
     Extension(state): Extension<Arc<State>>,
+    headers: HeaderMap,
 ) -> Result {
     let mut want: Option<Post> = None;
 
@@ -85,6 +87,13 @@ pub async fn post_view(
         }
     }
 
+    let referer = if let Some(referer) = headers.get(http::header::REFERER) {
+        let referer = referer.to_str()?.to_string();
+        Some(referer)
+    } else {
+        None
+    };
+
     match want {
         None => Err(super::Error::PostNotFound(name)),
         Some(post) => {
@@ -93,7 +102,7 @@ pub async fn post_view(
                 .inc();
             let body = templates::Html(post.body_html.clone());
             let mut result: Vec<u8> = vec![];
-            templates::blogpost_html(&mut result, post, body)?;
+            templates::blogpost_html(&mut result, post, body, referer)?;
             Ok(Html(result))
         }
     }
diff --git a/src/handlers/mod.rs b/src/handlers/mod.rs
index 97e0cb2..fa8203c 100644
--- a/src/handlers/mod.rs
+++ b/src/handlers/mod.rs
@@ -130,6 +130,9 @@ pub enum Error {
 
     #[error("axum http error: {0}")]
     AxumHTTP(#[from] axum::http::Error),
+
+    #[error("string conversion error: {0}")]
+    ToStr(#[from] http::header::ToStrError),
 }
 
 pub type Result<T = Html<Vec<u8>>> = std::result::Result<T, Error>;
diff --git a/src/main.rs b/src/main.rs
index 00663da..7611176 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -30,6 +30,7 @@ pub mod app;
 pub mod handlers;
 pub mod post;
 pub mod signalboost;
+pub mod tmpl;
 
 mod domainsocket;
 use domainsocket::*;
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)
+            }
+        }
+    }
+}
diff --git a/src/tmpl/nag.rs b/src/tmpl/nag.rs
new file mode 100644
index 0000000..a41447b
--- /dev/null
+++ b/src/tmpl/nag.rs
@@ -0,0 +1,66 @@
+use super::xeblog_conv;
+use crate::post::Post;
+use chrono::prelude::*;
+use lazy_static::lazy_static;
+use maud::{html, Markup};
+use regex::Regex;
+
+lazy_static! {
+    static ref HN: Regex = Regex::new(r#"^https?://news.ycombinator.com"#).unwrap();
+    static ref REDDIT: Regex = Regex::new(r#"^https?://((.+).)?reddit.com"#).unwrap();
+}
+
+pub fn referer(referer: Option<String>) -> Markup {
+    if referer.is_none() {
+        return html! {};
+    }
+
+    let referer = referer.unwrap();
+
+    let nag = html! {
+        script r#async src="https://media.ethicalads.io/media/client/ethicalads.min.js" { "" }
+        div.adaptive data-ea-publisher="christinewebsite" data-ea-type="image" data-ea-style="stickybox" {
+            .warning {
+                (xeblog_conv(
+                    "Cadey".into(),
+                    "coffee".into(),
+                    html! {
+                        "Hello! Thank you for visiting my website. You seem to be visiting from a news aggregator and have ads disabled. These ads help pay for running the website and are done by "
+                        a href="https://www.ethicalads.io/" { "Ethical Ads" }
+                        ". I do not receive detailed analytics on the ads and from what I understand neither does Ethical Ads. If you don't want to disable your ad blocker, please consider donating on "
+                        a href="https://patreon.com/cadey" { "Patreon" }
+                        ". It helps fund the website's hosting bills and pay for the expensive technical editor that I use for my longer articles. Thanks and be well!"
+                    },
+                ))
+            }
+        }
+    };
+
+    if HN.is_match(&referer) {
+        return nag;
+    }
+
+    if REDDIT.is_match(&referer) {
+        return nag;
+    }
+
+    html! {}
+}
+
+pub fn prerelease(post: &Post) -> Markup {
+    if Utc::today().num_days_from_ce() < post.date.num_days_from_ce() {
+        html! {
+            .warning {
+                (xeblog_conv("Mara".into(), "hacker".into(), html!{
+                    "Hey, this post is set to go live on "
+                    (format!("{}", post.detri()))
+                    " UTC. Right now you are reading a pre-publication version of this post. Please do not share this on social media. This post will automatically go live for everyone on the intended publication date. If you want access to these posts, please join the "
+                    a href="https://patreon.com/cadey" { "Patreon" }
+                    ". It helps me afford the copyeditor that I contract for the technical content I write."
+                }))
+            }
+        }
+    } else {
+        html! {}
+    }
+}