Merge remote-tracking branch 'origin/main' into fix/readme-hash-links

Author: danielroe

.github/workflows/ci.yml

@@ -33,10 +33,14 @@ jobs:
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
-        # pnpm cache skipped deliberately as the project is not actually installed here
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies (root only, no scripts)
+        run: pnpm install --filter . --ignore-scripts
 
       - name: 🔠 Lint project
-        run: node scripts/lint.ts
+        run: pnpm lint
 
   types:
     name: 💪 Type check

.oxlintrc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://unpkg.com/oxlint/configuration_schema.json",
   "plugins": ["unicorn", "typescript", "oxc", "vue", "vitest"],
+  "jsPlugins": ["@e18e/eslint-plugin"],
   "categories": {
     "correctness": "error",
     "suspicious": "warn",
@@ -11,8 +12,27 @@
     "no-await-in-loop": "off",
     "unicorn/no-array-sort": "off",
     "no-restricted-globals": "error",
-    "typescript/consistent-type-imports": "error"
+    "typescript/consistent-type-imports": "error",
+    "e18e/prefer-array-from-map": "error",
+    "e18e/prefer-timer-args": "error",
+    "e18e/prefer-date-now": "error",
+    "e18e/prefer-regex-test": "error",
+    "e18e/prefer-array-some": "error"
   },
