feat: display version

components/nav/NavFooter.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-const buildTime = import.meta.env.__BUILD_TIME__ as string
+import buildInfo from 'virtual:build-info'
-const buildCommit = import.meta.env.__BUILD_COMMIT__ as string
-const buildTimeDate = new Date(buildTime)
 
 const timeAgoOptions = useTimeAgoOptions()
 
-const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
+const buildTimeDate = new Date(buildInfo.time)
+const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
 </script>
 
 <template>
@@ -53,17 +52,21 @@ const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
     <div>{{ $t('app_desc_short') }}</div>
     <div>
       <i18n-t keypath="nav_footer.built_at">
-        <time :datetime="buildTime" :title="$d(buildTimeDate, 'long')">{{ buildTimeAgo }}</time>
+        <time :datetime="String(buildTimeDate)" :title="$d(buildTimeDate, 'long')">{{ buildTimeAgo }}</time>
       </i18n-t>
-      <template v-if="buildCommit">
+      <template v-if="buildInfo.version">
+        &middot;
+        v{{ buildInfo.version }}
+      </template>
+      <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
         &middot;
         <NuxtLink
           external
-          :href="`https://github.com/elk-zone/elk/commit/${buildCommit}`"
+          :href="`https://github.com/elk-zone/elk/commit/${buildInfo.commit}`"
           target="_blank"
           font-mono
         >
-          {{ buildCommit.slice(0, 7) }}
+          {{ buildInfo.commit.slice(0, 7) }}
         </NuxtLink>
       </template>
     </div>

modules/build-info.ts

@@ -0,0 +1,30 @@
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import Git from 'simple-git'
+import { version } from '../package.json'
+import type { BuildInfo } from '~/types'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'elk:build-info',
+  },
+  async setup() {
+    const git = Git()
+    const buildInfo: BuildInfo = {
+      version,
+      time: +Date.now(),
+      commit: await git.revparse(['HEAD']),
+      branch: await git.revparse(['--abbrev-ref', 'HEAD']),
+    }
+    addVitePlugin({
+      name: 'elk:build-info',
+      resolveId(id) {
+        if (id === 'virtual:build-info')
+          return id
+      },
+      load(id) {
+        if (id === 'virtual:build-info')
+          return `export default ${JSON.stringify(buildInfo, null, 2)}`
+      },
+    })
+  },
+})

nuxt.config.ts

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '~/modules/purge-comments',
     '~/modules/setup-components',
+    '~/modules/build-info',
     '~/modules/pwa/index', // change to '@vite-pwa/nuxt' once released and remove pwa module
     '~/modules/tauri/index',
   ],
@@ -45,8 +46,6 @@ export default defineNuxtConfig({
   },
   vite: {
     define: {
-      'import.meta.env.__BUILD_TIME__': JSON.stringify(new Date().toISOString()),
-      'import.meta.env.__BUILD_COMMIT__': JSON.stringify(process.env.COMMIT_REF || ''),
       'process.env.VSCODE_TEXTMATE_DEBUG': 'false',
       'process.mock': ((!isCI || isPreview) && process.env.MOCK_USER) || 'false',
     },

shims.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="@types/wicg-file-system-access" />
 /// <reference types="vite-plugin-pwa/info" />
 /// <reference types="vite-plugin-pwa/client" />
+
+declare module 'virtual:build-info' {
+  import type { BuildInfo } from '~/types'
+  const buildInfo: BuildInfo
+  export default buildInfo
+}

styles/global.css

@@ -184,3 +184,9 @@ body {
 em-emoji-picker {
   --border-radius: 0;
 }
+
+footer {
+  a {
+    --at-apply: 'hover:underline';
+  }
+}

types/index.ts

@@ -65,3 +65,10 @@ export interface Draft {
   attachments: Attachment[]
 }
 export type DraftMap = Record<string, Draft>
+
+export interface BuildInfo {
+  version: string
+  commit: string
+  time: number
+  branch: string
+}