gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add videos listing page

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-03 12:59:44 +02:00
parent 75c4f952dd
commit 86f599b5b7
24 changed files with 230 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
content/videos.json
View File

@ -1,92 +1,230 @@
[
{
"id": "tcp-udp",
"title": "Transport Protocols: TCP vs UDP",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"description": "Learn about the Transport Layer of the TCP/IP model and different transport protocols.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"fileName": "tcp-udp.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "tcp-ip-model",
"title": "TCP/IP Model Explained",
"description": "Learn what is TCP/IP Model and the different layers involved.",
"url": "/watch/tcp-ip-model",
"fileName": "tcp-ip-model.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "osi-model",
"title": "OSI Model Explained",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn what is OSI Model and the different layers involved.",
"url": "/watch/osi-model",
"fileName": "osi-model.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "7 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "Creating a React App",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "freeze-seal-js",
"title": "Freeze and Seal Objects in JavaScript",
"description": "Learn what is OSI Model and the different layers involved.",
"url": "/watch/freeze-and-seal-objects-in-javascript",
"fileName": "freeze-seal-js.md",
"isPro": false,
"duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "DOM vs Shadow DOM vs Virtual DOM",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "http-caching",
"title": "Everything you need to know about HTTP Caching",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn what is HTTP caching, places for caching and different caching headers.",
"url": "/watch/all-about-http-caching",
"fileName": "http-caching.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "13 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "content-delivery-networks",
"title": "Content Delivery Networks",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn what the CDNs are and the difference between push CDN vs pull CDN.",
"url": "/watch/content-delivery-networks",
"fileName": "content-delivery-networks.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "4 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "Load Balancers in Depth",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "load-balancers-101",
"title": "Load Balancers 101",
"description": "Learn the basics of load balancers, types and different algorithms.",
"url": "/watch/load-balancers-101",
"fileName": "load-balancers-101.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "9 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "DNS and How does it Work?",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "dns-records",
"title": "DNS Records",
"description": "Learn what the DNS is and how a website is found on the internet.",
"url": "/watch/dns-records",
"fileName": "dns-records.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "dns-explained",
"title": "DNS and how does it work?",
"description": "Learn what the DNS is and how a website is found on the internet.",
"url": "/watch/dns-explained",
"fileName": "dns-explained.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "system-design-101",
"title": "System Design 101",
"description": "Learn about all the bits and pieces of system design.",
"url": "/watch/system-design-101",
"fileName": "system-design-101.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "7 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "javascript-fetch-api",
"title": "JavaScript Fetch API",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn how to use JavaScript's Fetch API to interact with remote API.",
"url": "/watch/javascript-fetch-api",
"fileName": "javascript-fetch-api.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "3 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "scaling-the-unscalable",
"title": "Scaling the Unscalable",
"description": "Learn the basics of System Design and understand how to build a scalable application.",
"url": "/watch/scaling-the-unscalable",
"fileName": "scaling-the-unscalable.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "promises-in-javascript",
"title": "All about Promises in JavaScript",
"description": "Learn how to write asynchronous code in JavaScript using promises.",
"url": "/watch/promises-in-javascript",
"fileName": "promises-in-javascript.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "8 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "how-to-use-github-actions",
"title": "Automate your workflows with GitHub Actions",
"description": "Learn how to implement CI/CD with GitHub Actions",
"url": "/watch/how-to-use-github-actions",
"fileName": "how-to-use-github-actions.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "what-is-dependency-injection",
"title": "What is Dependency Injection?",
"description": "Learn what is dependency injection and how to write better code with the help of it.",
"url": "/watch/what-is-dependency-injection",
"fileName": "what-is-dependency-injection.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "3 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "how-to-use-css-variables",
"title": "How to use CSS Variables?",
"description": "Learn how to write scalable CSS using CSS Variables.",
"url": "/watch/how-to-use-css-variables",
"fileName": "how-to-use-css-variables.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "what-is-dom-shadow-dom-virtual-dom",
"title": "What is DOM, Shadow DOM and Virtual DOM?",
"description": "Learn what is DOM, Shadow DOM and Virtual DOM and how they work.",
"url": "/watch/what-is-dom-shadow-dom-virtual-dom",
"fileName": "what-is-dom-shadow-dom-virtual-dom.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "practical-intro-to-react",
"title": "Practical Introduction to React",
"description": "Learn how to create a React Application with practical example.",
"url": "/watch/practical-intro-to-react",
"fileName": "practical-intro-to-react.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "40 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "arrays-and-objects-in-javascript",
"title": "Built-in Methods for Arrays and Objects in JavaScript",
"description": "Learn how to manipulate arrays and objects in JavaScript.",
"url": "/watch/arrays-and-objects-in-javascript",
"fileName": "arrays-and-objects-in-javascript.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "12 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
}
]

