Kamran Ahmed
3 years ago
parent
a2623c0142
commit
0afecdbe03
5 changed files with 743 additions and 485 deletions
File diff suppressed because it is too large
Load Diff
@ -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, |
||||
}, |
||||
}; |
||||
} |
||||
Binary file not shown.
Loading…
Reference in new issue