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.

Author: serhalp

app/app.vue

@@ -44,7 +44,8 @@ useHead({
 })
 
 if (import.meta.server) {
-  setJsonLd(createWebSiteSchema())
+  const { siteUrl } = useAppUrls()
+  setJsonLd(createWebSiteSchema(siteUrl))
 }
 
 onKeyDown(

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">

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,

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

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,
+  }
+}

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',

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 }],

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 = [

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
 })
 

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,12 +146,14 @@ export async function getEnv(isDevelopment: boolean) {
         : 'release'
   const previewUrl = getPreviewUrl()
   const productionUrl = getProductionUrl()
+  const siteUrl = getSiteUrl(isDevelopment)
   return {
     commit,
     shortCommit,
     branch,
     env,
     previewUrl,
     productionUrl,
+    siteUrl,
   } as const
 }