Add interactive frontend roadmap version

pages/[roadmap]/index.tsx

@@ -8,6 +8,7 @@ import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import MdRenderer from '../../components/md-renderer';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
+import { InteractiveRoadmapRenderer } from './interactive';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -15,6 +16,11 @@ type RoadmapProps = {
 
 function ImageRoadmap(props: RoadmapProps) {
   const { roadmap } = props;
+
+  if (roadmap.id === 'frontend') {
+    return <InteractiveRoadmapRenderer roadmap={roadmap} />;
+  }
+
   if (!roadmap.imageUrl) {
     return null;
   }

pages/[roadmap]/interactive.tsx

@@ -17,8 +17,11 @@ type RoadmapProps = {
   roadmap: RoadmapType;
 };
 
-function RoadmapRenderer(props: RoadmapProps) {
+export function InteractiveRoadmapRenderer(props: RoadmapProps) {
   const { roadmap } = props;
+  if (!roadmap.jsonUrl) {
+    return null;
+  }
 
   const { loading: isLoading, error: hasErrorLoading, get } = useFetch();
 
@@ -132,7 +135,7 @@ export default function InteractiveRoadmap(props: RoadmapProps) {
       />
       <Box mb="60px">
         <RoadmapPageHeader roadmap={roadmap} />
-        <RoadmapRenderer roadmap={roadmap} />
+        <InteractiveRoadmapRenderer roadmap={roadmap} />
       </Box>
 
       <OpensourceBanner />