special case generating baseUrl for production (#5840)

frontend/components/customizer/customizer.tsx

@@ -11,13 +11,6 @@ import {
   CopiedContentIndicatorHandle,
 } from './copied-content-indicator'
 
-function getBaseUrlFromWindowLocation(): string {
-  // Default to the current hostname for when there is no `BASE_URL` set
-  // at build time (as in most PaaS deploys).
-  const { protocol, hostname } = window.location
-  return `${protocol}//${hostname}`
-}
-
 export default function Customizer({
   baseUrl,
   title,
@@ -50,7 +43,7 @@ export default function Customizer({
 
   function generateBuiltBadgeUrl(): string {
     const suffix = queryString ? `?${queryString}` : ''
-    return `${baseUrl || getBaseUrlFromWindowLocation()}${path}${suffix}`
+    return `${baseUrl}${path}${suffix}`
   }
 
   function renderLivePreview(): JSX.Element {

frontend/components/development/logo-page.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { staticBadgeUrl } from '../../../core/badge-urls/make-badge-url'
-import { baseUrl } from '../../constants'
+import { getBaseUrl } from '../../constants'
 import { shieldsLogos, simpleIcons } from '../../lib/supported-features'
 import Meta from '../meta'
 import Header from '../header'
@@ -19,6 +19,7 @@ const StyledTable = styled.table`
 `
 
 function NamedLogoTable({ logoNames }: { logoNames: string[] }): JSX.Element {
+  const baseUrl = getBaseUrl()
   return (
     <StyledTable>
       <thead>

frontend/components/development/style-page.tsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 import styled from 'styled-components'
 // @ts-ingnore
 import { staticBadgeUrl } from '../../../core/badge-urls/make-badge-url'
-import { baseUrl } from '../../constants'
+import { getBaseUrl } from '../../constants'
 import Meta from '../meta'
 // @ts-ignore
 import Header from '../header'
@@ -123,6 +123,7 @@ const examples = [
 ]
 
 function StyleTable({ style }: { style: string }): JSX.Element {
+  const baseUrl = getBaseUrl()
   return (
     <StyledTable>
       <thead>

frontend/components/main.tsx

@@ -11,7 +11,7 @@ import {
   RenderableExample,
 } from '../lib/service-definitions'
 import ServiceDefinitionSetHelper from '../lib/service-definitions/service-definition-set-helper'
-import { baseUrl } from '../constants'
+import { getBaseUrl } from '../constants'
 import Meta from './meta'
 import Header from './header'
 import SuggestionAndSearch from './suggestion-and-search'
@@ -54,6 +54,7 @@ export default function Main({
     setSelectedExampleIsSuggestion,
   ] = useState(false)
   const searchTimeout = useRef(0)
+  const baseUrl = getBaseUrl()
 
   function performSearch(query: string): void {
     setSearchIsInProgress(false)

frontend/constants.ts

@@ -1 +1,33 @@
-export const baseUrl = process.env.GATSBY_BASE_URL || ''
+const baseUrl = process.env.GATSBY_BASE_URL
+
+export function getBaseUrl(): string {
+  if (baseUrl) {
+    return baseUrl
+  }
+
+  /*
+  This is a special case for production.
+
+  We want to be able to build the front end with no value set for
+  `GATSBY_BASE_URL` so that we can deploy a build to staging
+  and then promote the exact same build to production.
+
+  When deployed to staging, we want the frontend on
+  https://staging.shields.io/ to generate badges with the base
+  https://staging.shields.io/
+
+  When we promote to production we want https://shields.io/ and
+  https://www.shields.io/ to both generate badges with the base
+  https://img.shields.io/
+  */
+  try {
+    const { protocol, hostname } = window.location
+    if (['shields.io', 'www.shields.io'].includes(hostname)) {
+      return 'https://img.shields.io'
+    }
+    return `${protocol}//${hostname}`
+  } catch (e) {
+    // server-side rendering
+    return ''
+  }
+}

frontend/pages/community.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { baseUrl } from '../constants'
+import { getBaseUrl } from '../constants'
 import Meta from '../components/meta'
 import Header from '../components/header'
 import Footer from '../components/footer'
@@ -19,6 +19,7 @@ const SponsorContainer = styled.div`
 `
 
 export default function SponsorsPage(): JSX.Element {
+  const baseUrl = getBaseUrl()
   return (
     <MainContainer>
       <GlobalStyle />

frontend/pages/endpoint.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { staticBadgeUrl } from '../../core/badge-urls/make-badge-url'
-import { baseUrl } from '../constants'
+import { getBaseUrl } from '../constants'
 import Meta from '../components/meta'
 import Header from '../components/header'
 import Footer from '../components/footer'
@@ -89,6 +89,7 @@ const Schema = styled.dl`
 `
 
 export default function EndpointPage(): JSX.Element {
+  const baseUrl = getBaseUrl()
   return (
     <MainContainer>
       <GlobalStyle />