feat: add version & commit hash

for better debug experiences :)

Author: Candinya

src/components/Header.vue

@@ -7,13 +7,21 @@
         </router-link>
     </div>
     <div class="absolute bottom-8 text-slate-400 text-sm -translate-x-1/2 left-1/2">
-        <a class="whitespace-nowrap" href="https://github.com/NaturalSelectionLabs" target="_blank"
-            >@ Natural Selection Labs</a
-        >
+        <div>
+            <el-tooltip placement="top" :content="`v${appVersion} #${commitHash}`"> CrossSync </el-tooltip>
+        </div>
+        <div>
+            <a class="whitespace-nowrap" href="https://github.com/NaturalSelectionLabs" target="_blank">
+                @ Natural Selection Labs
+            </a>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import logo from '../assets/logo.svg?raw';
+
+const appVersion = __APP_VERSION__;
+const commitHash = __COMMIT_HASH__;
 </script>
 <style scoped></style>

src/types/env.d.ts

@@ -6,3 +6,7 @@ declare module '*.vue' {
     const component: DefineComponent<{}, {}, any>;
     export default component;
 }
+
+// Version related
+declare const __APP_VERSION__: string;
+declare const __COMMIT_HASH__: string;

vite.config.ts

@@ -9,8 +9,13 @@ import { crx } from '@crxjs/vite-plugin';
 import manifest from './manifest';
 import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 
+import ChildProcess from 'child_process';
+
 // const production = process.env.NODE_ENV === 'production';
 
+const appVersion = JSON.stringify(process.env.npm_package_version);
+const commitHash = ChildProcess.execSync('git rev-parse --short HEAD').toString();
+
 export default defineConfig({
     build: {
         rollupOptions: {
@@ -53,4 +58,8 @@ export default defineConfig({
             },
         }),
     ],
+    define: {
+        __APP_VERSION__: appVersion,
+        __COMMIT_HASH__: commitHash,
+    },
 });