Group page and content loading

pages/[roadmap]/[group].tsx

@@ -18,6 +18,7 @@ import { ChevronRightIcon } from '@chakra-ui/icons';
 type RoadmapProps = {
   roadmap: RoadmapType;
   group: string;
+  isOutlet?: boolean;
 };
 
 // @todo error handling
@@ -36,14 +37,24 @@ function TextualRoadmap(props: RoadmapProps) {
 
   const GroupContent =
     require(`../../content/${normalizedContentFilePath}`).default;
+
+  return (
+    <MdRenderer>
+      <GroupContent />
+    </MdRenderer>
+  );
+}
+
+function RoadmapBreadcrumb(props: RoadmapProps) {
+  const { roadmap, group } = props;
+
   const groupParts = group.split(':');
 
   return (
-    <Container maxW={'container.md'} position="relative">
-      <Box d="block" m="60px 0 20px">
     <Breadcrumb
       fontWeight="medium"
       fontSize="sm"
+      mb="20px"
       separator={<ChevronRightIcon color="gray.500" />}
     >
       <BreadcrumbItem>
@@ -53,8 +64,12 @@ function TextualRoadmap(props: RoadmapProps) {
       </BreadcrumbItem>
 
       {groupParts.map((groupPart: string, counter: number) => (
-            <BreadcrumbItem key={groupPart} isCurrentPage={counter === groupParts.length - 1}>
+        <BreadcrumbItem
+          key={groupPart}
+          isCurrentPage={counter === groupParts.length - 1}
+        >
           <BreadcrumbLink
+            textTransform="capitalize"
             color="blue.500"
             href={`/${roadmap.id}/${groupParts
               .slice(0, counter + 1)
@@ -65,16 +80,15 @@ function TextualRoadmap(props: RoadmapProps) {
         </BreadcrumbItem>
       ))}
     </Breadcrumb>
-      </Box>
-      <MdRenderer>
-        <GroupContent />
-      </MdRenderer>
-    </Container>
   );
 }
 
-export default function Roadmap(props: RoadmapProps) {
-  const { roadmap, group } = props;
+export default function RoadmapGroup(props: RoadmapProps) {
+  const { roadmap, group, isOutlet = false } = props;
+
+  if (isOutlet) {
+    return <TextualRoadmap roadmap={roadmap} group={group} />;
+  }
 
   return (
     <Box bg="white" minH="100vh">
@@ -84,9 +98,10 @@ export default function Roadmap(props: RoadmapProps) {
         description={roadmap?.seo?.description || roadmap.description}
         keywords={roadmap?.seo.keywords || []}
       />
-      <Box mb="60px">
+      <Container my={'60px'} maxW={'container.md'} position="relative">
+        <RoadmapBreadcrumb roadmap={roadmap} group={group} />
         <TextualRoadmap roadmap={roadmap} group={group} />
-      </Box>
+      </Container>
 
       <OpensourceBanner />
       <UpdatesBanner />

pages/[roadmap]/interactive.tsx

@@ -8,6 +8,7 @@ import Helmet from '../../components/helmet';
 import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from '../../lib/renderer';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
+import RoadmapGroup from './[group]';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -18,6 +19,7 @@ function RoadmapRenderer(props: RoadmapProps) {
   const { json, roadmap } = props;
 
   const roadmapRef = useRef(null);
+  const [group, setGroup] = useState('');
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
@@ -28,7 +30,7 @@ function RoadmapRenderer(props: RoadmapProps) {
         return;
       }
 
-      alert(groupName);
+      setGroup(groupName.replace(/^\d+-/, ''));
     });
   });
 
@@ -53,6 +55,8 @@ function RoadmapRenderer(props: RoadmapProps) {
 
   return (
     <Container maxW={'container.lg'} position="relative">
+      {group && <RoadmapGroup isOutlet roadmap={roadmap} group={group} />}
+
       <div ref={roadmapRef} />
     </Container>
   );
@@ -111,8 +115,7 @@ export async function getStaticProps(context: ContextType) {
   let roadmapJson = {};
   try {
     roadmapJson = require(`../../public/project/${roadmapId}.json`);
-  } catch (e) {
-  }
+  } catch (e) {}
 
   return {
     props: {

public/sitemap.xml

@@ -3,7 +3,7 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2021-12-04T11:15:51.351Z</lastmod>
+              <lastmod>2021-12-04T12:51:36.560Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>