From 1811d1c7ff3415f5783d8b73de2ac2c21c3d7b76 Mon Sep 17 00:00:00 2001
From: Michael Jackson <michael@jackson.us>
Date: Sat, 6 Jun 2020 09:36:38 -0700
Subject: [PATCH] Add current build id to footer

---
 .travis.yml                           |  3 +--
 modules/client/browse/App.js          |  9 ++++++++-
 modules/client/browse/FolderViewer.js |  2 +-
 modules/client/main/App.js            | 21 ++++++++++++++-------
 rollup.config.js                      | 10 ++++++++++
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 45ecd29..1cad51a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,8 +7,7 @@ before_install:
 script:
 - yarn lint
 - yarn test
-- NODE_ENV=$([ "$TRAVIS_BRANCH" == "master" ] && echo "production" || echo "staging")
-  yarn build
+- NODE_ENV=$([ "$TRAVIS_BRANCH" == "master" ] && echo "production" || echo "staging") BUILD_ID=${TRAVIS_COMMIT:0:8} yarn build
 deploy:
 - provider: gae
   skip_cleanup: true
diff --git a/modules/client/browse/App.js b/modules/client/browse/App.js
index dcf8173..7305200 100644
--- a/modules/client/browse/App.js
+++ b/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"
diff --git a/modules/client/browse/FolderViewer.js b/modules/client/browse/FolderViewer.js
index aecf1c6..8e5d672 100644
--- a/modules/client/browse/FolderViewer.js
+++ b/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
           }
         }}
diff --git a/modules/client/main/App.js b/modules/client/main/App.js
index 09d459a..659959c 100644
--- a/modules/client/main/App.js
+++ b/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;
-  const since = parseDate(totals.since);
-  const until = parseDate(totals.until);
+  let totals = data.totals;
+  let since = parseDate(totals.since);
+  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);
-  const stringStats = JSON.stringify(stats);
+  let hasStats = !!(stats && !stats.error);
+  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"
diff --git a/rollup.config.js b/rollup.config.js
index 6fe1ca1..d0c4477 100644
--- a/rollup.config.js
+++ b/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
       ),