From 6f35eb644a27d1ef8c6baec5364a5aa368ba368c Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@netlify.com>
Date: Wed, 11 Feb 2026 19:39:28 -0500
Subject: [PATCH] fix: don't hardcode npmx.dev & docs.npmx.dev

Extract a composable that returns URLs for this app itself (and docs, which lives in this codebase),
so that URLs are always internally consistent within an environment, e.g. in dev links go to dev.
---
 app/app.vue                                          |  3 ++-
 app/components/AppFooter.vue                         |  3 ++-
 app/components/AppHeader.vue                         |  3 ++-
 app/components/Package/SkillsModal.vue               |  5 ++---
 app/composables/useAppUrls.ts                        | 11 +++++++++++
 app/composables/useJsonLd.ts                         | 12 +++++++-----
 app/pages/org/[org].vue                              |  3 ++-
 .../[packageName]/v/[version]/[...filePath].vue      |  3 ++-
 app/pages/package/[[org]]/[name].vue                 |  3 ++-
 config/env.ts                                        |  8 ++++++++
 modules/build-env.ts                                 | 11 ++++++-----
 modules/standard-site-sync.ts                        |  6 +++---
 shared/utils/constants.ts                            |  3 ++-
 13 files changed, 51 insertions(+), 23 deletions(-)
 create mode 100644 app/composables/useAppUrls.ts

diff --git a/app/app.vue b/app/app.vue
index 2b0a58740..e63e3d2cc 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -44,7 +44,8 @@ useHead({
 })
 
 if (import.meta.server) {
-  setJsonLd(createWebSiteSchema())
+  const { siteUrl } = useAppUrls()
+  setJsonLd(createWebSiteSchema(siteUrl))
 }
 
 onKeyDown(
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index b7e745377..4f3e41ea5 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { docsUrl } = useAppUrls()
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
@@ -92,7 +93,7 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
-          <LinkBase to="https://docs.npmx.dev">
+          <LinkBase :to="docsUrl">
             {{ $t('footer.docs') }}
           </LinkBase>
           <LinkBase to="https://repo.npmx.dev">
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 5dd3af74b..33f405002 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -12,6 +12,7 @@ withDefaults(
   },
 )
 
