fix(publisher): render HF user card via dedicated transformer

The hfUser atomic node was serialized to an empty
`<div data-component="hfUser">` placeholder with no transformer to
turn it into the actual profile card, so it rendered as nothing in
published articles. Add `hfUserTransformer` mirroring the upstream
`HfUser.astro` (avatar + name + @handle ), register it in the pipeline,
ship the matching `.hf-user` styles in `_publisher.css`, and cover the
three cases (full attrs, fallback to username, missing username) with
unit tests.

Made-with: Cursor

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

@@ -0,0 +1,92 @@
+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);
+    }
+  },
+};

backend/src/publisher/transformers/index.ts

@@ -14,7 +14,9 @@
  *                      the mermaid source.
  *  5. HighlightCode  — runs Shiki over every remaining `<pre><code>`.
  *  6. HtmlEmbed      — independent; converts placeholder divs into iframes.
- *  7. Footnote       — runs last so collected texts include those inside every
+ *  7. HfUser         — independent; converts atomic placeholder divs into
+ *                      Hugging Face user profile cards.
+ *  8. Footnote       — runs last so collected texts include those inside every
  *                      other transformed block (tables, callouts, accordions...).
  */
 import type { Transformer } from "./types.js";
@@ -24,6 +26,7 @@ import { bibliographyTransformer } from "./bibliography.js";
 import { mermaidTransformer } from "./mermaid.js";
 import { highlightCodeTransformer } from "./highlight-code.js";
 import { htmlEmbedTransformer } from "./html-embed.js";
+import { hfUserTransformer } from "./hf-user.js";
 import { footnoteTransformer } from "./footnote.js";
 
 export const transformers: Transformer[] = [
@@ -33,6 +36,7 @@ export const transformers: Transformer[] = [
   mermaidTransformer,
   highlightCodeTransformer,
   htmlEmbedTransformer,
+  hfUserTransformer,
   footnoteTransformer,
 ];
 

backend/tests/html-renderer-snapshot.test.ts

@@ -185,6 +185,44 @@ describe("postProcess - htmlEmbed", () => {
   });
 });
 
+describe("postProcess - hfUser", () => {
+  it("transforms hfUser div into the HF profile card", async () => {
+    const json = minimalDoc([{
+      type: "hfUser",
+      attrs: { username: "tfrere", name: "Thibaud Frere", url: "https://huggingface.co/tfrere" },
+    }]);
+    const html = await renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain('class="hf-user"');
+    expect(html).toContain('class="hf-user__avatar"');
+    expect(html).toContain("https://huggingface.co/api/users/tfrere/avatar");
+    expect(html).toContain("Thibaud Frere");
+    expect(html).toContain("@tfrere");
+    expect(html).toContain('href="https://huggingface.co/tfrere"');
+    expect(html).not.toContain('data-component="hfUser"');
+  });
+
+  it("falls back to username when name and url are missing", async () => {
+    const json = minimalDoc([{
+      type: "hfUser",
+      attrs: { username: "alice", name: "", url: "" },
+    }]);
+    const html = await renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain('class="hf-user"');
+    expect(html).toContain("@alice");
+    expect(html).toContain('href="https://huggingface.co/alice"');
+  });
+
+  it("removes the placeholder div when username is missing", async () => {
+    const json = minimalDoc([{
+      type: "hfUser",
+      attrs: { username: "", name: "Anon", url: "" },
+    }]);
+    const html = await renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).not.toContain('class="hf-user"');
+    expect(html).not.toContain('data-component="hfUser"');
+  });
+});
+
 describe("postProcess - bibliography", () => {
   it("injects bibliography HTML into the placeholder", async () => {
     const json = minimalDoc([

frontend/src/styles/_publisher.css

@@ -145,6 +145,75 @@ figure.html-embed > .html-embed__desc strong {
   font-weight: 600;
 }
 
+/* ---------------------------------------------------------------------------
+   Hugging Face user profile card (publisher output)
+   Structure:
+     <div class="hf-user">
+       <div class="hf-user__left">
+         <img class="hf-user__avatar" .../>
+         <span class="hf-user__text">
+           <a class="hf-user__name">Display Name</a>
+           <span class="hf-user__row">
+             <a class="hf-user__username">@handle</a>
+           </span>
+         </span>
+       </div>
+     </div>
+   Mirrors `app/src/components/HfUser.astro` from the upstream
+   research-article-template so the same authored content renders
+   identically when republished from the collaborative editor.
+   --------------------------------------------------------------------------- */
+.hf-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 10px 10px 12px;
+  border-radius: 12px;
+  box-shadow: none;
+}
+.hf-user__left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: inherit;
+}
+.hf-user__avatar {
+  display: block;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) inset;
+}
+.hf-user__text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+}
+.hf-user__row {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.hf-user__name {
+  font-size: 14px;
+  font-weight: 700;
+}
+.hf-user__username {
+  font-size: 12px;
+  color: var(--muted-color);
+  text-decoration: underline !important;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 0.06em;
+  text-decoration-color: var(--link-underline);
+}
+.hf-user a {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: none;
+}
+
 /* PDF download button in the meta bar (inherits .button for gradient + padding) */
 a.button.pdf-link {
   display: inline-flex;