fix: resolve deployment path issues for manifest and assets on GitHub Pages

Updated asset and manifest paths from absolute (`/`) to relative (`./`) to ensure compatibility with GitHub Pages hosting
Fixed favicon and web manifest links so icons render correctly in production
Corrected fetch path in ManifestDataLoader.js to properly load manifest.json
Resolved issue where app version displayed as `null` due to manifest load failure

Author: dulanjayabhanu

404.html

@@ -16,16 +16,16 @@
     <!-- necessary meta tags -->
 
     <!-- app icons -->
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-16x16.png" sizes="16x16" />
-    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg" />
-    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg" />
+    <link rel="shortcut icon" href="./assets/icons/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png" />
 
     <meta name="apple-mobile-web-app-title" content="GitHub Connection Visualizer" />
 
-    <link rel="manifest" href="/assets/icons/site.webmanifest" />
-    <link rel="mask-icon" href="/assets/icons/favicon.svg" color="#fdfffc">
+    <link rel="manifest" href="./assets/icons/site.webmanifest" />
+    <link rel="mask-icon" href="./assets/icons/favicon.svg" color="#fdfffc">
     <!-- app icons -->
 
     <!-- open graph and facebook preview -->
@@ -125,7 +125,7 @@
                                 <span class="text-color text-capitalize">he page you&rsquo;re looking for doesn&rsquo;t exist or may have been moved.</span>
                             </div>
                             <div class="col-12 pt-3">
-                                <a class="btn btn-outline-secondary pagination-button-wrapper rounded-5 py-2" href="/" role="button" aria-disabled="true">
+                                <a class="btn btn-outline-secondary pagination-button-wrapper rounded-5 py-2" href="./" role="button" aria-disabled="true">
                                     <i class="bi bi-house-door-fill text-color"></i>&nbsp;
                                     Back To Home
                                 </a>

assets/icons/site.webmanifest