0
content/videos/arrays-and-objects-in-javascript.md Normal file
View File

0
content/videos/content-delivery-networks.md Normal file
View File

0
content/videos/dns-explained.md Normal file
View File

0
content/videos/freeze-seal-js.md Normal file
View File

0
content/videos/how-to-use-css-variables.md Normal file
View File

0
content/videos/how-to-use-github-actions.md Normal file
View File

0
content/videos/http-caching.md Normal file
View File

0
content/videos/javascript-fetch-api.md Normal file
View File

0
content/videos/load-balancers-101.md Normal file
View File

0
content/videos/osi-model.md Normal file
View File

0
content/videos/practical-intro-to-react.md Normal file
View File

0
content/videos/promises-in-javascript.md Normal file
View File

0
content/videos/scaling-the-unscalable.md Normal file
View File

0
content/videos/tcp-ip-model.md Normal file
View File

0
content/videos/tcp-udp.md Normal file
View File

0
content/videos/what-is-dependency-injection.md Normal file
View File

0
content/videos/what-is-dom-shadow-dom-virtual-dom.md Normal file
View File

17
lib/guide.ts
View File

@ -1,6 +1,5 @@
import guides from '../content/guides.json';
import formatDate from 'date-fns/format';
import { NextApiRequest } from 'next';
import { AuthorType, findAuthorByUsername } from './author';
export type GuideType = {
@ -13,23 +12,16 @@ export type GuideType = {
isDraft: boolean;
createdAt: string;
updatedAt: string;
formattedCreatedAt: string;
formattedUpdatedAt: string;
formattedCreatedAt?: string;
formattedUpdatedAt?: string;
authorUsername: string;
author?: AuthorType;
};
export function getGuideById(id: string): GuideType | undefined {
const allGuides = getAllGuides();
const foundGuide = allGuides.find(guide => guide.id === id);
if (!foundGuide) {
return undefined;
}
return {
...foundGuide,
author: findAuthorByUsername(foundGuide.authorUsername)
};
return allGuides.find(guide => guide.id === id);
}
export function getAllGuides(limit: number = 0): GuideType[] {
@ -39,7 +31,8 @@ export function getAllGuides(limit: number = 0): GuideType[] {
.map(guide => ({
...guide,
formattedCreatedAt: formatDate(new Date(guide.createdAt), 'MMMM d, yyyy'),
formattedUpdatedAt: formatDate(new Date(guide.updatedAt), 'MMMM d, yyyy')
formattedUpdatedAt: formatDate(new Date(guide.updatedAt), 'MMMM d, yyyy'),
author: findAuthorByUsername(guide.authorUsername)
}))
.slice(0, limit ? limit : guides.length);
}

27
lib/video.ts
View File

@ -1,8 +1,9 @@
import videos from '../content/videos.json';
import formatDate from 'date-fns/format';
import { NextApiRequest } from 'next';
import { AuthorType, findAuthorByUsername } from './author';
export type VideoType = {
id: string;
title: string;
description: string;
url: string;
@ -11,8 +12,10 @@ export type VideoType = {
duration: string;
createdAt: string;
updatedAt: string;
formattedCreatedAt: string;
formattedUpdatedAt: string;
formattedCreatedAt?: string;
formattedUpdatedAt?: string;
authorUsername: string;
author?: AuthorType;
};
export function getAllVideos(limit: number = 0): VideoType[] {
@ -21,24 +24,14 @@ export function getAllVideos(limit: number = 0): VideoType[] {
.map(video => ({
...video,
formattedCreatedAt: formatDate(new Date(video.createdAt), 'MMMM d, yyyy'),
formattedUpdatedAt: formatDate(new Date(video.updatedAt), 'MMMM d, yyyy')
formattedUpdatedAt: formatDate(new Date(video.updatedAt), 'MMMM d, yyyy'),
author: findAuthorByUsername(video.authorUsername)
}))
.slice(0, limit ? limit : videos.length);
}
export function getRequestedGuide(req: NextApiRequest): VideoType | undefined {
export function getVideoById(id: string): VideoType | undefined {
const allVideos = getAllVideos();
const video = allVideos.find(video => video.url === req.url);
if (!video) {
return undefined;
}
try {
return video;
} catch (e) {
console.log(e);
}
return undefined;
return allVideos.find(guide => guide.id === id);
}

2
pages/guides/[guide].tsx
View File

@ -23,7 +23,7 @@ export default function Guide(props: GuideProps) {
<ContentPageHeader
title={guide.title}
subtitle={guide.description}
formattedDate={guide.formattedUpdatedAt}
formattedDate={guide.formattedUpdatedAt!}
author={{
twitter: guide?.author?.twitter!,
picture: guide?.author?.picture!,

8
pages/guides/index.tsx
View File

@ -1,4 +1,4 @@
import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
import { Box, Container, SimpleGrid } from '@chakra-ui/react';
import { GlobalHeader } from '../../components/global-header';
import { LinksList } from '../../components/links-list';
import { LinksListItem } from '../../components/links-list-item';
@ -7,7 +7,7 @@ import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { GuideGridItem } from './components/guide-grid-item';
import { PageHeader } from '../../components/page-header';
import { getAllGuides, getGuideById, GuideType } from '../../lib/guide';
import { getAllGuides, GuideType } from '../../lib/guide';
type GuidesProps = {
guides: GuideType[]
@ -35,7 +35,7 @@ export default function Guides(props: GuidesProps) {
key={recentGuide.id}
title={recentGuide.title}
subtitle={recentGuide.description}
date={recentGuide.formattedUpdatedAt}
date={recentGuide.formattedUpdatedAt!}
isNew
colorIndex={counter}
/>
@ -49,7 +49,7 @@ export default function Guides(props: GuidesProps) {
key={oldGuide.id}
title={oldGuide.title}
badgeText={oldGuide.isPro ? 'PRO' : ''}
subtitle={oldGuide.formattedUpdatedAt}
subtitle={oldGuide.formattedUpdatedAt!}
/>
))}
</LinksList>

4
pages/watch/components/video-grid-item.tsx
View File

@ -57,12 +57,12 @@ export function VideoGridItem(props: VideoGridItemProps) {
return (
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>
<Text mb='7px' fontSize='12px' color='gray.400'>
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
{isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
{date}
</Text>
<Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
<Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
</Link>
);

102
pages/watch/index.tsx
View File

@ -1,12 +1,19 @@
import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
import { Box, Container, SimpleGrid } 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 { VideoGridItem } from './components/video-grid-item';
import { PageHeader } from '../../components/page-header';
import { getAllVideos, VideoType } from '../../lib/video';
type VideosProps = {
videos: VideoType[]
}
export default function Watch(props: VideosProps) {
const { videos = [] } = props;
export default function Watch() {
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
@ -17,82 +24,17 @@ export default function Watch() {
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
{videos.map((video, counter) => (
<VideoGridItem
title='Session Based Authentication'
subtitle='Learn what the Session Based Authentication is, the pros and cons.'
date='June 25, 2021'
isNew
/>
<VideoGridItem
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}
isPro
/>
<VideoGridItem
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={2}
/>
<VideoGridItem
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={3}
/>
<VideoGridItem
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={4}
isPro
/>
<VideoGridItem
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={5}
/>
<VideoGridItem
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={6}
/>
<VideoGridItem
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={7}
/>
<VideoGridItem
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={8}
isPro
/>
<VideoGridItem
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={9}
/>
<VideoGridItem
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={10}
isPro
/>
<VideoGridItem
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={11}
key={video.id}
title={video.title}
subtitle={video.description}
date={video.formattedUpdatedAt!}
isNew={counter <= 1}
colorIndex={counter}
isPro={video.isPro}
/>
))}
</SimpleGrid>
</Container>
</Box>
@ -103,3 +45,11 @@ export default function Watch() {
</Box>
);
}
export async function getStaticProps() {
return {
props: {
videos: getAllVideos()
}
};
}