From d7890131daa4fc87327faffefc6d4246b1cddfe0 Mon Sep 17 00:00:00 2001
From: MusicOnline <39178127+MusicOnline@users.noreply.github.com>
Date: Sun, 10 Mar 2024 11:49:47 +0800
Subject: [PATCH] feat: add footer and credits

---
 README.md                |  9 +++++
 app.vue                  |  4 +++
 components/Footer.vue    | 74 ++++++++++++++++++++++++++++++++++++++++
 components/GitStatus.vue | 64 ++++++++++++++++++++++++++++++++++
 nuxt.config.ts           | 21 ++++++++++++
 package.json             |  3 ++
 pnpm-lock.yaml           | 27 +++++++++++++++
 7 files changed, 202 insertions(+)
 create mode 100644 components/Footer.vue
 create mode 100644 components/GitStatus.vue

diff --git a/README.md b/README.md
index 770de8c..1840490 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,9 @@ NUXT_APP_BASE_URL=/RepositoryNameHere/
 # For generating SEO meta tags that require the base URL including the domain name
 # Omit the trailing slash
 NUXT_PUBLIC_FULL_BASE_URL=http://localhost:3000
+
+# Optional git remote repository commit base URL
+NUXT_PUBLIC_COMMIT_BASE_URL=https://github.com/MusicOnline/LimbusCompute/commit
 ```
 
 ### Development Server
@@ -92,3 +95,9 @@ Additionally, any pushes to the main branch of this repository will trigger the
 GitHub Pages Mirror: https://musiconline.github.io/LimbusCompute/
 
 Artifacts for both builds are available for download in their respective GitHub Actions pages.
+
+## Special Thanks
+
+In no particular order:
+
+- [SyxP](https://github.com/SyxP) ([ObiterDicta.jl](https://github.com/SyxP/ObiterDicta.jl))
diff --git a/app.vue b/app.vue
index e314acd..0c371d4 100644
--- a/app.vue
+++ b/app.vue
@@ -52,6 +52,10 @@ useHead({
       <div class="p-2">
         <NuxtPage class="mx-auto max-w-7xl" />
       </div>
+      <div class="relative w-full pt-4">
+        <UDivider class="mx-auto max-w-7xl" />
+        <Footer class="mx-auto w-full max-w-7xl px-2 py-4 md:py-8" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000..cf8e114
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,74 @@
+<template>
+  <footer class="text-gray-600 dark:text-gray-300">
+    <div class="flex flex-wrap items-center gap-2">
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1 font-bold md:text-xl">
+          <img class="w-6 h-6" src="/img/logo.svg" />
+          <span class="text-red-800 dark:text-yellow-400">
+            LimbusCompute: Limbus Company Toolbox
+          </span>
+        </div>
+        <div>
+          <ul class="flex gap-2 text-sm underline md:gap-4 md:text-base">
+            <li>
+              <UButton
+                class="p-0"
+                color="black"
+                variant="link"
+                to="https://github.com/MusicOnline/LimbusCompute#special-thanks"
+                target="_blank"
+              >
+                Credits
+              </UButton>
+            </li>
+          </ul>
+          <GitStatus class="text-xs" />
+        </div>
+      </div>
+      <div class="ml-auto flex flex-col items-end gap-1 text-sm md:gap-2">
+        <div class="flex items-center gap-1">
+          <span> Made with </span>
+          <a class="flex items-center" href="https://nuxt.com" target="_blank">
+            <UIcon
+              class="bg-contain bg-center text-xl md:text-2xl"
+              name="i-logos-nuxt-icon"
+            />
+          </a>
+          <a class="flex items-center" href="https://vuejs.org" target="_blank">
+            <UIcon
+              class="bg-contain bg-center text-xl md:text-2xl"
+              name="i-logos-vue"
+            />
+          </a>
+          <a
+            class="flex items-center"
+            href="https://tailwindcss.com"
+            target="_blank"
+          >
+            <UIcon
+              class="bg-contain bg-center text-xl md:text-2xl"
+              name="i-logos-tailwindcss-icon"
+            />
+          </a>
+          <UIcon
+            class="bg-contain bg-center text-xl md:text-2xl"
+            name="i-emojione-red-heart"
+          />
+        </div>
+        <div>
+          <a
+            class="flex items-center gap-1"
+            href="https://github.com/MusicOnline/LimbusCompute"
+            target="_blank"
+          >
+            <span> Watch development on </span>
+            <UIcon
+              class="bg-contain bg-center text-xl md:text-2xl"
+              name="i-mdi-github"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/components/GitStatus.vue b/components/GitStatus.vue
new file mode 100644
index 0000000..005efa8
--- /dev/null
+++ b/components/GitStatus.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const SECONDS_IN_MINUTE = 60
+const SECONDS_IN_HOUR = 60 * SECONDS_IN_MINUTE
+const SECONDS_IN_DAY = 24 * SECONDS_IN_HOUR
+const SECONDS_IN_WEEK = 7 * SECONDS_IN_DAY
+const SECONDS_IN_MONTH = 30 * SECONDS_IN_DAY
+const SECONDS_IN_YEAR = 365 * SECONDS_IN_DAY
+
+const {
+  public: { commit },
+} = useRuntimeConfig()
+
+const commitUrl = computed(() =>
+  commit.baseUrl
+    ? new URL(
+        commit.id,
+        commit.baseUrl + (commit.baseUrl.endsWith("/") ? "" : "/")
+      ).toString()
+    : null
+)
+const relativeTime = computed(() => {
+  const now = Date.now() / 1000 // Date.now() returns in milliseconds
+  const diff = now - parseInt(commit.timestamp)
+
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" })
+
+  // negative = past
+  if (diff < SECONDS_IN_MINUTE) {
+    return rtf.format(-Math.round(diff), "second")
+  } else if (diff < SECONDS_IN_HOUR) {
+    return rtf.format(-Math.round(diff / SECONDS_IN_MINUTE), "minute")
+  } else if (diff < SECONDS_IN_DAY) {
+    return rtf.format(-Math.round(diff / SECONDS_IN_HOUR), "hour")
+  } else if (diff < SECONDS_IN_WEEK) {
+    return rtf.format(-Math.round(diff / SECONDS_IN_DAY), "day")
+  } else if (diff < SECONDS_IN_MONTH) {
+    return rtf.format(-Math.round(diff / SECONDS_IN_WEEK), "week")
+  } else if (diff < SECONDS_IN_YEAR) {
+    return rtf.format(-Math.round(diff / SECONDS_IN_MONTH), "month")
+  } else {
+    return rtf.format(-Math.round(diff / SECONDS_IN_YEAR), "year")
+  }
+})
+</script>
+
+<template>
+  <div v-if="commit.id">
+    <UButton
+      class="p-0 flex-wrap"
+      color="gray"
+      variant="link"
+      :to="commitUrl"
+      target="_blank"
+      :disabled="!Boolean(commitUrl)"
+    >
+      <span>{{ commit.id }}</span>
+      <span>{{ commit.message }}</span>
+      <ClientOnly>
+        <span>({{ relativeTime }})</span>
+      </ClientOnly>
+      <UIcon v-if="commitUrl" name="i-heroicons-arrow-top-right-on-square" />
+    </UButton>
+  </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 743a6c5..b80d694 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,3 +1,9 @@
+import { execSync } from "child_process"
+
+function runTerminal(command: string): string {
+  return execSync(command).toString().trim()
+}
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
@@ -34,9 +40,24 @@ export default defineNuxtConfig({
   ssr: process.env.ENABLE_SSR?.toLowerCase() === "true",
   modules: ["@nuxt/ui"],
   devtools: { enabled: true },
+  ui: {
+    icons: ["heroicons", "mdi", "logos", "emojione"],
+  },
   runtimeConfig: {
     public: {
       fullBaseUrl: process.env.NUXT_PUBLIC_FULL_BASE_URL,
+      commit: {
+        id:
+          process.env.NUXT_PUBLIC_COMMIT_ID ||
+          runTerminal("git log --format=%h -n 1"),
+        message:
+          process.env.NUXT_PUBLIC_COMMIT_MESSAGE ||
+          runTerminal("git log --format=%s -n 1"),
+        timestamp:
+          process.env.NUXT_PUBLIC_COMMIT_TIMESTAMP ||
+          runTerminal("git log --format=%ct -n 1"),
+        baseUrl: process.env.NUXT_PUBLIC_COMMIT_BASE_URL,
+      },
     },
   },
 })
diff --git a/package.json b/package.json
index 104f7d2..eac9bae 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,9 @@
     "semi": false
   },
   "devDependencies": {
+    "@iconify-json/emojione": "^1.1.10",
+    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/mdi": "^1.1.64",
     "@nuxt/ui": "^2.14.2",
     "@viz-js/viz": "^3.4.0",
     "sass": "^1.71.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88d1785..8bb3cd0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,15 @@ dependencies:
     version: 4.3.0(vue@3.4.21)
 
 devDependencies:
+  '@iconify-json/emojione':
+    specifier: ^1.1.10
+    version: 1.1.10
+  '@iconify-json/logos':
+    specifier: ^1.1.42
+    version: 1.1.42
+  '@iconify-json/mdi':
+    specifier: ^1.1.64
+    version: 1.1.64
   '@nuxt/ui':
     specifier: ^2.14.2
     version: 2.14.2(nuxt@3.10.3)(vite@5.1.4)(vue@3.4.21)
@@ -816,12 +825,30 @@ packages:
       vue: 3.4.21
     dev: true
 
+  /@iconify-json/emojione@1.1.10:
+    resolution: {integrity: sha512-gzv5tbkbyoJFArWmmtGDmhvKjCcpa9a+qEFbW35IlKHc9LBL5lluRccP+BckCoYcoi5qi1VCPxzz6QL/UYW5VQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/heroicons@1.1.20:
     resolution: {integrity: sha512-puNt1al/rDw8Rb5x8sfk20UA8AQjMskLMh63nSUBj+8I0lQ7LtX+0Qn8wow2xTXTEsynJ9xXLD8Aat53e0qi8A==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/logos@1.1.42:
+    resolution: {integrity: sha512-/f+frtPm3m3Z30oy8Pk+QqRDkbmAiIaWGPl5CmsCXm15MVfvw9a/V/gD7WzdyuSGAZcFuQaqbHXj92y/n+2ifg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/mdi@1.1.64:
+    resolution: {integrity: sha512-zGeo5TjhNFAY6FmSDBLAzDO811t77r6v/mDi7CAL9w5eXqKez6bIjk8R9AL/RHIeq44ALP4Ozr4lMqFTkHr7ug==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/collections@1.0.401:
     resolution: {integrity: sha512-rjcwIh6jYxAaWavMkDQoM9TkpqUZ9v5NrlZ2gJX/9X2WF6DSXguG+HqhqIhRWJYGT1AQE9qAvgUGZbjylYn+GA==}
     dependencies: