Micro.blog widget for Bear

This Bearming add-on for Bear fetches and displays your latest post from a Micro.blog JSON feed. Images are shown as a square thumbnail, book covers keep their natural ratio, and the timestamp links back to the original post.¹

Want to show a full feed? Check out the Micro.blog feed add-on.

Preview

How to use

Add the markup to your footer or wherever you want the widget to appear, then add the script and styles to your theme. Replace the feed URL with your own Micro.blog JSON feed URL.

Markup

<div class="mb-latest" data-feed="https://yoursite.com/feed.json" hidden></div>

Script

<script>
/* Micro.blog latest post | robertbirming.com */
(async () => {
  const root = document.querySelector('.mb-latest');
  const feed = root?.getAttribute('data-feed');
  if (!feed) return;
  try {
    const res = await fetch(feed);
    if (!res.ok) return;
    const { items } = await res.json();
    const post = items?.[0];
    if (!post) return;
    const parser = new DOMParser();
    const doc = parser.parseFromString(post.content_html || '', 'text/html');
    let thumb = null;
    let isBook = false;
    const img = doc.querySelector('img');
    if (img) {
      thumb = img.src;
      isBook = img.classList.contains('microblog_book');
      img.remove();
    }
    const text = doc.body.innerHTML.trim();
    const mins = (Date.now() - new Date(post.date_published)) / 60000 | 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.innerHTML =
      (thumb ? '<a href="' + post.url + '" rel="noopener"><img class="mb-latest-thumb' + (isBook ? ' mb-latest-thumb--book' : '') + '" src="' + thumb + '" alt=""></a>' : '') +
      '<div class="mb-latest-body">' +
        '<div class="mb-latest-text">' + text + '</div>' +
        '<a class="mb-latest-time" href="' + post.url + '" rel="noopener">' + when + '</a>' +
      '</div>';
    root.removeAttribute('hidden');
  } catch {}
})();
</script>

Styles

/* Micro.blog latest post | robertbirming.com */
.mb-latest {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1rem;
  align-items: start;
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block: var(--space-block);
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Optional label */
.mb-latest::before {
  content: "Current status";
  display: block;
  grid-column: 1 / -1;
  margin-block-end: 0.5em;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 60%, var(--bg));
}

.mb-latest-thumb {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0;
  margin-block-start: 0.2rem;
}

.mb-latest-thumb--book {
  width: auto;
  max-width: 3rem;
  height: auto;
  object-fit: contain;
}

.mb-latest-body {
  min-width: 0;
}

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

.mb-latest-text > :first-child { margin-block-start: 0; }
.mb-latest-text > :last-child { margin-block-end: 0; }

.mb-latest-time {
  display: inline-block;
  margin-block-start: 0.7em;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 65%, var(--bg));
  text-decoration: none;
}

.mb-latest-time:visited {
  color: color-mix(in srgb, var(--text) 60%, var(--bg));
}

@media (hover: hover) {
  .mb-latest-time:hover {
    color: var(--link);
  }
}

footer .mb-latest {
  text-align: start;
}

Want more? Check out all available Bearming add-ons.

Happy blogging, and microblogging.

Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