feat: different logos for staging and dev

components/nav/NavFooter.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { buildInfo } from 'virtual:build-info'
-
+const buildInfo = useRuntimeConfig().public.buildInfo
 const timeAgoOptions = useTimeAgoOptions()
 
 const buildTimeDate = new Date(buildInfo.time)

components/nav/NavTitle.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { buildInfo } from 'virtual:build-info'
-
-const { env } = buildInfo
+const { env } = useBuildInfo()
 </script>
 
 <template>

composables/about.ts

@@ -1,3 +1,5 @@
+import type { BuildInfo } from '~~/types'
+
 export interface Team {
   github: string
   display: string
@@ -31,3 +33,7 @@ export const teams: Team[] = [
     mastodon: '[email protected]',
   },
 ].sort(() => Math.random() - 0.5)
+
+export function useBuildInfo() {
+  return useRuntimeConfig().public.buildInfo as BuildInfo
+}

composables/setups.ts

@@ -1,9 +1,9 @@
 import type { Directions } from 'vue-i18n-routing'
-import { buildInfo } from 'virtual:build-info'
 import type { LocaleObject } from '#i18n'
 
 export function setupPageHeader() {
   const { locale, locales, t } = useI18n()
+  const buildInfo = useBuildInfo()
 
   const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
     acc[l.code!] = l.dir ?? 'auto'

modules/build-env.ts

@@ -0,0 +1,30 @@
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
+import { getEnv, version } from '../config/env'
+import type { BuildInfo } from '~/types'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtModule({
+  meta: {
+    name: 'elk:build-env',
+  },
+  async setup(_options, nuxt) {
+    const { env, commit, branch } = await getEnv()
+    const buildInfo: BuildInfo = {
+      version,
+      time: +Date.now(),
+      commit,
+      branch,
+      env,
+    }
+
+    nuxt.options.runtimeConfig.public.env = env
+    nuxt.options.runtimeConfig.public.buildInfo = buildInfo
+
+    nuxt.options.nitro.publicAssets ||= nuxt.options.nitro.publicAssets || []
+    if (env === 'canary' || env === 'preview')
+      nuxt.options.nitro.publicAssets.push({ dir: resolve('../public-staging') })
+    else if (env === 'dev')
+      nuxt.options.nitro.publicAssets.push({ dir: resolve('../public-dev') })
+  },
+})

nuxt.config.ts

@@ -1,11 +1,9 @@
-import { createResolver } from '@nuxt/kit'
 import Inspect from 'vite-plugin-inspect'
 import { isCI, isDevelopment } from 'std-env'
+import { isPreview } from './config/env'
 import { i18n } from './config/i18n'
 import { pwa } from './config/pwa'
-import { isPreview } from './config/env'
-
-const { resolve } = createResolver(import.meta.url)
+import type { BuildInfo } from './types'
 
 export default defineNuxtConfig({
   typescript: {
@@ -93,7 +91,8 @@ export default defineNuxtConfig({
       inviteToken: '',
     },
     public: {
-      env: '', // set in build-info module
+      env: '', // set in build-env module
+      buildInfo: {} as BuildInfo, // set in build-env module
       pwaEnabled: !isDevelopment || process.env.VITE_DEV_PWA === 'true',
       translateApi: '',
       defaultServer: 'mas.to',
@@ -112,9 +111,6 @@ export default defineNuxtConfig({
     },
   },
   nitro: {
-    publicAssets: [
-      ...(!isCI || isPreview ? [{ dir: resolve('./public-dev') }] : []),
-    ],
     prerender: {
       crawlLinks: false,
       routes: ['/'],

pages/settings/about/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { buildInfo } from 'virtual:build-info'
-
+const buildInfo = useBuildInfo()
 const { t } = useI18n()
 
 useHeadFixed({

shims.d.ts

@@ -1,8 +1,3 @@
 /// <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'
-  export const buildInfo: BuildInfo
-}