Crucial Tracks for Bear

Crucial Tracks is a music journal where you share a song a day along with the story behind it. This widget pulls your latest track and displays it as a compact card on your blog.¹

Preview

How to use

Copy the snippet below and add it where you want the widget to appear.
Replace your-username with your Crucial Tracks username.
Copy the styles and add them to your theme.

Snippet

<div id="ct-latest" data-username="your-username">Loading...</div>
<script>
(function(){
  var c = document.getElementById('ct-latest');
  var user = c && c.getAttribute('data-username');
  if (!c || !user) return;
  fetch('https://www.crucialtracks.org/profile/' + user + '/feed.json?per_page=1')
    .then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
    .then(function(data) {
      c.textContent = '';
      if (!data.items || !data.items.length) { c.textContent = 'No tracks found.'; return; }
      var item = data.items[0];
      var d = item._song_details || {};
      var link = d.songlink_url || item.url || '#';
      var content = d.content || '';
      var card = document.createElement('div');
      card.className = 'ct-latest-card';
      var artLink = document.createElement('a');
      artLink.className = 'ct-latest-art-link';
      artLink.href = link;
      artLink.target = '_blank';
      artLink.rel = 'noopener';
      if (d.artwork_url) {
        var img = document.createElement('img');
        img.className = 'ct-latest-art';
        img.src = d.artwork_url;
        img.alt = '';
        img.loading = 'lazy';
        artLink.appendChild(img);
      }
      card.appendChild(artLink);
      var info = document.createElement('div');
      info.className = 'ct-latest-info';
      var title = document.createElement('a');
      title.className = 'ct-latest-title';
      title.href = link;
      title.target = '_blank';
      title.rel = 'noopener';
      title.textContent = d.song || 'Unknown';
      info.appendChild(title);
      var artist = document.createElement('span');
      artist.className = 'ct-latest-artist';
      artist.textContent = d.artist || 'Unknown';
      info.appendChild(artist);
      if (content) {
        var maxLen = 180;
        var clean = content
          .replace(/^_.*?_\n\n?/, '')
          .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
          .replace(/^>\s?/gm, '')
          .replace(/[*_]{1,2}([^*_]+)[*_]{1,2}/g, '$1')
          .trim();
        var truncated = clean.length > maxLen
          ? clean.slice(0, clean.lastIndexOf(' ', maxLen)) + '…'
          : clean;
        var review = document.createElement('p');
        review.className = 'ct-latest-review';
        review.textContent = truncated;
        info.appendChild(review);
      }
      card.appendChild(info);
      c.appendChild(card);
    })
    .catch(function(e) { c.textContent = 'Could not load track. (' + e.message + ')'; });
})();
</script>

Styles

/* Crucial Tracks widget | robertbirming.com */
#ct-latest {
  max-inline-size: 34rem;
  margin-block: var(--space-block);
  margin-inline: auto;
}

.ct-latest-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  padding-block: 1rem;
  padding-inline: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ct-latest-art-link {
  display: block;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.ct-latest-art {
  border-radius: 0;
  inline-size: 4.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
}

.ct-latest-info {
  align-self: center;
  overflow-wrap: break-word;
}

.ct-latest-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
}

.ct-latest-title:visited {
  color: var(--text);
}

.ct-latest-artist {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

.ct-latest-review {
  margin-block: 0.5em 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

Want more? Check out the Bear library.

Happy blogging, and happy listening.

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