Display Git Version in Angular UI via Build-Time Injection

This commit is contained in:
adityachandelgit
2025-04-15 15:09:37 -06:00
committed by Aditya Chandel
parent 29eb9d305d
commit 1c5ebea70f
5 changed files with 58 additions and 24 deletions

View File

@@ -100,6 +100,7 @@ jobs:
docker buildx create --use
docker buildx build \
--platform linux/amd64,linux/arm64 \
--build-arg UI_VERSION=${{ env.image_tag }} \
--tag ghcr.io/${{ github.actor }}/booklore-app:${{ env.image_tag }} \
--push .

View File

@@ -7,6 +7,9 @@ COPY ./booklore-ui/package.json ./booklore-ui/package-lock.json ./
RUN npm install --force
COPY ./booklore-ui /angular-app/
ARG UI_VERSION=development
RUN echo "export const version = '${UI_VERSION}';" > /angular-app/src/environments/version.ts
RUN npm run build --configuration=production
# Stage 2: Build the Spring Boot app with Gradle

View File

@@ -1,26 +1,44 @@
<ul class="layout-menu">
<ng-container *ngIf="homeMenu$ | async as homeMenu">
<ng-container *ngFor="let item of homeMenu; let i = index;">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ng-container>
</ul>
<div class="flex flex-col h-full">
<div>
<ul class="layout-menu">
<ng-container *ngIf="homeMenu$ | async as homeMenu">
<ng-container *ngFor="let item of homeMenu; let i = index;">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ng-container>
</ul>
<ul class="layout-menu">
<ng-container *ngIf="libraryMenu$ | async as libraryMenu">
<ng-container *ngFor="let item of libraryMenu; let i = index;">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ng-container>
</ul>
<ul class="layout-menu">
<ng-container *ngIf="shelfMenu$ | async as shelfMenu">
<ng-container *ngFor="let item of shelfMenu; let i = index;">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ng-container>
</ul>
</div>
<p style="margin-top: auto;" class="p-4 text-center w-full">
<a
[href]="getVersionUrl(version)"
target="_blank"
rel="noopener noreferrer"
class="text-gray-300 hover:underline hover:text-gray-500">
Version: {{ version }}
</a>
</p>
</div>
<ul class="layout-menu">
<ng-container *ngIf="libraryMenu$ | async as libraryMenu">
<ng-container *ngFor="let item of libraryMenu; let i = index;">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ng-container>
</ul>
<ul class="layout-menu">
<ng-container *ngIf="shelfMenu$ | async as shelfMenu">
<ng-container *ngFor="let item of shelfMenu; let i = index;">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ng-container>
</ul>

View File

@@ -8,6 +8,7 @@ import {map} from 'rxjs/operators';
import {ShelfService} from '../../../book/service/shelf.service';
import {BookService} from '../../../book/service/book.service';
import {LibraryShelfMenuService} from '../../../book/service/library-shelf-menu.service';
import {version} from '../../../../environments/version';
@Component({
selector: 'app-menu',
@@ -24,6 +25,8 @@ export class AppMenuComponent implements OnInit {
private bookService = inject(BookService);
private libraryShelfMenuService = inject(LibraryShelfMenuService);
protected readonly version = version;
ngOnInit(): void {
this.libraryMenu$ = this.libraryService.libraryState$.pipe(
@@ -86,4 +89,12 @@ export class AppMenuComponent implements OnInit {
);
}
getVersionUrl(version: string): string {
if (version.startsWith('v')) {
return `https://github.com/adityachandelgit/BookLore/releases/tag/${version}`;
} else {
return `https://github.com/adityachandelgit/BookLore/commit/${version}`;
}
}
}

View File

@@ -0,0 +1 @@
export const version = 'v0.0.0';