Merge branch 'main' of https://github.com/alex-key/npmx.dev into feat/kbd-shortcuts-switcher

Author: alex-key

.github/workflows/chromatic.yml

@@ -17,14 +17,14 @@ jobs:
   chromatic:
     name: 📚 Chromatic
     runs-on: ubuntu-24.04-arm
-    if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }}
 
     steps:
       - name: ☑️ Checkout
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.ref || github.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
@@ -38,10 +38,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🧪 Run Chromatic Visual Tests
+      - name: 🧪 Run Chromatic Visual and Accessibility Tests
         uses: chromaui/action@a8ce9c58f59be5cc7090cadfc8f130fb08fcf0c3 # v15.1.0
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
         env:
           CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
           CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}

app/assets/logos/sponsors/index.ts

@@ -2,20 +2,24 @@ import LogoVercel from './vercel.svg'
 import LogoVercelLight from './vercel-light.svg'
 import LogoVoidZero from './void-zero.svg'
 import LogoVoidZeroLight from './void-zero-light.svg'
+import LogoVlt from './vlt.svg'
+import LogoVltLight from './vlt-light.svg'
 
 // The list is used on the about page. To add, simply upload the logos nearby and add an entry here. Prefer SVGs.
 // For logo src, specify a string or object with the light and dark theme variants.
 // Prefer original assets from partner sites to keep their brand identity.
 //
 // If there are no original assets and the logo is not universal, you can add only the dark theme variant
 // and specify 'auto' for the light one - this will grayscale the logo and invert it in light mode.
+// The normalisingIndent is the Y-axis space to visually stabilize favicon-only logos with logotypes that contain long name.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://vercel.com/',
   },
   {
@@ -24,6 +28,16 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://voidzero.dev/',
   },
+  {
+    name: 'vlt',
+    logo: {
+      dark: LogoVlt,
+      light: LogoVltLight,
+    },
+    normalisingIndent: '0.25rem',
+    url: 'https://vlt.sh/',
+  },
 ]

app/assets/logos/sponsors/vlt-light.svg

@@ -11,30 +11,30 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="typeof src === 'string'">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-9" :alt="alt" />
+    <img :src="src" loading="lazy" height="36" class="w-auto block h-full" :alt="alt" />
   </div>
-  <div v-else-if="src.light === 'auto'">
+  <div v-else-if="src.light === 'auto'" class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:invert light:grayscale h-9"
+      class="w-auto block light:invert light:grayscale h-full"
       :alt="alt"
     />
   </div>
-  <div v-else>
+  <div v-else class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:hidden h-9"
+      class="w-auto block light:hidden h-full"
       :alt="alt"
     />
     <img
       :src="src.light"
       loading="lazy"
       height="36"
-      class="w-auto block hidden light:block h-9"
+      class="w-auto block hidden light:block h-full"
       :alt="alt"
     />
   </div>

app/assets/logos/sponsors/vlt.svg

