Kamran Ahmed
3 years ago
parent
f500d49275
commit
3b47cd3542
31 changed files with 186 additions and 28 deletions
@ -0,0 +1 @@ |
|||||||
|
Here is how the internet work |
||||||
@ -0,0 +1 @@ |
|||||||
|
Here is the internet |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
import { |
||||||
|
Box, |
||||||
|
Breadcrumb, |
||||||
|
BreadcrumbItem, |
||||||
|
BreadcrumbLink, |
||||||
|
Container, |
||||||
|
} from '@chakra-ui/react'; |
||||||
|
import { GlobalHeader } from '../../components/global-header'; |
||||||
|
import { OpensourceBanner } from '../../components/opensource-banner'; |
||||||
|
import { UpdatesBanner } from '../../components/updates-banner'; |
||||||
|
import { Footer } from '../../components/footer'; |
||||||
|
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap'; |
||||||
|
import MdRenderer from '../../components/md-renderer'; |
||||||
|
import Helmet from '../../components/helmet'; |
||||||
|
import React from 'react'; |
||||||
|
import { ChevronRightIcon } from '@chakra-ui/icons'; |
||||||
|
|
||||||
|
type RoadmapProps = { |
||||||
|
roadmap: RoadmapType; |
||||||
|
group: string; |
||||||
|
}; |
||||||
|
|
||||||
|
function TextualRoadmap(props: RoadmapProps) { |
||||||
|
const { roadmap, group } = props; |
||||||
|
if (!roadmap.contentPathsFilePath) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
// Remove trailing slashes
|
||||||
|
const contentsPathsFilePath = roadmap.contentPathsFilePath.replace(/^\//, ''); |
||||||
|
const contentPathMapping = require(`../../content/${contentsPathsFilePath}`); |
||||||
|
|
||||||
|
const contentFilePath = contentPathMapping[group] || ''; |
||||||
|
const normalizedContentFilePath = contentFilePath.replace(/^\//, ''); |
||||||
|
|
||||||
|
const GroupContent = require(`../../content/${normalizedContentFilePath}`).default; |
||||||
|
|
||||||
|
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="/frontend"> |
||||||
|
Frontend |
||||||
|
</BreadcrumbLink> |
||||||
|
</BreadcrumbItem> |
||||||
|
|
||||||
|
<BreadcrumbItem> |
||||||
|
<BreadcrumbLink color="blue.500" href="/frontend/internet"> |
||||||
|
Internet |
||||||
|
</BreadcrumbLink> |
||||||
|
</BreadcrumbItem> |
||||||
|
|
||||||
|
<BreadcrumbItem isCurrentPage> |
||||||
|
<BreadcrumbLink |
||||||
|
color="blue.500" |
||||||
|
href="/frontend/internet:what-is-internet" |
||||||
|
> |
||||||
|
What is Internet |
||||||
|
</BreadcrumbLink> |
||||||
|
</BreadcrumbItem> |
||||||
|
</Breadcrumb> |
||||||
|
</Box> |
||||||
|
<MdRenderer> |
||||||
|
<GroupContent /> |
||||||
|
</MdRenderer> |
||||||
|
</Container> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default function Roadmap(props: RoadmapProps) { |
||||||
|
const { roadmap, group } = 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"> |
||||||
|
<TextualRoadmap roadmap={roadmap} group={group} /> |
||||||
|
</Box> |
||||||
|
|
||||||
|
<OpensourceBanner /> |
||||||
|
<UpdatesBanner /> |
||||||
|
<Footer /> |
||||||
|
</Box> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type StaticPathItem = { |
||||||
|
params: { |
||||||
|
roadmap: string; |
||||||
|
group: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
export async function getStaticPaths() { |
||||||
|
const roadmaps = getAllRoadmaps(); |
||||||
|
|
||||||
|
// Return all the groups from here
|
||||||
|
const paramsList: StaticPathItem[] = roadmaps.flatMap((roadmap) => { |
||||||
|
if (roadmap.contentPathsFilePath) { |
||||||
|
const normalizedPath = roadmap.contentPathsFilePath.replace(/^\/+?/, ''); |
||||||
|
const contentPaths = require(`../../content/${normalizedPath}`); |
||||||
|
const groupNames = Object.keys(contentPaths); |
||||||
|
|
||||||
|
// For each of the group names, return the param list
|
||||||
|
return groupNames.map((groupName: string) => ({ |
||||||
|
params: { |
||||||
|
roadmap: roadmap.id, |
||||||
|
group: groupName, |
||||||
|
}, |
||||||
|
})); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
params: { |
||||||
|
roadmap: roadmap.id, |
||||||
|
group: '', |
||||||
|
}, |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
return { |
||||||
|
paths: paramsList, |
||||||
|
fallback: false, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
type ContextType = { |
||||||
|
params: { |
||||||
|
roadmap: string; |
||||||
|
group: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
export async function getStaticProps(context: ContextType) { |
||||||
|
const roadmapId: string = context?.params?.roadmap; |
||||||
|
const groupId: string = context?.params?.group; |
||||||
|
|
||||||
|
return { |
||||||
|
props: { |
||||||
|
roadmap: getRoadmapById(roadmapId), |
||||||
|
group: groupId, |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
Loading…
Reference in new issue