Merge branch 'main' of github.com:npmx-dev/npmx.dev into feat/version-selection

Author: shamilkotta

.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/AppHeader.vue

@@ -109,7 +109,7 @@ onKeyStroke(
           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 rounded"
+          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
@@ -185,19 +185,14 @@ onKeyStroke(
           <HeaderAccountMenu />
         </div>
 
-        <!-- Mobile: Menu button (always visible, toggles menu) -->
+        <!-- Mobile: Menu button (always visible, click to open menu) -->
         <button
           type="button"
           class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
-          :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
-          :aria-expanded="showMobileMenu"
-          @click="showMobileMenu = !showMobileMenu"
+          :aria-label="$t('nav.open_menu')"
+          @click="showMobileMenu = true"
         >
-          <span
-            class="w-6 h-6 inline-block"
-            :class="showMobileMenu ? 'i-carbon:close' : 'i-carbon:menu'"
-            aria-hidden="true"
-          />
+          <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
         </button>
       </div>
     </nav>

app/components/AppLogo.vue

@@ -15,7 +15,7 @@ defineProps<{
   >
     <title>{{ $t('alt_logo') }}</title>
     <rect fill="var(--bg)" width="512" height="512" rx="64" />
-    <rect fill="var(--fg)" x="110" y="310" width="60" height="60" />
+    <rect fill="currentColor" x="110" y="310" width="60" height="60" />
     <text
       fill="var(--accent)"
       x="320"

app/components/CollapsibleSection.vue

@@ -125,10 +125,10 @@ useHead({
 
     <div
       :id="contentId"
-      class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+      class="grid ms-6 grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
       :inert="!isOpen"
     >
-      <div class="min-h-0 min-w-0 p-1">
+      <div class="min-h-0 min-w-0">
         <slot />
       </div>
     </div>

app/components/Compare/ComparisonGrid.vue

@@ -1,34 +1,101 @@
 <script setup lang="ts">
-defineProps<{
-  /** Number of columns (2-4) */
-  columns: number
-  /** Column headers (package names or version numbers) */
-  headers: string[]
+import type { ModuleReplacement } from 'module-replacements'
+
+export interface ComparisonGridColumn {
+  /** Display text (e.g. "lodash@4.17.21") */
+  header: string
+  /** Module replacement data for this package (if available) */
+  replacement?: ModuleReplacement | null
+}
+
+const props = defineProps<{
+  /** Column definitions for each package being compared */
+  columns: ComparisonGridColumn[]
+  /** Whether to show the "no dependency" baseline as the last column */
+  showNoDependency?: boolean
 }>()
+
+/** Total column count including the optional no-dep column */
+const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0))
+
+/** Compute plain-text tooltip for a replacement column */
+function getReplacementTooltip(col: ComparisonGridColumn): string {
+  if (!col.replacement) return ''
+
+  return [$t('package.replacement.title'), $t('package.replacement.learn_more_above')].join(' ')
+}
 </script>
 
 <template>
   <div class="overflow-x-auto">
     <div
       class="comparison-grid"
-      :class="[columns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${columns}`]"
-      :style="{ '--columns': columns }"
+      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
+      :style="{ '--columns': totalColumns }"
     >
       <!-- Header row -->
       <div class="comparison-header">
         <div class="comparison-label" />
+
+        <!-- Package columns -->
         <div
-          v-for="(header, index) in headers"
-          :key="index"
+          v-for="col in columns"
+          :key="col.header"
           class="comparison-cell comparison-cell-header"
         >
-          <NuxtLink
-            :to="`/package/${header}`"
-            class="link-subtle font-mono text-sm font-medium text-fg truncate"
-            :title="header"
+          <span class="inline-flex items-center gap-1.5 truncate">
+            <NuxtLink
+              :to="`/package/${col.header}`"
+              class="link-subtle font-mono text-sm font-medium text-fg truncate"
+              :title="col.header"
+            >
+              {{ col.header }}
+            </NuxtLink>
+            <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
+              <span
+                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                role="img"
+                :aria-label="$t('package.replacement.title')"
+              />
+            </TooltipApp>
+          </span>
+        </div>
+
+        <!-- "No dep" column (always last) -->
+        <div
+          v-if="showNoDependency"
+          class="comparison-cell comparison-cell-header comparison-cell-nodep"
+        >
+          <span
+            class="inline-flex items-center gap-1.5 text-sm font-medium text-accent italic truncate"
           >
-            {{ header }}
-          </NuxtLink>
+            {{ $t('compare.no_dependency.label') }}
+            <TooltipApp interactive position="bottom">
+              <span
+                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                role="img"
+                :aria-label="$t('compare.no_dependency.tooltip_title')"
+              />
+              <template #content>
+                <p class="text-sm font-medium text-fg mb-1">
+                  {{ $t('compare.no_dependency.tooltip_title') }}
+                </p>
+                <p class="text-xs text-fg-muted">
+                  <i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
+                    <template #link>
+                      <a
+                        href="https://e18e.dev/docs/replacements/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-accent hover:underline"
+                        >{{ $t('compare.no_dependency.e18e_community') }}</a
+                      >
+                    </template>
+                  </i18n-t>
+                </p>
+              </template>
+            </TooltipApp>
+          </span>
         </div>
       </div>
 
@@ -72,6 +139,16 @@ defineProps<{
   text-align: center;
 }
 
+/* "No dep" column styling */
+.comparison-header > .comparison-cell-header.comparison-cell-nodep {
+  background: linear-gradient(
+    135deg,
+    var(--color-bg-subtle) 0%,
+    color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-subtle)) 100%
+  );
+  border-bottom-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
+}
+
 /* First header cell rounded top-start */
 .comparison-header > .comparison-cell-header:first-of-type {
   border-start-start-radius: 0.5rem;

app/components/Compare/PackageSelector.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
+
 const packages = defineModel<string[]>({ required: true })
 
 const props = defineProps<{
@@ -17,6 +19,29 @@ const { data: searchData, status } = useNpmSearch(inputValue, { size: 15 })
 
 const isSearching = computed(() => status.value === 'pending')
 
+// Trigger strings for "What Would James Do?" typeahead Easter egg
+// Intentionally not localized
+const EASTER_EGG_TRIGGERS = new Set([
+  'no dep',
+  'none',
+  'vanilla',
+  'diy',
+  'zero',
+  'nothing',
+  '0',
+  "don't",
+  'native',
+  'use the platform',
+])
+
+// Check if "no dependency" option should show in typeahead
+const showNoDependencyOption = computed(() => {
+  if (packages.value.includes(NO_DEPENDENCY_ID)) return false
+  const input = inputValue.value.toLowerCase().trim()
+  if (!input) return false
+  return EASTER_EGG_TRIGGERS.has(input)
+})
+
 // Filter out already selected packages
 const filteredResults = computed(() => {
   if (!searchData.value?.objects) return []
@@ -32,7 +57,16 @@ function addPackage(name: string) {
   if (packages.value.length >= maxPackages.value) return
   if (packages.value.includes(name)) return
 
-  packages.value = [...packages.value, name]
+  // Keep NO_DEPENDENCY_ID always last
+  if (name === NO_DEPENDENCY_ID) {
+    packages.value = [...packages.value, name]
+  } else if (packages.value.includes(NO_DEPENDENCY_ID)) {
+    // Insert before the no-dep entry
+    const withoutNoDep = packages.value.filter(p => p !== NO_DEPENDENCY_ID)
+    packages.value = [...withoutNoDep, name, NO_DEPENDENCY_ID]
+  } else {
+    packages.value = [...packages.value, name]
+  }
   inputValue.value = ''
 }
 
@@ -63,16 +97,28 @@ function handleBlur() {
         :key="pkg"
         class="inline-flex items-center gap-2 px-3 py-1.5 bg-bg-subtle border border-border rounded-md"
       >
+        <!-- No dependency display -->
+        <template v-if="pkg === NO_DEPENDENCY_ID">
+          <span class="text-sm text-accent italic flex items-center gap-1.5">
+            <span class="i-carbon:clean w-3.5 h-3.5" aria-hidden="true" />
+            {{ $t('compare.no_dependency.label') }}
+          </span>
+        </template>
         <NuxtLink
+          v-else
           :to="`/package/${pkg}`"
           class="font-mono text-sm text-fg hover:text-accent transition-colors"
         >
           {{ pkg }}
         </NuxtLink>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-accent/70 rounded"
-          :aria-label="$t('compare.selector.remove_package', { package: pkg })"
+          class="text-fg-subtle hover:text-fg transition-colors rounded"
+          :aria-label="
+            $t('compare.selector.remove_package', {
+              package: pkg === NO_DEPENDENCY_ID ? $t('compare.no_dependency.label') : pkg,
+            })
+          "
           @click="removePackage(pkg)"
         >
           <span class="i-carbon:close flex items-center w-3.5 h-3.5" aria-hidden="true" />
@@ -118,17 +164,36 @@ function handleBlur() {
         leave-to-class="opacity-0"
       >
         <div
-          v-if="isInputFocused && (filteredResults.length > 0 || isSearching)"
+          v-if="
+            isInputFocused && (filteredResults.length > 0 || isSearching || showNoDependencyOption)
+          "
           class="absolute top-full inset-x-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
         >
+          <!-- No dependency option (easter egg with James) -->
+          <button
+            v-if="showNoDependencyOption"
+            type="button"
+            class="w-full text-start px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted border-b border-border/50"
+            :aria-label="$t('compare.no_dependency.add_column')"
+            @click="addPackage(NO_DEPENDENCY_ID)"
+          >
+            <div class="text-sm text-accent italic flex items-center gap-2">
+              <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
+              {{ $t('compare.no_dependency.typeahead_title') }}
+            </div>
+            <div class="text-xs text-fg-muted truncate mt-0.5">
+              {{ $t('compare.no_dependency.typeahead_description') }}
+            </div>
+          </button>
+
           <div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
             {{ $t('compare.selector.searching') }}
           </div>
           <button
             v-for="result in filteredResults"
             :key="result.name"
             type="button"
-            class="w-full text-left px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted"
+            class="w-full text-start px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted"
             @click="addPackage(result.name)"
           >
             <div class="font-mono text-sm text-fg">{{ result.name }}</div>
@@ -142,7 +207,12 @@ function handleBlur() {
 
     <!-- Hint -->
     <p class="text-xs text-fg-subtle">
-      {{ $t('compare.selector.packages_selected', { count: packages.length, max: maxPackages }) }}
+      {{
+        $t('compare.selector.packages_selected', {
+          count: packages.length,
+          max: maxPackages,
+        })
+      }}
       <span v-if="packages.length < 2">{{ $t('compare.selector.add_hint') }}</span>
     </p>
   </div>