<div id="ct-latest" data-username="your-username">Loading…</div>

<script>
/* Crucial Tracks widget | robertbirming.com */
(() => {
  const box = document.getElementById("ct-latest");
  const user = box?.dataset.username;
  if (!user) return;

  // Story text comes as Markdown, so strip it down to plain text
  const plain = (md) => md
    .replace(/^_.*?_\n\n?/, "")
    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
    .replace(/^>\s?/gm, "")
    .replace(/[*_]{1,2}([^*_]+)[*_]{1,2}/g, "$1")
    .trim();

  const el = (tag, className, text) => {
    const node = document.createElement(tag);
    node.className = className;
    if (text) node.textContent = text;
    return node;
  };

  fetch(`https://www.crucialtracks.org/profile/${encodeURIComponent(user)}/feed.json?per_page=1`)
    .then((r) => {
      if (!r.ok) throw new Error(r.status);
      return r.json();
    })
    .then((data) => {
      const item = data.items?.[0];
      if (!item) {
        box.textContent = "No tracks found.";
        return;
      }

      const song = item._song_details || {};
      const link = song.songlink_url || item.url || "#";
      const card = el("div", "ct-latest-card");

      if (song.artwork_url) {
        const art = el("a", "ct-latest-art-link");
        art.href = link;
        const img = el("img", "ct-latest-art");
        img.src = song.artwork_url;
        img.alt = "";
        img.loading = "lazy";
        art.append(img);
        card.append(art);
      }

      const info = el("div", "ct-latest-info");
      const title = el("a", "ct-latest-title", song.song || "Unknown song");
      title.href = link;
      info.append(title, el("span", "ct-latest-artist", song.artist || "Unknown artist"));

      if (song.content) {
        const story = plain(song.content);
        const short = story.length > 180 ? story.slice(0, story.lastIndexOf(" ", 180)) + "…" : story;
        info.append(el("p", "ct-latest-review", short));
      }

      card.append(info);
      box.replaceChildren(card);
    })
    .catch(() => {
      box.textContent = "Couldn’t load the latest track right now.";
    });
})();
</script>

/* Crucial Tracks widget | robertbirming.com */
#ct-latest {
  max-inline-size: 34rem;
  margin-block: 1.5rem;
  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(--code-background-color);
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
  border-radius: 6px;
}

.ct-latest-art-link {
  display: block;
}

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

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

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

@media (hover: hover) {
  .ct-latest-title:hover {
    color: var(--link-color);
  }
}

.ct-latest-artist,
.ct-latest-review {
  display: block;
  font-size: calc(var(--font-scale) * 0.85);
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

.ct-latest-review {
  margin-block: 0.5em 0;
  line-height: 1.5;
}