Guides listing to have all guides

pull/1331/head
Kamran Ahmed 3 years ago
parent 93797cc5ee
commit aa8aea9433
  1. 66
      pages/guides/index.tsx

@ -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']}>
{recentGuides.map((recentGuide, counter) => (
<GuideGridItem <GuideGridItem
title='Session Based Authentication' key={recentGuide.id}
subtitle='Learn what the Session Based Authentication is, the pros and cons.' title={recentGuide.title}
date='June 25, 2021' subtitle={recentGuide.description}
date={recentGuide.formattedUpdatedAt}
isNew isNew
colorIndex={counter}
/> />
<GuideGridItem ))}
title='JSON Web Tokens'
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()
}
};
}

Loading…
Cancel
Save