fix relative link

Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>

Author: saurabhraghuvanshii

src/components/Learn-Components/TOC-Chapters/index.js

@@ -1,4 +1,4 @@
-import React,{ useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
 import { Link } from "gatsby";
 import { getActiveServiceMesh } from "../../../utils/getActiveServiceMesh";
@@ -8,7 +8,7 @@ import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
 
 
-const TOC = ({ TOCData,courseData, chapterData, location }) => {
+const TOC = ({ TOCData, courseData, chapterData, location }) => {
   const [path, setPath] = useState("");
   const [expand, setExpand] = useState(false);
 
@@ -24,7 +24,7 @@ const TOC = ({ TOCData,courseData, chapterData, location }) => {
 
   useEffect(() => {
     const path = location.pathname.split("/");
-    if (path[2] === "learning-paths"){
+    if (path[2] === "learning-paths") {
       setPath(getCurrentPage(location));
     } else
       return;
@@ -35,7 +35,7 @@ const TOC = ({ TOCData,courseData, chapterData, location }) => {
   return (
     <TOCWrapper>
       <div className="chapter-back">
-        <Link to={`/${courseData.fields.slug}`}>
+        <Link to={courseData.fields.slug.startsWith("/") ? courseData.fields.slug : `/${courseData.fields.slug}`}>
           <HiOutlineChevronLeft />
           <h4>{courseData.frontmatter.courseTitle}</h4>
         </Link>
@@ -58,7 +58,7 @@ const TOC = ({ TOCData,courseData, chapterData, location }) => {
         </div>
       </div>
       <div className="toc-list">
-        <ul  className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
+        <ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
           {availableChapters.map((item) => (
             <li key={item} className={item === path ? "active-link" : ""}>
               <p className="toc-item" key={item}>

src/sections/Learn-Layer5/Chapters/index.js

@@ -18,7 +18,7 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
   const serviceMeshImages = courseData.frontmatter.meshesYouLearn || [];
   const tableOfContents = TOCData
     .filter(node => !!node.fields.section)
-    .map( toc => ({ section: toc.fields.section, chapter: toc.fields.chapter }) );
+    .map(toc => ({ section: toc.fields.section, chapter: toc.fields.chapter }));
 
 
   const replaceSlugPart = (index) => (oldSlug) => (replacement) => {
@@ -30,23 +30,30 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
   const replaceChapterInSlug = (slugWithReplacedMesh) => replaceSlugPart(5)(slugWithReplacedMesh);
 
   useEffect(() => {
-    localStorage.setItem(`bookmarkpath-${location.pathname.split("/")[4]}`, location.pathname);
+
+    let bookmarkPath = location.pathname;
+    if (bookmarkPath.endsWith(".html")) {
+      bookmarkPath = bookmarkPath.replace(".html", "");
+    }
+    localStorage.setItem(`bookmarkpath-${location.pathname.split("/")[4]}`, bookmarkPath);
   }, []);
 
   const isMeshActive = (sm) => chapterData.fields.slug.split("/")[4] === sm;
 
   const mapMeshWithFormattedSlug = (sm, serviceMeshes) => {
     let chapterFound = false;
     tableOfContents.forEach(toc => {
-      if (toc.section === sm.fields.section){
+      if (toc.section === sm.fields.section) {
         if (toc.chapter === chapterData.fields.slug.split("/")[5]) chapterFound = true;
       }
     });
 
     if (!serviceMeshes.map(sm => sm.section).includes(sm.fields.section))
-      serviceMeshes.push({ section: sm.fields.section, slug: chapterFound ?
-        replaceServiceMeshInSlug( sm.fields.section)
-        : replaceChapterInSlug(replaceServiceMeshInSlug(sm.fields.section))(tableOfContents[0].chapter) });
+      serviceMeshes.push({
+        section: sm.fields.section, slug: chapterFound ?
+          replaceServiceMeshInSlug(sm.fields.section)
+          : replaceChapterInSlug(replaceServiceMeshInSlug(sm.fields.section))(tableOfContents[0].chapter)
+      });
 
   };
 
@@ -86,7 +93,7 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
       </>);
   });
 
-  if (showQuizModal){
+  if (showQuizModal) {
     return <QuizModal />;
   }
 
@@ -99,7 +106,7 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
             <div className="toc-switcher-parent-div">
               <TOC courseData={courseData} TOCData={TOCData} chapterData={chapterData} location={location} />
               <div>
-                { serviceMeshImages.length !== 0 && availableServiceMeshesArray.length != 0 && (
+                {serviceMeshImages.length !== 0 && availableServiceMeshesArray.length != 0 && (
                   <>
                     <h4>Technologies Available</h4>
                     <div className="service-mesh-switcher">

src/sections/Learn-Layer5/Course-Overview/index.js

@@ -88,7 +88,7 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
           </div>
           <Button
             title={hasBookmark ? "Start Again" : "Get Started"}
-            $url={`${extractedSection}/${course.frontmatter.toc[0]}`}
+            $url={getChapterTitle(course.frontmatter.toc[0], chapters) ? `/${getChapterTitle(course.frontmatter.toc[0], chapters).fields.slug}` : `#`}
           />
           {hasBookmark && (
             <Button
@@ -152,7 +152,7 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
             <SubscribeLearnPath />
           </Col>
         </Row>
-      </div>
+      </div>f
       <BookmarkNotification showNotification={showNotification} closeNotification={() => setShowNotification(false)} />
     </CourseOverviewWrapper>
   );

src/sections/Learn-Layer5/Courses-List/index.js

@@ -33,7 +33,7 @@ const CoursesList = ({ coursesData, learnPath }) => {
               {coursesData.map((tutorial, index) => {
                 return (
                   <Col $sm={12} key={tutorial.id} name={tutorial.frontmatter.courseTitle}>
-                    <Link to={tutorial.fields.slug}>
+                    <Link to={tutorial.fields.slug.startsWith("/") ? tutorial.fields.slug : `/${tutorial.fields.slug}`}>
                       <ContentCard chapterNum={index + 1} chapter={tutorial} />
                     </Link>
                   </Col>

src/utils/getCurrentPage.js

@@ -1,9 +1,12 @@
 export const getCurrentPage = (location) => {
   if (location !== undefined && location.href !== undefined) {
     const currentChapter = location.href.split("/");
-    if(currentChapter[currentChapter.length - 1] != "")
-      return currentChapter[currentChapter.length - 1];
-    else
-      return currentChapter[currentChapter.length - 2];
+    let chapter = currentChapter[currentChapter.length - 1] != ""
+      ? currentChapter[currentChapter.length - 1]
+      : currentChapter[currentChapter.length - 2];
+    if (chapter && chapter.endsWith(".html")) {
+      chapter = chapter.replace(".html", "");
+    }
+    return chapter;
   }
 };