Keep current origin when clicking on (staging.)thegraph.com links (#860)

Author: benface

.github/workflows/ci-cd-production.yml

@@ -37,6 +37,7 @@ jobs:
           cache-to: type=inline
           build-args: |
             ENVIRONMENT=production
+            ORIGIN=https://thegraph.com
           tags: |
             ${{ env.BASE_IMAGE }}:${{ github.sha }}
             ${{ env.BASE_IMAGE }}:latest

.github/workflows/ci-cd-pull-request.yml

@@ -107,4 +107,5 @@ jobs:
           cache-from: type=registry,ref=${{ env.BASE_IMAGE }}:latest
           build-args: |
             ENVIRONMENT=staging
+            ORIGIN=https://staging.thegraph.com
           push: false

.github/workflows/ci-cd-staging.yml

@@ -38,6 +38,7 @@ jobs:
           cache-to: type=inline
           build-args: |
             ENVIRONMENT=staging
+            ORIGIN=https://staging.thegraph.com
           tags: |
             ${{ env.BASE_IMAGE }}:${{ github.sha }}
             ${{ env.BASE_IMAGE }}:latest

Dockerfile

@@ -1,7 +1,10 @@
 FROM node:20-alpine as builder
 
 ARG ENVIRONMENT
+ARG ORIGIN
+
 ENV ENVIRONMENT=$ENVIRONMENT
+ENV ORIGIN=$ORIGIN
 
 ENV PNPM_HOME="/usr/bin"
 

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "turbo run dev --parallel",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' turbo run build",
-    "docker:build": "source ./website/.env.local && DOCKER_BUILDKIT=1 docker build . -t docs --no-cache --build-arg ENVIRONMENT=$ENVIRONMENT",
+    "docker:build": "source ./website/.env.local && DOCKER_BUILDKIT=1 docker build . -t docs --no-cache --build-arg ENVIRONMENT=$ENVIRONMENT --build-arg ORIGIN=$ORIGIN",
     "docker:clean": "docker builder prune",
     "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
     "check": "pnpm typecheck && pnpm lint && pnpm prettier:check",

packages/nextra-theme/package.json

@@ -55,7 +55,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "theme-ui": "^0.17.1",
-    "tsup": "^8.3.5"
+    "tsup": "^8.3.6"
   },
   "sideEffects": false
 }

pnpm-lock.yaml

@@ -1,4 +1,6 @@
 ENVIRONMENT=local
+ORIGIN=http://localhost:3000
+BASE_PATH=/docs
 ALGOLIA_API_KEY=9a358df50b02a5b66efeecbc0a2cab3d
 ALGOLIA_APP_ID=WQ5FYJCL00
 SITE_URL=https://thegraph.com/docs

website/.env

@@ -2,7 +2,8 @@ import nextra from 'nextra'
 
 const env = {
   ENVIRONMENT: process.env.ENVIRONMENT,
-  BASE_PATH: process.env.NODE_ENV === 'production' ? '/docs' : '',
+  ORIGIN: process.env.ORIGIN,
+  BASE_PATH: process.env.BASE_PATH,
   ALGOLIA_API_KEY: process.env.ALGOLIA_API_KEY,
   ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID,
   MIXPANEL_TOKEN:

website/next.config.js

@@ -27,8 +27,14 @@ import { supportedLocales, translations, useI18n } from '@/i18n'
 import '@edgeandnode/gds/style.css'
 import '@docsearch/css'
 
-const internalAbsoluteHrefRegex = /^(((https?:)?\/\/((www|staging)\.)?thegraph\.com)?\/docs\/|\/(?!\/))/i
-const externalHrefRegex = /^(?!(https?:)?\/\/((www|staging)\.)?thegraph\.com)([a-zA-Z0-9+.-]+:)?\/\//i
+// Match either:
+// 1. URLs that start with `/` followed by an optional path or query (root-relative URLs)
+// 2. URLs that start with `http(s)://(www.|staging.)thegraph.com`, followed by an optional path/query
+const rootRelativeOrTheGraphUrlRegex =
+  /^(?:\/(?!\/)|(?:(?:https?:)?\/\/(?:(?:www|staging)\.)?thegraph\.com)(?:$|\/|\?))(.+)?/i
+
+// Match URLs that start with a protocol/scheme or `//`
+const absoluteUrlRegex = /^(?:[a-zA-Z][a-zA-Z\d+.-]*:|\/\/)/
 
 const removeBasePathFromUrl = (url: string) => url.substring((process.env.BASE_PATH ?? '').length)
 
@@ -74,18 +80,23 @@ function MyApp({ Component, router, pageProps }: AppProps) {
 
           let { href, target } = props as ButtonOrLinkProps.ExternalLinkProps
 
-          // If the link is internal and absolute, ensure `href` is relative to the base path (i.e. starts with `/`,
-          // not `/docs/` or `https://...`) and includes a locale (by prepending the current locale if there is none)
-          const internalAbsoluteHrefMatches = internalAbsoluteHrefRegex.exec(href)
-          if (internalAbsoluteHrefMatches) {
-            href = href.substring(internalAbsoluteHrefMatches[0].length - 1)
-            const { locale: pathLocale, pathWithoutLocale } = extractLocaleFromPath(href, supportedLocales)
-            href = `/${pathLocale ?? locale ?? defaultLocale}${pathWithoutLocale}`
-          }
-
-          // If the link is external, default the target to `_blank`
-          if (externalHrefRegex.test(href)) {
-            target = target ?? '_blank'
+          const matches = rootRelativeOrTheGraphUrlRegex.exec(href)
+          if (matches?.length) {
+            const path = matches[1] ? (matches[1].startsWith('/') ? matches[1] : `/${matches[1]}`) : '/'
+            const basePath = process.env.BASE_PATH ?? ''
+            if (path === basePath || path.startsWith(`${basePath}/`)) {
+              // If the link is a root-relative URL (or an absolute but internal URL), ensure it is relative to the base path
+              href = path.substring(basePath.length) || '/'
+              // Also ensure the link includes a locale
+              const { locale: pathLocale, pathWithoutLocale } = extractLocaleFromPath(href, supportedLocales)
+              href = `/${pathLocale ?? locale ?? defaultLocale}${pathWithoutLocale}`
+            } else if (process.env.ORIGIN && rootRelativeOrTheGraphUrlRegex.test(process.env.ORIGIN)) {
+              // If the link is an absolute URL under (staging.)thegraph.com, ensure we don't switch between staging and production
+              href = `${process.env.ORIGIN}${path}`
+            }
+          } else if (absoluteUrlRegex.test(href)) {
+            // If the link is an external URL, default the target to `_blank`
+            target ??= '_blank'
           }
 
           return { ...props, href, target }