Merge branch 'main' into renovate/pnpm-11.x

Author: shuuji3

.github/workflows/ci.yml

@@ -77,9 +77,24 @@ jobs:
 
       - name: ⬆︎ Upload test results to Codecov
         if: ${{ !cancelled() }}
-        uses: codecov/test-results-action@0fa95f0e1eeaafde2c782583b36b28ad0d8c77d3 # v1
+        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
+        with:
+          disable_search: true
+          files: test-report.junit.xml
+          flags: unit
+          report_type: test_results
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: ⬆︎ Upload coverage reports to Codecov
+        if: ${{ !cancelled() }}
+        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
+          disable_search: true
+          files: coverage/clover.xml
+          flags: unit
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
   test:
     name: 🧪 Component tests
@@ -101,15 +116,24 @@ jobs:
       - name: 🧪 Component tests
         run: vp test --project nuxt --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
-      - name: ⬆︎ Upload coverage reports to Codecov
+      - name: ⬆︎ Upload test results to Codecov
+        if: ${{ !cancelled() }}
         uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
         with:
+          disable_search: true
+          files: test-report.junit.xml
+          flags: component
           report_type: test_results
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
       - name: ⬆︎ Upload coverage reports to Codecov
+        if: ${{ !cancelled() }}
         uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
+        with:
+          disable_search: true
+          files: coverage/clover.xml
+          flags: component
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
@@ -140,6 +164,18 @@ jobs:
       - name: 🖥️ Test project (browser)
         run: vp run test:browser:prebuilt
 
+      - name: ⬆︎ Upload test results to Codecov
+        if: ${{ !cancelled() }}
+        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
+        with:
+          disable_search: true
+          files: test-report.junit.xml
+          flags: browser
+          report_type: test_results
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      # TODO(serhalp): Upload browser *coverage* report once we've instrumented the prebuilt bundle
+
   a11y:
     name: ♿ Accessibility audit
     runs-on: ubuntu-latest # See https://github.com/GoogleChrome/lighthouse/discussions/16834

.github/workflows/enforce-release-source.yml

@@ -0,0 +1,32 @@
+name: chore
+
+on:
+  pull_request_target:
+    branches:
+      - release
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+
+permissions: {}
+
+jobs:
+  enforce-source:
+    if: github.repository == 'npmx-dev/npmx.dev'
+    runs-on: ubuntu-slim
+    name: 🚦 Enforce release source
+    steps:
+      - name: Check PR is from main
+        env:
+          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
+          HEAD_REF: ${{ github.event.pull_request.head.ref }}
+        run: |
+          if [ "$HEAD_REPO" != "npmx-dev/npmx.dev" ] || [ "$HEAD_REF" != "main" ]; then
+            echo "::error::PRs to 'release' must come from npmx-dev/npmx.dev:main (got ${HEAD_REPO}:${HEAD_REF})"
+            exit 1
+          fi

.github/zizmor.yml

@@ -7,6 +7,7 @@ rules:
       - lunaria.yml:38
   dangerous-triggers:
     ignore:
+      - enforce-release-source.yml
       - dependency-diff-comment.yml
       - lunaria.yml
       - semantic-pull-requests.yml

app/app.vue

@@ -128,9 +128,17 @@ if (import.meta.client) {
   }
 }
 
-// title and description will be inferred
-// this will be overridden by upstream pages that use different templates
-defineOgImage('Page.takumi', {}, { alt: 'npmx — a fast, modern browser for the npm registry' })
+const isBlogPostRoute = computed(() => {
+  return route.path.startsWith('/blog/') && route.path !== '/blog/'
+})
+
+// This is a priority bug that when we set og:image at the component level via useSeoMeta,
+// it is ignored and the image from app.vue is written over it.
+if (!isBlogPostRoute.value) {
+  // title and description will be inferred
+  // this will be overridden by upstream pages that use different templates
+  defineOgImage('Page.takumi', {}, { alt: 'npmx — a fast, modern browser for the npm registry' })
+}
 </script>
 
 <template>

