Add current build id to footer

.travis.yml

@@ -7,8 +7,7 @@ before_install:
 script:
 - yarn lint
 - yarn test
-- NODE_ENV=$([ "$TRAVIS_BRANCH" == "master" ] && echo "production" || echo "staging")
+- NODE_ENV=$([ "$TRAVIS_BRANCH" == "master" ] && echo "production" || echo "staging") BUILD_ID=${TRAVIS_COMMIT:0:8} yarn build
-  yarn build
 deploy:
 - provider: gae
   skip_cleanup: true

modules/client/browse/App.js

@@ -11,6 +11,8 @@ import { TwitterIcon, GitHubIcon } from './Icons.js';
 
 import SelectDownArrow from './images/SelectDownArrow.png';
 
+const buildId = process.env.BUILD_ID;
+
 const globalStyles = css`
   html {
     box-sizing: border-box;
@@ -382,7 +384,12 @@ export default function App({
             justifyContent: 'space-between'
           }}
         >
-          <p>&copy; {new Date().getFullYear()} UNPKG</p>
+          <p>
+            <span>Build: {buildId}</span>
+          </p>
+          <p>
+            <span>&copy; {new Date().getFullYear()} UNPKG</span>
+          </p>
           <p css={{ fontSize: '1.5rem' }}>
             <a
               href="https://twitter.com/unpkg"

modules/client/browse/FolderViewer.js

@@ -155,7 +155,7 @@ export default function FolderViewer({ path, details: entries }) {
               display: 'none'
             }
           },
-          '& tr:first-child td': {
+          '& tr:first-of-type td': {
             borderTop: 0
           }
         }}

modules/client/main/App.js

@@ -13,6 +13,8 @@ import { TwitterIcon, GitHubIcon } from './Icons.js';
 import CloudflareLogo from './images/CloudflareLogo.png';
 import GoogleCloudLogo from './images/GoogleCloudLogo.png';
 
+const buildId = process.env.BUILD_ID;
+
 const globalStyles = css`
   html {
     box-sizing: border-box;
@@ -77,9 +79,9 @@ function AboutLogoImage(props) {
 }
 
 function Stats({ data }) {
-  const totals = data.totals;
+  let totals = data.totals;
-  const since = parseDate(totals.since);
+  let since = parseDate(totals.since);
-  const until = parseDate(totals.until);
+  let until = parseDate(totals.until);
 
   return (
     <p>
@@ -97,15 +99,15 @@ function Stats({ data }) {
 }
 
 export default function App() {
-  const [stats, setStats] = useState(
+  let [stats, setStats] = useState(
     typeof window === 'object' &&
       window.localStorage &&
       window.localStorage.savedStats
       ? JSON.parse(window.localStorage.savedStats)
       : null
   );
-  const hasStats = !!(stats && !stats.error);
+  let hasStats = !!(stats && !stats.error);
-  const stringStats = JSON.stringify(stats);
+  let stringStats = JSON.stringify(stats);
 
   useEffect(() => {
     window.localStorage.savedStats = stringStats;
@@ -414,7 +416,12 @@ export default function App() {
             justifyContent: 'space-between'
           }}
         >
-          <p>&copy; {new Date().getFullYear()} UNPKG</p>
+          <p>
+            <span>Build: {buildId}</span>
+          </p>
+          <p>
+            <span>&copy; {new Date().getFullYear()} UNPKG</span>
+          </p>
           <p css={{ fontSize: '1.5rem' }}>
             <a
               href="https://twitter.com/unpkg"

rollup.config.js

@@ -1,6 +1,8 @@
 require('dotenv').config();
 
 const builtinModules = require('module').builtinModules;
+const execSync = require('child_process').execSync;
+
 const babel = require('rollup-plugin-babel');
 const commonjs = require('rollup-plugin-commonjs');
 const compiler = require('@ampproject/rollup-plugin-closure-compiler');
@@ -12,6 +14,12 @@ const url = require('rollup-plugin-url');
 const entryManifest = require('./plugins/entryManifest');
 const pkg = require('./package.json');
 
+const buildId =
+  process.env.BUILD_ID ||
+  execSync('git rev-parse --short HEAD')
+    .toString()
+    .trim();
+
 const manifest = entryManifest();
 
 const client = ['browse', 'main'].map(entryName => {
@@ -48,6 +56,7 @@ const client = ['browse', 'main'].map(entryName => {
         }
       }),
       replace({
+        'process.env.BUILD_ID': JSON.stringify(buildId),
         'process.env.NODE_ENV': JSON.stringify(
           process.env.NODE_ENV || 'development'
         )
@@ -85,6 +94,7 @@ const server = {
       emitFiles: false
     }),
     replace({
+      'process.env.BUILD_ID': JSON.stringify(buildId),
       'process.env.CLOUDFLARE_EMAIL': JSON.stringify(
         process.env.CLOUDFLARE_EMAIL
       ),