Update links to have trailing slash

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>

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;

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}

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;

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>

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

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}

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;
 ---
 

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
           >

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>
     .

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">

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>

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}

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>

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>

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>

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'

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/)

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/)

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/)

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/)

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/)

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/)

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)

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)

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)

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/)

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/)

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/)

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/)

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/)

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/)

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)

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/)

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/)

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/)

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)

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)

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)

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)

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>

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)

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/)

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/)

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)

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/)