info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-27 11:09:53 +02:00
Code Issues Releases Wiki Activity

Guides listing to have all guides

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-03 10:11:33 +02:00
parent 93797cc5ee
commit aa8aea9433
1 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
pages/guides/index.tsx
View File

@@ -7,8 +7,18 @@ import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer'; import { Footer } from '../../components/footer';
import { GuideGridItem } from './components/guide-grid-item'; import { GuideGridItem } from './components/guide-grid-item';
import { PageHeader } from '../../components/page-header'; import { PageHeader } from '../../components/page-header';
import { getAllGuides, getGuideById, GuideType } from '../../lib/guide';
type GuidesProps = {
guides: GuideType[]
}
export default function Guides(props: GuidesProps) {
const { guides = [] } = props;
const recentGuides = guides.slice(0, 2);
const oldGuides = guides.slice(2);
export default function Guides() {
return ( return (
<Box bg='white' minH='100vh'> <Box bg='white' minH='100vh'>
<GlobalHeader /> <GlobalHeader />
@@ -19,41 +29,28 @@ export default function Guides() {
/> />
<Container maxW='container.md' position='relative'> <Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}> <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
<GuideGridItem {recentGuides.map((recentGuide, counter) => (
title='Session Based Authentication' <GuideGridItem
subtitle='Learn what the Session Based Authentication is, the pros and cons.' key={recentGuide.id}
date='June 25, 2021' title={recentGuide.title}
isNew subtitle={recentGuide.description}
/> date={recentGuide.formattedUpdatedAt}
<GuideGridItem isNew
title='JSON Web Tokens' colorIndex={counter}
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.' />
date='June 25, 2021' ))}
colorIndex={1}
/>
</SimpleGrid> </SimpleGrid>
<LinksList> <LinksList>
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' /> {oldGuides.map(oldGuide => (
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' /> <LinksListItem
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' /> href={oldGuide.url}
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' /> key={oldGuide.id}
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' /> title={oldGuide.title}
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' /> badgeText={oldGuide.isPro ? 'PRO' : ''}
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' /> subtitle={oldGuide.formattedUpdatedAt}
<LinksListItem title='Authentication' subtitle='February 01, 2021' /> />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' /> ))}
<LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
<LinksListItem title='Authentication' subtitle='February 01, 2021' />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
<LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
</LinksList> </LinksList>
</Container> </Container>
</Box> </Box>
@@ -64,3 +61,12 @@ export default function Guides() {
</Box> </Box>
); );
} }
export async function getStaticProps() {
return {
props: {
guides: getAllGuides()
}
};
}