Frontend: Allow BASE_URL to be unset (#1306)

- Do not use bogus `'undefined'` as base URI

.travis.yml

@@ -18,7 +18,7 @@ script:
   - npm run lint
   - npm run test:js:server
   - if node_modules/.bin/check-node-version --node '< 8.0' > /dev/null; then echo "Skipping frontend tests."; else npm run test:js:frontend; fi
-  - if node_modules/.bin/check-node-version --node '< 8.0' > /dev/null; then echo "Skipping build."; else BASE_URL=/ npm run build; fi
+  - if node_modules/.bin/check-node-version --node '< 8.0' > /dev/null; then echo "Skipping build."; else npm run build; fi
 
 jobs:
   include:

Makefile

@@ -4,7 +4,7 @@ favicon:
 	node lib/badge-cli.js '' '' '#bada55' .png > favicon.png
 
 website:
-	LONG_CACHE=false BASE_URL=/ npm run build
+	LONG_CACHE=false npm run build
 
 deploy: website deploy-s0 deploy-s1 deploy-s2 deploy-gh-pages
 

app.json

@@ -14,10 +14,6 @@
     "NPM_CONFIG_PRODUCTION": {
       "description": "Configure whether devDependencies are installed (they are needed for the build).",
       "value": "false"
-    },
-    "BASE_URL": {
-      "description": "The base URL to use in the frontend build",
-      "value": "/"
     }
   },
   "formation": {

frontend/components/badge-examples.js

@@ -1,16 +1,7 @@
-import URLPath from 'url-path';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-function resolveUri (uri, baseUri, options) {
-  const { longCache } = options || {};
-  const result = new URLPath(uri, baseUri);
-  if (longCache) {
-    result.searchParams.set('maxAge', '2592000');
-  }
-  return result.href;
-}
+import resolveUri from '../lib/resolve-uri';
 
 const Badge = ({ title, previewUri, exampleUri, documentation, baseUri, longCache, onClick }) => {
   const handleClick = onClick ?
@@ -26,7 +17,7 @@ const Badge = ({ title, previewUri, exampleUri, documentation, baseUri, longCach
     ) : '\u00a0'; // non-breaking space
   const resolvedExampleUri = resolveUri(
     exampleUri || previewUri,
-    baseUri || 'https://img.shields.io/',
+    baseUri,
     { longCache: false });
 
   return (
@@ -48,7 +39,7 @@ Badge.propTypes = {
   previewUri: PropTypes.string,
   exampleUri: PropTypes.string,
   documentation: PropTypes.string,
-  baseUri: PropTypes.string.isRequired,
+  baseUri: PropTypes.string,
   longCache: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };
@@ -83,7 +74,7 @@ Category.propTypes = {
     exampleUri: PropTypes.string,
     documentation: PropTypes.string,
   })).isRequired,
-  baseUri: PropTypes.string.isRequired,
+  baseUri: PropTypes.string,
   longCache: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };
@@ -107,7 +98,7 @@ BadgeExamples.propTypes = {
     category: Category.propTypes.category,
     examples: Category.propTypes.examples,
   })),
-  baseUri: PropTypes.string.isRequired,
+  baseUri: PropTypes.string,
   longCache: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };

frontend/components/dynamic-badge-maker.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export default class DynamicBadgeMaker extends React.Component {
   static propTypes = {
-    baseUri: PropTypes.string.isRequired,
+    baseUri: PropTypes.string,
   };
 
   state = {
@@ -17,7 +17,10 @@ export default class DynamicBadgeMaker extends React.Component {
   };
 
   makeBadgeUri () {
-    const result = new URL(`/dynamic/${this.state.type}.svg`, this.props.baseUri);
+    const result = new URL(
+      `/dynamic/${this.state.type}.svg`,
+      this.props.baseUri || document.location.href);
+
     const searchParams = [
       'label',
       'uri',

frontend/components/footer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import resolveUri from '../lib/resolve-uri';
 
 const Footer = ({ baseUri }) => (
   <section>
@@ -11,7 +12,7 @@ const Footer = ({ baseUri }) => (
     </p>
     <p>
       <object
-        data={baseUri + "/twitter/follow/shields_io.svg?style=social&label=Follow"}
+        data={resolveUri('/twitter/follow/shields_io.svg?style=social&label=Follow', baseUri)}
         alt="Follow @shields_io" />
       <a href="https://opencollective.com/shields" alt="Donate to us!">
         <img src="https://opencollective.com/shields/backers/badge.svg" />
@@ -20,10 +21,10 @@ const Footer = ({ baseUri }) => (
         <img src="https://opencollective.com/shields/sponsors/badge.svg" />
       </a>
       <object
-        data={baseUri + "/github/forks/badges/shields.svg?style=social&label=Fork"}
+        data={resolveUri('/github/forks/badges/shields.svg?style=social&label=Fork', baseUri)}
         alt="Fork on GitHub" />
       <object
-        data={baseUri + "/discord/308323056592486420.svg?style=social&label=Chat&link=https://discord.gg/HjJCwm5"}
+        data={resolveUri('/discord/308323056592486420.svg?style=social&label=Chat&link=https://discord.gg/HjJCwm5', baseUri)}
         alt="chat on Discord" />
     </p>
     <p>

frontend/components/static-badge-maker.js

@@ -4,7 +4,7 @@ import staticBadgeUri from '../lib/static-badge-uri';
 
 export default class StaticBadgeMaker extends React.Component {
   static propTypes = {
-    baseUri: PropTypes.string.isRequired,
+    baseUri: PropTypes.string,
   };
 
   state = {
@@ -18,7 +18,7 @@ export default class StaticBadgeMaker extends React.Component {
 
     const { baseUri } = this.props;
     const { subject, status, color } = this.state;
-    const badgeUri = staticBadgeUri(baseUri, subject, status, color);
+    const badgeUri = staticBadgeUri(baseUri || window.location.href, subject, status, color);
 
     document.location = badgeUri;
   }

frontend/lib/resolve-uri.js

@@ -0,0 +1,10 @@
+import URLPath from 'url-path';
+
+export default function resolveUri (uri, baseUri, options) {
+  const { longCache } = options || {};
+  const result = new URLPath(uri, baseUri);
+  if (longCache) {
+    result.searchParams.set('maxAge', '2592000');
+  }
+  return result.href;
+}

next.config.js

@@ -4,8 +4,7 @@ const shouldAnalyze = envFlag(process.env.ANALYZE);
 
 module.exports = {
   webpack: config => {
-    config.plugins.push(new webpack.EnvironmentPlugin(['BASE_URL']));
-    config.plugins.push(new webpack.EnvironmentPlugin({ LONG_CACHE: null }));
+    config.plugins.push(new webpack.EnvironmentPlugin({ BASE_URL: null, LONG_CACHE: null }));
 
     if (shouldAnalyze) {
       // We don't include webpack-bundle-analyzer in devDependencies, so  load

package-lock.json

@@ -12741,9 +12741,9 @@
       }
     },
     "url-path": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/url-path/-/url-path-0.1.1.tgz",
-      "integrity": "sha512-DQByXz6WBWMHVlRRuSgJrW/UYPFAyGnBTpeSB4LWN5iGe7sVuUEQsh3j9Wh34T+6l4Ftyy9ezbme1nY2jvRUEg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/url-path/-/url-path-0.2.0.tgz",
+      "integrity": "sha512-rwvqu+m9dy7GKvVQHl8tckexzrknDNr+gAE8xvwIdAbRvwifUFkAPIjuD5iCqG9koit2BI1anN7frSk2lsURxg==",
       "dev": true
     },
     "util": {

package.json

@@ -129,7 +129,7 @@
     "sazerac": "^0.4.2",
     "semver-regex": "^1.0.0",
     "sinon": "^4.0.1",
-    "url-path": "^0.1.1"
+    "url-path": "^0.2.0"
   },
   "engines": {
     "node": "8.x",