github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add youtube links to videos

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 96e02195a9
commit 68fc45104d
3 changed files with 59 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      content/videos.json
  2. 1
      lib/video.ts
  3. 7
      pages/watch/[video].tsx

91
content/videos.json
Unescape View File

@ -4,10 +4,11 @@
"title": "Transport Protocols: TCP vs UDP", "title": "Transport Protocols: TCP vs UDP",
"description": "Learn about the Transport Layer of the TCP/IP model and different transport protocols.", "description": "Learn about the Transport Layer of the TCP/IP model and different transport protocols.",
"isPro": false, "isPro": false,
"youtubeLink": "https://www.youtube.com/watch?v=37AFBZv4_6Y",
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "10 minutes", "duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-11-21T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-11-21T19:59:14.191Z"
}, },
{ {
"id": "tcp-ip-model", "id": "tcp-ip-model",
@ -15,164 +16,181 @@
"description": "Learn what is TCP/IP Model and the different layers involved.", "description": "Learn what is TCP/IP Model and the different layers involved.",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"youtubeLink": "https://www.youtube.com/watch?v=F5rni9fr1yE",
"duration": "5 minutes", "duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-11-06T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-11-06T19:59:14.191Z"
}, },
{ {
"id": "osi-model", "id": "osi-model",
"title": "OSI Model Explained", "title": "OSI Model Explained",
"description": "Learn what is OSI Model and the different layers involved.", "description": "Learn what is OSI Model and the different layers involved.",
"isPro": false, "isPro": false,
"youtubeLink": "https://www.youtube.com/watch?v=dV8mjZd1OtU",
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "7 minutes", "duration": "7 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-10-24T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-10-24T19:59:14.191Z"
}, },
{ {
"id": "freeze-and-seal-objects-in-javascript", "id": "freeze-and-seal-objects-in-javascript",
"title": "Freeze and Seal in JavaScript", "title": "Freeze and Seal in JavaScript",
"description": "Learn what is OSI Model and the different layers involved.", "description": "Learn what is OSI Model and the different layers involved.",
"youtubeLink": "https://www.youtube.com/watch?v=O3uT2l6vgZ8",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "6 minutes", "duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-10-16T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-10-16T19:59:14.191Z"
}, },
{ {
"id": "all-about-http-caching", "id": "all-about-http-caching",
"title": "All about HTTP Caching", "title": "All about HTTP Caching",
"description": "Learn what is HTTP caching, places for caching and different caching headers.", "description": "Learn what is HTTP caching, places for caching and different caching headers.",
"youtubeLink": "https://www.youtube.com/watch?v=HiBDZgTNpXY",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "13 minutes", "duration": "13 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-10-04T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-10-04T19:59:14.191Z"
}, },
{ {
"id": "content-delivery-networks", "id": "content-delivery-networks",
"title": "Content Delivery Networks", "title": "Content Delivery Networks",
"description": "Learn what the CDNs are and the difference between push CDN vs pull CDN.", "description": "Learn what the CDNs are and the difference between push CDN vs pull CDN.",
"youtubeLink": "https://www.youtube.com/watch?v=6DXEPcXKQNY",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "4 minutes", "duration": "4 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-09-26T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-09-26T19:59:14.191Z"
}, },
{ {
"id": "load-balancers-101", "id": "load-balancers-101",
"title": "Load Balancers 101", "title": "Load Balancers 101",
"description": "Learn the basics of load balancers, types and different algorithms.", "description": "Learn the basics of load balancers, types and different algorithms.",
"youtubeLink": "https://www.youtube.com/watch?v=galcDRNd5Ow",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "9 minutes", "duration": "9 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-09-18T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-09-18T19:59:14.191Z"
}, },
{ {
"id": "dns-records", "id": "dns-records",
"title": "DNS Records", "title": "DNS Records",
"description": "Learn what the DNS is and how a website is found on the internet.", "description": "Learn what the DNS is and how a website is found on the internet.",
"youtubeLink": "https://www.youtube.com/watch?v=7lxgpKh_fRY",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "6 minutes", "duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-08-31T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-08-31T19:59:14.191Z"
}, },
{ {
"id": "dns-explained", "id": "dns-explained",
"title": "DNS and how does it work?", "title": "DNS and how does it work?",
"description": "Learn what the DNS is and how a website is found on the internet.", "description": "Learn what the DNS is and how a website is found on the internet.",
"youtubeLink": "https://www.youtube.com/watch?v=Wj0od2ag5sk",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "5 minutes", "duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-08-17T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-08-17T19:59:14.191Z"
}, },
{ {
"id": "system-design-101", "id": "system-design-101",
"title": "System Design 101", "title": "System Design 101",
"description": "Learn about all the bits and pieces of system design.", "description": "Learn about all the bits and pieces of system design.",
"youtubeLink": "https://www.youtube.com/watch?v=Y-Gl4HEyeUQ",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "7 minutes", "duration": "7 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-08-08T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-08-08T19:59:14.191Z"
}, },
{ {
"id": "javascript-fetch-api", "id": "javascript-fetch-api",
"title": "JavaScript Fetch API", "title": "JavaScript Fetch API",
"description": "Learn how to use JavaScript's Fetch API to interact with remote API.", "description": "Learn how to use JavaScript's Fetch API to interact with remote API.",
"youtubeLink": "https://www.youtube.com/watch?v=-ZI0ea5O2oA",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "3 minutes", "duration": "3 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-08-02T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-08-02T19:59:14.191Z"
}, },
{ {
"id": "scaling-the-unscalable", "id": "scaling-the-unscalable",
"title": "Scaling the Unscalable", "title": "Scaling the Unscalable",
"description": "Learn the basics of System Design and understand how to build a scalable application.", "description": "Learn the basics of System Design and understand how to build a scalable application.",
"youtubeLink": "https://www.youtube.com/watch?v=a2rcgzludDU",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "10 minutes", "duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-07-26T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-07-26T19:59:14.191Z"
}, },
{ {
"id": "promises-in-javascript", "id": "promises-in-javascript",
"title": "All about Promises in JavaScript", "title": "All about Promises in JavaScript",
"youtubeLink": "https://www.youtube.com/watch?v=BvrkobaCVVE",
"description": "Learn how to write asynchronous code in JavaScript using promises.", "description": "Learn how to write asynchronous code in JavaScript using promises.",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "8 minutes", "duration": "8 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-07-20T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-07-20T19:59:14.191Z"
}, },
{ {
"id": "how-to-use-github-actions", "id": "how-to-use-github-actions",
"title": "Automate with GitHub Actions", "title": "Automate with GitHub Actions",
"description": "Learn how to implement CI/CD with GitHub Actions", "description": "Learn how to implement CI/CD with GitHub Actions",
"youtubeLink": "https://www.youtube.com/watch?v=nyKZTKQS_EQ",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "6 minutes", "duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-07-13T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-07-13T19:59:14.191Z"
}, },
{ {
"id": "what-is-dependency-injection", "id": "what-is-dependency-injection",
"title": "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.", "description": "Learn what is dependency injection and how to write better code with the help of it.",
"youtubeLink": "https://www.youtube.com/watch?v=0yc2UANSDiw",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "3 minutes", "duration": "3 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-07-04T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-07-04T19:59:14.191Z"
}, },
{ {
"id": "how-to-use-css-variables", "id": "how-to-use-css-variables",
"title": "How to use CSS Variables?", "title": "How to use CSS Variables?",
"description": "Learn how to write scalable CSS using CSS Variables.", "description": "Learn how to write scalable CSS using CSS Variables.",
"youtubeLink": "https://www.youtube.com/watch?v=lgaxU7CRmxU",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "5 minutes", "duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-07-03T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-07-03T19:59:14.191Z"
}, },
{ {
"id": "what-is-dom-shadow-dom-virtual-dom", "id": "what-is-dom-shadow-dom-virtual-dom",
"title": "DOM, Shadow DOM, Virtual DOM", "title": "DOM, Shadow DOM, Virtual DOM",
"description": "Learn what is DOM, Shadow DOM and Virtual DOM and how they work.", "description": "Learn what is DOM, Shadow DOM and Virtual DOM and how they work.",
"youtubeLink": "https://www.youtube.com/watch?v=7Tok22qxPzQ",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "6 minutes", "duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-07-20T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-07-20T19:59:14.191Z"
}, },
{ {
"id": "practical-intro-to-react", "id": "practical-intro-to-react",
"title": "Practical Introduction to React", "title": "Practical Introduction to React",
"description": "Learn how to create a React Application with practical example.", "description": "Learn how to create a React Application with practical example.",
"youtubeLink": "https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "40 minutes", "duration": "40 minutes",
@ -183,10 +201,11 @@
"id": "arrays-and-objects-in-javascript", "id": "arrays-and-objects-in-javascript",
"title": "Arrays and Objects in JavaScript", "title": "Arrays and Objects in JavaScript",
"description": "Learn how to manipulate arrays and objects in JavaScript.", "description": "Learn how to manipulate arrays and objects in JavaScript.",
"youtubeLink": "https://www.youtube.com/watch?v=n3NKGsM3iEw",
"isPro": false, "isPro": false,
"authorUsername": "kamranahmedse", "authorUsername": "kamranahmedse",
"duration": "12 minutes", "duration": "12 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z", "updatedAt": "2020-05-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z" "createdAt": "2020-05-09T19:59:14.191Z"
} }
] ]

