Merge branch 'main' into vt/changelog

Author: vinnymac

.github/workflows/provenance.yml

@@ -14,7 +14,7 @@ permissions:
   contents: read
 jobs:
   check-provenance:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-slim
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:

.github/workflows/semantic-pull-requests.yml

@@ -16,7 +16,7 @@ jobs:
       pull-requests: read # for amannn/action-semantic-pull-request to analyze PRs
       statuses: write # for amannn/action-semantic-pull-request to mark status of analyzed PR
     if: github.repository == 'npmx-dev/npmx.dev'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-slim
     name: semantic-pr
     steps:
       - name: Validate PR title

app/components/AppHeader.vue

@@ -146,7 +146,7 @@ onKeyStroke(
           @blur="handleSearchBlur"
         />
         <ul
-          v-if="!isSearchExpanded"
+          v-if="!isSearchExpanded && isConnected && npmUser"
           :class="{ hidden: showFullSearch }"
           class="hidden sm:flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
         >

app/components/CollapsibleSection.vue

@@ -6,6 +6,7 @@ interface Props {
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
+  icon?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -107,6 +108,7 @@ useHead({
           :href="`#${id}`"
           class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
         >
+          <span v-if="icon" :class="icon" aria-hidden="true" />
           {{ title }}
           <span
             class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"

app/components/Filter/Chips.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
 <template>
   <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
     <TransitionGroup name="chip">
-      <span v-for="chip in chips" :key="chip.id" class="tag gap-1">
+      <TagStatic v-for="chip in chips" :key="chip.id" class="gap-1">
         <span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
         <span class="max-w-32 truncate">{{
           Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
@@ -27,7 +27,7 @@ const emit = defineEmits<{
         >
           <span class="i-carbon-close w-3 h-3" aria-hidden="true" />
         </button>
-      </span>
+      </TagStatic>
     </TransitionGroup>
 
     <button

app/components/Filter/Panel.vue

@@ -243,22 +243,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
-            <button
+            <TagClickable
               v-for="range in DOWNLOAD_RANGES"
               :key="range.value"
               type="button"
               role="radio"
               :aria-checked="filters.downloadRange === range.value"
-              class="tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-              :class="
-                filters.downloadRange === range.value
-                  ? 'bg-fg text-bg border-fg hover:text-bg/50'
-                  : ''
-              "
+              :status="filters.downloadRange === range.value ? 'active' : 'default'"
               @click="emit('update:downloadRange', range.value)"
             >
               {{ $t(getDownloadRangeLabelKey(range.value)) }}
-            </button>
+            </TagClickable>
           </div>
         </fieldset>
 
@@ -272,22 +267,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
-            <button
+            <TagClickable
               v-for="option in UPDATED_WITHIN_OPTIONS"
               :key="option.value"
               type="button"
               role="radio"
               :aria-checked="filters.updatedWithin === option.value"
-              class="tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-              :class="
-                filters.updatedWithin === option.value
-                  ? 'bg-fg text-bg border-fg hover:text-bg/70'
-                  : ''
-              "
+              :status="filters.updatedWithin === option.value ? 'active' : 'default'"
               @click="emit('update:updatedWithin', option.value)"
             >
               {{ $t(getUpdatedWithinLabelKey(option.value)) }}
-            </button>
+            </TagClickable>
           </div>
         </fieldset>
 
@@ -300,20 +290,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </span>
           </legend>
           <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
-            <button
+            <TagClickable
               v-for="security in SECURITY_FILTER_VALUES"
               :key="security"
               type="button"
               role="radio"
               disabled
               :aria-checked="filters.security === security"
-              class="tag transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-              :class="
-                filters.security === security ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
-              "
+              :status="filters.security === security ? 'active' : 'default'"
             >
               {{ $t(getSecurityLabelKey(security)) }}
-            </button>
+            </TagClickable>
           </div>
         </fieldset>
 
@@ -323,19 +310,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <button
+            <TagClickable
               v-for="keyword in displayedKeywords"
               :key="keyword"
               type="button"
               :aria-pressed="filters.keywords.includes(keyword)"
-              class="tag text-xs transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-              :class="
-                filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
-              "
+              :status="filters.keywords.includes(keyword) ? 'active' : 'default'"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </button>
+            </TagClickable>
             <button
               v-if="hasMoreKeywords"
               type="button"

app/components/Package/Card.vue

@@ -162,20 +162,20 @@ const pkgDescription = useMarkdown(() => ({
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none"
     >
-      <button
+      <TagClickable
         v-for="keyword in result.package.keywords.slice(0, 5)"
         :key="keyword"
         type="button"
-        class="tag text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1 border-solid pointer-events-auto"
-        :class="{ 'bg-fg text-bg hover:opacity-80': props.filters?.keywords.includes(keyword) }"
+        class="pointer-events-auto"
+        :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </button>
+      </TagClickable>
       <span
         v-if="result.package.keywords.length > 5"
-        class="tag text-fg-subtle text-xs border-none bg-transparent pointer-events-auto"
+        class="text-fg-subtle text-xs pointer-events-auto"
         :title="result.package.keywords.slice(5).join(', ')"
       >
         +{{ result.package.keywords.length - 5 }}

app/components/Package/Compatibility.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  engines?: {
+    node?: string
+    npm?: string
+  }
+}>()
+</script>
+<template>
+  <CollapsibleSection
+    v-if="engines && (engines.node || engines.npm)"
+    :title="$t('package.compatibility')"
+    id="compatibility"
+  >
+    <dl class="space-y-2">
+      <div v-if="engines.node" class="flex justify-between gap-4 py-1">
+        <dt class="text-fg-muted text-sm shrink-0">node</dt>
+        <dd class="font-mono text-sm text-fg text-end" :title="engines.node">
+          {{ engines.node }}
+        </dd>
+      </div>
+      <div v-if="engines.npm" class="flex justify-between gap-4 py-1">
+        <dt class="text-fg-muted text-sm shrink-0">npm</dt>
+        <dd class="font-mono text-sm text-fg text-end" :title="engines.npm">
+          {{ engines.npm }}
+        </dd>
+      </div>
+    </dl>
+  </CollapsibleSection>
+</template>

app/components/Package/DownloadAnalytics.vue

@@ -20,26 +20,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
-  }, 1)
-})
-
-onBeforeUnmount(() => {
-  if (chartRemountTimeoutId !== null) {
-    clearTimeout(chartRemountTimeoutId)
-    chartRemountTimeoutId = null
-  }
 })
 
 const { colors } = useCssVariables(
@@ -718,12 +701,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" />
@@ -836,8 +814,10 @@ const config = computed(() => {
 }
 
 /* Override default placement of the refresh button to have it to the minimap's side */
-#download-analytics .vue-data-ui-refresh-button {
-  top: -0.6rem !important;
-  left: calc(100% + 2rem) !important;
+@media screen and (min-width: 767px) {
+  #download-analytics .vue-data-ui-refresh-button {
+    top: -0.6rem !important;
+    left: calc(100% + 2rem) !important;
+  }
 }
 </style>

app/components/Package/InstallScripts.vue

@@ -18,15 +18,11 @@ const isExpanded = shallowRef(false)
 </script>
 
 <template>
-  <section>
-    <h2
-      id="install-scripts-heading"
-      class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"
-    >
-      <span class="i-carbon:warning-alt w-3 h-3 text-yellow-500" aria-hidden="true" />
-      {{ $t('package.install_scripts.title') }}
-    </h2>
-
+  <CollapsibleSection
+    :title="$t('package.install_scripts.title')"
+    id="installScripts"
+    icon="i-carbon:warning-alt w-3 h-3 text-yellow-500"
+  >
     <!-- Script list: name as label, content below -->
     <dl class="space-y-2 m-0">
       <div v-for="scriptName in installScripts.scripts" :key="scriptName">
@@ -112,5 +108,5 @@ const isExpanded = shallowRef(false)
         </li>
       </ul>
     </div>
-  </section>
+  </CollapsibleSection>
 </template>