Embedding my current status.lol status on my homepage

Keen to embrace the fun that is omg.lol and play with more of these 2023 Indie Web vibes, I wanted to get my Status.lol status onto my homepage. Luckily, Status.lol lets you embed your status with a unique Javascript file for each user.

<script src="https://status.lol/brenton.js" async></script>

If you have a quick look at that file you'll see that it includes that current status. For me this has a big pro, and a smaller con.

The pro is that it means that the script doesn't need to make any other HTTP requests to show your status. The con is that the hash of the script can't be known in advance. Unfortunately that con means that we can't force subresource integrity (SRI) for this script.

I've gone all in on a strict Content Security Policy (CSP) for this site, which makes adding third party javascript to the site trickier. In order to allow this script to execute I've added the full URI (https://status.lol/brenton.js) to the script-src directive in my CSP. Adding the full URI means that other scripts on the status.lol domain can't be accidentally embedded. Luckily I haven't been enforcing SRI on this site, but it's something I'd like to look into in the future - at that point I might need to review this approach.

The fact that the script embeds the content of the latest statues means that we can avoid having to modify our connect-src directive. This directive lets you enforce rules for HTTP requests initiated by Javascript on the page.

By default the system emoji will be used. Adding ?fluent as a query parameter will tell status.lol to use the much more consistent Fluent Emoji¹ set. These emoji are loaded from the omg.lol content delivery network (aptly named "cache.lol"), which means that we have to add that to our img-src directive. My updated img-src looks like this:

img-src 'self' https://media.brntn.me/postie/ https://cdn.cache.lol/

The status is on the page now but we have to deal with styling. Adding another query parameter (pretty) will add inline styles to the HTML tags added by the script. Including unsafe-inline is a deal breaker for me - even for styles. Instead I chose to copy the styles into my own CSS file. Thankfully status.lol includes class names on each div is adds. Here's the CSS that I extracted from the script when using the pretty query parameter:

.statuslol {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  background: #e7ebf3;
  color: #111;
  border-radius: 0.5em;
  padding: 1em;
}

.statuslol_emoji_container {
  min-width: 94px;
  flex: 0 0 1em;
  font-size: 3em;
  padding-right: 0;
}

.statuslol_content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  margin: -0.5em 0 0 0;
  text-align: left;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

The final trick for me was to make sure that the page doesn't look funny if the script fails to load or loads slower than the rest of the site.

To do that I have wrapped the script in yet another <div> and applied styling to it to make it work as a placeholder.

<div class="statuslol_wrapper">
    <script src="https://status.lol/brenton.js?fluent" async></script>
</div>

And the CSS looks like this:

.statuslol_wrapper {
  min-height: 106px;
  background: #e7ebf3;
  border-radius: 0.5em;
}

This all might look like a lot of steps but in the end it was a few minutes of work and lets me embed a live-updating status widget on my otherwise pretty boring homepage. I'm super keen to experiment with more omg.lol features as the come out, I'm loving everything that's happening over there - it's making me excited about these sorts of indieweb experiments again!