Fixed link issues

Author: khalidrahmanhanify

Courses/index.html

@@ -16,7 +16,7 @@ <h1 class="page-title">Courses</h1>
         <div class="courses-cards grid grid--3-cols">
           <!-- card 1 -->
 
-          <a href="JavaScript/index.html" class="courses-card">
+          <a href="./JavaScript/index.html" class="courses-card">
             <img
               class="card-img"
               src="../assets/Images/Courses Banner/JavaScript.jpg"

assets/js/generateBreadcrumb.js

@@ -2,29 +2,30 @@ function generateBreadCrumb() {
   const breadCrumbContainer = document.getElementById("breadcrumb");
   let pathArray = window.location.pathname.split("/").filter((p) => p);
   const repoName = "javascript-course-notes";
+  pathArray.unshift(repoName);
 
   // If last segment is index.html, drop it
   if (pathArray[pathArray.length - 1]?.toLowerCase() === "index.html") {
     pathArray.pop();
   }
 
   let breadcrumbHTML = `
-    <a href="/index.html">
-      <img src="${repoName}/assets/Icons/monitor.png" style="width: 30px;"/>
+    <a href="https://khalidrahmanhanify.github.io/${repoName}/index.html">
+      <img src="https://khalidrahmanhanify.github.io/${repoName}/assets/Icons/monitor.png" style="width: 30px;"/>
     </a>
-     <img src="${repoName}/assets/Icons/arrow_right.png" style="width: 20px; height: 20px;"/>
+     <img src="https://khalidrahmanhanify.github.io/${repoName}/assets/Icons/arrow_right.png" style="width: 20px; height: 20px;"/>
   `;
 
   let fullPath = "";
-  pathArray.forEach((segment, index) => {
-    if (segment === repoName) return;
+  pathArray.forEach((segment) => {
     fullPath += `/${segment}`;
+    if (segment === repoName) return;
 
     breadcrumbHTML += `
      
     `;
     breadcrumbHTML += `<a href="${fullPath}">${decodeURIComponent(segment)}</a>
-       <img src="${repoName}/assets/Icons/arrow_right.png" style="width: 20px; height: 20px;"/>`;
+       <img src="https://khalidrahmanhanify.github.io/${repoName}/assets/Icons/arrow_right.png" style="width: 20px; height: 20px;"/>`;
   });
   console.log(fullPath);
 

index.html

@@ -12,7 +12,7 @@
     <nav class="breadcrumb" id="breadcrumb"></nav>
 
     <h1>My Notes are available in this website click the following link</h1>
-    <a href="Courses/index.html">Click to view them</a>
+    <a href="./Courses/index.html">Click to view them</a>
   </body>
   <script src="assets/js/generateBreadcrumb.js"></script>
 </html>