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,46 +37,59 @@ function TextualRoadmap(props: RoadmapProps) {
 
   const GroupContent =
     require(`../../content/${normalizedContentFilePath}`).default;
-  const groupParts = group.split(':');
 
   return (
-    <Container maxW={'container.md'} position="relative">
-      <Box d="block" m="60px 0 20px">
-        <Breadcrumb
-          fontWeight="medium"
-          fontSize="sm"
-          separator={<ChevronRightIcon color="gray.500" />}
-        >
-          <BreadcrumbItem>
-            <BreadcrumbLink color="blue.500" href={`/${roadmap.id}`}>
-              {roadmap.featuredTitle}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-
-          {groupParts.map((groupPart: string, counter: number) => (
-            <BreadcrumbItem key={groupPart} isCurrentPage={counter === groupParts.length - 1}>
-              <BreadcrumbLink
-                color="blue.500"
-                href={`/${roadmap.id}/${groupParts
-                  .slice(0, counter + 1)
-                  .join(':')}`}
-              >
-                {groupPart.split('-').join(' ')}
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          ))}
-        </Breadcrumb>
-      </Box>
-      <MdRenderer>
-        <GroupContent />
-      </MdRenderer>
-    </Container>
+    <MdRenderer>
+      <GroupContent />
+    </MdRenderer>
   );
 }
 
-export default function Roadmap(props: RoadmapProps) {
+function RoadmapBreadcrumb(props: RoadmapProps) {
   const { roadmap, group } = props;
 
+  const groupParts = group.split(':');
+
+  return (
+    <Breadcrumb
+      fontWeight="medium"
+      fontSize="sm"
+      mb="20px"
+      separator={<ChevronRightIcon color="gray.500" />}
+    >
+      <BreadcrumbItem>
+        <BreadcrumbLink color="blue.500" href={`/${roadmap.id}`}>
+          {roadmap.featuredTitle}
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      {groupParts.map((groupPart: string, counter: number) => (
+        <BreadcrumbItem
+          key={groupPart}
+          isCurrentPage={counter === groupParts.length - 1}
+        >
+          <BreadcrumbLink
+            textTransform="capitalize"
+            color="blue.500"
+            href={`/${roadmap.id}/${groupParts
+              .slice(0, counter + 1)
+              .join(':')}`}
+          >
+            {groupPart.split('-').join(' ')}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+      ))}
+    </Breadcrumb>
+  );
+}
+
+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">
       <GlobalHeader />
@@ -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>