HTMX Out-of-Bound Swaps

At this point in building this site, I had a bit of an issue. While I wanted to use hx-boost to create a snappy “Read More” feature on the article cards, I also needed flexibility on how the boosted page looked in the list view, compared to its standalone look.

This produced some fairly… interesting results at first.

print("kind of weird, right?")

Maybe I could try to just send the bare fragment, but now the page is unstyled when viewed on its direct URL, as it’s missing the necessary meta attributes.

htmx-swap-oob to the rescue!

I just sprinkle hx-swap-oob directives in a couple places…

<header class="navbar" hx-swap-oob="none">
<div hx-swap-oob="none">
  <h1>{post.data.title}</h1>
  <p class="mono-font">{post.data.pubDate}</p>
  <sub-title>{post.data.description}</sub-title>
</div>
<footer hx-swap-oob="none">

And now only the content gets boosted into the article list view. Nice.

  print!("Now that's better!");