+  "overrides": [
+    {
+      "files": [
+        "server/**/*",
+        "cli/**/*",
+        "scripts/**/*",
+        "modules/**/*",
+        "app/components/OgImage/*"
+      ],
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ],
   "ignorePatterns": [
     ".output/**",
     ".data/**",

app/components/AppFooter.vue

@@ -18,6 +18,12 @@ const isHome = computed(() => route.name === 'index')
           <NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
+          <NuxtLink
+            to="/privacy"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
+          >
+            {{ $t('privacy_policy.title') }}
+          </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"

app/components/Header/AccountMenu.client.vue

@@ -77,7 +77,7 @@ function openAuthModal() {
           :alt="npmUser || $t('account_menu.npm_cli')"
           width="24"
           height="24"
-          class="w-6 h-6 rounded-full ring-2 ring-bg"
+          class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
         />
         <span
           v-else-if="isNpmConnected"
@@ -93,7 +93,7 @@ function openAuthModal() {
           :alt="atprotoUser.handle"
           width="24"
           height="24"
-          class="w-6 h-6 rounded-full ring-2 ring-bg"
+          class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
           :class="hasBothConnections ? 'relative z-10' : ''"
         />
         <span
@@ -153,7 +153,7 @@ function openAuthModal() {
                 :alt="npmUser"
                 width="32"
                 height="32"
-                class="w-8 h-8 rounded-full"
+                class="w-8 h-8 rounded-full object-cover"
               />
               <span
                 v-else
@@ -196,7 +196,7 @@ function openAuthModal() {
                 :alt="atprotoUser.handle"
                 width="32"
                 height="32"
-                class="w-8 h-8 rounded-full"
+                class="w-8 h-8 rounded-full object-cover"
               />
               <span
                 v-else

app/components/Header/AuthModal.client.vue

@@ -3,15 +3,15 @@ import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
 
 const handleInput = shallowRef('')
-
+const route = useRoute()
 const { user, logout } = useAtproto()
 
 async function handleBlueskySignIn() {
-  await authRedirect('https://bsky.social')
+  await authRedirect('https://bsky.social', { redirectTo: route.fullPath })
 }
 
 async function handleCreateAccount() {
-  await authRedirect('https://npmx.social', true)
+  await authRedirect('https://npmx.social', { create: true, redirectTo: route.fullPath })
 }
 
 async function handleLogin() {

app/components/Header/MobileMenu.client.vue

@@ -112,6 +112,15 @@ onUnmounted(deactivate)
                   {{ $t('footer.about') }}
                 </NuxtLink>
 
+                <NuxtLink
+                  to="/privacy"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('privacy_policy.title') }}
+                </NuxtLink>
+
                 <NuxtLink
                   to="/compare"
                   class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
@@ -243,7 +252,7 @@ onUnmounted(deactivate)
                   :alt="npmUser"
                   width="20"
                   height="20"
-                  class="w-5 h-5 rounded-full"
+                  class="w-5 h-5 rounded-full object-cover"
                 />
                 <span
                   v-else
@@ -262,7 +271,18 @@ onUnmounted(deactivate)
                 class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
                 @click="handleShowAuth"
               >
-                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                <img
+                  v-if="atprotoUser.avatar"
+                  :src="atprotoUser.avatar"
+                  :alt="atprotoUser.handle"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
+                >
                   <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
@@ -281,13 +301,6 @@ onUnmounted(deactivate)
                 <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
               </button>
             </div>
-
-            <!-- Footer -->
-            <div class="p-4 border-t border-border mt-auto">
-              <p class="font-mono text-xs text-fg-subtle text-center">
-                {{ $t('non_affiliation_disclaimer') }}
-              </p>
-            </div>
           </nav>
         </Transition>
       </div>

app/components/Settings/Toggle.client.vue

@@ -21,13 +21,12 @@ const checked = defineModel<boolean>({
       {{ label }}
     </span>
     <span
-      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 transition-colors duration-200 ease-in-out motion-reduce:transition-none cursor-pointer"
-      :class="checked ? 'bg-accent border-transparent shadow-sm' : 'bg-bg border border-border/50'"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer"
+      :class="checked ? 'bg-accent border-accent' : 'bg-fg/50 border-fg/50'"
       aria-hidden="true"
     >
       <span
-        class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-        :class="checked ? 'bg-bg' : 'bg-fg-muted'"
+        class="block h-5 w-5 rounded-full bg-bg shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none"
       />
     </span>
   </button>

app/pages/package/[...package].vue

@@ -882,26 +882,28 @@ onKeyStroke(
               <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
 
               <!-- Separator and total transitive deps -->
-              <span class="text-fg-subtle mx-1">/</span>
+              <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
+                <span class="text-fg-subtle mx-1">/</span>
 
-              <ClientOnly>
-                <span
-                  v-if="
-                    vulnTreeStatus === 'pending' || (installSizeStatus === 'pending' && !vulnTree)
-                  "
-                  class="inline-flex items-center gap-1 text-fg-subtle"
-                >
+                <ClientOnly>
                   <span
-                    class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                    aria-hidden="true"
-                  />
-                </span>
-                <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
-                <span v-else class="text-fg-subtle">-</span>
-                <template #fallback>
-                  <span class="text-fg-subtle">-</span>
-                </template>
-              </ClientOnly>
+                    v-if="
+                      vulnTreeStatus === 'pending' || (installSizeStatus === 'pending' && !vulnTree)
+                    "
+                    class="inline-flex items-center gap-1 text-fg-subtle"
+                  >
+                    <span
+                      class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                      aria-hidden="true"
+                    />
+                  </span>
+                  <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
+                  <span v-else class="text-fg-subtle">-</span>
+                  <template #fallback>
+                    <span class="text-fg-subtle">-</span>
+                  </template>
+                </ClientOnly>
+              </template>
 
               <a
                 v-if="getDependencyCount(displayVersion) > 0"
@@ -951,21 +953,23 @@ onKeyStroke(
               </span>
 
               <!-- Separator and install size -->
-              <span class="text-fg-subtle mx-1">/</span>
+              <template v-if="getDependencyCount(displayVersion) > 0">
+                <span class="text-fg-subtle mx-1">/</span>
 
-              <span
-                v-if="installSizeStatus === 'pending'"
-                class="inline-flex items-center gap-1 text-fg-subtle"
-              >
                 <span
-                  class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                  aria-hidden="true"
-                />
-              </span>
-              <span v-else-if="installSize?.totalSize">
-                {{ formatBytes(installSize.totalSize) }}
-              </span>
-              <span v-else class="text-fg-subtle">-</span>
+                  v-if="installSizeStatus === 'pending'"
+                  class="inline-flex items-center gap-1 text-fg-subtle"
+                >
+                  <span
+                    class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                    aria-hidden="true"
+                  />
+                </span>
+                <span v-else-if="installSize?.totalSize">
+                  {{ formatBytes(installSize.totalSize) }}
+                </span>
+                <span v-else class="text-fg-subtle">-</span>
+              </template>
             </dd>
           </div>
 
@@ -1188,17 +1192,11 @@ onKeyStroke(
         <div
           class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
         >
-          <!-- Maintainers (with admin actions when connected) -->
-          <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
-
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>
             <PackageAccessControls :package-name="pkg.name" />
           </ClientOnly>
 
-          <!-- Keywords -->
-          <PackageKeywords :keywords="displayVersion?.keywords" />
-
           <!-- Agent Skills -->
           <ClientOnly>
             <PackageSkillsCard
@@ -1246,6 +1244,12 @@ onKeyStroke(
             :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
             :optional-dependencies="displayVersion.optionalDependencies"
           />
+
+          <!-- Keywords -->
+          <PackageKeywords :keywords="displayVersion?.keywords" />
+
+          <!-- Maintainers (with admin actions when connected) -->
+          <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
         </div>
       </div>
     </article>