Merge pull request 'Add commit hashes to UI and also cache bust translations' (#253) from FireIsGood/wafrn2:add-commit-hash into development

Reviewed-on: https://codeberg.org/wafrn/wafrn/pulls/253

package.json

···
     "backend:worker": "cd packages/backend && tsx utils/workers.ts",
     "backend:serve": "cd packages/backend && tsx index.ts",
     "backend:cohostImport": "cd packages/backend && tsx utils/maintenanceTasks/importcohost.ts",
-    "frontend:serve": "cd packages/frontend && ng serve",
-    "frontend:develop": "cd packages/frontend && ng serve --configuration development",
-    "frontend:develop:prod": "cd packages/frontend && ng serve --configuration devprod",
-    "frontend:develop:development": "cd packages/frontend && ng serve --configuration devdevelopment",
-    "frontend:build": "cd packages/frontend && ng build",
-    "frontend:deploy": "cd packages/frontend && ng build && rm -rf ../../frontend && mv dist/wafrn/browser ../../frontend",
+    "frontend:serve": "npm run prebuild && cd packages/frontend && ng serve",
+    "frontend:develop": "npm run prebuild && cd packages/frontend && ng serve --configuration development",
+    "frontend:develop:prod": "npm run prebuild && cd packages/frontend && ng serve --configuration devprod",
+    "frontend:develop:development": "npm run prebuild && cd packages/frontend && ng serve --configuration devdevelopment",
+    "frontend:build": "npm run prebuild && cd packages/frontend && ng build",
+    "frontend:deploy": "npm run prebuild && cd packages/frontend && ng build && rm -rf ../../frontend && mv dist/wafrn/browser ../../frontend",
     "frontend:test": "cd packages/frontend && jest",
     "frontend:translations:patch": "cd packages/frontend && tsx utils/patch-translations.ts",
     "frontend:translations:format": "cd packages/frontend && prettier src/assets/i18n/*.json --write",
+    "prebuild": "cd packages/frontend && tsx utils/prebuild.ts",
     "vercel-build": "cd packages/frontend && ng build  --configuration=vercel",
     "lint": "cd packages/frontend && ng lint --fix"
   },

packages/frontend/.gitignore

···
 yarn-error.log
 testem.log
 /typings
+buildData.json
 
 # System Files
 .DS_Store

packages/frontend/src/app/app.module.ts

···
 import { HttpClient } from '@angular/common/http'
 import { ThemeManagerComponent } from './theme-manager/theme-manager.component'
 import { HotkeyManagerComponent } from './components/hotkey-manager/hotkey-manager.component'
+import buildData from '../buildData.json'
 
 const globalRippleConfig: RippleGlobalOptions = {
   disabled: true,
···
 export class AppModule {}
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
-  return new TranslateHttpLoader(http, '/assets/i18n/', '.json')
+  return new TranslateHttpLoader(http, '/assets/i18n/', `.json?v=${buildData.git.fullHash}`)
 }

packages/frontend/src/app/components/navigation-menu/navigation-menu.component.html

···
       <hr />
       <div class="footer-stack">
         <app-color-scheme-switcher></app-color-scheme-switcher>
-        <div class="text-sm version-text">v{{ frontendVersion }}</div>
+        <div class="text-xs flex flex-column gap-1 align-items-end version-text">
+          @if (!buildData.version.endsWith('-DEV')) {
+            <a
+              class="subtle-link"
+              [href]="'https://codeberg.org/wafrn/wafrn/releases/tag/' + buildData.version"
+              target="_blank"
+              >v{{ buildData.version }}</a
+            >
+          } @else {
+            <span>v{{ buildData.version }}</span>
+          }
+          <a
+            class="subtle-link"
+            [href]="'https://codeberg.org/wafrn/wafrn/commit/' + buildData.git.fullHash"
+            target="_blank"
+            >{{ 'common.commit' | translate }} {{ buildData.git.hash }}</a
+          >
+        </div>
       </div>
     </div>
   </mat-drawer>

packages/frontend/src/app/components/navigation-menu/navigation-menu.component.scss

···
 
 .version-text {
   color: var(--mat-sys-outline);
+  line-height: 1.15;
   text-align: center;
 }
 

packages/frontend/src/app/components/navigation-menu/navigation-menu.component.ts

···
 import packageJson from '../../../../package.json'
 import { BlogDetails } from 'src/app/interfaces/blogDetails'
 import { GlobalData } from 'src/app/services/global-data.service'
+import buildData from '../../../buildData.json'
 
 @Component({
   selector: 'app-navigation-menu',
···
   horizontalMenuMode: Signal<boolean>
   offsetTopArea: Signal<boolean>
 
-  frontendVersion = packageJson.version
+  buildData = buildData
 
   constructor(
     globalData: GlobalData,

packages/frontend/src/assets/i18n/en.json

···
   "common": {
     "commaSeparation": "Separated with commas",
     "characters": "characters",
-    "default": "Default"
+    "default": "Default",
+    "commit": "commit"
   },
   "login": {
     "title": "Log in",

packages/frontend/utils/prebuild.ts

···
+import fs from 'fs'
+import path from 'path'
+import child_process from 'child_process'
+import packageJson from '../../../package.json'
+
+function execSyncSafe(command: string) {
+  let out = null
+  try {
+    out = child_process.execSync(command).toString().trim()
+  } catch (error) {
+    console.error(error)
+  }
+  return out
+}
+
+const isScript = require.main === module
+if (isScript) main()
+
+function main(): void {
+  // Load build data (git and stuff)
+  const buildData = {
+    version: packageJson.version,
+    git: {
+      branch: execSyncSafe('git rev-parse --abbrev-ref HEAD'),
+      hash: execSyncSafe('git rev-parse --short=7 HEAD'),
+      fullHash: execSyncSafe('git rev-parse HEAD')
+    }
+  }
+
+  const filePath = path.resolve('src', 'buildData.json')
+  const fileContents = JSON.stringify(buildData)
+
+  fs.writeFileSync(filePath, fileContents)
+}