feat(web): display build info for visual check update

apps/web/src/App.vue

@@ -1,28 +1,37 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import {RouterLink, RouterView} from 'vue-router'
+import BuildInfo from "@/components/BuildInfo.vue";
 
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <nav>
-        <img class="logo" src="@/../public/food_recipe_calculator_icon.png" width="64"/>
-        <RouterLink to="/">Калькулятор</RouterLink>
-        <RouterLink to="/favorite">Избранное</RouterLink>
-<!--        <RouterLink to="/helpers">Утилиты</RouterLink>-->
-        <RouterLink to="/about">О проекте</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <div class="content">
+    <header>
+      <div class="wrapper">
+        <nav>
+          <img class="logo" src="@/../public/food_recipe_calculator_icon.png" width="64"/>
+          <RouterLink to="/">Калькулятор</RouterLink>
+          <RouterLink to="/favorite">Избранное</RouterLink>
+          <!--        <RouterLink to="/helpers">Утилиты</RouterLink>-->
+          <RouterLink to="/about">О проекте</RouterLink>
+        </nav>
+      </div>
+    </header>
+
+    <RouterView/>
+    <footer>
+      <BuildInfo/>
+
+    </footer>
+
+  </div>
 </template>
 
 <style scoped>
 .wrapper {
   width: 100%;
 }
+
 header {
   line-height: 1.5;
 }
@@ -52,6 +61,16 @@ nav a:first-of-type {
   border: 0;
 }
 
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.content footer {
+  margin-top: auto;
+}
+
 @media (min-width: 1024px) {
   header {
     display: flex;
@@ -64,6 +83,7 @@ nav a:first-of-type {
     place-items: flex-start;
     flex-wrap: wrap;
   }
+
   nav .logo {
     margin-left: auto;
   }
@@ -77,4 +97,6 @@ nav a:first-of-type {
     margin-top: 1rem;
   }
 }
+
+
 </style>

apps/web/src/assets/main.css

@@ -1,33 +1,34 @@
 @import './base.css';
 
 #app {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 1em;
-  font-weight: normal;
-  text-wrap: normal;
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 1em;
+    font-weight: normal;
+    text-wrap: normal;
 }
 
 a,
 .green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+    text-decoration: none;
+    color: hsla(160, 100%, 37%, 1);
+    transition: 0.4s;
+    padding: 3px;
 }
 
 @media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+    a:hover {
+        background-color: hsla(160, 100%, 37%, 0.2);
+    }
 }
 
-@media (min-width: 1024px) {
-  body {
+body {
     display: flex;
-  }
+}
+
+@media (min-width: 1024px) {
 
-  #app {
-    width: 640px;
-  }
+    #app {
+        width: 640px;
+    }
 }

apps/web/src/components/BuildInfo.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+const date = import.meta.env.VITE_GIT_COMMIT_DATE;
+const branch = import.meta.env.VITE_GIT_BRANCH_NAME
+const commit_hash = import.meta.env.VITE_GIT_COMMIT_HASH
+
+const buildInfo = {
+  date,
+  branch,
+  commit_hash,
+  version: import.meta.env.VITE_PACKAGE_VERSION
+}
+</script>
+
+<template>
+  <div class="build-info-wrapper">
+
+    <div class="build-info" :title="buildInfo.date">
+      {{ buildInfo.version }} ({{ buildInfo.branch }}/{{ commit_hash }}) {{ buildInfo.date }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.build-info-wrapper {
+  position: relative;
+  width: 100%;
+  left: 0;
+  text-align: right;
+}
+.build-info {
+  color: gray;
+  font-size: 0.8em;
+}
+
+@media (min-width: 1024px) {
+}
+</style>

apps/web/vite.config.ts

@@ -1,12 +1,15 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { ConfigEnv, defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import nightwatchPlugin from 'vite-plugin-nightwatch'
 // import { ViteFaviconsPlugin } from 'vite-plugin-favicon2'
 import checker from 'vite-plugin-checker'
 import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
+import { execSync } from 'child_process'
+
+import packageJson from './package.json'
 
 const PWAOptions: Partial<VitePWAOptions> = {
   registerType: 'autoUpdate',
@@ -65,20 +68,56 @@ const PWAOptions: Partial<VitePWAOptions> = {
   }
 }
 
+interface BuildInfo {
+  commitHash: string
+  isoDate: string
+  version: string
+  refName: string
+}
+function getBuildInfo(): BuildInfo | null {
+  const parts: string[] = execSync("git show --no-patch --no-notes --pretty='%h;%cI;%D' HEAD")
+    .toString()
+    .trim()
+    .split(';')
+
+  if (parts.length == 3) {
+    const [commitHash, isoDate, ref_name] = parts
+    return {
+      commitHash,
+      isoDate,
+      version: packageJson.version,
+      refName: ref_name.match('HEAD ->.+origin/(.+)')?.[1] || ref_name
+    }
+  }
+  return null
+}
+
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-    nightwatchPlugin(),
-    checker({ typescript: true }),
-    // ViteFaviconsPlugin('./public/food_recipe_calculator_icon.png'),
-    VitePWA(PWAOptions)
-  ],
-  base: './',
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({ mode }: ConfigEnv) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
+
+  const buildInfo = getBuildInfo()
+  if (buildInfo) {
+    process.env.VITE_GIT_COMMIT_DATE = buildInfo.isoDate
+    process.env.VITE_GIT_BRANCH_NAME = buildInfo.refName
+    process.env.VITE_GIT_COMMIT_HASH = buildInfo.commitHash
+    process.env.VITE_PACKAGE_VERSION = buildInfo.version
+  }
+
+  return {
+    plugins: [
+      vue(),
+      vueJsx(),
+      nightwatchPlugin(),
+      checker({ typescript: true }),
+      // ViteFaviconsPlugin('./public/food_recipe_calculator_icon.png'),
+      VitePWA(PWAOptions)
+    ],
+    base: './',
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
     }
   }
 })

apps/web/vitest.config.ts

@@ -2,13 +2,15 @@ import { fileURLToPath } from 'node:url'
 import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
 import viteConfig from './vite.config'
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'e2e/*'],
-      root: fileURLToPath(new URL('./', import.meta.url))
-    }
-  })
+export default defineConfig((env) =>
+  mergeConfig(
+    viteConfig(env),
+    defineConfig({
+      test: {
+        environment: 'jsdom',
+        exclude: [...configDefaults.exclude, 'e2e/*'],
+        root: fileURLToPath(new URL('./', import.meta.url))
+      }
+    })
+  )
 )