Merge branch 'main' into feat/org-packages-fancy

Author: serhalp

app/components/PackageDownloadAnalytics.vue

@@ -467,6 +467,12 @@ const config = computed(() => {
           table: false,
           tooltip: false,
         },
+        buttonTitles: {
+          csv: $t('package.downloads.download_file', { fileType: 'CSV' }),
+          img: $t('package.downloads.download_file', { fileType: 'PNG' }),
+          svg: $t('package.downloads.download_file', { fileType: 'SVG' }),
+          annotator: $t('package.downloads.toggle_annotator'),
+        },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
             loadFile(

app/composables/useSettings.ts

@@ -14,12 +14,15 @@ export interface AppSettings {
   includeTypesInInstall: boolean
   /** Accent color theme */
   accentColorId: AccentColorId | null
+  /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
+  hidePlatformPackages: boolean
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
   relativeDates: false,
   includeTypesInInstall: true,
   accentColorId: null,
+  hidePlatformPackages: true,
 }
 
 const STORAGE_KEY = 'npmx-settings'

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

@@ -820,14 +820,6 @@ defineOgImageComponent('Package', {
         </dl>
       </header>
 
-      <!-- Security vulnerabilities warning -->
-      <PackageVulnerabilities
-        v-if="displayVersion"
-        :package-name="pkg.name"
-        :version="displayVersion.version"
-        class="area-vulns"
-      />
-
       <!-- Binary-only packages: Show only execute command (no install) -->
       <section v-if="isBinaryOnly" aria-labelledby="run-heading" class="area-install scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3">

app/pages/search.vue

@@ -3,6 +3,7 @@ import { formatNumber } from '#imports'
 import type { FilterChip, SortOption } from '#shared/types/preferences'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
+import { isPlatformSpecificPackage } from '~/utils/platform-packages'
 
 const route = useRoute()
 const router = useRouter()
@@ -131,22 +132,37 @@ const rawVisibleResults = computed(() => {
   return results.value
 })
 
+// Settings for platform package filtering
+const { settings } = useSettings()
+
 /**
- * Reorder results to put exact package name match at the top
+ * Reorder results to put exact package name match at the top,
+ * and optionally filter out platform-specific packages.
  */
 const visibleResults = computed(() => {
   const raw = rawVisibleResults.value
   if (!raw) return raw
 
+  let objects = raw.objects
+
+  // Filter out platform-specific packages if setting is enabled
+  if (settings.value.hidePlatformPackages) {
+    objects = objects.filter(r => !isPlatformSpecificPackage(r.package.name))
+  }
+
   const q = query.value.trim().toLowerCase()
-  if (!q) return raw
+  if (!q) {
+    return objects === raw.objects ? raw : { ...raw, objects }
+  }
 
   // Find exact match index
-  const exactIdx = raw.objects.findIndex(r => r.package.name.toLowerCase() === q)
-  if (exactIdx <= 0) return raw // Already at top or not found
+  const exactIdx = objects.findIndex(r => r.package.name.toLowerCase() === q)
+  if (exactIdx <= 0) {
+    return objects === raw.objects ? raw : { ...raw, objects }
+  }
 
   // Move exact match to top
-  const reordered = [...raw.objects]
+  const reordered = [...objects]
   const [exactMatch] = reordered.splice(exactIdx, 1)
   if (exactMatch) {
     reordered.unshift(exactMatch)

app/pages/settings.vue

@@ -163,6 +163,43 @@ defineOgImageComponent('Default', {
                 {{ $t('settings.include_types_description') }}
               </p>
             </div>
+
+            <!-- Divider -->
+            <div class="border-t border-border" />
+
+            <!-- Hide platform-specific packages toggle -->
+            <div class="space-y-2">
+              <button
+                type="button"
+                class="w-full flex items-center justify-between gap-4 group"
+                role="switch"
+                :aria-checked="settings.hidePlatformPackages"
+                @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
+              >
+                <span class="text-sm text-fg font-medium text-left">
+                  {{ $t('settings.hide_platform_packages') }}
+                </span>
+                <span
+                  class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
+                  :class="
+                    settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
+                  "
+                  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="
+                      settings.hidePlatformPackages
+                        ? 'translate-x-5 bg-bg'
+                        : 'translate-x-0 bg-fg-muted'
+                    "
+                  />
+                </span>
+              </button>
+              <p class="text-sm text-fg-muted">
+                {{ $t('settings.hide_platform_packages_description') }}
+              </p>
+            </div>
           </div>
         </section>
 

app/utils/platform-packages.ts

@@ -0,0 +1,75 @@
+/**
+ * Detects if a package name is a platform-specific native binary package.
+ * These are typically optional dependencies that contain native binaries
+ * for specific OS/architecture combinations (e.g., @oxlint/win32-x64, esbuild-darwin-arm64).
+ * Sourced from searches for esbuild, and the napi-rs build triplets support matrix.
+ */
+
+const PLATFORMS = new Set([
+  'win32',
+  'darwin',
+  'linux',
+  'android',
+  'freebsd',
+  'openbsd',
+  'netbsd',
+  'sunos',
+  'aix',
+])
+
+const ARCHITECTURES = new Set([
+  'x64',
+  'arm64',
+  'arm',
+  'ia32',
+  'ppc64',
+  'ppc64le',
+  's390x',
+  'riscv64',
+  'mips64el',
+  'loong64',
+])
+
+const ABI_SUFFIXES = new Set(['gnu', 'musl', 'msvc', 'gnueabihf'])
+
+/**
+ * Checks if a package name is a platform-specific native binary package.
+ * Matches patterns like:
+ * - @scope/pkg-win32-x64
+ * - @scope/pkg-linux-arm64-gnu
+ * - pkg-darwin-arm64
+ * - @rollup/rollup-linux-x64-musl
+ *
+ * @param name - The full package name (including scope if present)
+ * @returns true if the package appears to be a platform-specific binary
+ */
+export function isPlatformSpecificPackage(name: string): boolean {
+  const unscopedName = name.startsWith('@') ? (name.split('/')[1] ?? '') : name
+  if (!unscopedName) return false
+
+  const parts = unscopedName.split('-')
+  if (parts.length < 2) return false
+
+  // Look for OS-arch pattern anywhere in the name as suffix parts
+  // e.g., "pkg-linux-x64-gnu" -> ["pkg", "linux", "x64", "gnu"]
+  for (let i = 0; i < parts.length - 1; i++) {
+    const os = parts[i]
+    const arch = parts[i + 1]
+
+    if (os && arch && PLATFORMS.has(os) && ARCHITECTURES.has(arch)) {
+      // Optional ABI suffix check (next part if exists)
+      const abiSuffix = parts[i + 2]
+      if (abiSuffix && !ABI_SUFFIXES.has(abiSuffix)) {
+        // NOTE: Has an extra part after arch but it's not a known ABI - might be a false positive??
+        // but still consider it a match if OS+arch pattern is found at the end
+        if (i + 2 === parts.length - 1) {
+          // Extra unknown suffix at the end - be conservative
+          continue
+        }
+      }
+      return true
+    }
+  }
+
+  return false
+}

i18n/locales/de-DE.json

@@ -9,13 +9,15 @@
   "non_affiliation_disclaimer": "nicht verbunden mit npm, Inc.",
   "trademark_disclaimer": "npm ist eine eingetragene Marke von npm, Inc. Diese Seite ist nicht mit npm, Inc. verbunden.",
   "footer": {
+    "site_footer": "Fusszeile",
     "about": "über uns",
     "docs": "Doku",
     "source": "Quellcode",
     "social": "Social",
     "chat": "Chat"
   },
   "search": {
+    "results": "Suchergebnisse",
     "label": "npm-Pakete durchsuchen",
     "placeholder": "Pakete suchen...",
     "button": "Suchen",
@@ -38,22 +40,46 @@
     }
   },
   "nav": {
+    "main_navigation": "Hauptnavigation",
+    "back": "Zurück",
     "popular_packages": "Beliebte Pakete",
     "search": "Suche",
     "settings": "Einstellungen"
   },
   "settings": {
+    "title": "Einstellungen",
+    "tagline": "Passe npmx an deine Vorlieben an",
+    "meta_description": "Einstellungen für npmx konfigurieren - Design, Sprache, Datumsformat und mehr anpassen",
+    "sections": {
+      "appearance": "Erscheinungsbild",
+      "display": "Anzeige",
+      "language": "Sprache"
+    },
     "relative_dates": "Relative Datumsangaben",
+    "relative_dates_description": "Zeige Daten relativ zur aktuellen Zeit an (z.B. 'vor 2 Tagen')",
     "include_types": "{'@'}types bei Installation einschließen",
+    "include_types_description": "TypeScript-Typdefinitionen ({'@'}types-Pakete) automatisch bei Installationsbefehlen einschließen",
     "theme": "Design",
     "theme_light": "Hell",
     "theme_dark": "Dunkel",
     "theme_system": "System",
     "language": "Sprache",
     "help_translate": "Hilf bei der Übersetzung von npmx",
-    "accent_colors": "Akzentfarben"
+    "accent_colors": "Akzentfarben",
+    "clear_accent": "Akzentfarbe zurücksetzen",
+    "translation_progress": "Übersetzungsfortschritt: {progress}%"
+  },
+  "i18n": {
+    "missing_keys": "{count} fehlende Übersetzung | {count} fehlende Übersetzungen",
+    "copy_keys": "Schlüssel kopieren",
+    "show_more_keys": "{count} weitere Schlüssel anzeigen",
+    "contribute_hint": "Hilf mit, npmx in deine Sprache zu übersetzen!",
+    "edit_on_github": "Auf GitHub bearbeiten",
+    "view_guide": "Übersetzungsleitfaden anzeigen"
   },
   "common": {
+    "skip_link": "Zum Hauptinhalt springen",
+    "close_modal": "Modal schließen",
     "loading": "Lädt...",
     "loading_more": "Lädt mehr...",
     "loading_packages": "Pakete werden geladen...",
@@ -76,6 +102,7 @@
     "scroll_to_top": "Nach oben scrollen"
   },
   "package": {
+    "navigation": "Paketnavigation",
     "not_found": "Paket nicht gefunden",
     "not_found_message": "Das Paket konnte nicht gefunden werden.",
     "no_description": "Keine Beschreibung vorhanden",
@@ -105,6 +132,10 @@
       "docs": "Doku",
       "fund": "Spenden"
     },
+    "docs": {
+      "not_available": "Dokumentation nicht verfügbar",
+      "not_available_detail": "Für dieses Paket ist keine Dokumentation verfügbar"
+    },
     "create": {
       "title": "Neues Projekt erstellen",
       "copy_command": "Erstellungsbefehl kopieren"
@@ -113,6 +144,12 @@
       "title": "Ausführen",
       "locally": "Lokal ausführen"
     },
+    "get_started": {
+      "title": "Erste Schritte",
+      "pm_label": "Paketmanager",
+      "copy_command": "Installationsbefehl kopieren",
+      "view_types": "Typdefinitionen anzeigen"
+    },
     "readme": {
       "title": "Readme",
       "no_readme": "Kein README vorhanden.",
@@ -144,7 +181,8 @@
       "title": "Abhängigkeiten ({count})",
       "list_label": "Paketabhängigkeiten",
       "show_all": "alle {count} Deps anzeigen",
-      "optional": "optional"
+      "optional": "optional",
+      "view_vulnerabilities": "Sicherheitslücken anzeigen"
     },
     "peer_dependencies": {
       "title": "Peer-Abhängigkeiten ({count})",
@@ -197,16 +235,39 @@
     "license": {
       "view_spdx": "Lizenztext auf SPDX ansehen"
     },
+    "metrics": {
+      "esm": "ESM",
+      "cjs": "CJS",
+      "no_esm": "Kein ESM",
+      "types_included": "Typen enthalten",
+      "types_available": "Typen verfügbar",
+      "no_types": "Keine Typen"
+    },
     "vulnerabilities": {
       "no_description": "Keine Beschreibung verfügbar",
       "found": "{count} Sicherheitslücke gefunden | {count} Sicherheitslücken gefunden",
       "no_summary": "Keine Zusammenfassung",
       "view_details": "Details zur Sicherheitslücke anzeigen",
+      "deps_found": "{count} Abhängigkeit mit Sicherheitslücken gefunden | {count} Abhängigkeiten mit Sicherheitslücken gefunden",
+      "deps_affected": "{count} betroffene Abhängigkeit | {count} betroffene Abhängigkeiten",
+      "tree_found": "{count} Sicherheitslücke im Abhängigkeitsbaum gefunden | {count} Sicherheitslücken im Abhängigkeitsbaum gefunden",
+      "scanning_tree": "Abhängigkeitsbaum wird gescannt...",
+      "show_all_packages": "Alle {count} Pakete anzeigen",
+      "path": "Pfad",
+      "more": "+{count} weitere",
+      "packages_failed": "Einige Pakete konnten nicht gescannt werden",
+      "no_known": "Keine bekannten Sicherheitslücken",
+      "scan_failed": "Scan fehlgeschlagen",
       "severity": {
         "critical": "kritisch",
         "high": "hoch",
         "moderate": "mittel",
         "low": "niedrig"
+      },
+      "depth": {
+        "root": "Root-Paket",
+        "direct": "Direkte Abhängigkeit",
+        "transitive": "Transitive Abhängigkeit"
       }
     },
     "access": {
@@ -505,9 +566,35 @@
         "package": "Paketmanager",
         "managers": "bauen"
       }
+    },
+    "contributors": {
+      "title": "Mitwirkende",
+      "description": "npmx wird von einer wachsenden Community von Mitwirkenden entwickelt",
+      "loading": "Mitwirkende werden geladen...",
+      "error": "Mitwirkende konnten nicht geladen werden",
+      "view_profile": "Profil von {name} anzeigen"
+    },
+    "get_involved": {
+      "title": "Mitmachen",
+      "contribute": {
+        "title": "Beitragen",
+        "description": "Hilf mit, npmx zu verbessern - melde Bugs, schlage Features vor oder trage Code bei",
+        "cta": "Auf GitHub beitragen"
+      },
+      "community": {
+        "title": "Community",
+        "description": "Tritt unserer Community bei, stelle Fragen und tausche dich mit anderen Nutzern aus",
+        "cta": "Community beitreten"
+      },
+      "follow": {
+        "title": "Folgen",
+        "description": "Bleib auf dem Laufenden über neue Features und Updates",
+        "cta": "Folgen"
+      }
     }
   },
   "header": {
+    "site_header": "Seitenkopf",
     "home": "npmx Startseite",
     "github": "GitHub",
     "packages": "Pakete",