Added build version to the intro screen

package.json

@@ -48,8 +48,8 @@
     "typescript": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` REACT_APP_GIT_TIME=`git log -1 --format=%ci` react-scripts start",
+    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` REACT_APP_GIT_TIME=`git log -1 --format=%ci` react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "prettier": "prettier --write src/**/*.{ts,tsx,json}",
     "predeploy": "npm run build",

src/index.css

@@ -51,3 +51,7 @@ div.ui.card.intro {
   width: 600px;
   margin: auto;
 }
+
+.version {
+  color: #888;
+}

src/intro.tsx

@@ -15,6 +15,13 @@ function GedcomLink(props: {url: string; text: string}) {
   );
 }
 
+function formatBuildDate(dateString: string) {
+  return new Date(dateString)
+    .toISOString()
+    .slice(0, 16)
+    .replace('T', ' ');
+}
+
 /** The intro page. */
 export function Intro() {
   return (
@@ -111,6 +118,17 @@ export function Intro() {
             }}
           />
         </p>
+        <p className="ui right aligned version">
+          version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (
+          <a
+            href={`https://github.com/PeWu/topola-viewer/commit/${
+              process.env.REACT_APP_GIT_SHA
+            }`}
+          >
+            {process.env.REACT_APP_GIT_SHA}
+          </a>
+          )
+        </p>
       </Card.Content>
     </Card>
   );