Merge remote-tracking branch 'origin/main' into feat/more-badges

# Conflicts:
#	server/api/registry/badge/[...pkg].get.ts

Author: danielroe

app/app.vue

@@ -21,6 +21,16 @@ const localeMap = locales.value.reduce(
   {} as Record<string, Directions>,
 )
 
+const darkMode = usePreferredDark()
+const colorMode = useColorMode()
+const colorScheme = computed(() => {
+  return {
+    system: darkMode ? 'dark light' : 'light dark',
+    light: 'only light',
+    dark: 'only dark',
+  }[colorMode.preference]
+})
+
 useHead({
   htmlAttrs: {
     'lang': () => locale.value,
@@ -30,6 +40,7 @@ useHead({
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
   },
+  meta: [{ name: 'color-scheme', content: colorScheme }],
 })
 
 if (import.meta.server) {

app/assets/main.css

@@ -75,6 +75,32 @@
   --badge-cyan: oklch(0.571 0.181 210);
 }
 
+@media (prefers-contrast: more) {
+  :root[data-theme='dark'] {
+    /* text colors */
+    --fg: oklch(1 0 0);
+    --fg-muted: oklch(0.769 0 0);
+    --fg-subtle: oklch(0.693 0 0);
+
+    /* border, separator colors */
+    --border: oklch(0.769 0 0);
+    --border-subtle: oklch(0.739 0 0);
+    --border-hover: oklch(0.771 0 0);
+  }
+
+  :root[data-theme='light'] {
+    /* text colors */
+    --fg: oklch(0 0 0);
+    --fg-muted: oklch(0.329 0 0);
+    --fg-subtle: oklch(0.4 0 0);
+
+    /* border, separator colors */
+    --border: oklch(0.3514 0 0);
+    --border-subtle: oklch(0.422 0 0);
+    --border-hover: oklch(0.315 0 0);
+  }
+}
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/components/CallToAction.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const socialLinks = {
+  github: 'https://repo.npmx.dev',
+  discord: 'https://chat.npmx.dev',
+  bluesky: 'https://social.npmx.dev',
+}
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-6">
+      {{ $t('about.get_involved.title') }}
+    </h2>
+
+    <div class="grid gap-4 sm:grid-cols-3">
+      <a
+        :href="socialLinks.github"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+      >
+        <div class="flex gap-2">
+          <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+          <span class="font-medium text-fg">
+            {{ $t('about.get_involved.contribute.title') }}
+          </span>
+        </div>
+        <p class="text-sm text-fg-muted leading-relaxed">
+          {{ $t('about.get_involved.contribute.description') }}
+        </p>
+        <span
+          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        >
+          {{ $t('about.get_involved.contribute.cta') }}
+          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+        </span>
+      </a>
+
+      <a
+        :href="socialLinks.discord"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+      >
+        <div class="flex gap-2">
+          <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+          <span class="font-medium text-fg">
+            {{ $t('about.get_involved.community.title') }}
+          </span>
+        </div>
+        <p class="text-sm text-fg-muted leading-relaxed">
+          {{ $t('about.get_involved.community.description') }}
+        </p>
+        <span
+          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        >
+          {{ $t('about.get_involved.community.cta') }}
+          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+        </span>
+      </a>
+
+      <a
+        :href="socialLinks.bluesky"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+      >
+        <div class="flex gap-2">
+          <span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+          <span class="font-medium text-fg">
+            {{ $t('about.get_involved.follow.title') }}
+          </span>
+        </div>
+        <p class="text-sm text-fg-muted leading-relaxed">
+          {{ $t('about.get_involved.follow.description') }}
+        </p>
+        <span
+          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        >
+          {{ $t('about.get_involved.follow.cta') }}
+          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+        </span>
+      </a>
+    </div>
+  </div>
+</template>

app/components/Header/SearchBox.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
+import { normalizeSearchParam } from '#shared/utils/url'
 
 withDefaults(
   defineProps<{
@@ -22,9 +23,7 @@ const showSearchBar = computed(() => {
 })
 
 // Local input value (updates immediately as user types)
-const searchQuery = shallowRef(
-  (Array.isArray(route.query.q) ? route.query.q[0] : route.query.q) ?? '',
-)
+const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
@@ -64,7 +63,7 @@ watch(
     if (pagesWithLocalFilter.has(route.name as string)) {
       return
     }
-    const value = (urlQuery as string) ?? ''
+    const value = normalizeSearchParam(urlQuery)
     if (searchQuery.value !== value) {
       searchQuery.value = value
     }

app/components/Package/Card.vue

@@ -32,7 +32,7 @@ const pkgDescription = useMarkdown(() => ({
   <article
     class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'border-accent/30 bg-accent/5': isExactMatch,
+      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
     }"
   >
     <!-- Glow effect for exact matches -->

app/components/Package/DownloadAnalytics.vue

@@ -19,26 +19,9 @@ const rootEl = shallowRef<HTMLElement | null>(null)
 
 const { width } = useElementSize(rootEl)
 
-const chartKey = ref(0)
-
-let chartRemountTimeoutId: ReturnType<typeof setTimeout> | null = null
-
 onMounted(() => {
   rootEl.value = document.documentElement
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
-
-  // If the chart is painted too early, built-in auto-sizing does not adapt to the final container size
-  chartRemountTimeoutId = setTimeout(() => {
-    chartKey.value += 1
-    chartRemountTimeoutId = null
-  }, 10)
-})
-
-onBeforeUnmount(() => {
-  if (chartRemountTimeoutId !== null) {
-    clearTimeout(chartRemountTimeoutId)
-    chartRemountTimeoutId = null
-  }
 })
 
 const { colors } = useCssVariables(
@@ -705,12 +688,7 @@ const config = computed(() => {
     </div>
 
     <ClientOnly v-if="inModal && chartData.dataset">
-      <VueUiXy
-        :dataset="chartData.dataset"
-        :config="config"
-        class="[direction:ltr]"
-        :key="chartKey"
-      >
+      <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
         <template #menuIcon="{ isOpen }">
           <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
           <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />

app/components/Package/Versions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PackageVersionInfo, PackumentVersion } from '#shared/types'
+import type { PackageVersionInfo, SlimVersion } from '#shared/types'
 import { compare } from 'semver'
 import type { RouteLocationRaw } from 'vue-router'
 import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
@@ -14,7 +14,7 @@ import {
 
 const props = defineProps<{
   packageName: string
-  versions: Record<string, PackumentVersion>
+  versions: Record<string, SlimVersion>
   distTags: Record<string, string>
   time: Record<string, string>
 }>()
@@ -31,13 +31,6 @@ interface VersionDisplay {
   deprecated?: string
 }
 
-// Check if a version has provenance/attestations
-function hasProvenance(version: PackumentVersion | undefined): boolean {
-  if (!version?.dist) return false
-  const dist = version.dist as { attestations?: unknown }
-  return !!dist.attestations
-}
-
 // Build route object for package version link
 function versionRoute(version: string): RouteLocationRaw {
   return {
@@ -53,10 +46,7 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 // Deduplicates so each version appears only once, with all its tags
 const allTagRows = computed(() => {
   // Group tags by version with their metadata
-  const versionMap = new Map<
-    string,
-    { tags: string[]; versionData: PackumentVersion | undefined }
-  >()
+  const versionMap = new Map<string, { tags: string[]; versionData: SlimVersion | undefined }>()
   for (const [tag, version] of Object.entries(props.distTags)) {
     const existing = versionMap.get(version)
     if (existing) {
@@ -88,7 +78,7 @@ const allTagRows = computed(() => {
         version,
         time: props.time[version],
         tags,
-        hasProvenance: hasProvenance(versionData),
+        hasProvenance: versionData?.hasProvenance,
         deprecated: versionData?.deprecated,
       } as VersionDisplay,
     }))

app/components/Package/WeeklyDownloadStats.vue

@@ -5,6 +5,7 @@ import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
   packageName: string
+  createdIso: string | null
 }>()
 
 const chartModal = useModal('chart-modal')
@@ -16,9 +17,6 @@ function openChartModal() {
   nextTick(() => chartModal.open())
 }
 
-const { data: packument } = usePackage(() => props.packageName)
-const createdIso = computed(() => packument.value?.time?.created ?? null)
-
 const { fetchPackageDownloadEvolution } = useCharts()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
@@ -92,7 +90,7 @@ async function loadWeeklyDownloads() {
   try {
     const result = await fetchPackageDownloadEvolution(
       () => props.packageName,
-      () => createdIso.value,
+      () => props.createdIso,
       () => ({ granularity: 'week' as const, weeks: 52 }),
     )
     weeklyDownloads.value = (result as WeeklyDownloadPoint[]) ?? []