Display version string in the app's footer (#677)

Some CSS magic was required.
Also creates `src/app/version.js` for storing the version string.

Test plan: Visual inspection of the footer in both Chrome and Firefox,
both on a page with very little content (the cred explorer without a
repository loaded), and on a page with more than a screen height's of
content (the homepage, or cred explorer with a large repository loaded).
In all cases, the footer unobtrusively appears in the lower-left hand
corner at the bottom of the screen, (after scrolling past all content,
if applicable).

CHANGELOG.md

@@ -4,4 +4,5 @@
 - Start tracking changes in `CHANGELOG.md`
 - Aggregate over connection types in the cred explorer (#502)
 - Support hosting SourceCred instances at arbitrary gateways, not just the root of a domain (#643)
+- Display version string in the app's footer
 

src/app/Page.js

@@ -9,6 +9,7 @@ import GithubLogo from "./GithubLogo";
 import TwitterLogo from "./TwitterLogo";
 import {routeData} from "./routeData";
 import * as NullUtil from "../util/null";
+import {VERSION} from "./version";
 
 export default class Page extends React.Component<{|
   +assets: Assets,
@@ -16,12 +17,16 @@ export default class Page extends React.Component<{|
 |}> {
   render() {
     return (
-      <div>
+      <React.Fragment>
+        <div className={css(style.nonFooter)}>
           <header>
             <nav className={css(style.nav)}>
               <ul className={css(style.navList)}>
                 <li className={css(style.navItem, style.navItemLeft)}>
-                <Link to="/" className={css(style.navLink, style.navLinkTitle)}>
+                  <Link
+                    to="/"
+                    className={css(style.navLink, style.navLinkTitle)}
+                  >
                     SourceCred
                   </Link>
                 </li>
@@ -64,11 +69,36 @@ export default class Page extends React.Component<{|
           </header>
           <main>{this.props.children}</main>
         </div>
+        <footer className={css(style.footer)}>
+          <div className={css(style.footerWrapper)}>
+            <span className={css(style.footerText)}>{VERSION}</span>
+          </div>
+        </footer>
+      </React.Fragment>
     );
   }
 }
 
+const footerHeight = 30;
 const style = StyleSheet.create({
+  footer: {
+    color: "#666",
+    height: footerHeight,
+    fontSize: 14,
+    position: "relative",
+  },
+  footerWrapper: {
+    textAlign: "right",
+    position: "absolute",
+    bottom: 5,
+    width: "100%",
+  },
+  footerText: {
+    marginRight: 5,
+  },
+  nonFooter: {
+    minHeight: `calc(100vh - ${footerHeight}px)`,
+  },
   nav: {
     height: 60,
     padding: "20px 100px",

src/app/version.js

@@ -0,0 +1,19 @@
+// @flow
+
+export type VersionInfo = {|
+  +major: number,
+  +minor: number,
+  +patch: number,
+|};
+
+export const VERSION_INFO = Object.freeze({
+  major: 0,
+  minor: 0,
+  patch: 0,
+});
+
+export function format(info: VersionInfo): string {
+  return `v${info.major}.${info.minor}.${info.patch}`;
+}
+
+export const VERSION = format(VERSION_INFO);