Merge branch 'main' into fix/fix-html-validation-error

Author: eryue0220

.env.example

@@ -1,2 +1,5 @@
 #secure password, can use openssl rand -hex 32
-NUXT_SESSION_PASSWORD=""
+NUXT_SESSION_PASSWORD=""
+
+#HMAC secret for image proxy URL signing, can use openssl rand -hex 32
+NUXT_IMAGE_PROXY_SECRET=""

app/components/Filter/Panel.vue

@@ -217,19 +217,19 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </label>
             <!-- Search scope toggle -->
             <div
-              class="inline-flex rounded-md border border-border p-0.5 bg-bg"
+              class="inline-flex rounded-md border border-border p-0.5 bg-bg-muted"
               role="group"
               :aria-label="$t('filters.search_scope')"
             >
               <button
                 v-for="scope in SEARCH_SCOPE_VALUES"
                 :key="scope"
                 type="button"
-                class="px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+                class="px-2 py-0.5 text-xs font-mono rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
                 :class="
                   filters.searchScope === scope
-                    ? 'bg-bg-muted text-fg'
-                    : 'text-fg-muted hover:text-fg'
+                    ? 'bg-bg-subtle text-fg border-fg-subtle'
+                    : 'text-fg-muted hover:text-fg border-transparent'
                 "
                 :aria-pressed="filters.searchScope === scope"
                 :title="getScopeDescriptionKey(scope)"

app/components/Package/Playgrounds.vue

@@ -119,10 +119,7 @@ function focusMenuItem(index: number) {
 
 <template>
   <section v-if="links.length > 0" class="px-1">
-    <h2
-      id="playgrounds-heading"
-      class="text-xs font-mono text-fg-subtle uppercase tracking-wider text-white mb-3"
-    >
+    <h2 id="playgrounds-heading" class="text-xs font-mono text-fg uppercase tracking-wider mb-3">
       {{ $t('package.playgrounds.title') }}
     </h2>
 

app/components/Package/VersionDistribution.vue

@@ -9,13 +9,16 @@ import {
   drawNpmxLogoAndTaglineWatermark,
 } from '~/composables/useChartWatermark'
 import TooltipApp from '~/components/Tooltip/App.vue'
+import { copyAltTextForVersionsBarChart } from '~/utils/charts'
 
 const props = defineProps<{
   packageName: string
   inModal?: boolean
 }>()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
+const { copy, copied } = useClipboard()
+
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
@@ -190,14 +193,14 @@ const chartConfig = computed<VueUiXyConfig>(() => {
           fullscreen: false,
           table: false,
           tooltip: false,
-          altCopy: false, // TODO: set to true to enable the alt copy feature
+          altCopy: true,
         },
         buttonTitles: {
           csv: $t('package.trends.download_file', { fileType: 'CSV' }),
           img: $t('package.trends.download_file', { fileType: 'PNG' }),
           svg: $t('package.trends.download_file', { fileType: 'SVG' }),
           annotator: $t('package.trends.toggle_annotator'),
-          altCopy: undefined, // TODO: set to proper translation key
+          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: {
           img: args => {
@@ -230,10 +233,19 @@ const chartConfig = computed<VueUiXyConfig>(() => {
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
           },
-          // altCopy: ({ dataset: dst, config: cfg }: { dataset: Array<VueUiXyDatasetItem>; config: VueUiXyConfig}) => {
-          //   // TODO: implement a reusable copy-alt-text-to-clipboard feature based on the dataset & configuration
-          //   console.log({ dst, cfg})
-          // }
+          altCopy: ({ dataset: dst, config: cfg }) =>
+            copyAltTextForVersionsBarChart({
+              dataset: dst,
+              config: {
+                ...cfg,
+                datapointLabels: xAxisLabels.value,
+                dateRangeLabel: dateRangeLabel.value,
+                semverGroupingMode: groupingMode.value,
+                copy,
+                $t,
+                numberFormatter: compactNumberFormatter.value.format,
+              },
+            }),
         },
       },
       grid: {
@@ -575,6 +587,16 @@ const chartConfig = computed<VueUiXyConfig>(() => {
                 aria-hidden="true"
               />
             </template>
+            <template #optionAltCopy>
+              <span
+                class="w-6 h-6"
+                :class="
+                  copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
+                "
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
           </VueUiXy>
         </div>