More footer data (#224)

* output total datatoken liquidity in footer stats

* add build id to footer

* write out repo metadata before build

* build tweaks

* add title

* refactor

.gitignore

@@ -10,4 +10,5 @@ public
 storybook-static
 public/storybook
 .artifacts
-.vercel
+.vercel
+repo-metadata.json

gatsby-node.js

@@ -1,6 +1,10 @@
 const path = require('path')
 const createFields = require('./gatsby/createFields')
 const createMarkdownPages = require('./gatsby/createMarkdownPages')
+const execSync = require('child_process').execSync
+
+// Write out repo metadata
+execSync(`node ./scripts/write-repo-metadata > repo-metadata.json`)
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   createFields(node, actions, getNode)

package.json

@@ -11,12 +11,13 @@
     "jest": "NODE_ENV=test jest -c tests/unit/jest.config.js",
     "test": "npm run lint && npm run jest",
     "test:watch": "npm run lint && npm run jest -- --watch",
-    "lint": "eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx . && npm run type-check",
+    "lint": "npm run write:repoMetadata && eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx . && npm run type-check",
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
     "type-check": "tsc --noEmit",
     "analyze": "npm run build && source-map-explorer 'public/*.js'",
     "storybook": "start-storybook -p 4000 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o public/storybook"
+    "storybook:build": "build-storybook -c .storybook -o public/storybook",
+    "write:repoMetadata": "node ./scripts/write-repo-metadata > repo-metadata.json"
   },
   "dependencies": {
     "@coingecko/cryptoformat": "^0.4.2",

scripts/write-repo-metadata.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+'use strict'
+
+const execSync = require('child_process').execSync
+
+//
+// VERCEL_GITHUB_COMMIT_REF & VERCEL_GITHUB_COMMIT_SHA need to be added with empty
+// values in Vercel environment variables, making them available to builds.
+// https://vercel.com/docs/build-step#system-environment-variables
+//
+process.stdout.write(
+  JSON.stringify(
+    {
+      version: require('../package.json').version,
+      branch: process.env.VERCEL_GITHUB_COMMIT_REF || 'dev',
+      commit:
+        process.env.VERCEL_GITHUB_COMMIT_SHA ||
+        execSync(`git rev-parse HEAD`).toString().trim()
+    },
+    null,
+    '  '
+  )
+)

src/components/atoms/BuildId.module.css

@@ -0,0 +1,6 @@
+.buildId {
+  display: inline-block;
+  font-size: var(--font-size-mini);
+  margin-bottom: var(--spacer);
+  font-family: var(--font-family-monospace);
+}

src/components/atoms/BuildId.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react'
+import repoMetadata from '../../../repo-metadata.json'
+import styles from './BuildId.module.css'
+
+export default function BuildId(): ReactElement {
+  const commitBranch = repoMetadata.branch
+  const commitId = repoMetadata.commit
+  const isMainBranch = commitBranch === 'main'
+
+  return (
+    <a
+      className={styles.buildId}
+      href={`https://github.com/oceanprotocol/market/tree/${
+        isMainBranch ? commitId : commitBranch
+      }`}
+      target="_blank"
+      rel="noreferrer"
+      title="Build ID referring to the linked commit hash."
+    >
+      {isMainBranch ? commitId.substring(0, 7) : commitBranch}
+    </a>
+  )
+}

src/components/molecules/MarketStats.module.css

@@ -1,16 +1,14 @@
 .stats {
   margin-bottom: calc(var(--spacer) * 2);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-small);
+  line-height: 2;
 }
 
 .stats > div > div {
   display: inline-block;
 }
 
-.stats > div strong {
-  font-size: var(--font-size-base) !important;
-}
-
 .total {
   color: var(--color-secondary) !important;
+  font-size: var(--font-size-small) !important;
 }

src/components/molecules/MarketStats.tsx

@@ -57,8 +57,8 @@ export default function MarketStats(): ReactElement {
 
   return (
     <div className={styles.stats} ref={ref}>
-      Total of <strong>{stats?.datasets.total}</strong> data sets & datatokens
-      published by <strong>{stats?.owners}</strong> accounts.
+      Total of <strong>{stats?.datasets.total}</strong> data sets & unique
+      datatokens published by <strong>{stats?.owners}</strong> accounts.
       <br />
       <PriceUnit
         price={`${stats?.ocean}`}
@@ -66,6 +66,13 @@ export default function MarketStats(): ReactElement {
         className={styles.total}
         conversion
       />{' '}
+      and{' '}
+      <PriceUnit
+        price={`${stats?.datatoken}`}
+        symbol="datatokens"
+        small
+        className={styles.total}
+      />{' '}
       in <strong>{stats?.datasets.pools}</strong> data set pools.
       <br />
       <strong>{stats?.datasets.none}</strong> data sets have no price set yet.

src/components/organisms/Footer.module.css

@@ -14,3 +14,12 @@
 .content p {
   display: inline;
 }
+
+.content a {
+  color: inherit;
+}
+
+.content a:hover,
+.content a:focus {
+  color: var(--color-primary);
+}

src/components/organisms/Footer.tsx

@@ -4,6 +4,7 @@ import Markdown from '../atoms/Markdown'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import { Link } from 'gatsby'
 import MarketStats from '../molecules/MarketStats'
+import BuildId from '../atoms/BuildId'
 
 export default function Footer(): ReactElement {
   const { copyright } = useSiteMetadata()
@@ -12,6 +13,7 @@ export default function Footer(): ReactElement {
   return (
     <footer className={styles.footer}>
       <div className={styles.content}>
+        <BuildId />
         <MarketStats />© {year} <Markdown text={copyright} /> —{' '}
         <Link to="/terms">Terms</Link>
         {' — '}