diff --git a/content/videos.json b/content/videos.json index 538fd90ed..5f6b225fc 100644 --- a/content/videos.json +++ b/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" }, { + "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" } ] diff --git a/content/videos/arrays-and-objects-in-javascript.md b/content/videos/arrays-and-objects-in-javascript.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/content-delivery-networks.md b/content/videos/content-delivery-networks.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/dns-explained.md b/content/videos/dns-explained.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/freeze-seal-js.md b/content/videos/freeze-seal-js.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/how-to-use-css-variables.md b/content/videos/how-to-use-css-variables.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/how-to-use-github-actions.md b/content/videos/how-to-use-github-actions.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/http-caching.md b/content/videos/http-caching.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/javascript-fetch-api.md b/content/videos/javascript-fetch-api.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/load-balancers-101.md b/content/videos/load-balancers-101.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/osi-model.md b/content/videos/osi-model.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/practical-intro-to-react.md b/content/videos/practical-intro-to-react.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/promises-in-javascript.md b/content/videos/promises-in-javascript.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/scaling-the-unscalable.md b/content/videos/scaling-the-unscalable.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/tcp-ip-model.md b/content/videos/tcp-ip-model.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/tcp-udp.md b/content/videos/tcp-udp.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/what-is-dependency-injection.md b/content/videos/what-is-dependency-injection.md new file mode 100644 index 000000000..e69de29bb diff --git a/content/videos/what-is-dom-shadow-dom-virtual-dom.md b/content/videos/what-is-dom-shadow-dom-virtual-dom.md new file mode 100644 index 000000000..e69de29bb diff --git a/lib/guide.ts b/lib/guide.ts index 2da766daf..8195a06a2 100644 --- a/lib/guide.ts +++ b/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; - 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); } diff --git a/lib/video.ts b/lib/video.ts index e508101f2..4a6ac1fb1 100644 --- a/lib/video.ts +++ b/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; - 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); } diff --git a/pages/guides/[guide].tsx b/pages/guides/[guide].tsx index 039b84c28..73c52cf01 100644 --- a/pages/guides/[guide].tsx +++ b/pages/guides/[guide].tsx @@ -23,7 +23,7 @@ export default function Guide(props: GuideProps) { @@ -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!} /> ))} diff --git a/pages/watch/components/video-grid-item.tsx b/pages/watch/components/video-grid-item.tsx index fbebaee26..6f80f60ba 100644 --- a/pages/watch/components/video-grid-item.tsx +++ b/pages/watch/components/video-grid-item.tsx @@ -57,12 +57,12 @@ export function VideoGridItem(props: VideoGridItemProps) { return ( - + {isNew && New} {isPro && PRO} {date} - {title} + {title} {subtitle} ); diff --git a/pages/watch/index.tsx b/pages/watch/index.tsx index a8dd5b5ea..42fc45d35 100644 --- a/pages/watch/index.tsx +++ b/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 ( @@ -17,82 +24,17 @@ export default function Watch() { /> - - - - - - - - - - - - + {videos.map((video, counter) => ( + + ))} @@ -103,3 +45,11 @@ export default function Watch() { ); } + +export async function getStaticProps() { + return { + props: { + videos: getAllVideos() + } + }; +}