From 201d4f14d150a51c2305b5829cde88eab64a8546 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 04:32:36 +0100
Subject: [PATCH 01/18] feat: add contributors popup card

---
 app/components/Link/Base.vue   |  11 +-
 app/pages/about.vue            | 361 +++++++++++++++++++++++++--------
 i18n/locales/en.json           |   5 +-
 i18n/locales/es.json           |   3 +-
 i18n/schema.json               |   3 +
 lunaria/files/en-GB.json       |   5 +-
 lunaria/files/en-US.json       |   5 +-
 lunaria/files/es-419.json      |   3 +-
 lunaria/files/es-ES.json       |   3 +-
 server/api/contributors.get.ts |  91 +++++++--
 10 files changed, 377 insertions(+), 113 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 2dfb45ef9..bbac381c7 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -36,9 +36,16 @@ const props = withDefaults(
 
       /** should only be used for links where the context makes it very clear they are clickable. Don't just use this, because you don't like underlines. */
       noUnderline?: boolean
+
+      /**
+       * should external link icon be displayed?.
+       *
+       * @default false
+       */
+      noExternalIcon?: boolean
     } & NuxtLinkProps
   >(),
-  { variant: 'link', size: 'medium' },
+  { variant: 'link', size: 'medium', noUnderline: false, noExternalIcon: false },
 )
 
 const isLinkExternal = computed(
@@ -101,7 +108,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
     <slot />
     <!-- automatically show icon indicating external link -->
     <span
-      v-if="isLinkExternal && !classicon"
+      v-if="isLinkExternal && !noExternalIcon && !classicon"
       class="i-lucide:external-link rtl-flip size-[1em] opacity-50"
       aria-hidden="true"
     />
diff --git a/app/pages/about.vue b/app/pages/about.vue
index d14ee212f..15868df71 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,9 +1,20 @@
 <script setup lang="ts">
-import type { Role } from '#server/api/contributors.get'
+import type { Role, GitHubContributor } from '#server/api/contributors.get'
 
 const router = useRouter()
 const canGoBack = useCanGoBack()
 
+// SSR & Validation Fix
+const isMounted = shallowRef(false)
+const activeContributor = shallowRef<GitHubContributor | null>(null)
+const openTimer = shallowRef<any>(null)
+const closeTimer = shallowRef<any>(null)
+const isFlipped = shallowRef(false)
+
+onMounted(() => {
+  isMounted.value = true
+})
+
 useSeoMeta({
   title: () => `${$t('about.title')} - npmx`,
   ogTitle: () => `${$t('about.title')} - npmx`,
@@ -28,15 +39,25 @@ const pmLinks = {
   vlt: 'https://www.vlt.sh/',
 }
 
-const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors')
+const { data, status: contributorsStatus } = useLazyFetch('/api/contributors')
 
-const governanceMembers = computed(
-  () => contributors.value?.filter(c => c.role !== 'contributor') ?? [],
-)
+/**
+ * Checks if a contributor should show the expanded card.
+ */
+function isExpandable(c: GitHubContributor) {
+  const isGovernance = c.role === 'steward' || c.role === 'maintainer'
+  return (
+    isGovernance ||
+    !!c.bio ||
+    !!c.company ||
+    !!c.name ||
+    !!c.location ||
+    !!c.twitterUsername ||
+    !!c.websiteUrl
+  )
+}
 
-const communityContributors = computed(
-  () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
-)
+const contributors = computed(() => data.value ?? [])
 
 const roleLabels = computed(
   () =>
@@ -45,6 +66,97 @@ const roleLabels = computed(
       maintainer: $t('about.team.role_maintainer'),
     }) as Partial<Record<Role, string>>,
 )
+
+/**
+ * High-performance positioning for Firefox and Chrome (TODO: Safari will require a review :fingers_crossed:).
+ * Handles vertical collision for top-row items.
+ */
+async function positionPopover(anchorId: string) {
+  const popover = document.getElementById('shared-contributor-popover')
+  const anchor = document.getElementById(anchorId)
+
+  if (!popover || !anchor) return
+
+  // 1. Wait for Vue to update the reactive state
+  await nextTick()
+
+  // 2. Open popover so it enters Top Layer (Firefox dimensions fix)
+  if (!popover.matches(':popover-open')) {
+    try {
+      ;(popover as any).showPopover()
+    } catch (e) {}
+  }
+
+  // 3. One more tick to ensure the DOM is actually painted with the content
+  // This fixes the "only showing website link" bug in some browsers
+  await nextTick()
+
+  const rect = anchor.getBoundingClientRect()
+  const padding = 16
+  const popoverWidth = popover.offsetWidth || 256
+  const popoverHeight = popover.offsetHeight || 280
+
+  // Check if there is enough space above the avatar (including header margin)
+  // If we are too close to the top (e.g., < 300px), show below
+  const showBelow = rect.top < popoverHeight + 20
+  isFlipped.value = showBelow
+
+  const idealLeft = rect.left + rect.width / 2
+  const minLeft = popoverWidth / 2 + padding
+  const maxLeft = window.innerWidth - popoverWidth / 2 - padding
+  const finalLeft = Math.max(minLeft, Math.min(idealLeft, maxLeft))
+
+  // 4. Position using fixed viewport coordinates
+  const yBase = showBelow ? rect.bottom + 12 : rect.top - 12
+  const yPercent = showBelow ? '0' : '-100%'
+
+  popover.style.transform = `translate3d(${finalLeft}px, ${yBase}px, 0) translate(-50%, ${yPercent})`
+
+  // --- Inside positionPopover function ---
+  const arrow = popover.querySelector('.popover-arrow') as HTMLElement
+  if (arrow) {
+    const delta = idealLeft - finalLeft
+    // We use a CSS variable to pass the value safely to the template
+    arrow.style.setProperty('--arrow-delta', `${delta}px`)
+  }
+}
+
+function onMouseEnter(contributor: GitHubContributor) {
+  if (!isExpandable(contributor)) return
+  cancelClose()
+  clearTimeout(openTimer.value)
+
+  const trigger = () => {
+    activeContributor.value = contributor
+    positionPopover(`anchor-${contributor.id}`)
+  }
+
+  if (activeContributor.value) {
+    trigger()
+  } else {
+    openTimer.value = setTimeout(trigger, 80)
+  }
+}
+
+function cancelClose() {
+  if (closeTimer.value) {
+    clearTimeout(closeTimer.value)
+    closeTimer.value = null
+  }
+}
+
+function onMouseLeave() {
+  clearTimeout(openTimer.value)
+  closeTimer.value = setTimeout(() => {
+    const popover = document.getElementById('shared-contributor-popover')
+    if (popover && !popover.matches(':hover')) {
+      try {
+        ;(popover as any).hidePopover()
+      } catch (e) {}
+      activeContributor.value = null
+    }
+  }, 120)
+}
 </script>
 
 <template>
@@ -56,10 +168,10 @@ const roleLabels = computed(
             {{ $t('about.heading') }}
           </h1>
           <button
+            v-if="canGoBack"
             type="button"
             class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
-            v-if="canGoBack"
           >
             <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
@@ -162,67 +274,6 @@ const roleLabels = computed(
           <p class="text-fg-muted leading-relaxed mb-6">
             {{ $t('about.contributors.description') }}
           </p>
-
-          <!-- Governance: stewards + maintainers -->
-          <section
-            v-if="governanceMembers.length"
-            class="mb-12"
-            aria-labelledby="governance-heading"
-          >
-            <h3
-              id="governance-heading"
-              class="text-sm text-fg-subtle uppercase tracking-wider mb-4"
-            >
-              {{ $t('about.team.governance') }}
-            </h3>
-
-            <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 list-none p-0">
-              <li
-                v-for="person in governanceMembers"
-                :key="person.id"
-                class="relative flex items-center gap-3 p-3 border border-border rounded-lg hover:border-border-hover hover:bg-bg-muted transition-[border-color,background-color] duration-200 cursor-pointer focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
-              >
-                <img
-                  :src="`${person.avatar_url}&s=80`"
-                  :alt="`${person.login}'s avatar`"
-                  class="w-12 h-12 rounded-md ring-1 ring-border shrink-0"
-                  loading="lazy"
-                />
-                <div class="min-w-0 flex-1">
-                  <div class="font-mono text-sm text-fg truncate">
-                    <NuxtLink
-                      :to="person.html_url"
-                      target="_blank"
-                      class="decoration-none after:content-[''] after:absolute after:inset-0"
-                      :aria-label="$t('about.contributors.view_profile', { name: person.login })"
-                    >
-                      @{{ person.login }}
-                    </NuxtLink>
-                  </div>
-                  <div class="text-xs text-fg-muted tracking-tight">
-                    {{ roleLabels[person.role] ?? person.role }}
-                  </div>
-                  <LinkBase
-                    v-if="person.sponsors_url"
-                    :to="person.sponsors_url"
-                    no-underline
-                    no-external-icon
-                    classicon="i-lucide:heart"
-                    class="relative z-10 text-xs text-fg-muted hover:text-pink-400 mt-0.5"
-                    :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
-                  >
-                    {{ $t('about.team.sponsor') }}
-                  </LinkBase>
-                </div>
-                <span
-                  class="i-lucide:external-link rtl-flip w-3.5 h-3.5 text-fg-muted opacity-50 shrink-0 self-start mt-0.5 pointer-events-none"
-                  aria-hidden="true"
-                />
-              </li>
-            </ul>
-          </section>
-
-          <!-- Contributors cloud -->
           <section aria-labelledby="contributors-heading">
             <h3
               id="contributors-heading"
@@ -231,8 +282,8 @@ const roleLabels = computed(
               {{
                 $t(
                   'about.contributors.title',
-                  { count: $n(communityContributors.length) },
-                  communityContributors.length,
+                  { count: $n(contributors.length) },
+                  contributors.length,
                 )
               }}
             </h3>
@@ -252,43 +303,175 @@ const roleLabels = computed(
               {{ $t('about.contributors.error') }}
             </div>
             <ul
-              v-else-if="communityContributors.length"
-              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0"
+              v-if="contributors.length"
+              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0 overflow-visible"
             >
               <li
-                v-for="contributor in communityContributors"
+                v-for="contributor in contributors"
                 :key="contributor.id"
-                class="group relative"
+                class="relative h-12 w-12 list-none"
               >
                 <LinkBase
+                  :id="`anchor-${contributor.id}`"
                   :to="contributor.html_url"
+                  :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
                   no-underline
                   no-external-icon
-                  :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
+                  class="group relative block h-12 w-12 rounded-lg transition-all outline-none focus-visible:(ring-2 ring-accent z-20)"
+                  :class="[
+                    !isExpandable(contributor)
+                      ? 'hover:scale-125 focus-visible:scale-125'
+                      : 'hover:scale-110 focus-visible:scale-110',
+                  ]"
+                  @mouseenter="onMouseEnter(contributor)"
+                  @mouseleave="onMouseLeave"
                 >
                   <img
                     :src="`${contributor.avatar_url}&s=64`"
-                    :alt="`${contributor.login}'s avatar`"
-                    width="48"
-                    height="48"
-                    class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out hover:scale-125 will-change-transform"
+                    :alt="$t('about.contributors.avatar', { name: contributor.login })"
+                    width="64"
+                    height="64"
+                    class="w-12 h-12 rounded-lg ring-2 ring-transparent transition-all duration-200 hover:ring-accent"
                     loading="lazy"
                   />
-                  <span
-                    class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
-                    dir="ltr"
-                    role="tooltip"
-                  >
-                    @{{ contributor.login }}
-                  </span>
                 </LinkBase>
               </li>
             </ul>
           </section>
         </div>
-
         <CallToAction />
       </section>
     </article>
+
+    <ClientOnly>
+      <div
+        id="shared-contributor-popover"
+        popover="manual"
+        class="fixed top-0 inset-is-0 m-0 border-none bg-transparent p-0 overflow-visible opacity-0 invisible transition-[opacity,visibility] duration-150 ease-out allow-discrete popover-open:(opacity-100 visible) z-40"
+        @mouseenter="cancelClose"
+        @mouseleave="onMouseLeave"
+      >
+        <div
+          v-if="activeContributor"
+          class="relative z-10 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
+        >
+          <div class="flex flex-col gap-1 min-w-0">
+            <span class="w-full font-sans font-bold text-fg leading-tight truncate block">
+              {{ activeContributor.name || activeContributor.login }}
+            </span>
+            <div
+              v-if="activeContributor.role"
+              class="font-mono text-3xs uppercase tracking-wider text-accent font-bold"
+            >
+              {{ roleLabels[activeContributor.role] }}
+            </div>
+            <p
+              v-if="activeContributor.bio"
+              class="mt-1 font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
+            >
+              "{{ activeContributor.bio }}"
+            </p>
+            <div
+              v-if="activeContributor.companyHTML || activeContributor.company"
+              class="mt-1 flex items-center gap-1 font-sans text-2xs text-fg-muted text-start min-w-0"
+            >
+              <div
+                class="i-lucide:building-2 size-3 shrink-0 mt-0.5 text-accent/80"
+                aria-hidden="true"
+              />
+              <div
+                class="company-content leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline transition-all)"
+                v-html="activeContributor.companyHTML || activeContributor.company"
+              />
+            </div>
+          </div>
+
+          <div class="mt-3 flex flex-col gap-1 text-3xs text-fg-subtle font-sans">
+            <div v-if="activeContributor.location" class="flex items-center gap-1 min-w-0">
+              <div class="i-lucide:map-pin size-3 shrink-0" aria-hidden="true" />
+              <span class="w-full truncate">{{ activeContributor.location }}</span>
+            </div>
+
+            <a
+              v-if="activeContributor.websiteUrl"
+              :href="activeContributor.websiteUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1 hover:text-accent transition-colors"
+            >
+              <div class="i-lucide:link size-3 shrink-0" />
+              <span class="truncate">{{
+                activeContributor.websiteUrl.replace(/^https?:\/\//, '')
+              }}</span>
+            </a>
+            <a
+              v-if="activeContributor.twitterUsername"
+              :href="`https://x.com/${activeContributor.twitterUsername}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1 hover:text-accent transition-colors"
+            >
+              <div class="i-simple-icons:x size-2.5 shrink-0" />
+              <span>@{{ activeContributor.twitterUsername }}</span>
+            </a>
+          </div>
+
+          <div
+            class="mt-3 flex items-center justify-between border-t border-t-gray-400/65 dark:border-t-gray-300 border-border-subtle pt-3"
+          >
+            <a
+              :href="activeContributor.html_url"
+              target="_blank"
+              class="text-3xs text-fg-subtle font-mono hover:text-accent"
+              rel="noopener noreferrer"
+            >
+              @{{ activeContributor.login }}
+            </a>
+            <a
+              v-if="activeContributor.sponsors_url"
+              :href="activeContributor.sponsors_url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1 rounded border border-purple-700/30 bg-purple-700/5 text-purple-700 dark:border-purple-300/30 dark:bg-purple-300/5 dark:text-purple-300 px-2 py-0.5 text-4xs font-bold uppercase tracking-wider transition-colors hover:bg-purple-700/15 dark:hover:bg-purple-300/15"
+            >
+              <span class="i-lucide:heart size-3" aria-hidden="true" />
+              <span>{{ $t('about.team.sponsor') }}</span>
+            </a>
+          </div>
+
+          <div
+            aria-hidden="true"
+            class="popover-arrow absolute inset-is-1/2 z-0 h-3 w-3 border-border-subtle bg-bg-elevated will-change-transform"
+            :class="
+              isFlipped ? 'top-[-6px] border-te border-is' : 'bottom-[-6px] border-be border-ie'
+            "
+            :style="{ transform: 'translateX(calc(-50% + var(--arrow-delta, 0px))) rotate(45deg)' }"
+          />
+        </div>
+      </div>
+    </ClientOnly>
   </main>
 </template>
+
+<style scoped>
+[popover]:not(:popover-open) {
+  display: none;
+}
+[popover] {
+  @apply top-0 inset-is-0;
+  will-change: transform, opacity;
+  transition:
+    opacity 0.15s ease-out,
+    visibility 0.15s ease-out;
+}
+
+/* Prevent any parent from clipping the arrow or the card shadow */
+#shared-contributor-popover {
+  overflow: visible;
+}
+
+/* Arrow will-change to keep animations smooth */
+.popover-arrow {
+  will-change: transform;
+}
+</style>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index e51377c3e..d302c44e9 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -828,11 +828,12 @@
       "sponsor_aria": "Sponsor {name} on GitHub"
     },
     "contributors": {
-      "title": "... and {count} more contributor | ... and {count} more contributors",
+      "title": "{count} contributor | {count} contributors",
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
-      "view_profile": "View {name}'s GitHub profile"
+      "view_profile": "View {name}'s GitHub profile",
+      "avatar": "{name}'s avatar"
     },
     "get_involved": {
       "title": "Get involved",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 5b11285d0..113bf04d0 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -827,7 +827,8 @@
       "description": "npmx es completamente de código abierto, construido por una increíble comunidad de colaboradores. Únete a nosotros y construyamos juntos la experiencia de navegación de npm que siempre quisimos.",
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
-      "view_profile": "Ver perfil de GitHub de {name}"
+      "view_profile": "Ver perfil de GitHub de {name}",
+      "avatar": "avatar de {name}"
     },
     "get_involved": {
       "title": "Involúcrate",
diff --git a/i18n/schema.json b/i18n/schema.json
index 93a83fef1..df9840d2b 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2502,6 +2502,9 @@
             },
             "view_profile": {
               "type": "string"
+            },
+            "avatar": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 1b792cd47..9c8c44ab5 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -827,11 +827,12 @@
       "sponsor_aria": "Sponsor {name} on GitHub"
     },
     "contributors": {
-      "title": "... and {count} more contributor | ... and {count} more contributors",
+      "title": "{count} contributor | {count} contributors",
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
-      "view_profile": "View {name}'s GitHub profile"
+      "view_profile": "View {name}'s GitHub profile",
+      "avatar": "{name}'s avatar"
     },
     "get_involved": {
       "title": "Get involved",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index fc97f7df2..25b66d997 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -827,11 +827,12 @@
       "sponsor_aria": "Sponsor {name} on GitHub"
     },
     "contributors": {
-      "title": "... and {count} more contributor | ... and {count} more contributors",
+      "title": "{count} contributor | {count} contributors",
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
-      "view_profile": "View {name}'s GitHub profile"
+      "view_profile": "View {name}'s GitHub profile",
+      "avatar": "{name}'s avatar"
     },
     "get_involved": {
       "title": "Get involved",
diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
index bbc6e8678..9e2aa7e3f 100644
--- a/lunaria/files/es-419.json
+++ b/lunaria/files/es-419.json
@@ -826,7 +826,8 @@
       "description": "npmx es completamente de código abierto, construido por una increíble comunidad de colaboradores. Únete a nosotros y construyamos juntos la experiencia de navegación de npm que siempre quisimos.",
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
-      "view_profile": "Ver perfil de GitHub de {name}"
+      "view_profile": "Ver perfil de GitHub de {name}",
+      "avatar": "avatar de {name}"
     },
     "get_involved": {
       "title": "Involúcrate",
diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
index ec4d350ff..f3fe9620f 100644
--- a/lunaria/files/es-ES.json
+++ b/lunaria/files/es-ES.json
@@ -826,7 +826,8 @@
       "description": "npmx es completamente de código abierto, construido por una increíble comunidad de colaboradores. Únete a nosotros y construyamos juntos la experiencia de navegación de npm que siempre quisimos.",
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
-      "view_profile": "Ver perfil de GitHub de {name}"
+      "view_profile": "Ver perfil de GitHub de {name}",
+      "avatar": "avatar de {name}"
     },
     "get_involved": {
       "title": "Involúcrate",
diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 639350d35..d3f5b269f 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -1,6 +1,16 @@
 export type Role = 'steward' | 'maintainer' | 'contributor'
 
-export interface GitHubContributor {
+export interface GitHubUserData {
+  name: string | null
+  bio: string | null
+  company: string | null
+  companyHTML: string | null
+  location: string | null
+  websiteUrl: string | null
+  twitterUsername: string | null
+}
+
+export interface GitHubContributor extends GitHubUserData {
   login: string
   id: number
   avatar_url: string
@@ -10,7 +20,11 @@ export interface GitHubContributor {
   sponsors_url: string | null
 }
 
-type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url'>
+/**
+ * Raw data coming from the GitHub REST API (/contributors).
+ * We exclude 'role', 'sponsors_url' AND all fields that only exist in GraphQL.
+ */
+type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url' | keyof GitHubUserData>
 
 // Fallback when no GitHub token is available (e.g. preview environments).
 // Only stewards are shown as maintainers; everyone else is a contributor.
@@ -61,15 +75,48 @@ async function fetchTeamMembers(token: string): Promise<TeamMembers | null> {
 }
 
 /**
- * Batch-query GitHub GraphQL API to check which users have sponsors enabled.
+ * Cleans GitHub HTML to remove tracking data and add security attributes.
+ * Specifically targets data-octo, data-hovercard, and keyboard shortcuts.
+ */
+function sanitizeGitHubHTML(html: string | null): string | null {
+  if (!html) return null
+
+  return (
+    html
+      // 1. Remove GitHub-specific tracking and metadata attributes
+      .replace(/\s(data-hovercard-[a-z-]+|data-octo-[a-z-]+|aria-keyshortcuts)="[^"]*"/gi, '')
+      // 2. Inject security and target attributes to all <a> tags
+      .replace(/<a /gi, '<a target="_blank" rel="noopener noreferrer" ')
+      // 3. Clean up any resulting double spaces
+      .replace(/\s{2,}/g, ' ')
+      .trim()
+  )
+}
+
+/**
+ * Handles "undefined" strings, empty values, or purely whitespace strings.
+ * Prevents UI issues with empty icons or broken conditional logic.
+ */
+function cleanString(val: string | null): string | null {
+  if (!val || val === 'undefined' || val.trim() === '') return null
+  return val.trim()
+}
+
+/**
+ * Batch-query GitHub GraphQL API to check which users have sponsors enabled and getting user info.
  * Returns a Set of logins that have a sponsors listing.
  */
-async function fetchSponsorable(token: string, logins: string[]): Promise<Set<string>> {
+async function fetchGitHubUserData(
+  token: string,
+  logins: string[],
+  usersData: Map<string, GitHubUserData>,
+): Promise<Set<string>> {
   if (logins.length === 0) return new Set()
 
   // Build aliased GraphQL query: user0: user(login: "x") { hasSponsorsListing login }
   const fragments = logins.map(
-    (login, i) => `user${i}: user(login: "${login}") { hasSponsorsListing login }`,
+    (login, i) =>
+      `user${i}: user(login: "${login}") { hasSponsorsListing login name bio company companyHTML location websiteUrl twitterUsername }`,
   )
   const query = `{ ${fragments.join('\n')} }`
 
@@ -90,15 +137,31 @@ async function fetchSponsorable(token: string, logins: string[]): Promise<Set<st
     }
 
     const json = (await response.json()) as {
-      data?: Record<string, { login: string; hasSponsorsListing: boolean } | null>
+      data?: Record<
+        string,
+        (GitHubUserData & { login: string; hasSponsorsListing: boolean }) | null
+      >
     }
 
     const sponsorable = new Set<string>()
     if (json.data) {
       for (const user of Object.values(json.data)) {
-        if (user?.hasSponsorsListing) {
+        if (!user) continue
+        console.log(JSON.stringify(user))
+        if (user.hasSponsorsListing) {
           sponsorable.add(user.login)
         }
+        // --- SERVER-SIDE SANITIZATION AND BATCHING ---
+        usersData.set(user.login, {
+          name: cleanString(user.name),
+          bio: cleanString(user.bio),
+          company: cleanString(user.company),
+          // Rich HTML sanitization for company mentions/orgs
+          companyHTML: sanitizeGitHubHTML(user.companyHTML),
+          location: cleanString(user.location),
+          websiteUrl: cleanString(user.websiteUrl),
+          twitterUsername: cleanString(user.twitterUsername),
+        })
       }
     }
     return sponsorable
@@ -167,22 +230,24 @@ export default defineCachedEventHandler(
 
     const filtered = allContributors.filter(c => !c.login.includes('[bot]'))
 
-    // Identify maintainers (stewards + maintainers) and check their sponsors status
-    const maintainerLogins = filtered
-      .filter(c => teams.steward.has(c.login) || teams.maintainer.has(c.login))
-      .map(c => c.login)
+    const userData = new Map<string, GitHubUserData>()
 
     const sponsorable = githubToken
-      ? await fetchSponsorable(githubToken, maintainerLogins)
+      ? await fetchGitHubUserData(
+          githubToken,
+          filtered.map(c => c.login),
+          userData,
+        )
       : new Set<string>()
 
     return filtered
       .map(c => {
         const { role, order } = getRoleInfo(c.login, teams)
+        const userInfo = userData.get(c.login) || {}
         const sponsors_url = sponsorable.has(c.login)
           ? `https://github.com/sponsors/${c.login}`
           : null
-        Object.assign(c, { role, order, sponsors_url })
+        Object.assign(c, { role, order, sponsors_url, ...userInfo })
         return c as GitHubContributor & { order: number; sponsors_url: string | null; role: Role }
       })
       .sort((a, b) => a.order - b.order || b.contributions - a.contributions)

From 373656a42a3026da11afe8a4700525ee0f67b623 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:17:10 +0100
Subject: [PATCH 02/18] chore: cleanup console.log

---
 server/api/contributors.get.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index d3f5b269f..0e8f0f210 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -147,7 +147,6 @@ async function fetchGitHubUserData(
     if (json.data) {
       for (const user of Object.values(json.data)) {
         if (!user) continue
-        console.log(JSON.stringify(user))
         if (user.hasSponsorsListing) {
           sponsorable.add(user.login)
         }

From c26c19111cc4157dd0e8caf6a76ad4ad0fb868a0 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:20:48 +0100
Subject: [PATCH 03/18] chore: apply coderabbitai suggestion for website url

---
 server/api/contributors.get.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 0e8f0f210..fadb8494e 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -97,9 +97,13 @@ function sanitizeGitHubHTML(html: string | null): string | null {
  * Handles "undefined" strings, empty values, or purely whitespace strings.
  * Prevents UI issues with empty icons or broken conditional logic.
  */
-function cleanString(val: string | null): string | null {
+function cleanString(val: string | null, url = false): string | null {
   if (!val || val === 'undefined' || val.trim() === '') return null
-  return val.trim()
+  val = val.trim()
+  if (!url) {
+    return val
+  }
+  return val.startsWith('https://') || val.startsWith('http:') ? val : null
 }
 
 /**
@@ -158,7 +162,7 @@ async function fetchGitHubUserData(
           // Rich HTML sanitization for company mentions/orgs
           companyHTML: sanitizeGitHubHTML(user.companyHTML),
           location: cleanString(user.location),
-          websiteUrl: cleanString(user.websiteUrl),
+          websiteUrl: cleanString(user.websiteUrl, true),
           twitterUsername: cleanString(user.twitterUsername),
         })
       }

From 3764ea9507217cbf52dfb8dc805d7e7f2b476d6c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:24:13 +0100
Subject: [PATCH 04/18] chore: apply coderabbitai suggestion for role

---
 app/pages/about.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 15868df71..d491bcd45 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -360,7 +360,7 @@ function onMouseLeave() {
               {{ activeContributor.name || activeContributor.login }}
             </span>
             <div
-              v-if="activeContributor.role"
+              v-if="roleLabels[activeContributor.role]"
               class="font-mono text-3xs uppercase tracking-wider text-accent font-bold"
             >
               {{ roleLabels[activeContributor.role] }}
@@ -371,8 +371,9 @@ function onMouseLeave() {
             >
               "{{ activeContributor.bio }}"
             </p>
+
             <div
-              v-if="activeContributor.companyHTML || activeContributor.company"
+              v-if="activeContributor.companyHTML"
               class="mt-1 flex items-center gap-1 font-sans text-2xs text-fg-muted text-start min-w-0"
             >
               <div
@@ -381,9 +382,24 @@ function onMouseLeave() {
               />
               <div
                 class="company-content leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline transition-all)"
-                v-html="activeContributor.companyHTML || activeContributor.company"
+                v-html="activeContributor.companyHTML"
               />
             </div>
+
+            <div
+              v-else-if="activeContributor.company"
+              class="mt-1 flex items-center gap-1 font-sans text-2xs text-fg-muted text-start min-w-0"
+            >
+              <div
+                class="i-lucide:building-2 size-3 shrink-0 mt-0.5 text-accent/80"
+                aria-hidden="true"
+              />
+              <div
+                class="company-content leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline transition-all)"
+              >
+                {{ activeContributor.company }}
+              </div>
+            </div>
           </div>
 
           <div class="mt-3 flex flex-col gap-1 text-3xs text-fg-subtle font-sans">

From 85439ec914526fbdd741c0757fc64a7bd00df25c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:26:18 +0100
Subject: [PATCH 05/18] chore: apply coderabbitai suggestion for noExternalIcon
 jsdoc

---
 app/components/Link/Base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 7d156f9c4..679810bb3 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -37,7 +37,7 @@ const props = withDefaults(
     noUnderline?: boolean
 
     /**
-     * should external link icon be displayed?.
+     * When `true`, suppresses the external-link icon even for external `to` URLs.
      *
      * @default false
      */

From 9769b80c8775f328ad3e4e0f0da317186df6f069 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:32:41 +0100
Subject: [PATCH 06/18] chore: remove `about.team.governance` from json file
 and add `about.team.sponsor_aria` to sponsor anchor

---
 app/pages/about.vue       | 1 +
 i18n/locales/en.json      | 1 -
 i18n/locales/es.json      | 1 -
 i18n/schema.json          | 3 ---
 lunaria/files/en-GB.json  | 1 -
 lunaria/files/en-US.json  | 1 -
 lunaria/files/es-419.json | 1 -
 lunaria/files/es-ES.json  | 1 -
 8 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index d491bcd45..fc6f900ae 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -446,6 +446,7 @@ function onMouseLeave() {
             <a
               v-if="activeContributor.sponsors_url"
               :href="activeContributor.sponsors_url"
+              :aria-label="$t('about.team.sponsor_aria', { name: activeContributor.login })"
               target="_blank"
               rel="noopener noreferrer"
               class="flex items-center gap-1 rounded border border-purple-700/30 bg-purple-700/5 text-purple-700 dark:border-purple-300/30 dark:bg-purple-300/5 dark:text-purple-300 px-2 py-0.5 text-4xs font-bold uppercase tracking-wider transition-colors hover:bg-purple-700/15 dark:hover:bg-purple-300/15"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index ad2f7a8ea..b0e717d61 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -823,7 +823,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Governance",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 113bf04d0..13339a7a7 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -816,7 +816,6 @@
     },
     "team": {
       "title": "Equipo",
-      "governance": "Gobernanza",
       "role_steward": "Administrador",
       "role_maintainer": "Mantenedor",
       "sponsor": "Patrocinar",
diff --git a/i18n/schema.json b/i18n/schema.json
index 02c8c90b6..b893948e1 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2473,9 +2473,6 @@
             "title": {
               "type": "string"
             },
-            "governance": {
-              "type": "string"
-            },
             "role_steward": {
               "type": "string"
             },
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 3860c3643..480b13845 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -822,7 +822,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Governance",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index eba7fc086..95e4f4a5c 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -822,7 +822,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Governance",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
index 9e2aa7e3f..4a48d3cb2 100644
--- a/lunaria/files/es-419.json
+++ b/lunaria/files/es-419.json
@@ -815,7 +815,6 @@
     },
     "team": {
       "title": "Equipo",
-      "governance": "Gobernanza",
       "role_steward": "Administrador",
       "role_maintainer": "Mantenedor",
       "sponsor": "Patrocinar",
diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
index f3fe9620f..e537ab42e 100644
--- a/lunaria/files/es-ES.json
+++ b/lunaria/files/es-ES.json
@@ -815,7 +815,6 @@
     },
     "team": {
       "title": "Equipo",
-      "governance": "Gobernanza",
       "role_steward": "Administrador",
       "role_maintainer": "Mantenedor",
       "sponsor": "Patrocinar",

From 47c9cac168407bf5f561647dc0ca0fc7db4ddf82 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 23 Feb 2026 04:34:23 +0000
Subject: [PATCH 07/18] [autofix.ci] apply automated fixes

---
 i18n/locales/ar.json     | 1 -
 i18n/locales/cs-CZ.json  | 1 -
 i18n/locales/de-DE.json  | 1 -
 i18n/locales/fr-FR.json  | 1 -
 i18n/locales/ja-JP.json  | 1 -
 i18n/locales/pl-PL.json  | 1 -
 i18n/locales/uk-UA.json  | 1 -
 i18n/locales/zh-CN.json  | 1 -
 lunaria/files/ar-EG.json | 1 -
 lunaria/files/cs-CZ.json | 1 -
 lunaria/files/de-DE.json | 1 -
 lunaria/files/fr-FR.json | 1 -
 lunaria/files/ja-JP.json | 1 -
 lunaria/files/pl-PL.json | 1 -
 lunaria/files/uk-UA.json | 1 -
 lunaria/files/zh-CN.json | 1 -
 16 files changed, 16 deletions(-)

diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index cfcde2921..fbff4a8cf 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "الفريق",
-      "governance": "الحوكمة",
       "role_steward": "راعي",
       "role_maintainer": "مشرف",
       "sponsor": "راعي",
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index f935947ea..ad0635fe2 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "Tým",
-      "governance": "Správa",
       "role_steward": "Vedoucí",
       "role_maintainer": "Správce",
       "sponsor": "Sponzor",
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 59ad603c9..ef9908189 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -821,7 +821,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Verwaltung",
       "role_steward": "Verwalter",
       "role_maintainer": "Maintainer",
       "sponsor": "Sponsor",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 9e2555190..bc2072987 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -822,7 +822,6 @@
     },
     "team": {
       "title": "Équipe",
-      "governance": "Gouvernance",
       "role_steward": "pilote",
       "role_maintainer": "mainteneur",
       "sponsor": "sponsor",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 112bd4a70..21a6e332f 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "チーム",
-      "governance": "ガバナンス",
       "role_steward": "スチュワード",
       "role_maintainer": "メンテナ",
       "sponsor": "スポンサー",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index b30bae2ba..1d0bc9e72 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -821,7 +821,6 @@
     },
     "team": {
       "title": "Zespół",
-      "governance": "Zarządzanie",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index 2b1ead44c..71250e7b2 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "Команда",
-      "governance": "Управління",
       "role_steward": "стюард",
       "role_maintainer": "супроводжувач",
       "sponsor": "спонсор",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 21af093e7..385634ae3 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "团队",
-      "governance": "治理",
       "role_steward": "管理者",
       "role_maintainer": "维护者",
       "sponsor": "赞助者",
diff --git a/lunaria/files/ar-EG.json b/lunaria/files/ar-EG.json
index 5ff151041..bf00c225b 100644
--- a/lunaria/files/ar-EG.json
+++ b/lunaria/files/ar-EG.json
@@ -819,7 +819,6 @@
     },
     "team": {
       "title": "الفريق",
-      "governance": "الحوكمة",
       "role_steward": "راعي",
       "role_maintainer": "مشرف",
       "sponsor": "راعي",
diff --git a/lunaria/files/cs-CZ.json b/lunaria/files/cs-CZ.json
index 5edbf6120..28ea82edc 100644
--- a/lunaria/files/cs-CZ.json
+++ b/lunaria/files/cs-CZ.json
@@ -819,7 +819,6 @@
     },
     "team": {
       "title": "Tým",
-      "governance": "Správa",
       "role_steward": "Vedoucí",
       "role_maintainer": "Správce",
       "sponsor": "Sponzor",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
index 82fb974ea..44b1b40cf 100644
--- a/lunaria/files/de-DE.json
+++ b/lunaria/files/de-DE.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "Team",
-      "governance": "Verwaltung",
       "role_steward": "Verwalter",
       "role_maintainer": "Maintainer",
       "sponsor": "Sponsor",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
index 179381c21..3cfba16ec 100644
--- a/lunaria/files/fr-FR.json
+++ b/lunaria/files/fr-FR.json
@@ -821,7 +821,6 @@
     },
     "team": {
       "title": "Équipe",
-      "governance": "Gouvernance",
       "role_steward": "pilote",
       "role_maintainer": "mainteneur",
       "sponsor": "sponsor",
diff --git a/lunaria/files/ja-JP.json b/lunaria/files/ja-JP.json
index 3cb054895..bdb8b239c 100644
--- a/lunaria/files/ja-JP.json
+++ b/lunaria/files/ja-JP.json
@@ -819,7 +819,6 @@
     },
     "team": {
       "title": "チーム",
-      "governance": "ガバナンス",
       "role_steward": "スチュワード",
       "role_maintainer": "メンテナ",
       "sponsor": "スポンサー",
diff --git a/lunaria/files/pl-PL.json b/lunaria/files/pl-PL.json
index 240b50e0a..8c2546bd4 100644
--- a/lunaria/files/pl-PL.json
+++ b/lunaria/files/pl-PL.json
@@ -820,7 +820,6 @@
     },
     "team": {
       "title": "Zespół",
-      "governance": "Zarządzanie",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/lunaria/files/uk-UA.json b/lunaria/files/uk-UA.json
index d6428f02d..c4e42eb74 100644
--- a/lunaria/files/uk-UA.json
+++ b/lunaria/files/uk-UA.json
@@ -819,7 +819,6 @@
     },
     "team": {
       "title": "Команда",
-      "governance": "Управління",
       "role_steward": "стюард",
       "role_maintainer": "супроводжувач",
       "sponsor": "спонсор",
diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
index 9e626de72..367b4c943 100644
--- a/lunaria/files/zh-CN.json
+++ b/lunaria/files/zh-CN.json
@@ -819,7 +819,6 @@
     },
     "team": {
       "title": "团队",
-      "governance": "治理",
       "role_steward": "管理者",
       "role_maintainer": "维护者",
       "sponsor": "赞助者",

From c9d5d70c48718b32ebd29ab0c2ce936798d6f22b Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:35:01 +0100
Subject: [PATCH 08/18] chore: fix `http:` without `//`

---
 server/api/contributors.get.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index fadb8494e..035163d88 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -103,7 +103,7 @@ function cleanString(val: string | null, url = false): string | null {
   if (!url) {
     return val
   }
-  return val.startsWith('https://') || val.startsWith('http:') ? val : null
+  return val.startsWith('https://') || val.startsWith('http://') ? val : null
 }
 
 /**

From 138b1c35b4592bc0b182ba6c129b3c478b38a611 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:42:53 +0100
Subject: [PATCH 09/18] chore: apply coderabbitai suggestion for useInfo

---
 server/api/contributors.get.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 035163d88..521d849f8 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -30,6 +30,16 @@ type GitHubAPIContributor = Omit<GitHubContributor, 'role' | 'sponsors_url' | ke
 // Only stewards are shown as maintainers; everyone else is a contributor.
 const FALLBACK_STEWARDS = new Set(['danielroe', 'patak-dev'])
 
+const DEFAULT_USER_INFO: GitHubUserData = {
+  name: null,
+  bio: null,
+  company: null,
+  companyHTML: null,
+  location: null,
+  websiteUrl: null,
+  twitterUsername: null,
+}
+
 interface TeamMembers {
   steward: Set<string>
   maintainer: Set<string>
@@ -246,7 +256,7 @@ export default defineCachedEventHandler(
     return filtered
       .map(c => {
         const { role, order } = getRoleInfo(c.login, teams)
-        const userInfo = userData.get(c.login) || {}
+        const userInfo = userData.get(c.login) ?? DEFAULT_USER_INFO
         const sponsors_url = sponsorable.has(c.login)
           ? `https://github.com/sponsors/${c.login}`
           : null

From 5d34b0e9c4e78a9b1f4b2e34f5c542b9d32a37f3 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 05:55:31 +0100
Subject: [PATCH 10/18] chore: apply coderabbitai suggestion for timers cleanup

---
 app/pages/about.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index fc6f900ae..448dfb624 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -4,17 +4,6 @@ import type { Role, GitHubContributor } from '#server/api/contributors.get'
 const router = useRouter()
 const canGoBack = useCanGoBack()
 
-// SSR & Validation Fix
-const isMounted = shallowRef(false)
-const activeContributor = shallowRef<GitHubContributor | null>(null)
-const openTimer = shallowRef<any>(null)
-const closeTimer = shallowRef<any>(null)
-const isFlipped = shallowRef(false)
-
-onMounted(() => {
-  isMounted.value = true
-})
-
 useSeoMeta({
   title: () => `${$t('about.title')} - npmx`,
   ogTitle: () => `${$t('about.title')} - npmx`,
@@ -30,6 +19,21 @@ defineOgImageComponent('Default', {
   description: 'a fast, modern browser for the **npm registry**',
 })
 
+const isMounted = shallowRef(false)
+const activeContributor = shallowRef<GitHubContributor | null>(null)
+const openTimer = shallowRef<ReturnType<typeof setTimeout> | undefined>()
+const closeTimer = shallowRef<ReturnType<typeof setTimeout> | undefined>()
+const isFlipped = shallowRef(false)
+
+onMounted(() => {
+  isMounted.value = true
+})
+
+onBeforeUnmount(() => {
+  if (openTimer.value) clearTimeout(openTimer.value)
+  if (closeTimer.value) clearTimeout(closeTimer.value)
+})
+
 const pmLinks = {
   npm: 'https://www.npmjs.com/',
   pnpm: 'https://pnpm.io/',
@@ -141,7 +145,7 @@ function onMouseEnter(contributor: GitHubContributor) {
 function cancelClose() {
   if (closeTimer.value) {
     clearTimeout(closeTimer.value)
-    closeTimer.value = null
+    closeTimer.value = undefined
   }
 }
 

From 5e034fe35e2c66598c22e524a9966d91f140c989 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 07:24:08 +0100
Subject: [PATCH 11/18] chore: fix positionPopover called fire-and-forget and
 openTimer not reset after clearing

---
 app/pages/about.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 448dfb624..bf4ce632d 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -129,14 +129,15 @@ function onMouseEnter(contributor: GitHubContributor) {
   if (!isExpandable(contributor)) return
   cancelClose()
   clearTimeout(openTimer.value)
+  openTimer.value = undefined
 
-  const trigger = () => {
+  const trigger = async () => {
     activeContributor.value = contributor
-    positionPopover(`anchor-${contributor.id}`)
+    await positionPopover(`anchor-${contributor.id}`)
   }
 
   if (activeContributor.value) {
-    trigger()
+    void trigger()
   } else {
     openTimer.value = setTimeout(trigger, 80)
   }
@@ -151,12 +152,18 @@ function cancelClose() {
 
 function onMouseLeave() {
   clearTimeout(openTimer.value)
+  openTimer.value = undefined
   closeTimer.value = setTimeout(() => {
     const popover = document.getElementById('shared-contributor-popover')
     if (popover && !popover.matches(':hover')) {
       try {
         ;(popover as any).hidePopover()
-      } catch (e) {}
+      } catch (e) {
+        if (import.meta.dev) {
+          // oxlint-disable-next-line no-console
+          console.warn('[positionPopover] showPopover failed:', e)
+        }
+      }
       activeContributor.value = null
     }
   }, 120)

From 950ad1327f932fa941f8bfdbb0a40e4bd6a52ea3 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 07:28:39 +0100
Subject: [PATCH 12/18] chore: fix showPopover at positionPopover error

---
 app/pages/about.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index bf4ce632d..612b95a00 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -88,7 +88,12 @@ async function positionPopover(anchorId: string) {
   if (!popover.matches(':popover-open')) {
     try {
       ;(popover as any).showPopover()
-    } catch (e) {}
+    } catch (e) {
+      if (import.meta.dev) {
+        // oxlint-disable-next-line no-console
+        console.warn('[positionPopover] showPopover failed:', e)
+      }
+    }
   }
 
   // 3. One more tick to ensure the DOM is actually painted with the content
@@ -161,7 +166,7 @@ function onMouseLeave() {
       } catch (e) {
         if (import.meta.dev) {
           // oxlint-disable-next-line no-console
-          console.warn('[positionPopover] showPopover failed:', e)
+          console.warn('[onMouseLeave] hidePopover failed:', e)
         }
       }
       activeContributor.value = null

From 93d10b586e45ae19cd76f0469238e397f3328506 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 08:07:39 +0100
Subject: [PATCH 13/18] chore: add long aria label link description

---
 app/pages/about.vue       | 26 +++++++++++++++++++++++++-
 i18n/locales/en.json      |  7 ++++++-
 i18n/locales/es.json      |  7 ++++++-
 i18n/schema.json          | 15 +++++++++++++++
 lunaria/files/en-GB.json  |  7 ++++++-
 lunaria/files/en-US.json  |  7 ++++++-
 lunaria/files/es-419.json |  7 ++++++-
 lunaria/files/es-ES.json  |  7 ++++++-
 8 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 612b95a00..6acd7f169 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -173,6 +173,26 @@ function onMouseLeave() {
     }
   }, 120)
 }
+
+// --- Add this helper function ---
+function getAriaLabel(c: GitHubContributor): string {
+  const separator = $t('about.contributors.separator')
+  const role = roleLabels.value[c.role]
+    ? $t('about.contributors.role', { separator, role: roleLabels.value[c.role] })
+    : ''
+  const works_at = c.company
+    ? $t('about.contributors.works_at', { separator, company: c.company })
+    : ''
+  const location = c.location
+    ? $t('about.contributors.location', { separator, location: c.location })
+    : ''
+  return $t('about.contributors.view_profile_detailed', {
+    name: c.name || c.login,
+    role,
+    works_at,
+    location,
+  })
+}
 </script>
 
 <template>
@@ -330,7 +350,11 @@ function onMouseLeave() {
                 <LinkBase
                   :id="`anchor-${contributor.id}`"
                   :to="contributor.html_url"
-                  :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
+                  :aria-label="
+                    isExpandable(contributor)
+                      ? getAriaLabel(contributor)
+                      : $t('about.contributors.view_profile', { name: contributor.login })
+                  "
                   no-underline
                   no-external-icon
                   class="group relative block h-12 w-12 rounded-lg transition-all outline-none focus-visible:(ring-2 ring-accent z-20)"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index b0e717d61..f95317819 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -834,7 +834,12 @@
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
       "view_profile": "View {name}'s GitHub profile",
-      "avatar": "{name}'s avatar"
+      "avatar": "{name}'s avatar",
+      "view_profile_detailed": "View {name}'s GitHub profile{role}{works_at}{location}",
+      "separator": " — ",
+      "role": "{separator}{role} at npmx.dev",
+      "works_at": "{separator}works at {company}",
+      "location": "{separator}based in {location}"
     },
     "get_involved": {
       "title": "Get involved",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 13339a7a7..72d2da4a3 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -827,7 +827,12 @@
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
       "view_profile": "Ver perfil de GitHub de {name}",
-      "avatar": "avatar de {name}"
+      "avatar": "avatar de {name}",
+      "view_profile_detailed": "Ver el perfil de GitHub de {name}{role}{works_at}{location}",
+      "separator": " — ",
+      "role": "{separator}{role} en npmx.dev",
+      "works_at": "{separator}trabaja en {company}",
+      "location": "{separator}ubicado en {location}"
     },
     "get_involved": {
       "title": "Involúcrate",
diff --git a/i18n/schema.json b/i18n/schema.json
index b893948e1..786e5c330 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2508,6 +2508,21 @@
             },
             "avatar": {
               "type": "string"
+            },
+            "view_profile_detailed": {
+              "type": "string"
+            },
+            "separator": {
+              "type": "string"
+            },
+            "role": {
+              "type": "string"
+            },
+            "works_at": {
+              "type": "string"
+            },
+            "location": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 480b13845..d5493f03c 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -833,7 +833,12 @@
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
       "view_profile": "View {name}'s GitHub profile",
-      "avatar": "{name}'s avatar"
+      "avatar": "{name}'s avatar",
+      "view_profile_detailed": "View {name}'s GitHub profile{role}{works_at}{location}",
+      "separator": " — ",
+      "role": "{separator}{role} at npmx.dev",
+      "works_at": "{separator}works at {company}",
+      "location": "{separator}based in {location}"
     },
     "get_involved": {
       "title": "Get involved",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 95e4f4a5c..36e96ccec 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -833,7 +833,12 @@
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
       "view_profile": "View {name}'s GitHub profile",
-      "avatar": "{name}'s avatar"
+      "avatar": "{name}'s avatar",
+      "view_profile_detailed": "View {name}'s GitHub profile{role}{works_at}{location}",
+      "separator": " — ",
+      "role": "{separator}{role} at npmx.dev",
+      "works_at": "{separator}works at {company}",
+      "location": "{separator}based in {location}"
     },
     "get_involved": {
       "title": "Get involved",
diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
index 4a48d3cb2..d918546c1 100644
--- a/lunaria/files/es-419.json
+++ b/lunaria/files/es-419.json
@@ -826,7 +826,12 @@
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
       "view_profile": "Ver perfil de GitHub de {name}",
-      "avatar": "avatar de {name}"
+      "avatar": "avatar de {name}",
+      "view_profile_detailed": "Ver el perfil de GitHub de {name}{role}{works_at}{location}",
+      "separator": " — ",
+      "role": "{separator}{role} en npmx.dev",
+      "works_at": "{separator}trabaja en {company}",
+      "location": "{separator}ubicado en {location}"
     },
     "get_involved": {
       "title": "Involúcrate",
diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
index e537ab42e..d32ae5287 100644
--- a/lunaria/files/es-ES.json
+++ b/lunaria/files/es-ES.json
@@ -826,7 +826,12 @@
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
       "view_profile": "Ver perfil de GitHub de {name}",
-      "avatar": "avatar de {name}"
+      "avatar": "avatar de {name}",
+      "view_profile_detailed": "Ver el perfil de GitHub de {name}{role}{works_at}{location}",
+      "separator": " — ",
+      "role": "{separator}{role} en npmx.dev",
+      "works_at": "{separator}trabaja en {company}",
+      "location": "{separator}ubicado en {location}"
     },
     "get_involved": {
       "title": "Involúcrate",

From 38596e2bcf4678f929f160c26da3beecba6b2867 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 08:30:15 +0100
Subject: [PATCH 14/18] chore: adjust popup margins and gaps

---
 app/pages/about.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 6acd7f169..144f31aff 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -393,9 +393,9 @@ function getAriaLabel(c: GitHubContributor): string {
       >
         <div
           v-if="activeContributor"
-          class="relative z-10 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
+          class="flex flex-col gap-y-3 relative z-10 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
         >
-          <div class="flex flex-col gap-1 min-w-0">
+          <div class="flex flex-col gap-2 min-w-0">
             <span class="w-full font-sans font-bold text-fg leading-tight truncate block">
               {{ activeContributor.name || activeContributor.login }}
             </span>
@@ -407,14 +407,14 @@ function getAriaLabel(c: GitHubContributor): string {
             </div>
             <p
               v-if="activeContributor.bio"
-              class="mt-1 font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
+              class="font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
             >
               "{{ activeContributor.bio }}"
             </p>
 
             <div
               v-if="activeContributor.companyHTML"
-              class="mt-1 flex items-center gap-1 font-sans text-2xs text-fg-muted text-start min-w-0"
+              class="flex items-center gap-1 font-sans text-2xs text-fg-muted text-start min-w-0"
             >
               <div
                 class="i-lucide:building-2 size-3 shrink-0 mt-0.5 text-accent/80"
@@ -428,7 +428,7 @@ function getAriaLabel(c: GitHubContributor): string {
 
             <div
               v-else-if="activeContributor.company"
-              class="mt-1 flex items-center gap-1 font-sans text-2xs text-fg-muted text-start min-w-0"
+              class="flex items-center font-sans text-2xs text-fg-muted text-start min-w-0"
             >
               <div
                 class="i-lucide:building-2 size-3 shrink-0 mt-0.5 text-accent/80"
@@ -442,7 +442,7 @@ function getAriaLabel(c: GitHubContributor): string {
             </div>
           </div>
 
-          <div class="mt-3 flex flex-col gap-1 text-3xs text-fg-subtle font-sans">
+          <div class="flex flex-col gap-2 text-3xs text-fg-subtle font-sans">
             <div v-if="activeContributor.location" class="flex items-center gap-1 min-w-0">
               <div class="i-lucide:map-pin size-3 shrink-0" aria-hidden="true" />
               <span class="w-full truncate">{{ activeContributor.location }}</span>
@@ -473,7 +473,7 @@ function getAriaLabel(c: GitHubContributor): string {
           </div>
 
           <div
-            class="mt-3 flex items-center justify-between border-t border-t-gray-400/65 dark:border-t-gray-300 border-border-subtle pt-3"
+            class="flex items-center justify-between border-t border-t-gray-400/65 dark:border-t-gray-300 border-border-subtle pt-3"
           >
             <a
               :href="activeContributor.html_url"

From 08145a02fdd6bee1739a45347fe3dbca288d8cde Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 08:39:57 +0100
Subject: [PATCH 15/18] chore: use sanitize-html at endpoint

---
 server/api/contributors.get.ts | 36 ++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 521d849f8..aa72e1454 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -1,3 +1,5 @@
+import sanitize from 'sanitize-html'
+
 export type Role = 'steward' | 'maintainer' | 'contributor'
 
 export interface GitHubUserData {
@@ -40,6 +42,24 @@ const DEFAULT_USER_INFO: GitHubUserData = {
   twitterUsername: null,
 }
 
+// Configure sanitize-html for GitHub's companyHTML and company fields
+const SANITIZE_HTML_OPTIONS: sanitize.IOptions = {
+  allowedTags: ['a', 'span', 'strong', 'em', 'code'],
+  allowedAttributes: {
+    a: ['href', 'target', 'rel'],
+  },
+  transformTags: {
+    a: (tagName, attribs) => ({
+      tagName,
+      attribs: {
+        ...attribs,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      },
+    }),
+  },
+}
+
 interface TeamMembers {
   steward: Set<string>
   maintainer: Set<string>
@@ -85,22 +105,14 @@ async function fetchTeamMembers(token: string): Promise<TeamMembers | null> {
 }
 
 /**
- * Cleans GitHub HTML to remove tracking data and add security attributes.
- * Specifically targets data-octo, data-hovercard, and keyboard shortcuts.
+ * Sanitizes GitHub HTML to remove XSS vectors while preserving safe formatting.
+ * Applies to both rich companyHTML and plain-text company fields.
  */
 function sanitizeGitHubHTML(html: string | null): string | null {
   if (!html) return null
 
-  return (
-    html
-      // 1. Remove GitHub-specific tracking and metadata attributes
-      .replace(/\s(data-hovercard-[a-z-]+|data-octo-[a-z-]+|aria-keyshortcuts)="[^"]*"/gi, '')
-      // 2. Inject security and target attributes to all <a> tags
-      .replace(/<a /gi, '<a target="_blank" rel="noopener noreferrer" ')
-      // 3. Clean up any resulting double spaces
-      .replace(/\s{2,}/g, ' ')
-      .trim()
-  )
+  const cleaned = sanitize(html.trim(), SANITIZE_HTML_OPTIONS)
+  return cleaned === '' ? null : cleaned
 }
 
 /**

From b55b56aeecfda0a733e975fc72ace1fc9e284df0 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 09:28:54 +0100
Subject: [PATCH 16/18] chore: fix popup position on RTL

---
 app/pages/about.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 144f31aff..c46c00f0f 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -387,7 +387,7 @@ function getAriaLabel(c: GitHubContributor): string {
       <div
         id="shared-contributor-popover"
         popover="manual"
-        class="fixed top-0 inset-is-0 m-0 border-none bg-transparent p-0 overflow-visible opacity-0 invisible transition-[opacity,visibility] duration-150 ease-out allow-discrete popover-open:(opacity-100 visible) z-40"
+        class="fixed top-0 force-left-0 m-0 border-none bg-transparent p-0 overflow-visible opacity-0 invisible transition-[opacity,visibility] duration-150 ease-out allow-discrete popover-open:(opacity-100 visible) z-40"
         @mouseenter="cancelClose"
         @mouseleave="onMouseLeave"
       >
@@ -498,7 +498,7 @@ function getAriaLabel(c: GitHubContributor): string {
 
           <div
             aria-hidden="true"
-            class="popover-arrow absolute inset-is-1/2 z-0 h-3 w-3 border-border-subtle bg-bg-elevated will-change-transform"
+            class="popover-arrow absolute force-left-1/2 z-0 h-3 w-3 border-border-subtle bg-bg-elevated will-change-transform"
             :class="
               isFlipped ? 'top-[-6px] border-te border-is' : 'bottom-[-6px] border-be border-ie'
             "
@@ -515,7 +515,7 @@ function getAriaLabel(c: GitHubContributor): string {
   display: none;
 }
 [popover] {
-  @apply top-0 inset-is-0;
+  @apply top-0 force-left-0 force-right-unset;
   will-change: transform, opacity;
   transition:
     opacity 0.15s ease-out,

From 776c173964ba7cdd37840bc92173b01762fabe8f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 09:42:46 +0100
Subject: [PATCH 17/18] chore: use v-else-if fro contributors

---
 app/pages/about.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index c46c00f0f..f003cd202 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -339,7 +339,7 @@ function getAriaLabel(c: GitHubContributor): string {
               {{ $t('about.contributors.error') }}
             </div>
             <ul
-              v-if="contributors.length"
+              v-else-if="contributors.length"
               class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0 overflow-visible"
             >
               <li

From 55db682d7ccbd3bba35924862494fd1f658a8dca Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 23 Feb 2026 09:44:05 +0100
Subject: [PATCH 18/18] chore: use aria-hidden with uno icons

---
 app/pages/about.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index f003cd202..5a164b53d 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -455,7 +455,7 @@ function getAriaLabel(c: GitHubContributor): string {
               rel="noopener noreferrer"
               class="flex items-center gap-1 hover:text-accent transition-colors"
             >
-              <div class="i-lucide:link size-3 shrink-0" />
+              <div class="i-lucide:link size-3 shrink-0" aria-hidden="true" />
               <span class="truncate">{{
                 activeContributor.websiteUrl.replace(/^https?:\/\//, '')
               }}</span>
@@ -467,7 +467,7 @@ function getAriaLabel(c: GitHubContributor): string {
               rel="noopener noreferrer"
               class="flex items-center gap-1 hover:text-accent transition-colors"
             >
-              <div class="i-simple-icons:x size-2.5 shrink-0" />
+              <div class="i-simple-icons:x size-2.5 shrink-0" aria-hidden="true" />
               <span>@{{ activeContributor.twitterUsername }}</span>
             </a>
           </div>