feat(nuxt3): show build info

server/nuxt3/composables/about.ts

@@ -0,0 +1,5 @@
+import type { BuildInfo } from '~/types'
+
+export function useBuildInfo() {
+  return useAppConfig().buildInfo as BuildInfo
+}

server/nuxt3/config/env.ts

@@ -0,0 +1,49 @@
+/* eslint-disable node/prefer-global/process */
+import Git from 'simple-git'
+import { isDevelopment } from 'std-env'
+
+export { version } from '../package.json'
+
+/**
+ * Environment variable `PULL_REQUEST` provided by Netlify.
+ * @see {@link https://docs.netlify.com/configure-builds/environment-variables/#git-metadata}
+ *
+ * Whether triggered by a GitHub PR
+ */
+export const isPR = process.env.PULL_REQUEST === 'true'
+
+/**
+ * Environment variable `BRANCH` provided by Netlify.
+ * @see {@link https://docs.netlify.com/configure-builds/environment-variables/#git-metadata}
+ *
+ * Git branch
+ */
+export const gitBranch = process.env.BRANCH
+
+/**
+ * Environment variable `CONTEXT` provided by Netlify.
+ * @see {@link https://docs.netlify.com/configure-builds/environment-variables/#build-metadata}
+ *
+ * Whether triggered by PR, `deploy-preview` or `dev`.
+ */
+export const isPreview = isPR || process.env.CONTEXT === 'deploy-preview' || process.env.CONTEXT === 'dev'
+
+const git = Git()
+export async function getGitInfo() {
+  const branch = gitBranch || await git.revparse(['--abbrev-ref', 'HEAD'])
+  const commit = await git.revparse(['HEAD'])
+  const shortCommit = await git.revparse(['--short=7', 'HEAD'])
+  return { branch, commit, shortCommit }
+}
+
+export async function getEnv() {
+  const { commit, shortCommit, branch } = await getGitInfo()
+  const env = isDevelopment
+    ? 'dev'
+    : isPreview
+      ? 'preview'
+      : branch === 'main'
+        ? 'canary'
+        : 'release'
+  return { commit, shortCommit, branch, env } as const
+}

server/nuxt3/modules/build-env.ts

@@ -0,0 +1,24 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import { getEnv, version } from '../config/env'
+import type { BuildInfo } from '../types'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'stargram:build-env',
+  },
+  async setup(_options, nuxt) {
+    const { env, commit, shortCommit, branch } = await getEnv()
+    const buildInfo: BuildInfo = {
+      version,
+      time: +Date.now(),
+      commit,
+      shortCommit,
+      branch,
+      env,
+    }
+
+    nuxt.options.appConfig = nuxt.options.appConfig || {}
+    nuxt.options.appConfig.env = env
+    nuxt.options.appConfig.buildInfo = buildInfo
+  },
+})

server/nuxt3/nuxt.config.ts

@@ -2,6 +2,7 @@ import process from 'node:process'
 import vue from '@vitejs/plugin-vue'
 import { appDescription } from './constants/index'
 import { pwa } from './config/pwa'
+import type { BuildInfo } from './types'
 
 export type KV_DRIVER_TYPE = 'vercelKV' | 'cloudflareKVHTTP' | 'redis'
 
@@ -105,3 +106,11 @@ export default defineNuxtConfig({
   },
   pwa,
 })
+
+declare module '@nuxt/schema' {
+  interface AppConfig {
+    storage: any
+    env: BuildInfo['env']
+    buildInfo: BuildInfo
+  }
+}

server/nuxt3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@server/nuxt3",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "build": "nuxi build",

server/nuxt3/pages/settings.vue

@@ -8,6 +8,7 @@ useHead({
     { property: 'og:title', content: `Settings - ${appName}` },
   ],
 })
+const buildInfo = useBuildInfo()
 const userId = useLocalStorage('userId', '')
 const { copy } = useClipboard()
 const router = useRouter()
@@ -52,14 +53,23 @@ async function redirectToConfig() {
           <div uno-fad-random-1dice ml-1 title="Refresh" h-32px w-32px cursor-pointer @click="_userId = uuidv4()" />
           <div uno-carbon-copy title="Copy" ml-1 h-24px w-24px cursor-pointer @click="copy(_userId)" />
         </div>
-        <div mt-4 flex justify-center>
+        <div my-4 flex justify-center>
           <button btn :disabled="!_userId" @click="userId = _userId">
             Save
           </button>
           <button ml-4 btn :disabled="(!userId && !_userId) || (edit && !_userId)" @click="redirectToConfig()">
             Config
           </button>
         </div>
+        <UDivider label="About" />
+        <div flex justify-between>
+          <div>Version</div>
+          {{ `v${buildInfo.version} (${buildInfo.shortCommit}@${buildInfo.env})` }}
+        </div>
+        <div flex justify-between>
+          <div>Build time</div>
+          {{ new Date(buildInfo.time).toUTCString() }}
+        </div>
       </div>
     </ClientOnly>
   </div>

server/nuxt3/types/index.ts

@@ -0,0 +1,8 @@
+export interface BuildInfo {
+  version: string
+  commit: string
+  shortCommit: string
+  time: number
+  branch: string
+  env: 'preview' | 'canary' | 'dev' | 'release'
+}