Add interactive roadmap setup

package.json

@@ -19,28 +19,29 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
-    "@emotion/react": "^11.6.0",
+    "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^12.0.4",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.0.0",
-    "date-fns": "^2.26.0",
+    "date-fns": "^2.27.0",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^5.3.1",
+    "framer-motion": "^5.3.3",
     "next": "^12.0.4",
     "prism-themes": "^1.9.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "use-http": "^1.0.26"
   },
   "devDependencies": {
     "@types/eslint": "8.2.0",
     "@types/gh-pages": "^3.2.0",
     "@types/glob": "^7.2.0",
-    "@types/react": "17.0.35",
+    "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.16",
     "eslint-config-next": "12.0.4",
     "eslint-config-prettier": "^8.3.0",
     "gh-pages": "^3.2.3",

pages/[roadmap]/interactive.tsx

@@ -0,0 +1,172 @@
+import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
+import { ArrowBackIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
+import { GlobalHeader } from '../../components/global-header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { PageHeader } from '../../components/page-header';
+import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
+import Helmet from '../../components/helmet';
+import { useEffect, useRef, useState } from 'react';
+import { wireframeJSONToSVG } from '../../lib/renderer';
+
+type RoadmapProps = {
+  roadmap: RoadmapType;
+  json: any;
+};
+
+function RoadmapRenderer(props: RoadmapProps) {
+  const { json, roadmap } = props;
+
+  const roadmapRef = useRef(null);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener('click', (event: MouseEvent) => {
+      const targetGroup = (event?.target as HTMLElement)?.closest('g');
+      const groupName = targetGroup?.dataset?.groupName;
+      if (!targetGroup || !groupName) {
+        return;
+      }
+
+      alert(groupName);
+    });
+  });
+
+  useEffect(() => {
+    wireframeJSONToSVG(json)
+      .then((svgElement) => {
+        const container: HTMLElement = roadmapRef.current!;
+        if (!container) {
+          return;
+        }
+
+        if (container.firstChild) {
+          container.removeChild(container.firstChild);
+        }
+
+        container.appendChild(svgElement);
+      })
+      .catch((err) => {
+        setHasError(true);
+      });
+  }, [json]);
+
+  return (
+    <Container maxW={'container.lg'} position="relative">
+      <div ref={roadmapRef} />
+    </Container>
+  );
+}
+
+export default function InteractiveRoadmap(props: RoadmapProps) {
+  const { roadmap, json } = props;
+
+  return (
+    <Box bg="white" minH="100vh">
+      <GlobalHeader />
+      <Helmet
+        title={roadmap?.seo?.title || roadmap.title}
+        description={roadmap?.seo?.description || roadmap.description}
+        keywords={roadmap?.seo.keywords || []}
+      />
+      <Box mb="60px">
+        <PageHeader title={roadmap.title} subtitle={roadmap.description}>
+          <Stack mt="20px" isInline>
+            <Button
+              d={['none', 'flex']}
+              as={Link}
+              href={'/roadmaps'}
+              size="xs"
+              py="14px"
+              px="10px"
+              leftIcon={<ArrowBackIcon />}
+              colorScheme="teal"
+              variant="solid"
+              _hover={{ textDecoration: 'none' }}
+            >
+              All Roadmaps
+            </Button>
+
+            {roadmap.pdfUrl && (
+              <Button
+                as={Link}
+                href={roadmap.pdfUrl}
+                target="_blank"
+                size="xs"
+                py="14px"
+                px="10px"
+                leftIcon={<DownloadIcon />}
+                colorScheme="yellow"
+                variant="solid"
+                _hover={{ textDecoration: 'none' }}
+              >
+                Download PDF
+              </Button>
+            )}
+            <Button
+              as={Link}
+              href={'/signup'}
+              size="xs"
+              py="14px"
+              px="10px"
+              leftIcon={<AtSignIcon />}
+              colorScheme="yellow"
+              variant="solid"
+              _hover={{ textDecoration: 'none' }}
+            >
+              Subscribe
+            </Button>
+          </Stack>
+        </PageHeader>
+
+        <RoadmapRenderer json={json} roadmap={roadmap} />
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
+  );
+}
+
+type StaticPathItem = {
+  params: {
+    roadmap: string;
+  };
+};
+
+export async function getStaticPaths() {
+  const roadmaps = getAllRoadmaps();
+  const paramsList: StaticPathItem[] = roadmaps.map((roadmap) => ({
+    params: { roadmap: roadmap.id },
+  }));
+
+  return {
+    paths: paramsList,
+    fallback: false,
+  };
+}
+
+type ContextType = {
+  params: {
+    roadmap: string;
+  };
+};
+
+export async function getStaticProps(context: ContextType) {
+  const roadmapId: string = context?.params?.roadmap;
+
+  let roadmapJson = {};
+  try {
+    roadmapJson = require(`../../public/project/${roadmapId}.json`);
+  } catch (e) {
+  }
+
+  return {
+    props: {
+      roadmap: getRoadmapById(roadmapId),
+      json: roadmapJson,
+    },
+  };
+}

pages/_app.tsx

@@ -19,6 +19,22 @@ const GlobalStyles = css`
     outline: none;
     box-shadow: none;
   }
+  
+  svg text tspan {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeSpeed;
+  }
+  
+  svg .clickable-group {
+    cursor: pointer;
+    
+    &:hover > [fill="rgb(65,53,214)"] { fill: #232381; stroke: #232381; }
+    &:hover > [fill="rgb(255,255,0)"] { fill: #d6d700; }
+    &:hover > [fill="rgb(255,229,153)"] { fill: #f3c950; }
+    &:hover > [fill="rgb(153,153,153)"] { fill: #646464; }
+    &:hover > [fill="rgb(255,255,255)"] { fill: #d7d7d7; }
+  }
 `;