feat: preview mode show the pr number

Author: btea

app/components/AppHeader.vue

@@ -128,6 +128,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 const { env } = useAppConfig().buildInfo
+const prId = env === 'preview' ? useRuntimeConfig().public.pullRequestID : 123
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -227,6 +228,14 @@ onKeyStroke(
             {{ env === 'release' ? 'alpha' : env }}
           </span>
         </NuxtLink>
+        <NuxtLink v-if="prId" :to="`https://github.com/npmx-dev/npmx.dev/pull/${prId}`">
+          <span
+            aria-hidden="true"
+            class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium ms-2"
+          >
+            PR #{{ prId }}
+          </span>
+        </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->
       <span v-else class="hidden sm:block w-1" />

nuxt.config.ts

@@ -52,6 +52,7 @@ export default defineNuxtConfig({
         apiKey: 'f54e21fa3a2a0160595bb058179bfb1e',
         indexName: 'npm-search',
       },
+      pullRequestID: process.env.VERCEL_GIT_PULL_REQUEST_ID || undefined,
     },
   },