Kamran Ahmed
3 years ago
parent
8a526f51b9
commit
7256c93d85
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