chore: phase 2 convention alignment — onerror/onclick removal, CSS stacking avatar fallback (v2.8.1)

- Replace inline onerror handlers with CSS stacking + event delegation for avatar fallback - Replace inline onclick with event delegation for profile link removal - Replace hardcoded border values with design tokens in reader-links.css - Add data-avatar-fallback pattern: fallback initials always visible, img layered on top Confab-Link: http://localhost:8080/sessions/bb4a6ec4-b711-48cd-b3d7-942ec2a9851d
2026-04-02 15:44:58 +02:00 · 2026-03-13 12:32:14 +01:00
parent 1c2fb321bc
commit bf386e0c41
9 changed files with 88 additions and 57 deletions
--- a/assets/reader-links.css
+++ b/assets/reader-links.css
@@ -15,8 +15,8 @@
 .ap-link-preview {
  display: flex;
  overflow: hidden;
-  border-radius: 8px;
-  border: 1px solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  border: var(--border-width-thin) solid var(--color-outline);
  background-color: var(--color-offset);
  text-decoration: none;
  color: inherit;
@@ -121,7 +121,7 @@
  letter-spacing: 0.05em;
  margin: var(--space-l) 0 var(--space-s);
  padding-bottom: var(--space-xs);
-  border-bottom: 1px solid var(--color-outline);
+  border-bottom: var(--border-width-thin) solid var(--color-outline);
 }

 .ap-post-detail__main {
--- a/assets/reader.css
+++ b/assets/reader.css
@@ -32,7 +32,7 @@

 .ap-breadcrumb__current {
  color: var(--color-on-background);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }

 /* ==========================================================================
@@ -151,10 +151,10 @@
  background: var(--color-offset);
  border: var(--border-width-thin) solid var(--color-outline);
  border-left: 3px solid var(--color-outline);
-  border-radius: 8px;
+  border-radius: var(--border-radius-small);
  overflow: hidden;
  padding: var(--space-m);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 2px hsl(var(--tint-neutral) 10% / 0.04);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
@@ -163,7 +163,7 @@
 .ap-card:hover {
  border-color: var(--color-outline-variant);
  border-left-color: var(--color-outline-variant);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px hsl(var(--tint-neutral) 10% / 0.08);
 }

 /* ==========================================================================
@@ -261,15 +261,27 @@
  margin-bottom: var(--space-s);
 }

+.ap-card__avatar-wrap {
+  flex-shrink: 0;
+  height: 44px;
+  position: relative;
+  width: 44px;
+}
+
 .ap-card__avatar {
  border: var(--border-width-thin) solid var(--color-outline);
  border-radius: 50%;
-  flex-shrink: 0;
  height: 44px;
  object-fit: cover;
  width: 44px;
 }

+.ap-card__avatar-wrap > img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
 .ap-card__avatar--default {
  align-items: center;
  background: var(--color-offset-variant);
@@ -411,7 +423,7 @@

 .ap-card__content code {
  background: var(--color-offset-variant);
-  border-radius: 3px;
+  border-radius: var(--border-radius-small);
  font-size: 0.9em;
  padding: 1px 4px;
 }
@@ -508,7 +520,7 @@
   ========================================================================== */

 .ap-card__gallery {
-  border-radius: 6px;
+  border-radius: var(--border-radius-small);
  display: grid;
  gap: 2px;
  margin-bottom: var(--space-s);
@@ -607,7 +619,7 @@

 .ap-lightbox {
  align-items: center;
-  background: rgba(0, 0, 0, 0.92);
+  background: hsl(var(--tint-neutral) 10% / 0.92);
  display: flex;
  inset: 0;
  justify-content: center;
@@ -707,7 +719,7 @@
 }

 .ap-link-preview__title {
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
  font-size: var(--font-size-s);
  margin: 0;
  overflow: hidden;
@@ -861,7 +873,7 @@
  align-items: center;
  background: transparent;
  border: 0;
-  border-radius: 6px;
+  border-radius: var(--border-radius-small);
  color: var(--color-on-offset);
  cursor: pointer;
  display: inline-flex;
@@ -1188,6 +1200,11 @@
  position: relative;
 }

+.ap-notification__avatar-wrap {
+  height: 40px;
+  width: 40px;
+}
+
 .ap-notification__avatar {
  border: var(--border-width-thin) solid var(--color-outline);
  border-radius: 50%;
@@ -1196,6 +1213,12 @@
  width: 40px;
 }

+.ap-notification__avatar-wrap > img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
 .ap-notification__avatar--default {
  align-items: center;
  background: var(--color-offset-variant);
@@ -1319,7 +1342,16 @@
 }

 .ap-profile__avatar-wrap {
+  height: 80px;
  margin-bottom: var(--space-s);
+  position: relative;
+  width: 80px;
+}
+
+.ap-profile__avatar-wrap > img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
 }

 .ap-profile__avatar {
@@ -1901,7 +1933,7 @@

 .ap-tag-header__title {
  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
  margin: 0 0 var(--space-xs);
 }

@@ -2028,7 +2060,7 @@
  border: var(--border-width-thin) solid var(--color-outline);
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-m);
  min-width: 0;
  padding: var(--space-xs) var(--space-s);
  width: 100%;
@@ -2094,7 +2126,7 @@
  background: var(--color-background);
  border: var(--border-width-thin) solid var(--color-outline);
  border-radius: var(--border-radius-small);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px hsl(var(--tint-neutral) 10% / 0.15);
  left: 0;
  max-height: 320px;
  overflow-y: auto;
@@ -2171,7 +2203,7 @@
  background: var(--color-background);
  border: var(--border-width-thin) solid var(--color-outline);
  border-radius: var(--border-radius-small);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px hsl(var(--tint-neutral) 10% / 0.15);
  left: 0;
  max-height: 320px;
  overflow-y: auto;
@@ -2281,7 +2313,7 @@
 }

 .ap-explore-tabs-nav::after {
-  background: linear-gradient(to right, transparent, var(--color-background, #fff) 80%);
+  background: linear-gradient(to right, transparent, var(--color-background) 80%);
  content: "";
  height: 100%;
  pointer-events: none;
@@ -2350,7 +2382,7 @@

 /* Scope badges on instance tabs */
 .ap-tab__badge {
-  border-radius: 3px;
+  border-radius: var(--border-radius-small);
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.02em;
@@ -2522,7 +2554,7 @@

 .ap-explore-tab-error__retry {
  background: none;
-  border: 1px solid var(--color-primary-on-background);
+  border: var(--border-width-thin) solid var(--color-primary-on-background);
  border-radius: var(--border-radius-small);
  color: var(--color-primary-on-background);
  cursor: pointer;
@@ -2602,7 +2634,7 @@

 .ap-unread-toggle--active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }

 /* ==========================================================================
@@ -2611,7 +2643,7 @@

 .ap-quote-embed {
  border: var(--border-width-thin) solid var(--color-outline);
-  border-radius: 8px;
+  border-radius: var(--border-radius-small);
  margin-top: var(--space-s);
  overflow: hidden;
  transition: border-color 0.15s ease;
@@ -2657,7 +2689,7 @@
  color: var(--color-on-offset);
  display: inline-flex;
  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
  justify-content: center;
 }

@@ -2668,7 +2700,7 @@

 .ap-quote-embed__name {
  font-size: var(--font-size-s);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -2691,7 +2723,7 @@

 .ap-quote-embed__title {
  font-size: var(--font-size-s);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
  margin: 0 0 var(--space-xs);
 }

@@ -2757,8 +2789,8 @@
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
+  background: hsl(var(--tint-neutral) 10% / 0.7);
+  color: var(--color-neutral99);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.35rem;
@@ -2771,7 +2803,7 @@
 }

 .ap-media__alt-badge:hover {
-  background: rgba(0, 0, 0, 0.9);
+  background: hsl(var(--tint-neutral) 10% / 0.9);
 }

 .ap-media__alt-text {
@@ -2779,8 +2811,8 @@
  bottom: 2.2rem;
  left: 0.5rem;
  right: 0.5rem;
-  background: rgba(0, 0, 0, 0.85);
-  color: white;
+  background: hsl(var(--tint-neutral) 10% / 0.85);
+  color: var(--color-neutral99);
  font-size: var(--font-size-s);
  padding: 0.5rem;
  border-radius: var(--border-radius-small);
@@ -2870,11 +2902,11 @@

  /* --- Card shadows: use light tint instead of black --- */
  .ap-card {
-    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.04);
+    box-shadow: 0 1px 2px hsl(var(--tint-neutral) 90% / 0.04);
  }

  .ap-card:hover {
-    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06);
+    box-shadow: 0 2px 8px hsl(var(--tint-neutral) 90% / 0.06);
  }

  /* --- Tab badge federated: soften purple --- */
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.8.0",
+  "version": "2.8.1",
  "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
  "keywords": [
    "indiekit",
--- a/views/activitypub-profile.njk
+++ b/views/activitypub-profile.njk
@@ -91,7 +91,7 @@
                <label class="label" for="link_value_{{ loop.index }}">{{ __("activitypub.profile.linkValueLabel") }}</label>
                <input class="input" type="url" id="link_value_{{ loop.index }}" name="link_value[]" value="{{ att.value }}" placeholder="https://example.com">
              </div>
-              <button type="button" class="button button--small" onclick="this.closest('.profile-link-row').remove()" style="margin-block-end: 4px;">{{ __("activitypub.profile.removeLink") }}</button>
+              <button type="button" class="button button--small profile-link-remove" style="margin-block-end: 4px;">{{ __("activitypub.profile.removeLink") }}</button>
            </div>
          {% endfor %}
        {% endif %}
@@ -129,6 +129,11 @@

  <script>
    (function() {
+      document.getElementById('profile-links').addEventListener('click', function(e) {
+        var btn = e.target.closest('.profile-link-remove');
+        if (btn) btn.closest('.profile-link-row').remove();
+      });
+
      var linkCount = {{ (profile.attachments.length if profile.attachments) or 0 }};
      document.getElementById('add-link-btn').addEventListener('click', function() {
        linkCount++;
@@ -167,10 +172,9 @@

        var removeBtn = document.createElement('button');
        removeBtn.type = 'button';
-        removeBtn.className = 'button button--small';
+        removeBtn.className = 'button button--small profile-link-remove';
        removeBtn.style.cssText = 'margin-block-end: 4px;';
        removeBtn.textContent = 'Remove';
-        removeBtn.addEventListener('click', function() { row.remove(); });

        row.appendChild(nameDiv);
        row.appendChild(valueDiv);
--- a/views/activitypub-reader.njk
+++ b/views/activitypub-reader.njk
@@ -47,8 +47,7 @@
            :class="{ 'ap-lookup-autocomplete__item--highlighted': index === highlighted }"
            @click="selectItem(item)"
            @mouseenter="highlighted = index">
-            <img :src="item.avatar" :alt="item.name" class="ap-lookup-autocomplete__avatar"
-              onerror="this.style.display='none'">
+            <img :src="item.avatar" :alt="item.name" class="ap-lookup-autocomplete__avatar">
            <span class="ap-lookup-autocomplete__info">
              <span class="ap-lookup-autocomplete__name" x-text="item.name"></span>
              <span class="ap-lookup-autocomplete__handle" x-text="item.handle"></span>
--- a/views/activitypub-remote-profile.njk
+++ b/views/activitypub-remote-profile.njk
@@ -38,13 +38,11 @@

    {# Profile info #}
    <div class="ap-profile__info">
-      <div class="ap-profile__avatar-wrap">
+      <div class="ap-profile__avatar-wrap" data-avatar-fallback>
        {% if icon %}
-          <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar"
-            onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'ap-profile__avatar ap-profile__avatar--placeholder',textContent:'{{ name[0] }}'}))">
-        {% else %}
-          <div class="ap-profile__avatar ap-profile__avatar--placeholder">{{ name[0] }}</div>
+        <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar">
        {% endif %}
+        <div class="ap-profile__avatar ap-profile__avatar--placeholder">{{ name[0] }}</div>
      </div>

      <div class="ap-profile__details">
--- a/views/layouts/ap-reader.njk
+++ b/views/layouts/ap-reader.njk
@@ -10,8 +10,10 @@
  {# Relative timestamps — converts absolute dates to "5m", "3h", "2d" etc. #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-relative-time.js"></script>

-  {# Alpine.js for client-side reactivity (CW toggles, interaction buttons, infinite scroll) #}
-  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
+  {# Avatar fallback — remove broken images to reveal initials fallback underneath #}
+  <script>document.addEventListener("error",function(e){var t=e.target;if(t.tagName==="IMG"&&t.closest("[data-avatar-fallback]"))t.remove()},true)</script>
+
+  {# Alpine.js loaded by default.njk — AP scripts register via alpine:init before it initializes #}

  {# Reader stylesheet — loaded in body is fine for modern browsers #}
  <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader.css">
--- a/views/partials/ap-item-card.njk
+++ b/views/partials/ap-item-card.njk
@@ -39,13 +39,12 @@

  {# Author header #}
  <header class="ap-card__author">
-    {% if item.author.photo %}
-      <img src="{{ item.author.photo }}" alt="{{ item.author.name }}" class="ap-card__avatar" loading="lazy" crossorigin="anonymous"
-        onerror="this.style.display='none';this.nextElementSibling.style.display=''">
-      <span class="ap-card__avatar ap-card__avatar--default" style="display:none" aria-hidden="true">{{ item.author.name[0] | upper if item.author.name else "?" }}</span>
-    {% else %}
+    <div class="ap-card__avatar-wrap" data-avatar-fallback>
+      {% if item.author.photo %}
+      <img src="{{ item.author.photo }}" alt="{{ item.author.name }}" class="ap-card__avatar" loading="lazy" crossorigin="anonymous">
+      {% endif %}
      <span class="ap-card__avatar ap-card__avatar--default" aria-hidden="true">{{ item.author.name[0] | upper if item.author.name else "?" }}</span>
-    {% endif %}
+    </div>
    <div class="ap-card__author-info">
      <div class="ap-card__author-name">
        {% if item.author.url %}
--- a/views/partials/ap-notification-card.njk
+++ b/views/partials/ap-notification-card.njk
@@ -9,14 +9,11 @@
  </form>

  {# Actor avatar with type badge #}
-  <div class="ap-notification__avatar-wrap">
+  <div class="ap-notification__avatar-wrap" data-avatar-fallback>
    {% if item.actorPhoto %}
-      <img src="{{ item.actorPhoto }}" alt="{{ item.actorName }}" class="ap-notification__avatar" loading="lazy" crossorigin="anonymous"
-        onerror="this.style.display='none';this.nextElementSibling.style.display=''">
-      <span class="ap-notification__avatar ap-notification__avatar--default" style="display:none" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
-    {% else %}
-      <span class="ap-notification__avatar ap-notification__avatar--default" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
+    <img src="{{ item.actorPhoto }}" alt="{{ item.actorName }}" class="ap-notification__avatar" loading="lazy" crossorigin="anonymous">
    {% endif %}
+    <span class="ap-notification__avatar ap-notification__avatar--default" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
    <span class="ap-notification__type-badge">
      {% if item.type == "like" %}❤{% elif item.type == "boost" %}🔁{% elif item.type == "follow" %}👤{% elif item.type == "reply" %}💬{% elif item.type == "mention" %}@{% endif %}
    </span>