carbon-tokenization

Running

tfrere HF Staff Cursor commited on May 20

Commit

2b90d0d

1 Parent(s): 44626d0

feat(publisher): editor pill shows who you're signed in as

Upgrade the editor quick-link from a bare pencil icon to a
proper pill that contextualises the action:

┌──────────────────────────────────────────────────────┐
│ [avatar] Signed in as @tfrere [✎ Edit article] │
└──────────────────────────────────────────────────────┘

The visitor sees who they're authenticated as before clicking,
which makes the "would I be writing to the real file?" question
self-answering. Useful when multiple HF accounts share the same
browser session, or when a collaborator wants to confirm they're
not editing on someone else's behalf.

Implementation:

- Render placeholder content (\"@you\" + empty <img>) so the
layout doesn't shift when /api/auth/status comes back. The
pill is still \`hidden\` by default - no flash for anonymous
visitors.
- Inline script fills the <img>.src (preferring
user.avatarUrl, falling back to /api/users/<name>/avatar)
and the @handle , then drops the \`hidden\` attribute.
- New \`.edit-pill\` styles: rounded pill, page-bg fill, primary
CTA chip on the right, soft shadow, primary-tinted border on
hover. Avatar uses the same 24px round shape as the article's
HfUser cards for visual consistency.
- Still hidden under 1100px (same breakpoint as #theme-toggle).

Snapshot refreshed.

Co-authored-by: Cursor <cursoragent@cursor.com>

Files changed (3) hide show

backend/src/publisher/html-renderer.ts +37 -15
backend/tests/__snapshots__/html-renderer-snapshot.test.ts.snap +37 -15
frontend/src/styles/_layout.css +58 -20

backend/src/publisher/html-renderer.ts CHANGED Viewed

@@ -198,16 +198,25 @@ ${renderPrimaryColorOverride(meta.primaryHue)}
   </button>
   <!--
-    Quick link to the editor, shown only for visitors whose
     /api/auth/status response carries canEdit=true. Hidden by
-    default so non-editors never see a flash. Same shape as the
-    theme toggle, mirrored to the right edge of the viewport.
   -->
-  <a id="edit-link" href="/editor" aria-label="Open the editor" title="Open the editor" hidden>
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-      <path d="M12 20h9"/>
-      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
-    </svg>
   </a>
   <!-- Mobile TOC toggle -->
@@ -713,25 +722,38 @@ ${renderPrimaryColorOverride(meta.primaryHue)}
     });
     // ----------------------------------------------------------------
-    // Editor quick-link
     // ----------------------------------------------------------------
     // The published page lives on the same Space as the editor, so we
     // can probe /api/auth/status to know if the current visitor has
-    // edit rights. When they do, surface a small "open editor" pencil
-    // top-right; otherwise the button stays \`hidden\` and is removed
-    // on the next layout pass (no flicker for read-only visitors).
     //
     // A network failure (offline preview, exported HTML opened from
-    // disk, ...) is silently ignored - the button just stays hidden.
     (function() {
       var link = document.getElementById('edit-link');
       if (!link) return;
       fetch('/api/auth/status', { credentials: 'same-origin' })
         .then(function(r) { return r.ok ? r.json() : null; })
         .then(function(data) {
-          if (data && data.canEdit) {
-            link.removeAttribute('hidden');
           }
         })
         .catch(function() {});
     })();

   </button>
   <!--
+    Editor quick-access pill, shown only for visitors whose
     /api/auth/status response carries canEdit=true. Hidden by
+    default so non-editors never see a flash. The fields are
+    filled by the inline script at the bottom of <body>; we use
+    placeholder content so layout doesn't shift when the data
+    arrives.
   -->
+  <a id="edit-link" href="/editor" class="edit-pill" hidden>
+    <img class="edit-pill__avatar" alt="" width="24" height="24" referrerpolicy="no-referrer">
+    <span class="edit-pill__text">
+      Signed in as <strong class="edit-pill__name">@you</strong>
+    </span>
+    <span class="edit-pill__cta">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 20h9"/>
+        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+      </svg>
+      Edit article
+    </span>
   </a>
   <!-- Mobile TOC toggle -->
     });
     // ----------------------------------------------------------------
+    // Editor quick-access pill
     // ----------------------------------------------------------------
     // The published page lives on the same Space as the editor, so we
     // can probe /api/auth/status to know if the current visitor has
+    // edit rights. When they do, fill in their avatar/handle and
+    // surface the pill top-right. Otherwise the pill stays hidden
+    // (no flash for anonymous / read-only visitors).
     //
     // A network failure (offline preview, exported HTML opened from
+    // disk, ...) is silently ignored - the pill just stays hidden.
     (function() {
       var link = document.getElementById('edit-link');
       if (!link) return;
       fetch('/api/auth/status', { credentials: 'same-origin' })
         .then(function(r) { return r.ok ? r.json() : null; })
         .then(function(data) {
+          if (!data || !data.canEdit) return;
+          var u = data.user || {};
+          var handle = u.name || 'editor';
+          var avatar = link.querySelector('.edit-pill__avatar');
+          var nameEl = link.querySelector('.edit-pill__name');
+          if (avatar) {
+            var src = u.avatarUrl ||
+              ('https://huggingface.co/api/users/' +
+                encodeURIComponent(handle) + '/avatar');
+            avatar.src = src;
+            avatar.alt = handle + ' avatar';
+          }
+          if (nameEl) {
+            nameEl.textContent = '@' + handle;
           }
+          link.removeAttribute('hidden');
         })
         .catch(function() {});
     })();

backend/tests/__snapshots__/html-renderer-snapshot.test.ts.snap CHANGED Viewed

@@ -126,16 +126,25 @@ exports[`snapshot - full render > matches snapshot for a typical article 1`] = `
   </button>
   <!--
-    Quick link to the editor, shown only for visitors whose
     /api/auth/status response carries canEdit=true. Hidden by
-    default so non-editors never see a flash. Same shape as the
-    theme toggle, mirrored to the right edge of the viewport.
   -->
-  <a id="edit-link" href="/editor" aria-label="Open the editor" title="Open the editor" hidden>
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-      <path d="M12 20h9"/>
-      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
-    </svg>
   </a>
   <!-- Mobile TOC toggle -->
@@ -656,25 +665,38 @@ exports[`snapshot - full render > matches snapshot for a typical article 1`] = `
     });
     // ----------------------------------------------------------------
-    // Editor quick-link
     // ----------------------------------------------------------------
     // The published page lives on the same Space as the editor, so we
     // can probe /api/auth/status to know if the current visitor has
-    // edit rights. When they do, surface a small "open editor" pencil
-    // top-right; otherwise the button stays \`hidden\` and is removed
-    // on the next layout pass (no flicker for read-only visitors).
     //
     // A network failure (offline preview, exported HTML opened from
-    // disk, ...) is silently ignored - the button just stays hidden.
     (function() {
       var link = document.getElementById('edit-link');
       if (!link) return;
       fetch('/api/auth/status', { credentials: 'same-origin' })
         .then(function(r) { return r.ok ? r.json() : null; })
         .then(function(data) {
-          if (data && data.canEdit) {
-            link.removeAttribute('hidden');
           }
         })
         .catch(function() {});
     })();

   </button>
   <!--
+    Editor quick-access pill, shown only for visitors whose
     /api/auth/status response carries canEdit=true. Hidden by
+    default so non-editors never see a flash. The fields are
+    filled by the inline script at the bottom of <body>; we use
+    placeholder content so layout doesn't shift when the data
+    arrives.
   -->
+  <a id="edit-link" href="/editor" class="edit-pill" hidden>
+    <img class="edit-pill__avatar" alt="" width="24" height="24" referrerpolicy="no-referrer">
+    <span class="edit-pill__text">
+      Signed in as <strong class="edit-pill__name">@you</strong>
+    </span>
+    <span class="edit-pill__cta">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 20h9"/>
+        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+      </svg>
+      Edit article
+    </span>
   </a>
   <!-- Mobile TOC toggle -->
     });
     // ----------------------------------------------------------------
+    // Editor quick-access pill
     // ----------------------------------------------------------------
     // The published page lives on the same Space as the editor, so we
     // can probe /api/auth/status to know if the current visitor has
+    // edit rights. When they do, fill in their avatar/handle and
+    // surface the pill top-right. Otherwise the pill stays hidden
+    // (no flash for anonymous / read-only visitors).
     //
     // A network failure (offline preview, exported HTML opened from
+    // disk, ...) is silently ignored - the pill just stays hidden.
     (function() {
       var link = document.getElementById('edit-link');
       if (!link) return;
       fetch('/api/auth/status', { credentials: 'same-origin' })
         .then(function(r) { return r.ok ? r.json() : null; })
         .then(function(data) {
+          if (!data || !data.canEdit) return;
+          var u = data.user || {};
+          var handle = u.name || 'editor';
+          var avatar = link.querySelector('.edit-pill__avatar');
+          var nameEl = link.querySelector('.edit-pill__name');
+          if (avatar) {
+            var src = u.avatarUrl ||
+              ('https://huggingface.co/api/users/' +
+                encodeURIComponent(handle) + '/avatar');
+            avatar.src = src;
+            avatar.alt = handle + ' avatar';
+          }
+          if (nameEl) {
+            nameEl.textContent = '@' + handle;
           }
+          link.removeAttribute('hidden');
         })
         .catch(function() {});
     })();

frontend/src/styles/_layout.css CHANGED Viewed

@@ -138,44 +138,82 @@
   transform: scale(0.92);
 }
-/* Editor quick-link (published page only). Mirrors the theme toggle
-   on the opposite side. The button itself ships with `hidden` and is
-   revealed by inline JS in the published page only when
-   /api/auth/status returns canEdit=true. */
-#edit-link {
   position: absolute;
   top: var(--spacing-4);
   right: var(--spacing-4);
   margin: 0;
   z-index: var(--z-overlay);
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
   border: 1px solid var(--border-color);
   background: var(--page-bg);
-  box-shadow: 0 2px 12px rgba(0,0,0,.08);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
   color: var(--text-color);
   text-decoration: none;
   transition: transform 150ms ease, box-shadow 150ms ease,
-    background 150ms ease;
 }
-#edit-link:hover {
-  background: color-mix(in srgb, var(--primary-color) 12%, var(--page-bg));
 }
-#edit-link:active {
-  transform: scale(0.92);
 }
-#edit-link[hidden] {
   display: none;
 }
 @media (max-width: 1100px) {
   #theme-toggle,
-  #edit-link {
     display: none;
   }
 }

   transform: scale(0.92);
 }
+/* Editor quick-access pill (published page only). The element ships
+   with `hidden` and the inline script in the published page reveals
+   it only when /api/auth/status returns canEdit=true, after also
+   filling in the avatar / handle. We split the rules across the
+   element + a class so the JS can target the id (it's stable across
+   page exports) while the styles live on the class. */
+#edit-link.edit-pill {
   position: absolute;
   top: var(--spacing-4);
   right: var(--spacing-4);
   margin: 0;
   z-index: var(--z-overlay);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 4px 4px 6px;
+  border-radius: 999px;
   border: 1px solid var(--border-color);
   background: var(--page-bg);
   color: var(--text-color);
   text-decoration: none;
+  box-shadow: 0 2px 12px rgba(0,0,0,.08);
+  font-size: 13px;
+  line-height: 1.2;
   transition: transform 150ms ease, box-shadow 150ms ease,
+    border-color 150ms ease;
 }
+#edit-link.edit-pill:hover {
+  border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
+  box-shadow: 0 4px 16px rgba(0,0,0,.12);
 }
+#edit-link.edit-pill:active {
+  transform: scale(0.98);
 }
+#edit-link.edit-pill[hidden] {
   display: none;
 }
+.edit-pill__avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: var(--surface-bg);
+}
+.edit-pill__text {
+  color: var(--muted-color);
+  white-space: nowrap;
+}
+.edit-pill__name {
+  color: var(--text-color);
+  font-weight: 600;
+}
+.edit-pill__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--primary-color);
+  color: #fff;
+  font-weight: 600;
+  font-size: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.edit-pill__cta svg {
+  stroke: currentColor;
+}
 @media (max-width: 1100px) {
   #theme-toggle,
+  #edit-link.edit-pill {
     display: none;
   }
 }