@@ -3,23 +3,23 @@
     "short_name": "GHCV",
     "icons": [
         {
-            "src": "/assets/icons/android-chrome-192x192.png",
+            "src": "./assets/icons/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/assets/icons/android-chrome-512x512.png",
+            "src": "./assets/icons/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         },
         {
-            "src": "/assets/icons/favicon-16x16.png",
+            "src": "./assets/icons/favicon-16x16.png",
             "sizes": "16x16",
             "type": "image/png",
             "purpose": "maskable"
         },
         {
-            "src": "/assets/icons/favicon-32x32.png",
+            "src": "./assets/icons/favicon-32x32.png",
             "sizes": "32x32",
             "type": "image/png",
             "purpose": "maskable"

index.html

@@ -16,16 +16,16 @@
     <!-- necessary meta tags -->
 
     <!-- app icons -->
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-16x16.png" sizes="16x16" />
-    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg" />
-    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg" />
+    <link rel="shortcut icon" href="./assets/icons/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png" />
 
     <meta name="apple-mobile-web-app-title" content="GitHub Connection Visualizer" />
 
-    <link rel="manifest" href="/assets/icons/site.webmanifest" />
-    <link rel="mask-icon" href="/assets/icons/favicon.svg" color="#fdfffc">
+    <link rel="manifest" href="./assets/icons/site.webmanifest" />
+    <link rel="mask-icon" href="./assets/icons/favicon.svg" color="#fdfffc">
     <!-- app icons -->
 
     <!-- open graph and facebook preview -->
@@ -875,7 +875,7 @@
                                 by GitHub. All content posted here is public and owned by its respective authors.</span>
                             <div class="col-12 py-3">
                                 <div class="d-flex flex-row justify-content-center align-items-center column-gap-3">
-                                    <a href="/" class="header-color footer-link-button">Home</a>
+                                    <a href="./" class="header-color footer-link-button">Home</a>
                                     <span class="muted-text-color">|</span>
                                     <a href="./privacy-policy.html" class="header-color footer-link-button">Privacy Policy</a>
                                     <span class="muted-text-color">|</span>

js/util/ManifestDataLoader.js

@@ -25,7 +25,7 @@ export class ManifestDataLoader{
         if(!this.#manifestData){
             // ManifestData object not available
             try {
-                const response = await fetch("/manifest.json");
+                const response = await fetch("./manifest.json");
 
                 // check if the fetching process is completed or not
                 if (response.ok) {

manifest.json

@@ -2,7 +2,7 @@
   "name": "GitHub Connection Visualizer",
   "short_name": "GHCV",
   "description": "Discover And Manage Your GitHub Connections With Ease.",
-  "start_url": "/",
+  "start_url": "./",
   "version": "1.0.0",
   "display": "standalone",
   "background_color": "#131315",

privacy-policy.html

@@ -16,16 +16,16 @@
     <!-- necessary meta tags -->
 
     <!-- app icons -->
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-16x16.png" sizes="16x16" />
-    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg" />
-    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg" />
+    <link rel="shortcut icon" href="./assets/icons/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png" />
 
     <meta name="apple-mobile-web-app-title" content="GitHub Connection Visualizer" />
 
-    <link rel="manifest" href="/assets/icons/site.webmanifest" />
-    <link rel="mask-icon" href="/assets/icons/favicon.svg" color="#fdfffc">
+    <link rel="manifest" href="./assets/icons/site.webmanifest" />
+    <link rel="mask-icon" href="./assets/icons/favicon.svg" color="#fdfffc">
     <!-- app icons -->
 
     <!-- open graph and facebook preview -->
@@ -119,7 +119,7 @@
                     <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-9 card card-wrapper glass-card px-4 py-3">
                         <div class="card-body">
                             <div class="p-4 fab-wrapper-top-left">
-                                <a class="btn btn-outline-secondary pagination-button-wrapper rounded-5 py-2" href="/" role="button" aria-disabled="true">
+                                <a class="btn btn-outline-secondary pagination-button-wrapper rounded-5 py-2" href="./" role="button" aria-disabled="true">
                                     <i class="bi bi-house-door-fill text-color"></i>&nbsp;
                                     Back To Home
                                 </a>
@@ -191,7 +191,7 @@
                                 by GitHub. All content posted here is public and owned by its respective authors.</span>
                             <div class="col-12 py-3">
                                 <div class="d-flex flex-row justify-content-center align-items-center column-gap-3">
-                                    <a href="/" class="header-color footer-link-button">Home</a>
+                                    <a href="./" class="header-color footer-link-button">Home</a>
                                     <span class="muted-text-color">|</span>
                                     <a href="./privacy-policy.html" class="header-color footer-link-button">Privacy Policy</a>
                                     <span class="muted-text-color">|</span>

terms-of-use.html

@@ -16,16 +16,16 @@
     <!-- necessary meta tags -->
 
     <!-- app icons -->
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="/assets/icons/favicon-16x16.png" sizes="16x16" />
-    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg" />
-    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="./assets/icons/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg" />
+    <link rel="shortcut icon" href="./assets/icons/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png" />
 
     <meta name="apple-mobile-web-app-title" content="GitHub Connection Visualizer" />
 
-    <link rel="manifest" href="/assets/icons/site.webmanifest" />
-    <link rel="mask-icon" href="/assets/icons/favicon.svg" color="#fdfffc">
+    <link rel="manifest" href="./assets/icons/site.webmanifest" />
+    <link rel="mask-icon" href="./assets/icons/favicon.svg" color="#fdfffc">
     <!-- app icons -->
 
     <!-- open graph and facebook preview -->
@@ -119,7 +119,7 @@
                     <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-9 card card-wrapper glass-card px-4 py-3">
                         <div class="card-body">
                             <div class="p-4 fab-wrapper-top-left">
-                                <a class="btn btn-outline-secondary pagination-button-wrapper rounded-5 py-2" href="/" role="button" aria-disabled="true">
+                                <a class="btn btn-outline-secondary pagination-button-wrapper rounded-5 py-2" href="./" role="button" aria-disabled="true">
                                     <i class="bi bi-house-door-fill text-color"></i>&nbsp;
                                     Back To Home
                                 </a>
@@ -230,7 +230,7 @@
                                 by GitHub. All content posted here is public and owned by its respective authors.</span>
                             <div class="col-12 py-3">
                                 <div class="d-flex flex-row justify-content-center align-items-center column-gap-3">
-                                    <a href="/" class="header-color footer-link-button">Home</a>
+                                    <a href="./" class="header-color footer-link-button">Home</a>
                                     <span class="muted-text-color">|</span>
                                     <a href="./privacy-policy.html" class="header-color footer-link-button">Privacy Policy</a>
                                     <span class="muted-text-color">|</span>