From 6ee7e4873f14ce9cc78c8aa126cf491bb8434d95 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 5 Jan 2023 12:04:38 +0400
Subject: [PATCH] Update links to have trailing slash

---
 src/components/Breadcrumbs.astro                 |  4 ++--
 src/components/FeaturedGuides.astro              |  4 ++--
 .../FeaturedRoadmaps/FeaturedRoadmapItem.astro   |  2 +-
 src/components/FeaturedVideos.astro              |  4 ++--
 src/components/Footer.astro                      | 14 +++++++-------
 src/components/GridRoadmapItem.astro             |  2 +-
 src/components/GuideListItem.astro               |  2 +-
 .../InteractiveRoadmap/InteractiveRoadmap.astro  |  3 +--
 src/components/Navigation.astro                  | 16 ++++++++--------
 src/components/ResourcesAlert.astro              |  9 ++++-----
 src/components/RoadmapBanner.astro               |  2 +-
 src/components/RoadmapHeader.astro               |  8 ++++----
 src/components/VideoListItem.astro               |  2 +-
 src/pages/404.astro                              |  2 +-
 src/pages/[roadmapId]/index.astro                |  9 ++++-----
 src/pages/[roadmapId]/topics.astro               |  4 ++--
 src/pages/about.astro                            |  4 ++--
 .../content/101-basic-frontend/102-javascript.md |  8 +-------
 .../content/103-learn-a-language/100-go.md       |  9 +--------
 .../content/103-learn-a-language/102-java.md     |  8 +-------
 .../103-learn-a-language/105-javascript.md       |  8 +-------
 .../content/103-learn-a-language/106-python.md   |  8 +-------
 .../106-relational-databases/100-postgresql.md   |  8 +-------
 .../100-frontend-frameworks/100-react.md         |  8 +-------
 .../100-frontend-frameworks/101-angular.md       |  8 +-------
 .../109-dapps/100-frontend-frameworks/102-vue.md |  8 +-------
 .../107-supporting-languages/101-python.md       |  8 +-------
 .../109-dapps/107-supporting-languages/102-go.md |  9 +--------
 .../content/101-pick-a-language/102-java.md      |  8 +-------
 .../content/101-pick-a-language/103-python.md    |  8 +-------
 .../content/101-pick-a-language/104-go.md        |  9 +--------
 .../devops/content/100-language/100-python.md    |  8 +-------
 .../content/100-language/102-javascript.md       |  8 +-------
 .../devops/content/100-language/103-go.md        |  8 +-------
 .../frontend/content/103-javascript/index.md     |  8 +-------
 .../111-pick-a-framework/100-react-js/index.md   |  8 +-------
 .../111-pick-a-framework/101-angular/index.md    |  8 +-------
 .../111-pick-a-framework/102-vue-js/index.md     |  8 +-------
 .../121-mobile-applications/102-flutter.md       |  8 +-------
 .../122-desktop-applications/102-flutter.md      |  8 +-------
 .../110-nodejs-databases/100-relational/index.md |  4 +---
 .../100-java-kotlin-scala.md                     |  8 +-------
 .../104-programming-languages/101-python.md      |  8 +-------
 .../content/104-programming-languages/103-go.md  |  9 +--------
 .../104-javascript-typescript.md                 |  8 +-------
 .../111-web-and-mobile/101-react-vue-angular.md  |  8 +-------
 46 files changed, 73 insertions(+), 250 deletions(-)

diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
index e8841a18c..d4a99cfdc 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -18,7 +18,7 @@ const { breadcrumbs, roadmapId } = Astro.props;
         if (!isLast) {
           return (
             <>
-              <a class='hover:text-gray-800' href={breadcrumb.url}>{ breadcrumb.title }</a>
+              <a class='hover:text-gray-800' href={`${breadcrumb.url}/`}>{ breadcrumb.title }</a>
               <span>&nbsp;&middot;&nbsp;</span>
             </>
           );
@@ -30,7 +30,7 @@ const { breadcrumbs, roadmapId } = Astro.props;
 
     <!-- Mobile breadcrums -->
     <p class='container block sm:hidden'>
-      <a class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' href={`/${roadmapId}`}>
+      <a class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' href={`/${roadmapId}/`}>
         &larr; Back to Topics List
       </a>
     </p>
diff --git a/src/components/FeaturedGuides.astro b/src/components/FeaturedGuides.astro
index a9c5ec032..9b9d51f6e 100644
--- a/src/components/FeaturedGuides.astro
+++ b/src/components/FeaturedGuides.astro
@@ -18,7 +18,7 @@ const { heading, guides } = Astro.props;
   </div>
 
   <a
-    href='/guides'
+    href='/guides/'
     class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
   >
     View All Guides &rarr;
@@ -26,7 +26,7 @@ const { heading, guides } = Astro.props;
 
   <div class='block sm:hidden mt-3'>
     <a
-      href='/guides'
+      href='/guides/'
       class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
     >
       View All Guides &nbsp;&rarr;
diff --git a/src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro b/src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
index 5f8519107..0c729fae5 100644
--- a/src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
+++ b/src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
@@ -24,7 +24,7 @@ if (roadmapTitle === 'Go') {
       'opacity-50': roadmap.frontmatter.isUpcoming,
     },
   ]}
-  href={`/${roadmap.id}`}
+  href={`/${roadmap.id}/`}
 >
   <span class="text-slate-400">
     {roadmapTitle}
diff --git a/src/components/FeaturedVideos.astro b/src/components/FeaturedVideos.astro
index 267e9b217..242d33e33 100644
--- a/src/components/FeaturedVideos.astro
+++ b/src/components/FeaturedVideos.astro
@@ -18,7 +18,7 @@ const { heading, videos } = Astro.props;
   </div>
 
   <a
-    href='/videos'
+    href='/videos/'
     class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
   >
     View All Videos &rarr;
@@ -26,7 +26,7 @@ const { heading, videos } = Astro.props;
 
   <div class='block sm:hidden mt-3'>
     <a
-      href='/videos'
+      href='/videos/'
       class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
     >
       View All Videos &nbsp;&rarr;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f46f2aeac..c23b33e97 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,19 +9,19 @@ import Icon from './Icon.astro';
     >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/roadmaps'>Roadmaps</a
+        href='/roadmaps/'>Roadmaps</a
       >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/guides'>Guides</a
+        href='/guides/'>Guides</a
       >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/videos'>Videos</a
+        href='/videos/'>Videos</a
       >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/about'>About</a
+        href='/about/'>About</a
       >
       <a
         class='transition-colors px-2 py-1.5 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
@@ -58,11 +58,11 @@ import Icon from './Icon.astro';
           <p>
             &copy; roadmap.sh
             <span class='mx-1.5'>&middot;</span>
-            <a href='/about' class='hover:text-white'>FAQs</a>
+            <a href='/about/' class='hover:text-white'>FAQs</a>
             <span class='mx-1.5'>&middot;</span>
-            <a href='/terms' class='hover:text-white'>Terms</a>
+            <a href='/terms/' class='hover:text-white'>Terms</a>
             <span class='mx-1.5'>&middot;</span>
-            <a href='/privacy' class='hover:text-white'>Privacy</a>
+            <a href='/privacy/' class='hover:text-white'>Privacy</a>
           </p>
         </div>
       </div>
diff --git a/src/components/GridRoadmapItem.astro b/src/components/GridRoadmapItem.astro
index d7ffb1542..624eff270 100644
--- a/src/components/GridRoadmapItem.astro
+++ b/src/components/GridRoadmapItem.astro
@@ -10,7 +10,7 @@ const frontmatter = roadmap.frontmatter;
 ---
 
 <a
-  href={`/${roadmap.id}`}
+  href={`/${roadmap.id}/`}
   class="bg-gradient-to-r from-slate-900 to-amber-900 hover:from-stone-900 hover:to-stone-900 hover:bg-gray-100 flex flex-col p-2.5 sm:p-5 rounded-md sm:rounded-lg border border-gray-200 relative h-full"
 >
   <span
diff --git a/src/components/GuideListItem.astro b/src/components/GuideListItem.astro
index a29c0b0a2..74352cc87 100644
--- a/src/components/GuideListItem.astro
+++ b/src/components/GuideListItem.astro
@@ -13,7 +13,7 @@ const { frontmatter, id } = guide;
   class:list={[
     "block no-underline py-2 group text-md items-center text-gray-600 hover:text-blue-600 flex justify-between border-b",
   ]}
-  href={`/guides/${id}`}
+  href={`/guides/${id}/`}
 >
   <span class="group-hover:translate-x-2 transition-transform">
     {frontmatter.title}
diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
index bd3e72c31..3d0746289 100644
--- a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
+++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
@@ -9,7 +9,6 @@ import "./InteractiveRoadmap.css";
 export interface Props {
   roadmapId: string;
   description: string;
-  roadmapPermalink: string;
   jsonUrl: string;
   dimensions?: {
     width: number;
@@ -17,7 +16,7 @@ export interface Props {
   };
 }
 
-const { roadmapId, jsonUrl, dimensions = null, description, roadmapPermalink } =
+const { roadmapId, jsonUrl, dimensions = null, description } =
   Astro.props;
 ---
 
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index e9fde5ec8..1851e6a92 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -12,18 +12,18 @@ import Icon from './Icon.astro';
     <!-- Desktop navigation items -->
     <ul class='hidden sm:flex space-x-5'>
       <li>
-        <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
+        <a href='/roadmaps/' class='text-gray-400 hover:text-white'>Roadmaps</a>
       </li>
       <li>
-        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
+        <a href='/guides/' class='text-gray-400 hover:text-white'>Guides</a>
       </li>
       <li>
-        <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
+        <a href='/videos/' class='text-gray-400 hover:text-white'>Videos</a>
       </li>
       <li>
         <a
           class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white'
-          href='/signup'
+          href='/signup/'
         >
           Subscribe
         </a>
@@ -55,23 +55,23 @@ import Icon from './Icon.astro';
       </button>
       <ul class='flex flex-col gap-2 md:gap-3 items-center w-full'>
         <li>
-          <a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'
+          <a href='/roadmaps/' class='text-xl md:text-lg hover:text-blue-300'
             >Roadmaps</a
           >
         </li>
         <li>
-          <a href='/guides' class='text-xl md:text-lg hover:text-blue-300'
+          <a href='/guides/' class='text-xl md:text-lg hover:text-blue-300'
             >Guides</a
           >
         </li>
         <li>
-          <a href='/videos' class='text-xl md:text-lg hover:text-blue-300'
+          <a href='/videos/' class='text-xl md:text-lg hover:text-blue-300'
             >Videos</a
           >
         </li>
         <li>
           <a
-            href='/signup'
+            href='/signup/'
             class='text-xl md:text-lg text-red-300 hover:text-red-400'
             >Subscribe</a
           >
diff --git a/src/components/ResourcesAlert.astro b/src/components/ResourcesAlert.astro
index 4651ed4b2..cfa71937e 100644
--- a/src/components/ResourcesAlert.astro
+++ b/src/components/ResourcesAlert.astro
@@ -2,12 +2,11 @@
 import Icon from './Icon.astro';
 
 export interface Props {
-  roadmapPermalink: string;
+  roadmapId: string;
 }
 
-const { roadmapPermalink } = Astro.props;
+const { roadmapId } = Astro.props;
 
-const roadmapId = roadmapPermalink.replace(/\//, '');
 const hasTNSBanner = ['frontend', 'backend', 'devops'].includes(roadmapId);
 const roadmapTitle =
   roadmapId === 'devops'
@@ -61,7 +60,7 @@ const roadmapTitle =
     </p>
 
     <a
-      href={`${roadmapPermalink}/topics`}
+      href={`/${roadmapId}/topics/`}
       class='inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1'
     >
       <Icon icon='search' />
@@ -74,7 +73,7 @@ const roadmapTitle =
     class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'
   >
     Click roadmap items for resources or visit{' '}
-    <a href={`${roadmapPermalink}/topics`} class='text-blue-700 underline'>
+    <a href={`/${roadmapId}/topics/`} class='text-blue-700 underline'>
       resources list
     </a>
     .
diff --git a/src/components/RoadmapBanner.astro b/src/components/RoadmapBanner.astro
index ff3e78c80..ed4f8d486 100644
--- a/src/components/RoadmapBanner.astro
+++ b/src/components/RoadmapBanner.astro
@@ -10,7 +10,7 @@ const { roadmap, roadmapId } = Astro.props;
 ---
 
 <a
-  href={`/${roadmapId}`}
+  href={`/${roadmapId}/`}
   class="flex items-center justify-center bg-yellow-100 text-yellow-900 border-b py-2 sm:py-3 text-sm sm:text-md hover:bg-yellow-200"
 >
   <span class="container">
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 11c9c9cd8..63d9671d7 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -7,7 +7,7 @@ import YouTubeAlert from "./YouTubeAlert.astro";
 export interface Props {
   title: string;
   description: string;
-  roadmapPermalink: string;
+  roadmapId: string;
   isUpcoming?: boolean;
   hasSearch?: boolean;
   hasTopics?: boolean;
@@ -16,7 +16,7 @@ export interface Props {
 const {
   title,
   description,
-  roadmapPermalink,
+  roadmapId,
   isUpcoming = false,
   hasSearch = false,
   hasTopics = false,
@@ -72,7 +72,7 @@ const isRoadmapReady = !isUpcoming;
         {
           hasSearch && (
             <a
-              href={roadmapPermalink}
+              href={`/${roadmapId}/`}
               class="bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600"
               aria-label="Back to Visual Roadmap"
             >
@@ -100,7 +100,7 @@ const isRoadmapReady = !isUpcoming;
     </div>
 
     <!-- Desktop: Roadmap Resources - Alert -->
-    {hasTopics && <ResourcesAlert roadmapPermalink={roadmapPermalink} />}
+    {hasTopics && <ResourcesAlert roadmapId={roadmapId} />}
 
     {hasSearch && <TopicSearch />}
   </div>
diff --git a/src/components/VideoListItem.astro b/src/components/VideoListItem.astro
index 0dc9ac5f8..3668ce15f 100644
--- a/src/components/VideoListItem.astro
+++ b/src/components/VideoListItem.astro
@@ -13,7 +13,7 @@ const { frontmatter, id } = video;
   class:list={[
     "block no-underline py-2 group text-md items-center text-gray-600 hover:text-blue-600 flex justify-between border-b",
   ]}
-  href={`/videos/${id}`}
+  href={`/videos/${id}/`}
 >
   <span class="group-hover:translate-x-2 transition-transform">
     {frontmatter.title}
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 8dbdd00d2..f6aff49a7 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -19,7 +19,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           Sorry, we couldn't find the page you are looking for.
         </p>
         <p>
-          <a class="underline text-blue-700" href='/'>Homepage</a> &middot; <a href='/roadmaps' class="underline text-blue-700">Roadmaps</a> &middot; <a href='/videos' class="underline text-blue-700">Videos</a>
+          <a class="underline text-blue-700" href='/'>Homepage</a> &middot; <a href='/roadmaps/' class="underline text-blue-700">Roadmaps</a> &middot; <a href='/videos/' class="underline text-blue-700">Videos</a>
         </p>
       </div>
     </div>
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index d1efb4fef..309708e49 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -1,6 +1,6 @@
 ---
 import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
-import InteractiveRoadamp from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
+import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
 import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
@@ -33,16 +33,15 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
   <RoadmapHeader
     description={roadmapData.description}
     title={roadmapData.title}
-    roadmapPermalink={`/${roadmapId}`}
+    roadmapId={roadmapId}
     hasTopics={roadmapData.hasTopics}
   />
 
   {
     roadmapData.jsonUrl && (
-      <InteractiveRoadamp
+      <InteractiveRoadmap
         roadmapId={roadmapId}
         description={roadmapData.description}
-        roadmapPermalink={`/${roadmapId}`}
         jsonUrl={roadmapData.jsonUrl}
         dimensions={roadmapData.dimensions}
       />
@@ -57,5 +56,5 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
     )
   }
 
-  <CaptchaScripts slot="after-footer" />
+  <CaptchaScripts slot='after-footer' />
 </BaseLayout>
diff --git a/src/pages/[roadmapId]/topics.astro b/src/pages/[roadmapId]/topics.astro
index ee859de9c..1c347b298 100644
--- a/src/pages/[roadmapId]/topics.astro
+++ b/src/pages/[roadmapId]/topics.astro
@@ -26,7 +26,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
   <RoadmapHeader
     description={roadmapData.description}
     title={`${roadmapData.featuredTitle} Topics`}
-    roadmapPermalink={`/${roadmapId}`}
+    roadmapId={roadmapId}
     hasSearch={true}
     hasTopics={false}
   />
@@ -54,7 +54,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
                   'bg-gray-100 hover:bg-gray-300': totalParentCount === 3,
                 },
               ]}
-              href={topic.url}
+              href={`${topic.url}/`}
             >
               {topic.heading}
             </a>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index a001857a9..366fa1230 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -102,10 +102,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
           <h2 class='text-2xl font-bold mb-2'>How is roadmap.sh built?</h2>
           <p class='mb-3'>
             The website is built with <a
-              href='https://www.11ty.dev/'
+              href='https://astro.build/'
               class='font-bold underline'
               target='_blank'
-              rel='nofollow'>Eleventy</a
+              rel='nofollow'>Astro</a
             > and <a
               href='https://tailwindcss.com/'
               class='font-bold underline'
diff --git a/src/roadmaps/backend/content/101-basic-frontend/102-javascript.md b/src/roadmaps/backend/content/101-basic-frontend/102-javascript.md
index ce47b782d..d2e862be6 100644
--- a/src/roadmaps/backend/content/101-basic-frontend/102-javascript.md
+++ b/src/roadmaps/backend/content/101-basic-frontend/102-javascript.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/javascript'
-  title='JavaScript Roadmap'
-  description='Click to check the detailed JavaScript Roadmap.'
-/>
-
 # JavaScript
 
 JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated JavaScript Roadmap](/javascript)
+- [Visit Dedicated JavaScript Roadmap](/javascript/)
 - [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [The Modern JavaScript Tutorial](https://javascript.info/)
 - [Exploring JS: JavaScript books for programmers](https://exploringjs.com/)
diff --git a/src/roadmaps/backend/content/103-learn-a-language/100-go.md b/src/roadmaps/backend/content/103-learn-a-language/100-go.md
index d4ade012a..284652e5b 100644
--- a/src/roadmaps/backend/content/103-learn-a-language/100-go.md
+++ b/src/roadmaps/backend/content/103-learn-a-language/100-go.md
@@ -1,17 +1,10 @@
-<DedicatedRoadmap
-  href='/golang'
-  title='Go Roadmap'
-  description='Click to check the detailed Go Roadmap.'
-/>
-
-
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Go Roadmap](/golang)
+- [Visit Dedicated Go Roadmap](/golang/)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
diff --git a/src/roadmaps/backend/content/103-learn-a-language/102-java.md b/src/roadmaps/backend/content/103-learn-a-language/102-java.md
index 3f2bbeb70..f75eb3425 100644
--- a/src/roadmaps/backend/content/103-learn-a-language/102-java.md
+++ b/src/roadmaps/backend/content/103-learn-a-language/102-java.md
@@ -1,9 +1,3 @@
-<DedicatedRoadmap
-  href='/java'
-  title='Java Roadmap'
-  description='Click to check the detailed Java Roadmap.'
-/>
-
 # Java
 
 Java is general-purpose language, primarily used for Internet-based applications.
@@ -11,7 +5,7 @@ It was created in 1995 by James Gosling at Sun Microsystems and is one of the mo
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Java Roadmap](/java)
+- [Visit Dedicated Java Roadmap](/java/)
 - [Java Website](https://www.java.com/)
 - [Codeacademy - Free Course](https://www.codecademy.com/learn/learn-java)
 - [W3 Schools Tutorials](https://www.w3schools.com/java/)
diff --git a/src/roadmaps/backend/content/103-learn-a-language/105-javascript.md b/src/roadmaps/backend/content/103-learn-a-language/105-javascript.md
index b9cce545a..77f2a16a4 100644
--- a/src/roadmaps/backend/content/103-learn-a-language/105-javascript.md
+++ b/src/roadmaps/backend/content/103-learn-a-language/105-javascript.md
@@ -1,9 +1,3 @@
-<DedicatedRoadmap
-  href='/javascript'
-  title='JavaScript Roadmap'
-  description='Click to check the detailed JavaScript Roadmap.'
-/>
-
 # JavaScript
 
 Apart from being used in the browser, JavaScript is also used in backend e.g. using [Node.js](https://nodejs.org/) or [Deno](https://deno.land/) for writing server-side code in JavaScript.
@@ -12,7 +6,7 @@ If you pick up JavaScript for the Backend, my personal recommendation would be t
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated JavaScript Roadmap](/javascript)
+- [Visit Dedicated JavaScript Roadmap](/javascript/)
 - [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [The Modern JavaScript Tutorial](https://javascript.info/)
 - [Eloquent Javascript - Book](https://eloquentjavascript.net/)
diff --git a/src/roadmaps/backend/content/103-learn-a-language/106-python.md b/src/roadmaps/backend/content/103-learn-a-language/106-python.md
index 05683c67a..f6373e94a 100644
--- a/src/roadmaps/backend/content/103-learn-a-language/106-python.md
+++ b/src/roadmaps/backend/content/103-learn-a-language/106-python.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/python'
-  title='Python Roadmap'
-  description='Click to check the detailed Python Roadmap.'
-/>
-
 # Python
 
 Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Python Roadmap](/python)
+- [Visit Dedicated Python Roadmap](/python/)
 - [Python Website](https://www.python.org/)
 - [Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [Automate the Boring Stuff](https://automatetheboringstuff.com/)
diff --git a/src/roadmaps/backend/content/106-relational-databases/100-postgresql.md b/src/roadmaps/backend/content/106-relational-databases/100-postgresql.md
index 6ae7080b0..a8142b285 100644
--- a/src/roadmaps/backend/content/106-relational-databases/100-postgresql.md
+++ b/src/roadmaps/backend/content/106-relational-databases/100-postgresql.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/postgresql-dba'
-  title='PostgreSQL DBA Roadmap'
-  description='Click to check the detailed PostgreSQL DBA Roadmap.'
-/>
-
 # PostgreSQL
 
 PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated PostgreSQL DBA Roadmap](/postgresql-dba)
+- [Visit Dedicated PostgreSQL DBA Roadmap](/postgresql-dba/)
 - [Official Website](https://www.postgresql.org/)
 - [What is PostgreSQL](https://www.geeksforgeeks.org/what-is-postgresql-introduction/)
 - [Learn PostgreSQL - Full Tutorial for Beginners](https://www.postgresqltutorial.com/)
diff --git a/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/100-react.md b/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/100-react.md
index 137deb5f3..3e34399e9 100644
--- a/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/100-react.md
+++ b/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/100-react.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/react'
-  title='React Roadmap'
-  description='Click to check the detailed React Roadmap.'
-/>
-
 # React
 
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated React Roadmap](/react)
+- [Visit Dedicated React Roadmap](/react/)
 - [React Website](https://reactjs.org/)
 - [Official Getting Started](https://reactjs.org/tutorial/tutorial.html)
 - [The Beginners Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
diff --git a/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/101-angular.md b/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/101-angular.md
index 3a5e8741c..5f80064e1 100644
--- a/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/101-angular.md
+++ b/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/101-angular.md
@@ -1,14 +1,8 @@
-<DedicatedRoadmap
-  href='/angular'
-  title='Angular Roadmap'
-  description='Click to check the detailed Angular Roadmap.'
-/>
-
 # Angular
 
 Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Angular Roadmap](/angular)
+- [Visit Dedicated Angular Roadmap](/angular/)
 - [Official - Getting started with Angular](https://angular.io/start)
\ No newline at end of file
diff --git a/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/102-vue.md b/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/102-vue.md
index a23a2f486..4a81e5e64 100644
--- a/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/102-vue.md
+++ b/src/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/102-vue.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap 
-  href='/vue'
-  title='Vue Roadmap'
-  description='Click to check the detailed Vue Roadmap.'
-/>
-
 # Vue.js
 
 Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Vue Roadmap](/vue)
+- [Visit Dedicated Vue Roadmap](/vue/)
 - [Vue.js Website](https://vuejs.org/)
 - [Official Getting Started](https://vuejs.org/v2/guide/)
 - [Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c)
diff --git a/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/101-python.md b/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/101-python.md
index 140761c4f..38f1601f2 100644
--- a/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/101-python.md
+++ b/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/101-python.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/python'
-  title='Python Roadmap'
-  description='Click to check the detailed Python Roadmap.'
-/>
-
 # Python
 
 Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Python Roadmap](/python)
+- [Visit Dedicated Python Roadmap](/python/)
 - [Python Website](https://www.python.org/)
 - [Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [W3Schools - Python Tutorial ](https://www.w3schools.com/python/)
diff --git a/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/102-go.md b/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/102-go.md
index 0f98d6580..51c018d06 100644
--- a/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/102-go.md
+++ b/src/roadmaps/blockchain/content/109-dapps/107-supporting-languages/102-go.md
@@ -1,17 +1,10 @@
-<DedicatedRoadmap
-  href='/golang'
-  title='Go Roadmap'
-  description='Click to check the detailed Go Roadmap.'
-/>
-
-
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Go Roadmap](/golang)
+- [Visit Dedicated Go Roadmap](/golang/)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
diff --git a/src/roadmaps/computer-science/content/101-pick-a-language/102-java.md b/src/roadmaps/computer-science/content/101-pick-a-language/102-java.md
index 44ab4e3ba..f75eb3425 100644
--- a/src/roadmaps/computer-science/content/101-pick-a-language/102-java.md
+++ b/src/roadmaps/computer-science/content/101-pick-a-language/102-java.md
@@ -1,9 +1,3 @@
-<DedicatedRoadmap
-href='/java'
-title='Java Roadmap'
-description='Click to check the detailed Java Roadmap.'
-/>
-
 # Java
 
 Java is general-purpose language, primarily used for Internet-based applications.
@@ -11,7 +5,7 @@ It was created in 1995 by James Gosling at Sun Microsystems and is one of the mo
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Java Roadmap](/java)
+- [Visit Dedicated Java Roadmap](/java/)
 - [Java Website](https://www.java.com/)
 - [Codeacademy - Free Course](https://www.codecademy.com/learn/learn-java)
 - [W3 Schools Tutorials](https://www.w3schools.com/java/)
diff --git a/src/roadmaps/computer-science/content/101-pick-a-language/103-python.md b/src/roadmaps/computer-science/content/101-pick-a-language/103-python.md
index 0272eb6e7..52d65b830 100644
--- a/src/roadmaps/computer-science/content/101-pick-a-language/103-python.md
+++ b/src/roadmaps/computer-science/content/101-pick-a-language/103-python.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-href='/python'
-title='Python Roadmap'
-description='Click to check the detailed Python Roadmap.'
-/>
-
 # Python
 
 Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Python Roadmap](/python)
+- [Visit Dedicated Python Roadmap](/python/)
 - [Python Website](https://www.python.org/)
 - [Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [Automate the Boring Stuff](https://automatetheboringstuff.com/)
diff --git a/src/roadmaps/computer-science/content/101-pick-a-language/104-go.md b/src/roadmaps/computer-science/content/101-pick-a-language/104-go.md
index 680fa846d..284652e5b 100644
--- a/src/roadmaps/computer-science/content/101-pick-a-language/104-go.md
+++ b/src/roadmaps/computer-science/content/101-pick-a-language/104-go.md
@@ -1,17 +1,10 @@
-<DedicatedRoadmap
-href='/golang'
-title='Go Roadmap'
-description='Click to check the detailed Go Roadmap.'
-/>
-
-
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Go Roadmap](/golang)
+- [Visit Dedicated Go Roadmap](/golang/)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
diff --git a/src/roadmaps/devops/content/100-language/100-python.md b/src/roadmaps/devops/content/100-language/100-python.md
index 8a5cd6542..c56b3ffb5 100644
--- a/src/roadmaps/devops/content/100-language/100-python.md
+++ b/src/roadmaps/devops/content/100-language/100-python.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/python'
-  title='Python Roadmap'
-  description='Click to check the detailed Python Roadmap.'
-/>
-
 # Python
 
 Python is a multi-paradigm language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.  Python is frequently recommended as the first language new coders should learn, because of its focus on readability, consistency, and ease of use.  This comes with some downsides, as the language is not especially performant in most production tasks.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Python Roadmap](/python)
+- [Visit Dedicated Python Roadmap](/python/)
 - [Python Website](https://www.python.org/)
 - [Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [Automate the Boring Stuff](https://automatetheboringstuff.com/)
diff --git a/src/roadmaps/devops/content/100-language/102-javascript.md b/src/roadmaps/devops/content/100-language/102-javascript.md
index 2d5162701..e464d441a 100644
--- a/src/roadmaps/devops/content/100-language/102-javascript.md
+++ b/src/roadmaps/devops/content/100-language/102-javascript.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/javascript'
-  title='JavaScript Roadmap'
-  description='Click to check the detailed JavaScript Roadmap.'
-/>
-
 # JavaScript
 
 JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. Apart from being used on the frontend in browsers, there is Node.js which is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated JavaScript Roadmap](/javascript)
+- [Visit Dedicated JavaScript Roadmap](/javascript/)
 - [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [The Modern JavaScript Tutorial](https://javascript.info/)
 - [Codecademy - Learn JavaScript](https://www.codecademy.com/learn/introduction-to-javascript)
diff --git a/src/roadmaps/devops/content/100-language/103-go.md b/src/roadmaps/devops/content/100-language/103-go.md
index 94863755d..ea45071e8 100644
--- a/src/roadmaps/devops/content/100-language/103-go.md
+++ b/src/roadmaps/devops/content/100-language/103-go.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/golang'
-  title='Go Roadmap'
-  description='Click to check the detailed Go Roadmap.'
-/>
-
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Go Roadmap](/golang)
+- [Visit Dedicated Go Roadmap](/golang/)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
diff --git a/src/roadmaps/frontend/content/103-javascript/index.md b/src/roadmaps/frontend/content/103-javascript/index.md
index 337ee98a7..434782723 100644
--- a/src/roadmaps/frontend/content/103-javascript/index.md
+++ b/src/roadmaps/frontend/content/103-javascript/index.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/javascript'
-  title='JavaScript Roadmap'
-  description='Click to check the detailed JavaScript Roadmap.'
-/>
-
 # JavaScript
 
 JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated JavaScript Roadmap](/javascript)
+- [Visit Dedicated JavaScript Roadmap](/javascript/)
 - [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [The Modern JavaScript Tutorial](https://javascript.info/)
 - [Learn JavaScript: Covered many topics](https://www.javascripttutorial.net/)
diff --git a/src/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md b/src/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md
index 2c3a83267..bc0d12085 100644
--- a/src/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md
+++ b/src/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/react'
-  title='React Roadmap'
-  description='Click to check the detailed React Roadmap.'
-/>
-
 # React
 
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated React Roadmap](/react)
+- [Visit Dedicated React Roadmap](/react/)
 - [React Website](https://reactjs.org/)
 - [Official Getting Started](https://reactjs.org/tutorial/tutorial.html)
 - [Beta React Docs](https://beta.reactjs.org/)
diff --git a/src/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md b/src/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md
index 94ce88048..d85c51b67 100644
--- a/src/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md
+++ b/src/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md
@@ -1,15 +1,9 @@
-<DedicatedRoadmap
-  href='/angular'
-  title='Angular Roadmap'
-  description='Click to check the detailed Angular Roadmap.'
-/>
-
 # Angular
 
 Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Angular Roadmap](/angular)
+- [Visit Dedicated Angular Roadmap](/angular/)
 - [Official - Getting started with Angular](https://angular.io/start)
 - [Angular for Beginners Course [Full Front End Tutorial with TypeScript]](https://www.youtube.com/watch?v=3qBXWUpoPHo)
diff --git a/src/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md b/src/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md
index 7b4253ca2..0406ef7f1 100644
--- a/src/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md
+++ b/src/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap 
-  href='/vue'
-  title='Vue Roadmap'
-  description='Click to check the detailed Vue Roadmap.'
-/>
-
 # Vue.js
 
 Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Vue Roadmap](/vue)
+- [Visit Dedicated Vue Roadmap](/vue/)
 - [Vue.js Website](https://vuejs.org/)
 - [Official Getting Started](https://vuejs.org/v2/guide/)
 - [Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c)
diff --git a/src/roadmaps/frontend/content/121-mobile-applications/102-flutter.md b/src/roadmaps/frontend/content/121-mobile-applications/102-flutter.md
index 23ac613e5..01ceb7d8a 100644
--- a/src/roadmaps/frontend/content/121-mobile-applications/102-flutter.md
+++ b/src/roadmaps/frontend/content/121-mobile-applications/102-flutter.md
@@ -1,9 +1,3 @@
-<DedicatedRoadmap 
-  href='/flutter'
-  title='Flutter Roadmap'
-  description='Click to check the detailed Flutter Roadmap.'
-/>
-
 # Flutter
 
 Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
@@ -20,7 +14,7 @@ If you know a bit of programming, Dart is a typed object programming language. Y
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Flutter Roadmap](/flutter)
+- [Visit Dedicated Flutter Roadmap](/flutter/)
 - [Flutter Website](https://flutter.dev)
 - [Flutter Tutorial](https://www.w3adda.com/flutter-tutorial)
 - [Flutter Tutorial for Beginners](https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ)
diff --git a/src/roadmaps/frontend/content/122-desktop-applications/102-flutter.md b/src/roadmaps/frontend/content/122-desktop-applications/102-flutter.md
index dc9306e64..2b10e82a5 100644
--- a/src/roadmaps/frontend/content/122-desktop-applications/102-flutter.md
+++ b/src/roadmaps/frontend/content/122-desktop-applications/102-flutter.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-href='/flutter'
-title='Flutter Roadmap'
-description='Click to check the detailed Flutter Roadmap.'
-/>
-
 # Flutter
 
 Flutter is a free and open-source multi-platform UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create three different apps (for iOS, Android and Desktop).
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Flutter Roadmap](/flutter)
+- [Visit Dedicated Flutter Roadmap](/flutter/)
 - [Flutter Website](https://flutter.dev)
 - [Flutter for Desktop](https://flutter.dev/multi-platform/desktop)
 - [Flutter Tutorial](https://www.w3adda.com/flutter-tutorial)
diff --git a/src/roadmaps/nodejs/content/110-nodejs-databases/100-relational/index.md b/src/roadmaps/nodejs/content/110-nodejs-databases/100-relational/index.md
index 613daa077..ce2eb39c2 100644
--- a/src/roadmaps/nodejs/content/110-nodejs-databases/100-relational/index.md
+++ b/src/roadmaps/nodejs/content/110-nodejs-databases/100-relational/index.md
@@ -1,5 +1,3 @@
 # Relational
 
-A relational database is a (most commonly digital) database based on the relational model of data, as proposed by E. F. Codd in 1970. A system used to maintain relational databases is a relational database management system (RDBMS). Many relational database systems are equipped with the option of using the SQL (Structured Query Language) for querying and maintaining the database.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+A relational database is a (most commonly digital) database based on the relational model of data, as proposed by E. F. Codd in 1970. A system used to maintain relational databases is a relational database management system (RDBMS). Many relational database systems are equipped with the option of using the SQL (Structured Query Language) for querying and maintaining the database.
\ No newline at end of file
diff --git a/src/roadmaps/software-architect/content/104-programming-languages/100-java-kotlin-scala.md b/src/roadmaps/software-architect/content/104-programming-languages/100-java-kotlin-scala.md
index aed3d4751..ae8c396a6 100644
--- a/src/roadmaps/software-architect/content/104-programming-languages/100-java-kotlin-scala.md
+++ b/src/roadmaps/software-architect/content/104-programming-languages/100-java-kotlin-scala.md
@@ -1,14 +1,8 @@
-<DedicatedRoadmap
-  href='/java'
-  title='Java Roadmap'
-  description='Click to check the detailed Java Roadmap.'
-/>
-
 # Java/Kotlin/Scala
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Java Roadmap](/java)
+- [Visit Dedicated Java Roadmap](/java/)
 - [Java Basics](https://www.w3schools.com/java/)
 - [Learn the basics of Kotlin](https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin)
 - [Kotlin Docs](https://kotlinlang.org/docs/reference/basic-syntax.html)
diff --git a/src/roadmaps/software-architect/content/104-programming-languages/101-python.md b/src/roadmaps/software-architect/content/104-programming-languages/101-python.md
index 8a5cd6542..c56b3ffb5 100644
--- a/src/roadmaps/software-architect/content/104-programming-languages/101-python.md
+++ b/src/roadmaps/software-architect/content/104-programming-languages/101-python.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/python'
-  title='Python Roadmap'
-  description='Click to check the detailed Python Roadmap.'
-/>
-
 # Python
 
 Python is a multi-paradigm language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedural or object-oriented programmatic ways.  Python is frequently recommended as the first language new coders should learn, because of its focus on readability, consistency, and ease of use.  This comes with some downsides, as the language is not especially performant in most production tasks.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Python Roadmap](/python)
+- [Visit Dedicated Python Roadmap](/python/)
 - [Python Website](https://www.python.org/)
 - [Python Getting Started](https://www.python.org/about/gettingstarted/)
 - [Automate the Boring Stuff](https://automatetheboringstuff.com/)
diff --git a/src/roadmaps/software-architect/content/104-programming-languages/103-go.md b/src/roadmaps/software-architect/content/104-programming-languages/103-go.md
index a832b90ef..db6feaedb 100644
--- a/src/roadmaps/software-architect/content/104-programming-languages/103-go.md
+++ b/src/roadmaps/software-architect/content/104-programming-languages/103-go.md
@@ -1,17 +1,10 @@
-<DedicatedRoadmap
-  href='/golang'
-  title='Go Roadmap'
-  description='Click to check the detailed Go Roadmap.'
-/>
-
-
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated Go Roadmap](/golang)
+- [Visit Dedicated Go Roadmap](/golang/)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
diff --git a/src/roadmaps/software-architect/content/104-programming-languages/104-javascript-typescript.md b/src/roadmaps/software-architect/content/104-programming-languages/104-javascript-typescript.md
index eea6e5dca..48c0a20d4 100644
--- a/src/roadmaps/software-architect/content/104-programming-languages/104-javascript-typescript.md
+++ b/src/roadmaps/software-architect/content/104-programming-languages/104-javascript-typescript.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/javascript'
-  title='JavaScript Roadmap'
-  description='Click to check the detailed JavaScript Roadmap.'
-/>
-
 # JavaScript
 
 JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. Apart from being used on the frontend in browsers, there is Node.js which is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated JavaScript Roadmap](/javascript)
+- [Visit Dedicated JavaScript Roadmap](/javascript/)
 - [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/)
 - [The Modern JavaScript Tutorial](https://javascript.info/)
 - [Codecademy - Learn JavaScript](https://www.codecademy.com/learn/introduction-to-javascript)
diff --git a/src/roadmaps/software-architect/content/111-web-and-mobile/101-react-vue-angular.md b/src/roadmaps/software-architect/content/111-web-and-mobile/101-react-vue-angular.md
index 4d7828c91..81c013495 100644
--- a/src/roadmaps/software-architect/content/111-web-and-mobile/101-react-vue-angular.md
+++ b/src/roadmaps/software-architect/content/111-web-and-mobile/101-react-vue-angular.md
@@ -1,16 +1,10 @@
-<DedicatedRoadmap
-  href='/react'
-  title='React Roadmap'
-  description='Click to check the detailed React Roadmap.'
-/>
-
 # React
 
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
 
 Visit the following resources to learn more:
 
-- [Visit Dedicated React Roadmap](/react)
+- [Visit Dedicated React Roadmap](/react/)
 - [React Website](https://reactjs.org/)
 - [Official Getting Started](https://reactjs.org/tutorial/tutorial.html)
 - [Beta React Docs](https://beta.reactjs.org/)