Merge branch 'main' of github.com:Kai-ros/npmx.dev

Author: Kai-ros

.lighthouserc.json

@@ -16,7 +16,7 @@
     },
     "assert": {
       "assertions": {
-        "categories:accessibility": ["warn", { "minScore": 0.9 }]
+        "categories:accessibility": ["warn", { "minScore": 1 }]
       }
     },
     "upload": {

.oxlintrc.json

@@ -10,7 +10,8 @@
     "no-console": "warn",
     "no-await-in-loop": "off",
     "unicorn/no-array-sort": "off",
-    "no-restricted-globals": "error"
+    "no-restricted-globals": "error",
+    "typescript/consistent-type-imports": "error"
   },
   "ignorePatterns": [
     ".output/**",

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["oxc.oxc-vscode", "Vue.volar"]
+  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally"]
 }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": ["./i18n/locales"],
+  "i18n-ally.keystyle": "nested"
+}

CONTRIBUTING.md

@@ -208,6 +208,89 @@ const props = defineProps<{
 
 Ideally, extract utilities into separate files so they can be unit tested. 🙏
 
+## Localization (i18n)
+
+npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization. We aim to make the UI accessible to users in their preferred language.
+
+### Approach
+
+- All user-facing strings should use translation keys via `$t()` in templates or `t()` in script
+- Translation files live in `i18n/locales/` (e.g., `en.json`)
+- We use the `no_prefix` strategy (no `/en/` or `/fr/` in URLs)
+- Locale preference is stored in cookies and respected on subsequent visits
+
+### Adding translations
+
+1. Add your translation key to `i18n/locales/en.json` first (English is the source of truth)
+2. Use the key in your component:
+
+   ```vue
+   <template>
+     <p>{{ $t('my.translation.key') }}</p>
+   </template>
+   ```
+
+   Or in script:
+
+   ```typescript
+   const { t } = useI18n()
+   const message = t('my.translation.key')
+   ```
+
+3. For dynamic values, use interpolation:
+
+   ```json
+   { "greeting": "Hello, {name}!" }
+   ```
+
+   ```vue
+   <p>{{ $t('greeting', { name: userName }) }}</p>
+   ```
+
+### Translation key conventions
+
+- Use dot notation for hierarchy: `section.subsection.key`
+- Keep keys descriptive but concise
+- Group related keys together
+- Use `common.*` for shared strings (loading, retry, close, etc.)
+- Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
+
+### Using i18n-ally (recommended)
+
+We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) VSCode extension for a better development experience:
+
+- Inline translation previews in your code
+- Auto-completion for translation keys
+- Missing translation detection
+- Easy navigation to translation files
+
+The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
+
+### Adding a new locale
+
+1. Create a new JSON file in `i18n/locales/` (e.g., `fr.json`)
+2. Add the locale to `nuxt.config.ts`:
+
+   ```typescript
+   i18n: {
+     locales: [
+       { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
+       { code: 'fr', language: 'fr-FR', name: 'Francais', file: 'fr.json' },
+     ],
+   }
+   ```
+
+3. Translate all keys from `en.json`
+
+### Formatting with locale
+
+When formatting numbers or dates that should respect the user's locale, pass the locale:
+
+```typescript
+const { locale } = useI18n()
+const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```
+
 ## Testing
 
 ### Unit tests

README.md

@@ -18,6 +18,18 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **URL compatible** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
 - **Simplicity** – No noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
 
