Add videos listing page

content/videos.json

@@ -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"
   },
   {
-    "title": "OSI Model Explained",
+    "id": "tcp-ip-model",
-    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
+    "title": "TCP/IP Model Explained",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "description": "Learn what is TCP/IP Model and the different layers involved.",
-    "fileName": "tcp-udp",
+    "url": "/watch/tcp-ip-model",
+    "fileName": "tcp-ip-model.md",
     "isPro": false,
-    "duration": "10 minutes",
+    "authorUsername": "kamranahmedse",
+    "duration": "5 minutes",
     "updatedAt": "2020-07-09T19:59:14.191Z",
     "createdAt": "2020-07-09T19:59:14.191Z"
   },
   {
-    "title": "Creating a React App",
+    "id": "osi-model",
-    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
+    "title": "OSI Model Explained",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "description": "Learn what is OSI Model and the different layers involved.",
-    "fileName": "tcp-udp",
+    "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": "DOM vs Shadow DOM vs Virtual DOM",
+    "id": "freeze-seal-js",
-    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
+    "title": "Freeze and Seal Objects in JavaScript",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "description": "Learn what is OSI Model and the different layers involved.",
-    "fileName": "tcp-udp",
+    "url": "/watch/freeze-and-seal-objects-in-javascript",
+    "fileName": "freeze-seal-js.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": "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.",
+    "description": "Learn what is HTTP caching, places for caching and different caching headers.",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "url": "/watch/all-about-http-caching",
-    "fileName": "tcp-udp",
+    "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.",
+    "description": "Learn what the CDNs are and the difference between push CDN vs pull CDN.",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "url": "/watch/content-delivery-networks",
-    "fileName": "tcp-udp",
+    "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",
+    "id": "load-balancers-101",
-    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
+    "title": "Load Balancers 101",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "description": "Learn the basics of load balancers, types and different algorithms.",
-    "fileName": "tcp-udp",
+    "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?",
+    "id": "dns-records",
-    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
+    "title": "DNS Records",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "description": "Learn what the DNS is and how a website is found on the internet.",
-    "fileName": "tcp-udp",
+    "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.",
+    "description": "Learn how to use JavaScript's Fetch API to interact with remote API.",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
+    "url": "/watch/javascript-fetch-api",
-    "fileName": "tcp-udp",
+    "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"
   }
 ]

lib/guide.ts

@@ -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;
+  formattedCreatedAt?: string;
-  formattedUpdatedAt: 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 {
+  return allGuides.find(guide => guide.id === id);
-    ...foundGuide,
-    author: findAuthorByUsername(foundGuide.authorUsername)
-  };
 }
 
 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);
 }

lib/video.ts

@@ -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;
+  formattedCreatedAt?: string;
-  formattedUpdatedAt: 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 getVideoById(id: string): VideoType | undefined {
-export function getRequestedGuide(req: NextApiRequest): 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);
 }

pages/guides/[guide].tsx

@@ -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!,

pages/guides/index.tsx

@@ -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>

pages/watch/components/video-grid-item.tsx

@@ -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>
   );

pages/watch/index.tsx

@@ -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'
+                key={video.id}
-              subtitle='Learn what the Session Based Authentication is, the pros and cons.'
+                title={video.title}
-              date='June 25, 2021'
+                subtitle={video.description}
-              isNew
+                date={video.formattedUpdatedAt!}
-            />
+                isNew={counter <= 1}
-            <VideoGridItem
+                colorIndex={counter}
-              title='JSON Web Tokens'
+                isPro={video.isPro}
-              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}
               />
+            ))}
           </SimpleGrid>
         </Container>
       </Box>
@@ -103,3 +45,11 @@ export default function Watch() {
     </Box>
   );
 }
+
+export async function getStaticProps() {
+  return {
+    props: {
+      videos: getAllVideos()
+    }
+  };
+}