feat: add footer and credits

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))

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>

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>

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>

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,
+      },
     },
   },
 })

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",