show build commit and date in footer (#67)

Author: dowoge

env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare module 'virtual:build-info' {
+  export const gitCommit: string
+  export const gitCommitDate: string
+}

src/App.vue

@@ -1,15 +1,33 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import AuthButton from '@/components/AuthButton.vue'
 import AdminModerationPanel from '@/components/Moderation/AdminModerationPanel.vue'
 import IconDiscord from '@/components/icons/IconDiscord.vue'
 import IconYoutube from '@/components/icons/IconYoutube.vue'
 import IconGithub from '@/components/icons/IconGithub.vue'
 import { useAuth } from '@/stores/auth'
+import { gitCommit, gitCommitDate } from 'virtual:build-info'
 
 const { initAuth } = useAuth()
 
+const commitUrl = computed(() =>
+  gitCommit ? `https://github.com/offstyles/offstyles-web/commit/${gitCommit}` : ''
+)
+
+const commitDateLabel = computed(() => {
+  if (!gitCommitDate) return ''
+  const d = new Date(gitCommitDate)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+})
+
 onMounted(async () => {
   await initAuth()
 })
@@ -79,6 +97,18 @@ onMounted(async () => {
         <div class="text-gray-500 text-sm">
           Offstyle DB © 2025
         </div>
+
+        <!-- Build version -->
+        <div v-if="gitCommit" class="text-gray-600 text-xs mt-2">
+          <a
+            :href="commitUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="font-mono hover:text-gray-400 transition-colors duration-200"
+            :title="`Commit ${gitCommit}`"
+          >{{ gitCommit }}</a>
+          <span v-if="commitDateLabel"> · {{ commitDateLabel }}</span>
+        </div>
       </div>
     </footer>
 </template>

vite.config.ts

@@ -1,10 +1,39 @@
 import { fileURLToPath, URL } from 'node:url'
+import { execSync } from 'node:child_process'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import wasm from 'vite-plugin-wasm'
 
+function git(args: string): string {
+  try {
+    return execSync(`git ${args}`, { stdio: ['ignore', 'pipe', 'ignore'] }).toString().trim()
+  } catch {
+    return ''
+  }
+}
+
+const gitCommit = git('rev-parse --short HEAD')
+const gitCommitDate = git('log -1 --format=%cI')
+
+function buildInfoPlugin() {
+  const virtualId = 'virtual:build-info'
+  const resolvedId = '\0' + virtualId
+  return {
+    name: 'build-info',
+    resolveId(id: string) {
+      if (id === virtualId) return resolvedId
+    },
+    load(id: string) {
+      if (id === resolvedId) {
+        return `export const gitCommit = ${JSON.stringify(gitCommit)};\n`
+          + `export const gitCommitDate = ${JSON.stringify(gitCommitDate)};\n`
+      }
+    },
+  }
+}
+
 // Node 22+ exposes an experimental `localStorage` global as an empty `{}`
 // (unless `--localstorage-file` is set). `@vue/devtools-kit` checks
 // `typeof localStorage === 'undefined'` before calling `localStorage.getItem`
@@ -24,6 +53,7 @@ export default defineConfig({
     vueDevTools(),
     tailwindcss(),
     wasm(),
+    buildInfoPlugin(),
   ],
   resolve: {
     alias: {