1
lib/video.ts
Unescape View File

@ -6,6 +6,7 @@ export type VideoType = {
id: string; id: string;
title: string; title: string;
description: string; description: string;
youtubeLink?: string;
isPro: boolean; isPro: boolean;
duration: string; duration: string;
createdAt: string; createdAt: string;

7
pages/watch/[video].tsx
Unescape View File

@ -23,10 +23,10 @@ export default function Video(props: VideoProps) {
title={video.title} title={video.title}
subtitle={video.description} subtitle={video.description}
formattedDate={video.formattedUpdatedAt!} formattedDate={video.formattedUpdatedAt!}
subLink={{ subLink={video.youtubeLink ? {
text: 'Watch on YouTube', text: 'Watch on YouTube',
url: 'https://youtube.com' url: video.youtubeLink
}} } : undefined}
author={{ author={{
twitter: video.author?.twitter!, twitter: video.author?.twitter!,
name: video.author?.name!, name: video.author?.name!,
@ -74,7 +74,6 @@ type ContextType = {
export async function getStaticProps(context: ContextType) { export async function getStaticProps(context: ContextType) {
const videoId: string = context?.params?.video; const videoId: string = context?.params?.video;
console.log(getVideoById(videoId));
return { return {
props: { props: {
video: getVideoById(videoId) video: getVideoById(videoId)

Write Preview
Loading…
Cancel
Save