From df773529169454cf6b4c1554da8dc86f5ef3e496 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Fri, 20 May 2022 12:52:33 -0500
Subject: [PATCH] Add basic footer and build time string

---
 public/index.html         |  2 +-
 src/App.vue               | 20 ++++++++-
 src/components/Footer.vue | 92 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Footer.vue
diff --git a/public/index.html b/public/index.html
index 1ef8b64..79f1b6d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-build-timestamp-utc="<%= new Date().toISOString() %>">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/App.vue b/src/App.vue
index 4587216..e4a77a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,7 @@
                     </b-col>
                     <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
                         <router-view />
+                        <Footer :build-moment="buildMoment" />
                     </b-col>
                 </b-row>
             </b-container>
@@ -63,6 +64,17 @@
 </template>
 
 <style lang="scss">
+html, body {
+    min-height: 100vh;
+}
+
+#app {
+    min-height: 100vh;
+}
+.ais-InstantSearch {
+    height: 100%;
+}
+
 .outer-skeleton:not(:first-child) {
     display: none;
 }
@@ -115,12 +127,15 @@ import algoliasearch from "algoliasearch/lite";
 import SeasonList from "./components/SeasonList.vue";
 import "instantsearch.css/themes/algolia-min.css";
 import Skeleton from "./components/Skeleton.vue";
+import Footer from "./components/Footer.vue"
+import moment from "moment";
 
 export default {
     name: "App",
     components: {
         SeasonList,
-        Skeleton
+        Skeleton,
+        Footer
     },
     data() {
         return {
@@ -134,6 +149,9 @@ export default {
     computed: {
         showBreakpointMarker() {
             return process.env.NODE_ENV === 'development';
+        },
+        buildMoment() {
+            return moment(document.documentElement.dataset.buildTimestampUtc)
         }
     },
     methods: {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..330e01e
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="footer-dark">
+        <footer>
+            <b-container>
+                <b-row style="text-align: center">
+                    <ul>
+                        <li>
+                            <a href="https://github.com/Xevion/the-office">GitHub</a>
+                        </li>
+                        <li>
+                            <a :href="latestCommitUrl">Latest Commit</a>
+                        </li>
+                        <li>
+                            <a href="https://github.com/Xevion/the-office/issues/new">Report Issues</a>
+                        </li>
+                        <li>
+                            <a href="https://xevion.dev">Xevion.dev</a>
+                        </li>
+                    </ul>
+                </b-row>
+                <p v-if="buildTimeString !== null" class="build-time" :title="buildISOString">
+                    built on {{ buildTimeString }}
+                </p>
+            </b-container>
+        </footer>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Footer",
+    props: {
+        buildMoment: {type: Object, default: null}
+    },
+    computed: {
+        buildTimeString() {
+            return this.buildMoment.format('MMM do, YYYY [at] h:mm A zz')
+        },
+        buildISOString() {
+            return this.buildMoment.toISOString()
+        },
+        latestCommitUrl() {
+            return `https://github.com/Xevion/the-office/commit/${process.env.VUE_APP_GIT_HASH}`
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.footer-dark {
+    margin-top: auto;
+
+    padding: 50px 0;
+    color: #6d6d6d;
+
+    .build-time {
+        text-align: center;
+        padding-top: 0.7em;
+        opacity: 0.3;
+        font-size: 0.85em;
+        margin-bottom: 0;
+    }
+
+    ul {
+        padding: 0;
+        list-style: none;
+        line-height: 1.6;
+        font-size: 14px;
+        display: table;
+        margin: 0 auto;
+
+        li {
+            &:not(:last-child)::after {
+                padding: 0 0.6em;
+                content: "|";
+            }
+
+            display: inline;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: none;
+            opacity: 0.6;
+
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+}
+</style>
