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, 101 insertions, 0 deletions

diff --git a/blog/site-update-hero-images.markdown b/blog/site-update-hero-images.markdown
new file mode 100644
index 0000000..41cbafe
--- /dev/null
+++ b/blog/site-update-hero-images.markdown
@@ -0,0 +1,101 @@
+---
+title: "Site Update: Hero Images"
+date: 2022-06-08
+---
+
+For a while I've been wondering how I can add dramatic flair to my website with
+so-called "hero images". These images are tools that let you describe the mood a
+website wants to evoke. I've been unsure how to best implement these on my
+website for a while, but with the advent of MidJourney and other image
+generation APIs/algorithms I think I have found a way to create these without
+too much effort on my part and the results are pretty fantastic:
+
+<xeblog-hero file="secret-to-life" prompt="the secret to life, the universe and everything, concept art"></xeblog-hero>
+
+I have generated a bunch of other images that I'm going to use for my other
+posts. I'll give out a desktop wallpaper sized version of each of these images
+on my [Patreon](https://patreon.com/cadey).
+
+Under the hood this is powered by
+[lol_html](https://github.com/cloudflare/lol-html) and
+[Maud](https://maud.lambda.xyz/). The magic is mostly contained in a function
+that generates a `<figure>` HTML element (which I just learned exists today). I
+use a function that looks like this for generating the `<xeblog-hero>` snippets:
+
+```rust
+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) } }
+        }
+    }
+}
+```
+
+I have it wired up with lol_html like this:
+
+```rust
+lol_html::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(())
+})
+```
+
+The result is that I can declare hero images with HTML fragments like this:
+
+```html
+<xeblog-hero file="miku-dark-souls" prompt="hatsune miku, elden ring, dark souls, concept art, crowbar"></xeblog-hero>
+```
+
+And I get this:
+
+<xeblog-hero file="miku-dark-souls" prompt="hatsune miku, elden ring, dark souls, concept art, crowbar"></xeblog-hero>
+
+<xeblog-conv name="Mara" mood="hacker">This is powered by the
+[`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
+tag, which is a new discovery to us. This is probably one of the most useful
+tags we never knew about and removed the need to write a bunch of annoying CSS
+and HTML.</xeblog-conv>
+
+The webp and AVIF versions of the hero images have a higher resolution version
+so that it looks nicer on retina screens. However, the png versions of these are
+locked to a resolution of 800x356 pixels because I was unable to crush them
+below a size of half a megabyte at full resolution. Realistically, this should
+only affect older browsers on slower hardware, so I don't expect this to have
+too much impact on most users.
+
+<xeblog-conv name="Cadey" mood="coffee">If you don't want to see these hero
+images, you can remove them with a userstyle like this:
+```css
+figure.hero {
+    display: none;
+}
+```
+</xeblog-conv>
+
+I'm likely going to convert over most of my website templates to use Maud. I'm
+very happy with it and I think it is incredibly useful to express your HTML in
+Rust instead of something that has to be compiled to Rust. In practice it
+reminds me of the Nim library [emerald](http://flyx.github.io/emerald/), which
+lets you write HTML using Nim functions similar to how you use Maud.
+
+Here's a few more examples of hero images I have generated:
+
+<xeblog-hero file="the-forbidden-shape" prompt="the forbidden shape"></xeblog-hero>
+
+<xeblog-hero file="great-wave-cyberpunk" prompt="the great wave off of kanagawa, cyberpunk, hanzi inscription"></xeblog-hero>
+
+Normally I will only have one image per post and it will usually be after the
+introduction paragraph. The prompt will usually be related to the article topic,
+but sometimes I will take artistic liberty. If you have suggestions for prompts,
+please [contact me](/contact) with those ideas.
+
+I hope these updates on how I've been messing with my site are interesting. I'm
+trying to capture the spirit of how I'm implementing these changes as well as
+details of how everything fits together.