backend/src/publisher/transformers/hf-user.ts

import type { Transformer } from "./types.js";

/**
 * Transforms `<div data-component="hfUser" username="..." name="..." url="...">`
 * (the placeholder emitted by the TipTap atomic node) into the actual
 * Hugging Face user profile card.
 *
 * Mirrors `app/src/components/HfUser.astro` from the upstream
 * `research-article-template`:
 *   <div class="hf-user">
 *     <div class="hf-user__left">
 *       <img class="hf-user__avatar" src="https://huggingface.co/api/users/<u>/avatar" .../>
 *       <span class="hf-user__text">
 *         <a class="hf-user__name" href="...">Display Name</a>
 *         <span class="hf-user__row">
 *           <a class="hf-user__username" href="...">@username</a>
 *         </span>
 *       </span>
 *     </div>
 *   </div>
 *
 * Falls back gracefully when only `username` is provided (no `name`/`url`):
 *   - `name` defaults to the username
 *   - `url` defaults to `https://huggingface.co/<username>`
 *
 * If `username` is missing entirely the placeholder div is removed - we don't
 * want a broken empty card in the published page.
 */
export const hfUserTransformer: Transformer = {
  name: "hfUser",
  apply(document) {
    for (const div of [...document.querySelectorAll('div[data-component="hfUser"]')]) {
      const username = (div.getAttribute("username") || div.getAttribute("data-username") || "").trim();
      const rawName = (div.getAttribute("name") || div.getAttribute("data-name") || "").trim();
      const rawUrl = (div.getAttribute("url") || div.getAttribute("data-url") || "").trim();

      if (!username) {
        div.remove();
        continue;
      }

      const displayName = rawName || username;
      const profileUrl = rawUrl || `https://huggingface.co/${encodeURIComponent(username)}`;
      const avatarSrc = `https://huggingface.co/api/users/${encodeURIComponent(username)}/avatar`;

      const card = document.createElement("div");
      card.className = "hf-user";

      const left = document.createElement("div");
      left.className = "hf-user__left";

      const img = document.createElement("img");
      img.className = "hf-user__avatar";
      img.setAttribute("src", avatarSrc);
      img.setAttribute("alt", `${displayName} avatar`);
      img.setAttribute("width", "44");
      img.setAttribute("height", "44");
      img.setAttribute("loading", "lazy");
      img.setAttribute("decoding", "async");
      img.setAttribute("referrerpolicy", "no-referrer");

      const text = document.createElement("span");
      text.className = "hf-user__text";

      const nameLink = document.createElement("a");
      nameLink.className = "hf-user__name";
      nameLink.setAttribute("href", profileUrl);
      nameLink.setAttribute("target", "_blank");
      nameLink.setAttribute("rel", "noopener noreferrer");
      nameLink.textContent = displayName;

      const row = document.createElement("span");
      row.className = "hf-user__row";

      const userLink = document.createElement("a");
      userLink.className = "hf-user__username";
      userLink.setAttribute("href", profileUrl);
      userLink.setAttribute("target", "_blank");
      userLink.setAttribute("rel", "noopener noreferrer");
      userLink.textContent = `@${username}`;

      row.appendChild(userLink);
      text.appendChild(nameLink);
      text.appendChild(row);
      left.appendChild(img);
      left.appendChild(text);
      card.appendChild(left);

      div.replaceWith(card);
    }
  },
};