render git commit info if env var is set

took out h1

cypress/e2e/integration/browse_collections.cy.js

@@ -3,10 +3,6 @@ describe("browse_collections: Browse collections page", () => {
     cy.visit("/collections");
   });
 
-  it("displays the correct page title", () => {
-    cy.get("h1").invoke("text").should("equal", "About Our Collections");
-  });
-
   it("finds the first collection sorted by title as default", () => {
     cy.get(".gallery-item")
       .first()

src/App.js

@@ -12,6 +12,7 @@ import AnalyticsConfig from "./components/AnalyticsConfig";
 import Header from "./components/Header";
 import NavBar from "./components/NavBar";
 import Footer from "./components/Footer";
+import { GitDetails } from "./components/GitDetails";
 import LoadingScreen from "./components/LoadingScreen";
 import { buildRoutes } from "./lib/CustomPageRoutes";
 import HomePage from "./pages/HomePage";
@@ -192,6 +193,7 @@ class App extends Component {
                 </Routes>
               </div>
             </main>
+            <GitDetails />
             <Footer />
           </ThemeProvider>
         </StyledEngineProvider>

src/components/GitDetails.js

@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+import "../css/GitDetails.scss";
+
+const GitDetails = () => {
+  const gitCommit = process.env.REACT_APP_GIT_COMMIT;
+  if (!gitCommit) {
+    return null;
+  }
+  return (
+    <div className="git-detail-section">
+      <p>
+        This site is running commit{" "}
+        <Link to={`https://github.com/VTUL/dlp-access/commit/${gitCommit}`}>
+          {gitCommit.substring(0, 7)}
+        </Link>{" "}
+        of the{" "}
+        <Link to={"https://github.com/VTUL/dlp-access/"}>vtdlp-access</Link>{" "}
+        project
+      </p>
+    </div>
+  );
+};
+
+export { GitDetails };

src/css/GitDetails.scss

@@ -0,0 +1,20 @@
+.git-detail-section {
+  position: relative;
+  display: block;
+  background-color: var(--light-gray);
+  width: 100%;
+  margin-bottom: 15px;
+  padding: 10px;
+  p {
+    position: relative;
+    display: block;
+    text-align: center;
+    font-family: "gineso-condensed", sans-serif;
+    a,
+    a:visited {
+      position: relative;
+      color: var(--themeHighlightColor);
+      cursor: pointer;
+    }
+  }
+}