feat: direct to different discord server on production, and update env settings (#1854)

ackzell · danielroe · web-flow · commit 1b8421afb0fa · 2026-03-03T11:39:33.000Z
Co-authored-by: Daniel Roe &lt;daniel@roe.dev&gt;
diff --git a/README.md b/README.md
@@ -27,6 +27,7 @@ What npmx offers:
 ## Shortcuts
 
 - [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
+- [build.npmx.dev](https://build.npmx.dev) - Builders Discord Server
 - [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile
 - [repo.npmx.dev](https://repo.npmx.dev) - GitHub Repository
 - [issues.npmx.dev](https://issues.npmx.dev) - GitHub Issues
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
@@ -4,6 +4,7 @@ import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
+const discord = useDiscordLink()
 const modalRef = useTemplateRef('modalRef')
 const showModal = () => modalRef.value?.showModal?.()
 const closeModal = () => modalRef.value?.close?.()
@@ -124,8 +125,8 @@ const closeModal = () => modalRef.value?.close?.()
             <LinkBase to="https://social.npmx.dev">
               {{ $t('footer.social') }}
             </LinkBase>
-            <LinkBase to="https://chat.npmx.dev">
-              {{ $t('footer.chat') }}
+            <LinkBase :to="discord.url">
+              {{ discord.label }}
             </LinkBase>
           </div>
         </div>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -5,6 +5,7 @@ import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 const keyboardShortcuts = useKeyboardShortcuts()
+const discord = useDiscordLink()
 
 withDefaults(
   defineProps<{
@@ -122,8 +123,8 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
       },
       {
         name: 'Chat',
-        label: $t('footer.chat'),
-        href: 'https://chat.npmx.dev',
+        label: discord.value.label,
+        href: discord.value.url,
         target: '_blank',
         type: 'link',
         external: true,
diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const discord = useDiscordLink()
 const socialLinks = computed(() => [
   {
     id: 'github',
@@ -10,11 +11,11 @@ const socialLinks = computed(() => [
   },
   {
     id: 'discord',
-    href: 'https://chat.npmx.dev',
+    href: discord.value.url,
     icon: 'i-lucide:message-circle',
-    titleKey: $t('about.get_involved.community.title'),
-    descriptionKey: $t('about.get_involved.community.description'),
-    ctaKey: $t('about.get_involved.community.cta'),
+    titleKey: discord.value.title,
+    descriptionKey: discord.value.description,
+    ctaKey: discord.value.cta,
   },
   {
     id: 'bluesky',
diff --git a/app/composables/useDiscordLink.ts b/app/composables/useDiscordLink.ts
@@ -0,0 +1,30 @@
+import { DISCORD_BUILDERS_URL, DISCORD_COMMUNITY_URL } from '#shared/utils/constants'
+
+/**
+ * Returns the Discord invite URL and translated labels based on the current build environment.
+ *
+ * - `release` (npmx.dev) links to the **community** Discord.
+ * - All other environments (`canary`, `preview`, `dev`) link to the **builders** Discord.
+ */
+export function useDiscordLink() {
+  const { env } = useAppConfig().buildInfo
+  const { t } = useI18n()
+
+  return computed(() =>
+    env !== 'release'
+      ? {
+          url: DISCORD_BUILDERS_URL,
+          label: t('footer.builders_chat'),
+          title: t('about.get_involved.builders.title'),
+          description: t('about.get_involved.builders.description'),
+          cta: t('about.get_involved.builders.cta'),
+        }
+      : {
+          url: DISCORD_COMMUNITY_URL,
+          label: t('footer.chat'),
+          title: t('about.get_involved.community.title'),
+          description: t('about.get_involved.community.description'),
+          cta: t('about.get_involved.community.cta'),
+        },
+  )
+}
diff --git a/config/env.ts b/config/env.ts
@@ -38,13 +38,22 @@ export const prNumber = process.env.REVIEW_ID || process.env.VERCEL_GIT_PULL_REQ
  */
 export const gitBranch = process.env.BRANCH || process.env.VERCEL_GIT_COMMIT_REF
 
+/**
+ * Environment variable `VERCEL_ENV` provided by Vercel.
+ * `production`, `preview`, `development`, or a custom environment name (e.g. `canary`).
+ * @see {@link https://vercel.com/docs/environment-variables/system-environment-variables#VERCEL_ENV}
+ *
+ * Whether this is the canary custom Vercel environment (main.npmx.dev).
+ */
+export const isCanary = process.env.VERCEL_ENV === 'canary'
+
 /**
  * Environment variable `CONTEXT` provided by Netlify.
  * `dev`, `production`, `deploy-preview`, `branch-deploy`, `preview-server`, or a branch name
  * @see {@link https://docs.netlify.com/build/configure-builds/environment-variables/#build-metadata}
  *
  * Environment variable `VERCEL_ENV` provided by Vercel.
- * `production`, `preview`, or `development`
+ * `production`, `preview`, `development`, or a custom environment name (e.g. `canary`).
  * @see {@link https://vercel.com/docs/environment-variables/system-environment-variables#VERCEL_ENV}
  *
  * Whether this is some sort of preview environment.
@@ -142,13 +151,7 @@ export async function getFileLastUpdated(path: string) {
 
 export async function getEnv(isDevelopment: boolean) {
   const { commit, shortCommit, branch } = await getGitInfo()
-  const env = isDevelopment
-    ? 'dev'
-    : isPreview
-      ? 'preview'
-      : branch === 'main'
-        ? 'canary'
-        : 'release'
+  const env = isDevelopment ? 'dev' : isCanary ? 'canary' : isPreview ? 'preview' : 'release'
   const previewUrl = getPreviewUrl()
   const productionUrl = getProductionUrl()
   return {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -18,6 +18,7 @@
     "source": "source",
     "social": "social",
     "chat": "chat",
+    "builders_chat": "builders",
     "keyboard_shortcuts": "keyboard shortcuts"
   },
   "shortcuts": {
@@ -958,6 +959,11 @@
         "description": "Chat, ask questions, and share ideas.",
         "cta": "Join Discord"
       },
+      "builders": {
+        "title": "Help build npmx",
+        "description": "Join the builders shaping the future of npmx.",
+        "cta": "Join Builders Discord"
+      },
       "follow": {
         "title": "Stay updated",
         "description": "Find out the latest on npmx.",
diff --git a/i18n/schema.json b/i18n/schema.json
@@ -58,6 +58,9 @@
         "chat": {
           "type": "string"
         },
+        "builders_chat": {
+          "type": "string"
+        },
         "keyboard_shortcuts": {
           "type": "string"
         }
@@ -2878,6 +2881,21 @@
               },
               "additionalProperties": false
             },
+            "builders": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "cta": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            },
             "follow": {
               "type": "object",
               "properties": {
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
@@ -52,6 +52,10 @@ export const PACKAGE_SUBJECT_REF = (packageName: string) =>
 export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
 export const PROFILE_SCOPE = `repo:${dev.npmx.actor.profile.$nsid}`
 
+// Discord
+export const DISCORD_COMMUNITY_URL = 'https://chat.npmx.dev'
+export const DISCORD_BUILDERS_URL = 'https://build.npmx.dev'
+
 // Theming
 export const ACCENT_COLORS = {
   light: {
diff --git a/test/nuxt/components/BuildEnvironment.spec.ts b/test/nuxt/components/BuildEnvironment.spec.ts
@@ -31,6 +31,33 @@ describe('BuildEnvironment', () => {
     expect(tagLink.exists()).toBe(false)
   })
 
+  it('renders canary environment correctly', async () => {
+    const buildInfo: BuildInfo = {
+      env: 'canary',
+      version: '1.2.3',
+      time: 1234567890,
+      commit: 'abcdef',
+      shortCommit: 'abc',
+      branch: 'main',
+      privacyPolicyDate: new Date().toISOString(),
+      prNumber: null,
+    }
+    const component = await mountSuspended(BuildEnvironment, {
+      props: {
+        buildInfo,
+      },
+    })
+
+    // In canary mode, it shows env name, not version link
+    const envSpan = component.find('span.tracking-wider')
+    expect(envSpan.exists()).toBe(true)
+    expect(envSpan.text()).toBe('canary')
+    const commitLink = component.find(`a[href$="/commit/${buildInfo.commit}"]`)
+    expect(commitLink.exists()).toBe(true)
+    const tagLink = component.find(`a[href$="/tag/v${buildInfo.version}"]`)
+    expect(tagLink.exists()).toBe(false)
+  })
+
   it('renders release environment correctly', async () => {
     const buildInfo: BuildInfo = {
       env: 'release',
diff --git a/test/unit/config/env.spec.ts b/test/unit/config/env.spec.ts
@@ -6,8 +6,126 @@ const ALL_ENV_VARS = [
   'URL',
   'NUXT_ENV_VERCEL_URL',
   'NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL',
+  'PULL_REQUEST',
+  'VERCEL_GIT_PULL_REQUEST_ID',
+  'BRANCH',
+  'VERCEL_GIT_COMMIT_REF',
 ]
 
+describe('isCanary', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  beforeEach(() => {
+    for (const envVar of ALL_ENV_VARS) {
+      vi.stubEnv(envVar, undefined)
+    }
+  })
+
+  afterEach(() => {
+    vi.unstubAllEnvs()
+  })
+
+  it('returns true when VERCEL_ENV is "canary"', async () => {
+    vi.stubEnv('VERCEL_ENV', 'canary')
+    const { isCanary } = await import('../../../config/env')
+
+    expect(isCanary).toBe(true)
+  })
+
+  it.each([
+    ['production', 'production'],
+    ['preview', 'preview'],
+    ['development', 'development'],
+    ['unset', undefined],
+  ])('returns false when VERCEL_ENV is %s', async (_label, value) => {
+    if (value !== undefined) vi.stubEnv('VERCEL_ENV', value)
+    const { isCanary } = await import('../../../config/env')
+
+    expect(isCanary).toBe(false)
+  })
+})
+
+describe('getEnv', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  beforeEach(() => {
+    for (const envVar of ALL_ENV_VARS) {
+      vi.stubEnv(envVar, undefined)
+    }
+  })
+
+  afterEach(() => {
+    vi.unstubAllEnvs()
+  })
+
+  it('returns "dev" in development mode', async () => {
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(true)
+
+    expect(result.env).toBe('dev')
+  })
+
+  it('returns "canary" when VERCEL_ENV is "canary"', async () => {
+    vi.stubEnv('VERCEL_ENV', 'canary')
+    vi.stubEnv('VERCEL_GIT_COMMIT_REF', 'main')
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(false)
+
+    expect(result.env).toBe('canary')
+  })
+
+  it('returns "preview" for Vercel preview deploys', async () => {
+    vi.stubEnv('VERCEL_ENV', 'preview')
+    vi.stubEnv('VERCEL_GIT_PULL_REQUEST_ID', '123')
+    vi.stubEnv('VERCEL_GIT_COMMIT_REF', 'main')
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(false)
+
+    expect(result.env).toBe('preview')
+  })
+
+  it('returns "preview" for PR deploys from main branch', async () => {
+    vi.stubEnv('VERCEL_ENV', 'preview')
+    vi.stubEnv('VERCEL_GIT_PULL_REQUEST_ID', '456')
+    vi.stubEnv('VERCEL_GIT_COMMIT_REF', 'main')
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(false)
+
+    expect(result.env).toBe('preview')
+  })
+
+  it('returns "release" for Vercel production deploys', async () => {
+    vi.stubEnv('VERCEL_ENV', 'production')
+    vi.stubEnv('VERCEL_GIT_COMMIT_REF', 'v1.0.0')
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(false)
+
+    expect(result.env).toBe('release')
+  })
+
+  it('prioritises "canary" over "preview" when VERCEL_ENV is "canary" and PR is open', async () => {
+    vi.stubEnv('VERCEL_ENV', 'canary')
+    vi.stubEnv('VERCEL_GIT_PULL_REQUEST_ID', '789')
+    vi.stubEnv('VERCEL_GIT_COMMIT_REF', 'main')
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(false)
+
+    expect(result.env).toBe('canary')
+  })
+
+  it('prioritises "dev" over "canary" in development mode', async () => {
+    vi.stubEnv('VERCEL_ENV', 'canary')
+    const { getEnv } = await import('../../../config/env')
+    const result = await getEnv(true)
+
+    expect(result.env).toBe('dev')
+  })
+})
+
 describe('getPreviewUrl', () => {
   beforeEach(() => {
     // Reset consts evaluated at module init time
@@ -33,6 +151,7 @@ describe('getPreviewUrl', () => {
   it.each([
     ['Netlify production', { CONTEXT: 'production', URL: 'https://prod.example.com' }],
     ['Vercel production', { VERCEL_ENV: 'production', NUXT_ENV_VERCEL_URL: 'prod.example.com' }],
+    ['Vercel canary', { VERCEL_ENV: 'canary', NUXT_ENV_VERCEL_URL: 'main.example.com' }],
   ])('%s environment returns `undefined`', async (_name, envVars) => {
     for (const [key, value] of Object.entries(envVars)) {
       vi.stubEnv(key, value)