+const { docsUrl } = useAppUrls()
 const { isConnected, npmUser } = useConnector()
 
 const desktopLinks = computed<NavigationConfig>(() => [
@@ -85,7 +86,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
       {
         name: 'Docs',
         label: $t('footer.docs'),
-        href: 'https://docs.npmx.dev',
+        href: docsUrl,
         target: '_blank',
         type: 'link',
         external: true,
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 83708beff..27cdc24b8 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -27,9 +27,8 @@ function toggleSkill(dirName: string) {
 type InstallMethod = 'skills-npm' | 'skills-cli'
 const selectedMethod = ref<InstallMethod>('skills-npm')
 
-const baseUrl = computed(() =>
-  typeof window !== 'undefined' ? window.location.origin : 'https://npmx.dev',
-)
+const { siteUrl } = useAppUrls()
+const baseUrl = computed(() => (typeof window !== 'undefined' ? window.location.origin : siteUrl))
 
 const installCommand = computed(() => {
   if (!props.skills.length) return null
diff --git a/app/composables/useAppUrls.ts b/app/composables/useAppUrls.ts
new file mode 100644
index 000000000..84f2fd35a
--- /dev/null
+++ b/app/composables/useAppUrls.ts
@@ -0,0 +1,11 @@
+import { NPMX_DOCS_SITE_PROD } from '#shared/utils/constants'
+
+export function useAppUrls() {
+  const { env, siteUrl } = useAppConfig()
+  return {
+    siteUrl,
+    // TODO(serhalp): Handle preview environment. The docs site is a separate deployment, so we'd
+    // need to infer its preview URL from the site preview URL somehow...?
+    docsUrl: env === 'dev' ? 'http://localhost:3001' : NPMX_DOCS_SITE_PROD,
+  }
+}
diff --git a/app/composables/useJsonLd.ts b/app/composables/useJsonLd.ts
index bbe026e14..e68b02f5e 100644
--- a/app/composables/useJsonLd.ts
+++ b/app/composables/useJsonLd.ts
@@ -18,11 +18,13 @@ export function setJsonLd(schema: WithContext<Thing> | WithContext<Thing>[]): vo
 /**
  * Create WebSite schema with search action
  */
-export function createWebSiteSchema(options?: {
-  name?: string
-  description?: string
-}): WithContext<WebSite> {
-  const siteUrl = 'https://npmx.dev'
+export function createWebSiteSchema(
+  siteUrl: string,
+  options?: {
+    name?: string
+    description?: string
+  },
+): WithContext<WebSite> {
   return {
     '@context': 'https://schema.org',
     '@type': 'WebSite',
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index 08739fd43..074c0bbda 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -129,7 +129,8 @@ function handleClearFilter(chip: FilterChip) {
 const activeTab = shallowRef<'members' | 'teams'>('members')
 
 // Canonical URL for this org page
-const canonicalUrl = computed(() => `https://npmx.dev/@${orgName.value}`)
+const { siteUrl } = useAppUrls()
+const canonicalUrl = computed(() => `${siteUrl}/@${orgName.value}`)
 
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 0e6321356..d6c9ec2cb 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -249,7 +249,8 @@ function copyPermalinkUrl() {
 }
 
 // Canonical URL for this code page
-const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
+const { siteUrl } = useAppUrls()
+const canonicalUrl = computed(() => `${siteUrl}${getCodeUrl(route.params)}`)
 
 // Toggle markdown view mode
 const markdownViewModes = [
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 092071131..4ab6bbadc 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -471,8 +471,9 @@ const createPackageInfo = computed(() => {
 })
 
 // Canonical URL for this package page
+const { siteUrl } = useAppUrls()
 const canonicalUrl = computed(() => {
-  const base = `https://npmx.dev/package/${packageName.value}`
+  const base = `${siteUrl}/package/${packageName.value}`
   return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
 })
 
diff --git a/config/env.ts b/config/env.ts
index a8a62bf2d..2f2cb9123 100644
--- a/config/env.ts
+++ b/config/env.ts
@@ -2,6 +2,7 @@
 
 import Git from 'simple-git'
 import * as process from 'node:process'
+import { NPMX_SITE_PROD } from '../shared/utils/constants'
 
 export { version } from '../package.json'
 
@@ -87,6 +88,11 @@ export const getProductionUrl = () =>
         : undefined
     : undefined
 
+export const getSiteUrl = (isDevelopment: boolean) => {
+  if (isDevelopment) return 'http://localhost:3000'
+  return getPreviewUrl() || getProductionUrl() || NPMX_SITE_PROD
+}
+
 const git = Git()
 export async function getGitInfo() {
   let branch
@@ -140,6 +146,7 @@ export async function getEnv(isDevelopment: boolean) {
         : 'release'
   const previewUrl = getPreviewUrl()
   const productionUrl = getProductionUrl()
+  const siteUrl = getSiteUrl(isDevelopment)
   return {
     commit,
     shortCommit,
@@ -147,5 +154,6 @@ export async function getEnv(isDevelopment: boolean) {
     env,
     previewUrl,
     productionUrl,
+    siteUrl,
   } as const
 }
diff --git a/modules/build-env.ts b/modules/build-env.ts
index 7ddbdad2a..d6200dbc4 100644
--- a/modules/build-env.ts
+++ b/modules/build-env.ts
@@ -1,7 +1,7 @@
 import type { BuildInfo, EnvType } from '../shared/types'
 import { createResolver, defineNuxtModule } from 'nuxt/kit'
 import { isCI } from 'std-env'
-import { getEnv, getFileLastUpdated, version } from '../config/env'
+import { getEnv, getFileLastUpdated, getSiteUrl, version } from '../config/env'
 
 const { resolve } = createResolver(import.meta.url)
 
@@ -15,6 +15,7 @@ export default defineNuxtModule({
     nuxt.options.appConfig.env = env
     if (process.env.TEST) {
       const time = new Date()
+      nuxt.options.appConfig.siteUrl = getSiteUrl(nuxt.options.dev)
       nuxt.options.appConfig.buildInfo = {
         env,
         version: '0.0.0',
@@ -25,12 +26,11 @@ export default defineNuxtModule({
         privacyPolicyDate: time.toISOString(),
       } 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, siteUrl }, privacyPolicyDate] =
+        await Promise.all([getEnv(nuxt.options.dev), getFileLastUpdated('app/pages/privacy.vue')])
       env = useEnv
       nuxt.options.appConfig.env = useEnv
+      nuxt.options.appConfig.siteUrl = siteUrl
       nuxt.options.appConfig.buildInfo = {
         version,
         time: +Date.now(),
@@ -52,6 +52,7 @@ export default defineNuxtModule({
 declare module '@nuxt/schema' {
   interface AppConfig {
     env: BuildInfo['env']
+    siteUrl: string
     buildInfo: BuildInfo
   }
 }
diff --git a/modules/standard-site-sync.ts b/modules/standard-site-sync.ts
index f182489f3..088b8a3d6 100644
--- a/modules/standard-site-sync.ts
+++ b/modules/standard-site-sync.ts
@@ -4,7 +4,7 @@ import { defineNuxtModule, useNuxt, createResolver } from 'nuxt/kit'
 import { safeParse } from 'valibot'
 import * as site from '../shared/types/lexicons/site'
 import { BlogPostSchema } from '../shared/schemas/blog'
-import { NPMX_SITE } from '../shared/utils/constants'
+import { NPMX_SITE_PROD } from '../shared/utils/constants'
 import { read } from 'gray-matter'
 import { TID } from '@atproto/common'
 import { Client } from '@atproto/lex'
@@ -43,7 +43,7 @@ export default defineNuxtModule({
         // Process files in parallel
         await Promise.all(
           batch.map(file =>
-            syncFile(file, NPMX_SITE, client).catch(error =>
+            syncFile(file, NPMX_SITE_PROD, client).catch(error =>
               console.error(`[standard-site-sync] Error in ${file}:` + error),
             ),
           ),
@@ -61,7 +61,7 @@ export default defineNuxtModule({
       }
 
       // Process add/change events only
-      await syncFile(resolve(nuxt.options.rootDir, path), NPMX_SITE, client).catch(err =>
+      await syncFile(resolve(nuxt.options.rootDir, path), NPMX_SITE_PROD, client).catch(err =>
         console.error(`[standard-site-sync] Failed ${path}:`, err),
       )
     })
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index 4d940ce93..c07a32d48 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -8,7 +8,8 @@ export const CACHE_MAX_AGE_ONE_DAY = 60 * 60 * 24
 export const CACHE_MAX_AGE_ONE_YEAR = 60 * 60 * 24 * 365
 
 // API Strings
-export const NPMX_SITE = 'https://npmx.dev'
+export const NPMX_SITE_PROD = 'https://npmx.dev'
+export const NPMX_DOCS_SITE_PROD = 'https://docs.npmx.dev'
 export const BLUESKY_API = 'https://public.api.bsky.app'
 export const BLUESKY_COMMENTS_REQUEST = '/api/atproto/bluesky-comments'
 export const NPM_REGISTRY = 'https://registry.npmjs.org'