app/components/CopyToClipboardButton.vue

@@ -34,7 +34,7 @@ function handleClick() {
     <button
       type="button"
       @click="handleClick"
-      class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+      class="absolute z-70 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
       :class="[
         $style.copyButton,
         copied ? ['text-accent', $style.copiedBg] : 'text-fg-muted bg-bg border-border',

app/components/Package/Card.vue

@@ -16,6 +16,7 @@ const props = defineProps<{
   searchQuery?: string
 }>()
 
+const { selectable } = usePackageSelectionContext()
 const { isPackageSelected, togglePackageSelection, canSelectMore } = usePackageSelection()
 const isSelected = computed<boolean>(() => {
   return isPackageSelected(props.result.package.name)
@@ -65,6 +66,7 @@ const numberFormatter = useNumberFormatter()
       </component>
 
       <PackageSelectionCheckbox
+        v-if="selectable"
         :package-name="result.package.name"
         :disabled="!canSelectMore && !isSelected"
         :checked="isSelected"

app/components/Package/Dependencies.vue

@@ -79,8 +79,8 @@ function getDepVersionTooltip(dep: string, version: string) {
 function getDepVersionClass(dep: string) {
   const outdated = outdatedDeps.value[dep]
   if (outdated) return getVersionClass(outdated)
-  if (getVulnerableDepInfo(dep) || getDeprecatedDepInfo(dep)) return getVersionClass(undefined)
   if (replacementDeps.value[dep]) return 'text-amber-700 dark:text-amber-500'
+  if (getVulnerableDepInfo(dep) || getDeprecatedDepInfo(dep)) return getVersionClass(undefined)
   return getVersionClass(undefined)
 }
 

app/components/Package/List.vue

@@ -33,6 +33,8 @@ const props = defineProps<{
   currentPage?: number
   /** When true, shows search-specific UI (relevance sort, no filters) */
   searchContext?: boolean
+  /** Whether package cards should show selection checkboxes. */
+  selectable?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -46,6 +48,8 @@ const emit = defineEmits<{
   'clickKeyword': [keyword: string]
 }>()
 
+providePackageSelectionContext(props.selectable ?? false)
+
 // Reference to WindowVirtualizer for infinite scroll detection
 const listRef = useTemplateRef<WindowVirtualizerHandle>('listRef')
 

app/components/Package/SelectionView.vue

@@ -52,6 +52,7 @@ const { data, pending } = useAsyncData(
         :view-mode="viewMode"
         :results="data"
         heading-level="h2"
+        selectable
       />
       <p v-else class="text-fg-muted text-sm">
         {{ $t('filters.table.no_packages') }}

app/components/Package/Table.vue

@@ -96,14 +96,16 @@ const columnLabels = computed(() => ({
 function getColumnLabel(id: ColumnId): string {
   return columnLabels.value[id]
 }
+
+const { selectable } = usePackageSelectionContext()
 </script>
 
 <template>
   <div class="overflow-x-auto">
     <table class="w-full text-start">
       <thead class="border-b border-border">
         <tr>
-          <th scope="col" class="w-8">
+          <th scope="col" class="w-8" v-if="selectable">
             <span class="sr-only">{{ getColumnLabel('selection') }}</span>
           </th>
           <!-- Name (always visible) -->
@@ -265,7 +267,7 @@ function getColumnLabel(id: ColumnId): string {
         <!-- Loading skeleton rows -->
         <template v-if="isLoading && results.length === 0">
           <tr v-for="i in 5" :key="`skeleton-${i}`" class="border-b border-border">
-            <td class="py-3 px-3 w-8">
+            <td v-if="selectable" class="py-3 px-3 w-8">
               <div class="h-4 w-4 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td class="py-3 px-3">