feat: preview mode show the pr number (#1729)

Author: btea

app/components/AppHeader.vue

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

config/env.ts

@@ -16,6 +16,17 @@ export { version } from '../package.json'
  */
 export const isPR = process.env.PULL_REQUEST === 'true' || !!process.env.VERCEL_GIT_PULL_REQUEST_ID
 
+/**
+ * Environment variable `REVIEW_ID` provided by Netlify.
+ * @see {@link https://docs.netlify.com/configure-builds/environment-variables/#git-metadata}
+ *
+ * Environment variable `VERCEL_GIT_PULL_REQUEST_ID` provided by Vercel.
+ * @see {@link https://vercel.com/docs/environment-variables/system-environment-variables#VERCEL_GIT_PULL_REQUEST_ID}
+ *
+ * Pull request number (if in a PR environment)
+ */
+export const prNumber = process.env.REVIEW_ID || process.env.VERCEL_GIT_PULL_REQUEST_ID || null
+
 /**
  * Environment variable `BRANCH` provided by Netlify.
  * @see {@link https://docs.netlify.com/build/configure-builds/environment-variables/#git-metadata}
@@ -147,5 +158,6 @@ export async function getEnv(isDevelopment: boolean) {
     env,
     previewUrl,
     productionUrl,
+    prNumber,
   } as const
 }

modules/build-env.ts

@@ -23,12 +23,11 @@ export default defineNuxtModule({
         branch: 'xxx',
         time: time.getTime(),
         privacyPolicyDate: time.toISOString(),
+        prNumber: null,
       } satisfies BuildInfo
     } else {
-      const [{ env: useEnv, commit, shortCommit, branch }, privacyPolicyDate] = await Promise.all([
-        getEnv(nuxt.options.dev),
-        getFileLastUpdated('app/pages/privacy.vue'),
-      ])
+      const [{ env: useEnv, commit, shortCommit, branch, prNumber }, privacyPolicyDate] =
+        await Promise.all([getEnv(nuxt.options.dev), getFileLastUpdated('app/pages/privacy.vue')])
       env = useEnv
       nuxt.options.appConfig.env = useEnv
       nuxt.options.appConfig.buildInfo = {
@@ -39,6 +38,7 @@ export default defineNuxtModule({
         branch,
         env,
         privacyPolicyDate,
+        prNumber,
       } satisfies BuildInfo
     }
 

shared/types/env.ts

@@ -8,4 +8,5 @@ export interface BuildInfo {
   branch: string
   env: EnvType
   privacyPolicyDate: string
+  prNumber: string | null
 }

test/nuxt/components/BuildEnvironment.spec.ts

@@ -13,6 +13,7 @@ describe('BuildEnvironment', () => {
       shortCommit: 'abc',
       branch: 'main',
       privacyPolicyDate: new Date().toISOString(),
+      prNumber: null,
     }
     const component = await mountSuspended(BuildEnvironment, {
       props: {
@@ -39,6 +40,7 @@ describe('BuildEnvironment', () => {
       shortCommit: 'abc',
       branch: 'release',
       privacyPolicyDate: new Date().toISOString(),
+      prNumber: null,
     }
 
     const component = await mountSuspended(BuildEnvironment, {