Robert Birming

Status.lol widget

A widget that pulls your latest status from status.lol and displays it in the characteristic Bearming widgets style. Updates automatically whenever you post a new status.1

Preview

How to use

  1. Copy the snippet below and add it to your footer (Dashboard → Settings → Header and footer directives).
  2. Replace the data-address with your own omg.lol username.
  3. Copy the styles and add them to your theme.

Snippet

<div class="status-lol" data-address="username" hidden>
  <div class="status-lol-emoji"></div>
  <div class="status-lol-content"></div>
</div>

<script>
(async () => {
  const root = document.querySelector('.status-lol');
  const address = root?.getAttribute('data-address');
  if (!address) return;

  try {
    const res = await fetch('https://api.omg.lol/address/' + address + '/statuses/');
    if (!res.ok) return;
    const { response: { statuses } } = await res.json();
    const s = statuses?.[0];
    if (!s) return;

    const text = s.content.replace(
      /\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" rel="noopener">$1</a>'
    );
    const mins = (Date.now() / 1000 - s.created) / 60 | 0;
    const ago = (n, u) => n + ' ' + u + (n === 1 ? '' : 's') + ' ago';
    const when = mins < 1 ? 'just now'
      : mins < 60 ? ago(mins, 'minute')
      : mins < 1440 ? ago(mins / 60 | 0, 'hour')
      : mins < 43200 ? ago(mins / 1440 | 0, 'day')
      : mins < 525600 ? ago(mins / 43200 | 0, 'month')
      : ago(mins / 525600 | 0, 'year');

    root.querySelector('.status-lol-emoji').textContent = s.emoji;
    root.querySelector('.status-lol-content').innerHTML =
      '<p>' + text + '</p>' +
      '<a class="status-lol-time" href="https://status.lol/' + address + '/' + s.id + '" rel="noopener">' + when + '</a>';
    root.removeAttribute('hidden');
  } catch {}
})();
</script>

Styles

/* Status.lol widget | robertbirming.com */
.status-lol {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1em;
  max-inline-size: 34rem;
  margin-block: var(--space-block);
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.1rem;
  color: var(--text);
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Optional label */
.status-lol::before {
  content: "Current status";
  display: block;
  grid-column: 1 / -1;
  margin-block-end: 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.status-lol-emoji {
  font-size: 2.7rem;
  line-height: 1;
  align-self: start;
}

.status-lol-content {
  font-size: var(--font-small);
  color: color-mix(in srgb, var(--text) 85%, var(--bg));
  overflow-wrap: break-word;
}

.status-lol-content > :first-child { margin-block-start: 0; }
.status-lol-content > :last-child { margin-block-end: 0; }

.status-lol-time {
  display: inline-block;
  margin-block-start: 0.35em;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 45%, var(--bg));
}

.status-lol-time:visited {
  color: color-mix(in srgb, var(--text) 45%, var(--bg));
}

@media (hover: hover) {
  .status-lol-time:hover {
    color: var(--link);
  }
}

Want more? Check out the Bear library.

Happy blogging, and happy status posting.

  1. This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