+## Shortcuts
+
+> [!IMPORTANT]  
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+
+- [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
+- [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile
+- [repo.npmx.dev](https://repo.npmx.dev) - GitHub Repository
+- [issues.npmx.dev](https://issues.npmx.dev) - GitHub Issues
+- [coc.npmx.dev](https://coc.npmx.dev) - Code of Conduct
+- [contributing.npmx.dev](https://contributing.npmx.dev) - Contributing Guide
+
 ## Features
 
 ### Package browsing

app/app.vue

@@ -195,6 +195,10 @@ button {
   margin-top: 2rem;
   margin-bottom: 1rem;
   line-height: 1.3;
+
+  a {
+    text-decoration: none;
+  }
 }
 
 /* Visual styling based on original README heading level */

app/components/AppFooter.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const isMounted = ref(false)
-const isVisible = ref(false)
-const isScrollable = ref(true)
-const lastScrollY = ref(0)
-const footerRef = ref<HTMLElement>()
+const isMounted = shallowRef(false)
+const isVisible = shallowRef(false)
+const isScrollable = shallowRef(true)
+const lastScrollY = shallowRef(0)
+const footerRef = useTemplateRef('footerRef')
 
 // Check if CSS scroll-state container queries are supported
 // Once this becomes baseline, we can remove the JS scroll handling entirely
-const supportsScrollStateQueries = ref(false)
+const supportsScrollStateQueries = useSupported(() => {
+  return isMounted.value && CSS.supports('container-type', 'scroll-state')
+})
 
 function checkScrollable() {
   return document.documentElement.scrollHeight > window.innerHeight
@@ -48,26 +50,17 @@ function onResize() {
   updateFooterPadding()
 }
 
-onMounted(() => {
-  // Feature detect CSS scroll-state container queries (Chrome 133+)
-  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
-  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
+useEventListener('scroll', onScroll, { passive: true })
+useEventListener('resize', onResize, { passive: true })
 
+onMounted(() => {
   nextTick(() => {
     lastScrollY.value = window.scrollY
     isScrollable.value = checkScrollable()
     updateFooterPadding()
     // Only apply dynamic classes after mount to avoid hydration mismatch
     isMounted.value = true
   })
-
-  window.addEventListener('scroll', onScroll, { passive: true })
-  window.addEventListener('resize', onResize, { passive: true })
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll)
-  window.removeEventListener('resize', onResize)
 })
 </script>
 
@@ -92,29 +85,35 @@ onUnmounted(() => {
   >
     <div class="container py-2 sm:py-6 flex flex-col gap-1 sm:gap-3 text-fg-subtle text-sm">
       <div class="flex flex-row items-center justify-between gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">a better browser for the npm registry</p>
+        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
         <!-- On mobile, show disclaimer here instead of tagline -->
-        <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
+        <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
           <a
-            href="https://github.com/npmx-dev/npmx.dev"
+            href="https://repo.npmx.dev"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
+          >
+            {{ $t('footer.source') }}
+          </a>
+          <a
+            href="https://social.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            source
+            {{ $t('footer.social') }}
           </a>
-          <span class="text-border">|</span>
           <a
-            href="https://roe.dev"
+            href="https://chat.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            @danielroe
+            {{ $t('footer.chat') }}
           </a>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-left m-0 hidden sm:block">
-        npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
+        {{ $t('trademark_disclaimer') }}
       </p>
     </div>
   </footer>

app/components/AppHeader.vue

@@ -9,30 +9,36 @@ withDefaults(
     showConnector: true,
   },
 )
+
+const { isConnected, npmUser } = useConnector()
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
-      <NuxtLink
-        v-if="showLogo"
-        to="/"
-        aria-label="npmx 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-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
-      </NuxtLink>
-      <!-- Spacer when logo is hidden -->
-      <span v-else class="w-1" />
-
-      <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
-        <li class="flex">
+    <nav aria-label="Main navigation" class="container h-14 flex items-center">
+      <!-- Left: Logo -->
+      <div 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-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+        </NuxtLink>
+        <!-- Spacer when logo is hidden -->
+        <span v-else class="w-1" />
+      </div>
+
+      <!-- Center: Main nav items -->
+      <ul class="flex-1 flex items-center justify-center gap-4 sm:gap-6 list-none m-0 p-0">
+        <li class="flex items-center">
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
             aria-keyshortcuts="/"
           >
-            search
+            {{ $t('nav.search') }}
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
               aria-hidden="true"
@@ -41,20 +47,38 @@ withDefaults(
             </kbd>
           </NuxtLink>
         </li>
-        <li v-if="showConnector" class="flex">
-          <ConnectorStatus />
+
+        <!-- Packages dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderPackagesDropdown :username="npmUser" />
         </li>
-        <li v-else class="flex">
-          <a
-            href="https://github.com/npmx-dev/npmx.dev"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-          >
-            <span class="i-carbon-logo-github w-4 h-4" />
-            <span class="hidden sm:inline">github</span>
-          </a>
+
+        <!-- Orgs dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderOrgsDropdown :username="npmUser" />
         </li>
       </ul>
+
+      <!-- Right: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-6">
+        <ClientOnly>
+          <SettingsMenu />
+        </ClientOnly>
+
+        <div v-if="showConnector">
+          <ConnectorStatus />
+        </div>
+
+        <a
+          href="https://github.com/npmx-dev/npmx.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="link-subtle"
+          :aria-label="$t('header.github')"
+        >
+          <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
+        </a>
+      </div>
     </nav>
   </header>
 </template>

app/components/AppTooltip.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
 }>()
 
-const isVisible = ref(false)
+const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {