Handle legacy roadmap urls

src/pages/404.astro

@@ -1,13 +1,24 @@
 ---
 import Icon from '../components/Icon.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import { getRoadmapIds } from '../lib/roadmap';
+
+const roadmapIds = await getRoadmapIds();
+const legacyRoadmapUrls = roadmapIds.map((id) => `/${id}/`);
 ---
 
 <BaseLayout title='Page not found' permalink={'/404'}>
+  <!-- Legacy roadmp pages handling -->
+  <script slot='after-header' define:vars={{ legacyRoadmapUrls }}>
+    // If it's a roadmap page and it ends with a slash
+    // redirect to the same page without the slash
+    if (legacyRoadmapUrls.includes(window.location.pathname)) {
+      window.location.pathname = window.location.pathname.slice(0, -1);
+    }
+  </script>
+
   <div class='bg-gray-100'>
-    <div
+    <div class='py-10 md:py-32 container flex flex-col md:flex-row items-center justify-center gap-7'>
-      class='py-10 md:py-32 container flex flex-col md:flex-row items-center justify-center gap-7 '
-    >
       <Icon icon='construction' class='hidden md:block' />
       <div class='text-left md:text-left'>
         <h1
@@ -15,11 +26,12 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         >
           Page not found!
         </h1>
-        <p class='text-md md:text-xl mb-2'>
+        <p class='text-md md:text-xl mb-2'>Sorry, we couldn't find the page you are looking for.</p>
-          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>