Merge branch 'main' into accessible-accent

jellydeck · web-flow · commit 215037fd7881 · 2026-02-02T15:33:34.000+05:30
diff --git a/.env.example b/.env.example
@@ -1,2 +1,2 @@
-#secure password, can use openssl rand --hex 32
+#secure password, can use openssl rand -hex 32
 NUXT_SESSION_PASSWORD=""
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -205,6 +205,14 @@ button:focus-visible {
   background: #404040;
 }
 
+/* Scrollbar styling for Firefox */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) var(--bg);
+  }
+}
+
 /* Shiki theme colors */
 html.light .shiki,
 html.light .shiki span {
diff --git a/app/components/User/Avatar.vue b/app/components/User/Avatar.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
+  transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
+  getCachedData(key, nuxtApp) {
+    return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
+  },
+})
+</script>
+
+<template>
+  <!-- Avatar -->
+  <div
+    class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center overflow-hidden"
+    role="img"
+    :aria-label="`Avatar for ${username}`"
+  >
+    <!-- If Gravatar was fetched, display it -->
+    <img
+      v-if="gravatarUrl"
+      :src="gravatarUrl"
+      alt=""
+      width="64"
+      height="64"
+      class="w-full h-full object-cover"
+    />
+    <!-- Else fallback to initials -->
+    <span v-else class="text-2xl text-fg-subtle font-mono" aria-hidden="true">
+      {{ username.charAt(0).toUpperCase() }}
+    </span>
+  </div>
+</template>
diff --git a/app/components/compare/FacetRow.vue b/app/components/compare/FacetRow.vue
@@ -78,7 +78,7 @@ function isCellLoading(index: number): boolean {
     <div
       v-for="(value, index) in values"
       :key="index"
-      class="comparison-cell relative flex items-end justify-center px-4 py-3 border-b border-border"
+      class="comparison-cell relative flex items-center justify-center px-4 py-3 border-b border-border"
     >
       <!-- Background bar for numeric values -->
       <div
@@ -103,7 +103,10 @@ function isCellLoading(index: number): boolean {
 
       <!-- Value display -->
       <template v-else>
-        <span class="relative font-mono text-sm tabular-nums" :class="getStatusClass(value.status)">
+        <span
+          class="relative font-mono text-sm text-center tabular-nums"
+          :class="getStatusClass(value.status)"
+        >
           <!-- Date values use DateTime component for i18n and user settings -->
           <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
           <template v-else>{{ value.display }}</template>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
@@ -178,15 +178,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-wrap items-center gap-4">
-        <!-- Avatar placeholder -->
-        <div
-          class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center"
-          aria-hidden="true"
-        >
-          <span class="text-2xl text-fg-subtle font-mono">{{
-            username.charAt(0).toUpperCase()
-          }}</span>
-        </div>
+        <UserAvatar :username="username" />
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p v-if="results?.total" class="text-fg-muted text-sm mt-1">
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
@@ -120,15 +120,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-wrap items-center gap-4 mb-4">
-        <!-- Avatar placeholder -->
-        <div
-          class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center"
-          aria-hidden="true"
-        >
-          <span class="text-2xl text-fg-subtle font-mono">{{
-            username.charAt(0).toUpperCase()
-          }}</span>
-        </div>
+        <UserAvatar :username="username" />
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p class="text-fg-muted text-sm mt-1">{{ $t('user.orgs_page.title') }}</p>
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
@@ -27,6 +27,7 @@
     "found_packages": "Nenhum pacote encontrado | 1 pacote encontrado | {count} pacotes encontrados",
     "updating": "(atualizando...)",
     "no_results": "Nenhum pacote encontrado para \"{query}\"",
+    "title": "pesquisar",
     "not_taken": "{name} não está em uso",
     "claim_prompt": "Reivindicar este nome de pacote no npm",
     "claim_button": "Reivindicar \"{name}\"",
@@ -142,6 +143,7 @@
       "install_size": "Tamanho de Instalação",
       "vulns": "Vulnerabilidades",
       "updated": "Atualizado",
+      "skills": "Habilidades",
       "view_dependency_graph": "Ver gráfico de dependências",
       "inspect_dependency_tree": "Inspecionar árvore de dependências",
       "size_tooltip": {
@@ -150,7 +152,22 @@
       }
     },
     "skills": {
-      "file_counts": {}
+      "title": "Habilidades do Agente",
+      "skills_available": "{count} habilidade disponível | {count} habilidades disponíveis",
+      "view": "Ver",
+      "compatible_with": "Compatível com {tool}",
+      "install": "Instalar",
+      "installation_method": "Método de Instalação",
+      "learn_more": "Saiba mais",
+      "available_skills": "Habilidades Disponíveis",
+      "click_to_expand": "Clique para expandir",
+      "no_description": "Sem descrição",
+      "file_counts": {
+        "scripts": "{count} script | {count} scripts",
+        "refs": "{count} ref | {count} refs",
+        "assets": "{count} asset | {count} assets"
+      },
+      "view_source": "Ver código-fonte"
     },
     "links": {
       "repo": "repositório",
@@ -281,7 +298,8 @@
       "no_types": "Sem tipos TypeScript"
     },
     "license": {
-      "view_spdx": "Ver texto da licença no SPDX"
+      "view_spdx": "Ver texto da licença no SPDX",
+      "none": "Nenhuma"
     },
     "vulnerabilities": {
       "no_description": "Nenhuma descrição disponível",
@@ -754,27 +772,27 @@
     "connect": "conectar",
     "account": "Conta",
     "npm_cli": "npm CLI",
-    "atmosphere": "Atmosphere",
+    "atmosphere": "Atmosfera",
     "npm_cli_desc": "Gerenciar pacotes e organizações",
     "atmosphere_desc": "Recursos sociais e identidade",
     "connect_npm_cli": "Conectar ao CLI npm",
-    "connect_atmosphere": "Conectar ao Atmosphere",
+    "connect_atmosphere": "Conectar à Atmosfera",
     "connecting": "Conectando...",
     "ops": "{count} op | {count} ops",
     "disconnect": "Desconectar"
   },
   "auth": {
     "modal": {
-      "title": "Atmosphere",
+      "title": "Atmosfera",
       "connected_as": "Conectado como {'@'}{handle}",
       "disconnect": "Desconectar",
-      "connect_prompt": "Conecte-se com sua conta Atmosphere",
+      "connect_prompt": "Conecte-se com sua conta da Atmosfera",
       "handle_label": "Nome de identificação",
       "handle_placeholder": "alice.npmx.social",
       "connect": "Conectar",
       "create_account": "Criar uma nova conta",
       "connect_bluesky": "Conectar com Bluesky",
-      "what_is_atmosphere": "O que é uma conta Atmosphere?",
+      "what_is_atmosphere": "O que é uma conta da Atmosfera?",
       "atmosphere_explanation": "{npmx} usa o {atproto} para alimentar muitos de seus recursos sociais, permitindo que os usuários possuam seus dados e usem uma conta para todos os aplicativos compatíveis. Depois de criar uma conta, você pode usar outros aplicativos como {bluesky} e {tangled} com a mesma conta."
     }
   },
diff --git a/lunaria/files/pt-BR.json b/lunaria/files/pt-BR.json
@@ -27,6 +27,7 @@
     "found_packages": "Nenhum pacote encontrado | 1 pacote encontrado | {count} pacotes encontrados",
     "updating": "(atualizando...)",
     "no_results": "Nenhum pacote encontrado para \"{query}\"",
+    "title": "pesquisar",
     "not_taken": "{name} não está em uso",
     "claim_prompt": "Reivindicar este nome de pacote no npm",
     "claim_button": "Reivindicar \"{name}\"",
@@ -142,6 +143,7 @@
       "install_size": "Tamanho de Instalação",
       "vulns": "Vulnerabilidades",
       "updated": "Atualizado",
+      "skills": "Habilidades",
       "view_dependency_graph": "Ver gráfico de dependências",
       "inspect_dependency_tree": "Inspecionar árvore de dependências",
       "size_tooltip": {
@@ -150,7 +152,22 @@
       }
     },
     "skills": {
-      "file_counts": {}
+      "title": "Habilidades do Agente",
+      "skills_available": "{count} habilidade disponível | {count} habilidades disponíveis",
+      "view": "Ver",
+      "compatible_with": "Compatível com {tool}",
+      "install": "Instalar",
+      "installation_method": "Método de Instalação",
+      "learn_more": "Saiba mais",
+      "available_skills": "Habilidades Disponíveis",
+      "click_to_expand": "Clique para expandir",
+      "no_description": "Sem descrição",
+      "file_counts": {
+        "scripts": "{count} script | {count} scripts",
+        "refs": "{count} ref | {count} refs",
+        "assets": "{count} asset | {count} assets"
+      },
+      "view_source": "Ver código-fonte"
     },
     "links": {
       "repo": "repositório",
@@ -281,7 +298,8 @@
       "no_types": "Sem tipos TypeScript"
     },
     "license": {
-      "view_spdx": "Ver texto da licença no SPDX"
+      "view_spdx": "Ver texto da licença no SPDX",
+      "none": "Nenhuma"
     },
     "vulnerabilities": {
       "no_description": "Nenhuma descrição disponível",
@@ -754,27 +772,27 @@
     "connect": "conectar",
     "account": "Conta",
     "npm_cli": "npm CLI",
-    "atmosphere": "Atmosphere",
+    "atmosphere": "Atmosfera",
     "npm_cli_desc": "Gerenciar pacotes e organizações",
     "atmosphere_desc": "Recursos sociais e identidade",
     "connect_npm_cli": "Conectar ao CLI npm",
-    "connect_atmosphere": "Conectar ao Atmosphere",
+    "connect_atmosphere": "Conectar à Atmosfera",
     "connecting": "Conectando...",
     "ops": "{count} op | {count} ops",
     "disconnect": "Desconectar"
   },
   "auth": {
     "modal": {
-      "title": "Atmosphere",
+      "title": "Atmosfera",
       "connected_as": "Conectado como {'@'}{handle}",
       "disconnect": "Desconectar",
-      "connect_prompt": "Conecte-se com sua conta Atmosphere",
+      "connect_prompt": "Conecte-se com sua conta da Atmosfera",
       "handle_label": "Nome de identificação",
       "handle_placeholder": "alice.npmx.social",
       "connect": "Conectar",
       "create_account": "Criar uma nova conta",
       "connect_bluesky": "Conectar com Bluesky",
-      "what_is_atmosphere": "O que é uma conta Atmosphere?",
+      "what_is_atmosphere": "O que é uma conta da Atmosfera?",
       "atmosphere_explanation": "{npmx} usa o {atproto} para alimentar muitos de seus recursos sociais, permitindo que os usuários possuam seus dados e usem uma conta para todos os aplicativos compatíveis. Depois de criar uma conta, você pode usar outros aplicativos como {bluesky} e {tangled} com a mesma conta."
     }
   },
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -105,6 +105,12 @@ export default defineNuxtConfig({
     '/api/registry/docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/api/registry/file/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/api/registry/files/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
+    '/_avatar/**': {
+      isr: 3600,
+      proxy: {
+        to: 'https://www.gravatar.com/avatar/**',
+      },
+    },
     // static pages
     '/about': { prerender: true },
     '/settings': { prerender: true },
diff --git a/server/api/gravatar/[username].get.ts b/server/api/gravatar/[username].get.ts
@@ -0,0 +1,41 @@
+import { createError } from 'h3'
+import * as v from 'valibot'
+import { GravatarQuerySchema } from '#shared/schemas/user'
+import { getGravatarFromUsername } from '#server/utils/gravatar'
+import { handleApiError } from '#server/utils/error-handler'
+
+export default defineCachedEventHandler(
+  async event => {
+    const rawUsername = getRouterParam(event, 'username')
+
+    try {
+      const { username } = v.parse(GravatarQuerySchema, {
+        username: rawUsername,
+      })
+
+      const hash = await getGravatarFromUsername(username)
+
+      if (!hash) {
+        throw createError({
+          statusCode: 404,
+          message: ERROR_GRAVATAR_EMAIL_UNAVAILABLE,
+        })
+      }
+
+      return { hash }
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: ERROR_GRAVATAR_FETCH_FAILED,
+      })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_DAY,
+    swr: true,
+    getKey: event => {
+      const username = getRouterParam(event, 'username')?.trim().toLowerCase()
+      return `gravatar:v1:${username}`
+    },
+  },
+)
diff --git a/server/utils/gravatar.ts b/server/utils/gravatar.ts
@@ -0,0 +1,13 @@
+import { createHash } from 'node:crypto'
+import { fetchUserEmail } from '#server/utils/npm'
+
+export async function getGravatarFromUsername(username: string): Promise<string | null> {
+  const handle = username.trim()
+  if (!handle) return null
+
+  const email = await fetchUserEmail(handle)
+  if (!email) return null
+
+  const trimmedEmail = email.trim().toLowerCase()
+  return createHash('md5').update(trimmedEmail).digest('hex')
+}
diff --git a/server/utils/npm.ts b/server/utils/npm.ts
@@ -1,4 +1,4 @@
-import type { Packument } from '#shared/types'
+import type { Packument, NpmSearchResponse } from '#shared/types'
 import { encodePackageName, fetchLatestVersion } from '#shared/utils/npm'
 import { maxSatisfying, prerelease } from 'semver'
 import { CACHE_MAX_AGE_FIVE_MINUTES } from '#shared/utils/constants'
@@ -99,3 +99,43 @@ export async function resolveDependencyVersions(
   }
   return resolved
 }
