Add interactive roadmap setup

pull/1657/head
Kamran Ahmed 3 years ago
parent a2623c0142
commit 0afecdbe03
  1. 1023
      package-lock.json
  2. 15
      package.json
  3. 172
      pages/[roadmap]/interactive.tsx
  4. 16
      pages/_app.tsx
  5. BIN
      public/fonts/balsamiq.woff2

1023
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -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",
"date-fns": "^2.26.0",
"@svgr/webpack": "^6.0.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",

@ -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,
},
};
}

@ -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; }
}
`;

Binary file not shown.
Loading…
Cancel
Save