Merge branch 'main' into perf/ofetch-timeout

Author: OrbisK

.gitattributes

@@ -1 +1 @@
-* text eol=lf
+* text=auto eol=lf

.github/workflows/autofix.yml

@@ -34,6 +34,9 @@ jobs:
       - name: 📦 Install browsers
         run: pnpm playwright install
 
+      - name: 🌐 Compare translations
+        run: pnpm i18n:check
+
       - name: 🌍 Update lunaria data
         run: pnpm build:lunaria
 

CONTRIBUTING.md

@@ -284,6 +284,23 @@ To add a new locale:
 
 Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
 
+### Update translation
+
+We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
+If you see any outdated translations in your language, feel free to update the keys to match then English version.
+
+In order to make sure you have everything up-to-date, you can run:
+
+```bash
+pnpm i18n:check <country-code>
+```
+
+For example to check if all Japanese translation keys are up-to-date, run:
+
+```bash
+pnpm i18n:check ja-JP
+```
+
 #### Country variants (advanced)
 
 Most languages only need a single locale file. Country variants are only needed when you want to support regional differences (e.g., `es-ES` for Spain vs `es-419` for Latin America).

app/app.vue

@@ -10,6 +10,7 @@ const { locale, locales } = useI18n()
 initPreferencesOnPrehydrate()
 
 const isHomepage = computed(() => route.name === 'index')
+const showKbdHints = shallowRef(false)
 
 const localeMap = locales.value.reduce(
   (acc, l) => {
@@ -21,8 +22,9 @@ const localeMap = locales.value.reduce(
 
 useHead({
   htmlAttrs: {
-    lang: () => locale.value,
-    dir: () => localeMap[locale.value] ?? 'ltr',
+    'lang': () => locale.value,
+    'dir': () => localeMap[locale.value] ?? 'ltr',
+    'data-kbd-hints': () => showKbdHints.value,
   },
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
@@ -33,16 +35,16 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-// Global keyboard shortcut: "/" focuses search or navigates to search page
+// Global keyboard shortcut:
+// "/" focuses search or navigates to search page
+// "?" highlights all keyboard shortcut elements
 function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement
 
   const isEditableTarget =
     target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
 
-  if (isEditableTarget) {
-    return
-  }
+  if (isEditableTarget) return
 
   if (e.key === '/') {
     e.preventDefault()
@@ -59,15 +61,26 @@ function handleGlobalKeydown(e: KeyboardEvent) {
 
     router.push('/search')
   }
+
+  if (e.key === '?') {
+    e.preventDefault()
+    showKbdHints.value = true
+  }
+}
+
+function handleGlobalKeyup() {
+  showKbdHints.value = false
 }
 
 if (import.meta.client) {
   useEventListener(document, 'keydown', handleGlobalKeydown)
+  useEventListener(document, 'keyup', handleGlobalKeyup)
 }
 </script>
 
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
+    <NuxtPwaAssets />
     <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
 
     <AppHeader :show-logo="!isHomepage" />
@@ -81,3 +94,25 @@ if (import.meta.client) {
     <ScrollToTop />
   </div>
 </template>
+
+<style>
+/* Keyboard shortcut highlight on "?" key press */
+kbd {
+  position: relative;
+}
+
+kbd::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 4px 2px var(--accent);
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+  pointer-events: none;
+}
+
+html[data-kbd-hints='true'] kbd::before {
+  opacity: 1;
+}
+</style>

app/assets/main.css

@@ -541,12 +541,6 @@ input[type='search']::-webkit-search-results-decoration {
   appearance: none;
 }
 
-/* View transition for logo (hero -> header) */
-.hero-logo,
-.header-logo {
-  view-transition-name: site-logo;
-}
-
 /* Disable the default fade transition on page navigation */
 ::view-transition-old(root),
 ::view-transition-new(root) {
@@ -555,9 +549,7 @@ input[type='search']::-webkit-search-results-decoration {
 
 /* Customize the view transition animations for specific elements */
 ::view-transition-old(search-box),
-::view-transition-new(search-box),
-::view-transition-old(site-logo),
-::view-transition-new(site-logo) {
+::view-transition-new(search-box) {
   animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
 }

app/components/AnnounceTooltip.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** is tooltip visible */
+  isVisible: boolean
+}>()
+</script>
+
+<template>
+  <BaseTooltip :text :isVisible :position :tooltip-attr="{ 'aria-live': 'polite' }"
+    ><slot
+  /></BaseTooltip>
+</template>

app/components/AppFooter.vue

@@ -1,10 +1,18 @@
+<script setup lang="ts">
+const route = useRoute()
+const isHome = computed(() => route.name === 'index')
+</script>
+
 <template>
   <footer class="border-t border-border mt-auto">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
       <div
         class="flex flex-col sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
       >
-        <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
+        <div>
+          <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
+          <BuildEnvironment v-if="!isHome" footer />
+        </div>
         <div class="flex items-center gap-3 sm:gap-6">
           <NuxtLink
             to="/about"

app/components/AppHeader.vue

@@ -12,7 +12,7 @@ const { isConnected, npmUser } = useConnector()
 
 const router = useRouter()
 
-const showFullSearch = ref(false)
+const showFullSearch = shallowRef(false)
 
 onKeyStroke(',', e => {
   // Don't trigger if user is typing in an input
@@ -34,14 +34,24 @@ onKeyStroke(',', e => {
     >
       <!-- Start: Logo -->
       <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
-        <NuxtLink
-          v-if="showLogo"
-          to="/"
-          :aria-label="$t('header.home')"
-          class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-        >
-          <span class="text-accent"><span class="-tracking-0.2em">.</span>/</span>npmx
-        </NuxtLink>
+        <div v-if="showLogo">
+          <NuxtLink
+            to="/"
+            :aria-label="$t('header.home')"
+            dir="ltr"
+            class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+          >
+            <img
+              aria-hidden="true"
+              :alt="$t('alt_logo')"
+              src="/logo.svg"
+              width="96"
+              height="96"
+              class="w-8 h-8 rounded-lg"
+            />
+            <span>npmx</span>
+          </NuxtLink>
+        </div>
         <!-- Spacer when logo is hidden -->
         <span v-else class="w-1" />
       </div>

app/components/AppTooltip.vue

@@ -9,15 +9,6 @@ const props = defineProps<{
 const isVisible = shallowRef(false)
 const tooltipId = useId()
 
-const positionClasses: Record<string, string> = {
-  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full inset-is-0 mt-1',
-  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
-  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
-}
-
-const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
-
 function show() {
   isVisible.value = true
 }
@@ -28,31 +19,16 @@ function hide() {
 </script>
 
 <template>
-  <div
-    class="relative inline-flex"
-    :aria-describedby="isVisible ? tooltipId : undefined"
+  <BaseTooltip
+    :text
+    :isVisible
+    :position
+    :tooltip-attr="{ role: 'tooltip', id: tooltipId }"
     @mouseenter="show"
     @mouseleave="hide"
     @focusin="show"
     @focusout="hide"
-  >
-    <slot />
-
-    <Transition
-      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
-      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isVisible"
-        :id="tooltipId"
-        role="tooltip"
-        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
-        :class="tooltipPosition"
-      >
-        {{ text }}
-      </div>
-    </Transition>
-  </div>
+    :aria-describedby="isVisible ? tooltipId : undefined"
+    ><slot
+  /></BaseTooltip>
 </template>

app/components/AuthButton.client.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const showModal = ref(false)
+const showModal = shallowRef(false)
 const { user } = useAtproto()
 </script>