+
+/**
+ * Find a user's email address from its username
+ * by exploring metadata in its public packages
+ */
+export const fetchUserEmail = defineCachedFunction(
+  async (username: string): Promise<string | null> => {
+    const handle = username.trim()
+    if (!handle) return null
+
+    // Fetch packages with the user's handle as a maintainer
+    const params = new URLSearchParams({
+      text: `maintainer:${handle}`,
+      size: '20',
+    })
+    const response = await $fetch<NpmSearchResponse>(`${NPM_REGISTRY}/-/v1/search?${params}`)
+    const lowerHandle = handle.toLowerCase()
+
+    // Search for the user's email in packages metadata
+    for (const result of response.objects) {
+      const maintainers = result.package.maintainers ?? []
+      const match = maintainers.find(
+        person =>
+          person.username?.toLowerCase() === lowerHandle ||
+          person.name?.toLowerCase() === lowerHandle,
+      )
+      if (match?.email) {
+        return match.email
+      }
+    }
+
+    return null
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_DAY,
+    swr: true,
+    name: 'npm-user-email',
+    getKey: (username: string) => `npm-user-email:${username.trim().toLowerCase()}`,
+  },
+)
diff --git a/shared/schemas/user.ts b/shared/schemas/user.ts
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
diff --git a/shared/utils/npm.ts b/shared/utils/npm.ts
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
diff --git a/test/unit/server/utils/gravatar.spec.ts b/test/unit/server/utils/gravatar.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-#secure password, can use openssl rand --hex 32`
	`1`	`+#secure password, can use openssl rand -hex 32`
`2`	`2`	`NUXT_SESSION_PASSWORD=""`