@@ -2,6 +2,7 @@
 type BaseItem = {
   name: string
   url: string
+  normalisingIndent?: string
   logo:
     | string
     | {
@@ -21,14 +22,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex items-center flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
+  <ul class="flex flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
     <li v-for="item in list" :key="item.name">
       <a
         v-if="'logo' in item"
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex items-center justify-center h-full min-w-11 rounded-md hover:bg-fg/10 transition-colors p-1"
+        class="relative flex items-center justify-center h-14 min-w-14 rounded-md hover:bg-fg/10 transition-colors p-1"
+        :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
@@ -53,7 +55,8 @@ const props = defineProps<{
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center justify-center h-full min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              class="relative flex items-center justify-center h-10 min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />

app/components/About/LogoImg.vue

@@ -18,6 +18,8 @@ import type {
   YearlyDataPoint,
 } from '~/types/chart'
 import { DATE_INPUT_MAX } from '~/utils/input'
+import { applyDataCorrection } from '~/utils/chart-data-correction'
+import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
 import { copyAltTextForTrendLineChart } from '~/utils/charts'
 
 const props = withDefaults(
@@ -51,6 +53,7 @@ const props = withDefaults(
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
+const { settings } = useSettings()
 const { copy, copied } = useClipboard()
 
 const colorMode = useColorMode()
@@ -929,15 +932,35 @@ watch(
 
 const effectiveDataSingle = computed<EvolutionData>(() => {
   const state = activeMetricState.value
+  let data: EvolutionData
   if (
     selectedMetric.value === DEFAULT_METRIC_ID &&
     displayedGranularity.value === DEFAULT_GRANULARITY &&
     props.weeklyDownloads?.length
   ) {
-    if (isWeeklyDataset(state.evolution) && state.evolution.length) return state.evolution
-    return props.weeklyDownloads
+    data =
+      isWeeklyDataset(state.evolution) && state.evolution.length
+        ? state.evolution
+        : props.weeklyDownloads
+  } else {
+    data = state.evolution
   }
-  return state.evolution
+
+  if (isDownloadsMetric.value && data.length) {
+    const pkg = effectivePackageNames.value[0] ?? props.packageName ?? ''
+    if (settings.value.chartFilter.anomaliesFixed) {
+      data = applyBlocklistCorrection({
+        data,
+        packageName: pkg,
+        granularity: displayedGranularity.value,
+      })
+    }
+    return applyDataCorrection(
+      data as Array<{ value: number }>,
+      settings.value.chartFilter,
+    ) as EvolutionData
+  }
+  return data
 })
 
 /**
@@ -971,7 +994,16 @@ const chartData = computed<{
   const pointsByPackage = new Map<string, Array<{ timestamp: number; value: number }>>()
 
   for (const pkg of names) {
-    const data = state.evolutionsByPackage[pkg] ?? []
+    let data = state.evolutionsByPackage[pkg] ?? []
+    if (isDownloadsMetric.value && data.length) {
+      if (settings.value.chartFilter.anomaliesFixed) {
+        data = applyBlocklistCorrection({ data, packageName: pkg, granularity })
+      }
+      data = applyDataCorrection(
+        data as Array<{ value: number }>,
+        settings.value.chartFilter,
+      ) as EvolutionData
+    }
     const points = extractSeriesPoints(granularity, data)
     pointsByPackage.set(pkg, points)
     for (const p of points) timestampSet.add(p.timestamp)
@@ -1428,6 +1460,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
           img: $t('package.trends.download_file', { fileType: 'PNG' }),
           svg: $t('package.trends.download_file', { fileType: 'SVG' }),
           annotator: $t('package.trends.toggle_annotator'),
+          stack: $t('package.trends.toggle_stack_mode'),
           altCopy: $t('package.trends.copy_alt.button_label'), // Do not make this text dependant on the `copied` variable, since this would re-render the component, which is undesirable if the minimap was used to select a time frame.
         },
         callbacks: {
@@ -1598,6 +1631,23 @@ const chartConfig = computed<VueUiXyConfig>(() => {
   }
 })
 
+const isDownloadsMetric = computed(() => selectedMetric.value === 'downloads')
+const showCorrectionControls = shallowRef(false)
+
+const packageAnomalies = computed(() => getAnomaliesForPackages(effectivePackageNames.value))
+const hasAnomalies = computed(() => packageAnomalies.value.length > 0)
+
+function formatAnomalyDate(dateStr: string) {
+  const [y, m, d] = dateStr.split('-').map(Number)
+  if (!y || !m || !d) return dateStr
+  return new Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  }).format(new Date(Date.UTC(y, m - 1, d)))
+}
+
 // Trigger data loading when the metric is switched
 watch(selectedMetric, value => {
   if (!isMounted.value) return
@@ -1686,6 +1736,117 @@ watch(selectedMetric, value => {
         </button>
       </div>
 
+      <!-- Download filter controls -->
+      <div v-if="isDownloadsMetric" class="flex flex-col gap-2">
+        <button
+          type="button"
+          class="self-start flex items-center gap-1 text-2xs font-mono text-fg-subtle hover:text-fg transition-colors"
+          @click="showCorrectionControls = !showCorrectionControls"
+        >
+          <span
+            class="w-3.5 h-3.5 transition-transform"
+            :class="showCorrectionControls ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
+            aria-hidden="true"
+          />
+          {{ $t('package.trends.data_correction') }}
+        </button>
+        <div v-if="showCorrectionControls" class="flex items-end gap-3">
+          <label class="flex flex-col gap-1 flex-1">
+            <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
+              {{ $t('package.trends.average_window') }}
+              <span class="text-fg-muted">({{ settings.chartFilter.averageWindow }})</span>
+            </span>
+            <input
+              v-model.number="settings.chartFilter.averageWindow"
+              type="range"
+              min="0"
+              max="20"
+              step="1"
+              class="accent-[var(--accent-color,var(--fg-subtle))]"
+            />
+          </label>
+          <label class="flex flex-col gap-1 flex-1">
+            <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
+              {{ $t('package.trends.smoothing') }}
+              <span class="text-fg-muted">({{ settings.chartFilter.smoothingTau }})</span>
+            </span>
+            <input
+              v-model.number="settings.chartFilter.smoothingTau"
+              type="range"
+              min="0"
+              max="20"
+              step="1"
+              class="accent-[var(--accent-color,var(--fg-subtle))]"
+            />
+          </label>
+          <div class="flex flex-col gap-1 shrink-0">
+            <span
+              class="text-2xs font-mono text-fg-subtle tracking-wide uppercase flex items-center justify-between"
+            >
+              {{ $t('package.trends.known_anomalies') }}
+              <TooltipApp interactive :to="inModal ? '#chart-modal' : undefined">
+                <button
+                  type="button"
+                  class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
+                  :aria-label="$t('package.trends.known_anomalies')"
+                />
+                <template #content>
+                  <div class="flex flex-col gap-3">
+                    <p class="text-xs text-fg-muted">
+                      {{ $t('package.trends.known_anomalies_description') }}
+                    </p>
+                    <div v-if="hasAnomalies">
+                      <p class="text-xs text-fg-subtle font-medium">
+                        {{ $t('package.trends.known_anomalies_ranges') }}
+                      </p>
+                      <ul class="text-xs text-fg-subtle list-disc list-inside">
+                        <li v-for="a in packageAnomalies" :key="`${a.packageName}-${a.start}`">
+                          {{
+                            isMultiPackageMode
+                              ? $t('package.trends.known_anomalies_range_named', {
+                                  packageName: a.packageName,
+                                  start: formatAnomalyDate(a.start),
+                                  end: formatAnomalyDate(a.end),
+                                })
+                              : $t('package.trends.known_anomalies_range', {
+                                  start: formatAnomalyDate(a.start),
+                                  end: formatAnomalyDate(a.end),
+                                })
+                          }}
+                        </li>
+                      </ul>
+                    </div>
+                    <p v-else class="text-xs text-fg-muted">
+                      {{ $t('package.trends.known_anomalies_none', effectivePackageNames.length) }}
+                    </p>
+                    <div class="flex justify-end">
+                      <LinkBase
+                        to="https://github.com/npmx-dev/npmx.dev/edit/main/app/utils/download-anomalies.data.ts"
+                        class="text-xs text-accent"
+                      >
+                        {{ $t('package.trends.known_anomalies_contribute') }}
+                      </LinkBase>
+                    </div>
+                  </div>
+                </template>
+              </TooltipApp>
+            </span>
+            <label
+              class="flex items-center gap-1.5 text-2xs font-mono text-fg-subtle cursor-pointer"
+              :class="{ 'opacity-50 pointer-events-none': !hasAnomalies }"
+            >
+              <input
+                v-model="settings.chartFilter.anomaliesFixed"
+                type="checkbox"
+                :disabled="!hasAnomalies"
+                class="accent-[var(--accent-color,var(--fg-subtle))]"
+              />
+              {{ $t('package.trends.apply_correction') }}
+            </label>
+          </div>
+        </div>
+      </div>
+
       <p v-if="skippedPackagesWithoutGitHub.length > 0" class="text-2xs font-mono text-fg-subtle">
         {{ $t('package.trends.contributors_skip', { count: skippedPackagesWithoutGitHub.length }) }}
         {{ skippedPackagesWithoutGitHub.join(', ') }}