From 9d9a6506cca50da73aa85f436356d02a9d6b4637 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 4 Dec 2021 12:41:57 +0100
Subject: [PATCH] Update roadmap

---
 pages/[roadmap]/[group].tsx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/pages/[roadmap]/[group].tsx b/pages/[roadmap]/[group].tsx
index 1b019448a..4eb03718f 100644
--- a/pages/[roadmap]/[group].tsx
+++ b/pages/[roadmap]/[group].tsx
@@ -20,6 +20,7 @@ type RoadmapProps = {
   group: string;
 };
 
+// @todo error handling
 function TextualRoadmap(props: RoadmapProps) {
   const { roadmap, group } = props;
   if (!roadmap.contentPathsFilePath) {
@@ -33,7 +34,9 @@ function TextualRoadmap(props: RoadmapProps) {
   const contentFilePath = contentPathMapping[group] || '';
   const normalizedContentFilePath = contentFilePath.replace(/^\//, '');
 
-  const GroupContent = require(`../../content/${normalizedContentFilePath}`).default;
+  const GroupContent =
+    require(`../../content/${normalizedContentFilePath}`).default;
+  const groupParts = group.split(':');
 
   return (
     <Container maxW={'container.md'} position="relative">
@@ -44,25 +47,18 @@ function TextualRoadmap(props: RoadmapProps) {
           separator={<ChevronRightIcon color="gray.500" />}
         >
           <BreadcrumbItem>
-            <BreadcrumbLink color="blue.500" href="/frontend">
-              Frontend
+            <BreadcrumbLink color="blue.500" href={`/${roadmap.id}`}>
+              {roadmap.featuredTitle}
             </BreadcrumbLink>
           </BreadcrumbItem>
 
-          <BreadcrumbItem>
-            <BreadcrumbLink color="blue.500" href="/frontend/internet">
-              Internet
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-
-          <BreadcrumbItem isCurrentPage>
-            <BreadcrumbLink
-              color="blue.500"
-              href="/frontend/internet:what-is-internet"
-            >
-              What is Internet
-            </BreadcrumbLink>
-          </BreadcrumbItem>
+          {groupParts.map((groupPart: string, counter: number) => (
+            <BreadcrumbItem key={groupPart}>
+              <BreadcrumbLink color="blue.500" href={`/${roadmap.id}/${groupPart}`}>
+                {groupPart.split('-').join(' ')}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          ))}
         </Breadcrumb>
       </Box>
       <MdRenderer>