#8|add-versioning-to-project

angular.json

@@ -51,12 +51,27 @@
                   "maximumError": "5MB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "sourceMap": false,
+              "optimization": true,
+              "extractLicenses": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.production.ts"
+                }
+              ]
             },
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

package.json

@@ -3,7 +3,9 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --configuration development",
+    "start:production": "ng serve --configuration production",
+    "start:development" : "ng serve --configuration development",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

src/app/app.component.html

@@ -1,4 +1,14 @@
-<div class="flex flex-col justify-center items-center gap-6 p-4 min-h-screen bg-transparent overscroll-hidden relative">
+<div class="flex flex-col justify-center items-center gap-6 p-4 bg-transparent overscroll-hidden relative">
+
+  <div class="flex justify-end items-center gap-4 mb-8 w-full z-40">
+    <span class="source-code-pro-style text-gray-300/90 dark:text-gray-300/40"><b>v{{version}}</b></span>
+    <button type="button"
+            class=" px-3.5 py-2.5 border border-dark-primary dark:border-background rounded-full"
+            (click)="toggleTheme()">
+      <i [class]="darkModeIcon + ' text-2xl text-dark-primary dark:text-background'"></i>
+    </button>
+  </div>
+
   <div class="absolute top-0 left-0 w-full min-h-screen flex justify-center items-center z-0 overflow-hidden">
     <h1 class="source-code-pro-style text-gray-300/40 dark:text-gray-300/10 text-[500px]">Branch</h1>
   </div>
@@ -7,12 +17,6 @@ <h1 class="source-code-pro-style text-gray-300/40 dark:text-gray-300/10 text-[50
   <form [formGroup]="form" class="flex flex-col justify-start items-start w-8/12 mx-auto gap-6 z-40"
         (ngSubmit)="submitForm()">
 
-    <button type="button"
-            class="absolute top-4 right-4 px-3.5 py-2.5 border border-dark-primary dark:border-background rounded-full"
-            (click)="toggleTheme()">
-      <i [class]="darkModeIcon + ' text-2xl text-dark-primary dark:text-background'"></i>
-    </button>
-
     <div class="grid grid-cols-12 justify-start items-start gap-3 w-full">
       <span class="w-auto col-span-12 md:col-span-3 text-dark-primary dark:text-white">Username:</span>
       <div class="col-span-12 md:col-span-9">

src/app/app.component.ts

@@ -7,6 +7,7 @@ import {CommonModule} from '@angular/common';
 import {CustomButtonTypes} from './core/components/custom-button/custom-button-types';
 import {Icons} from './core/constants/icons';
 import {BranchData} from './core/models/branch-data';
+import {environment} from '../environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -26,6 +27,7 @@ export class AppComponent implements OnInit {
   branchNameValue: string = '';
   commitMessageValue: string = '';
   prTitle: string = '';
+  version: string = environment?.version;
 
   constructor(private themeService: ThemeService, private formBuilder: FormBuilder) {
     this.createForm();

src/environments/environment.development.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  version: '1.0.0',
+};

src/environments/environment.production.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  version: '1.0.0',
+};

src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  version: '1.0.0',
+};

src/index.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body class="bg-background dark:bg-dark-background duration-200">
+<body class="bg-background dark:bg-dark-background min-h-screen duration-200">
   <app-root></app-root>
 </body>
 </html>