Normalize filename and url in videos

content/videos.json

@@ -1,10 +1,8 @@
 [
   {
-    "id": "tcp-udp",
+    "id": "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.",
-    "url": "/watch/transport-protocols-tcp-vs-udp",
-    "fileName": "tcp-udp.md",
     "isPro": false,
     "authorUsername": "kamranahmedse",
     "duration": "10 minutes",
@@ -15,8 +13,6 @@
     "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",
@@ -27,8 +23,6 @@
     "id": "osi-model",
     "title": "OSI Model Explained",
     "description": "Learn what is OSI Model and the different layers involved.",
-    "url": "/watch/osi-model",
-    "fileName": "osi-model.md",
     "isPro": false,
     "authorUsername": "kamranahmedse",
     "duration": "7 minutes",
@@ -36,11 +30,9 @@
     "createdAt": "2020-07-09T19:59:14.191Z"
   },
   {
-    "id": "freeze-seal-js",
+    "id": "freeze-and-seal-objects-in-javascript",
     "title": "Freeze and Seal 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,
     "authorUsername": "kamranahmedse",
     "duration": "6 minutes",
@@ -48,11 +40,9 @@
     "createdAt": "2020-07-09T19:59:14.191Z"
   },
   {
-    "id": "http-caching",
+    "id": "all-about-http-caching",
     "title": "All about HTTP Caching",
     "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,
     "authorUsername": "kamranahmedse",
     "duration": "13 minutes",
@@ -63,8 +53,6 @@
     "id": "content-delivery-networks",
     "title": "Content Delivery Networks",
     "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,
     "authorUsername": "kamranahmedse",
     "duration": "4 minutes",
@@ -75,8 +63,6 @@
     "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,
     "authorUsername": "kamranahmedse",
     "duration": "9 minutes",
@@ -87,8 +73,6 @@
     "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,
     "authorUsername": "kamranahmedse",
     "duration": "6 minutes",
@@ -99,8 +83,6 @@
     "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",
@@ -111,8 +93,6 @@
     "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",
@@ -123,8 +103,6 @@
     "id": "javascript-fetch-api",
     "title": "JavaScript Fetch API",
     "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",
@@ -135,8 +113,6 @@
     "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",
@@ -147,8 +123,6 @@
     "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",
@@ -159,8 +133,6 @@
     "id": "how-to-use-github-actions",
     "title": "Automate 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",
@@ -171,8 +143,6 @@
     "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",
@@ -183,8 +153,6 @@
     "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",
@@ -195,8 +163,6 @@
     "id": "what-is-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.",
-    "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",
@@ -207,8 +173,6 @@
     "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",
@@ -219,8 +183,6 @@
     "id": "arrays-and-objects-in-javascript",
     "title": "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",

lib/video.ts

@@ -6,8 +6,6 @@ export type VideoType = {
   id: string;
   title: string;
   description: string;
-  url: string;
-  fileName: string;
   isPro: boolean;
   duration: string;
   createdAt: string;

pages/index.tsx

@@ -69,7 +69,7 @@ export default function Home(props: HomeProps) {
                 href={guide.url}
                 title={guide.title}
                 badgeText={guide.isPro ? 'PRO' : ''}
-                subtitle={guide.formattedUpdatedAt}
+                subtitle={guide.formattedUpdatedAt!}
               />
             ))}
             <DimmedMore href={'/guides'} text='View all Guides' />
@@ -87,7 +87,7 @@ export default function Home(props: HomeProps) {
             {videos.map(video => (
               <LinksListItem
                 key={video.id}
-                href={video.url}
+                href={`/watch/${video.id}`}
                 badgeText={video.isPro ? 'PRO' : ''}
                 hideSubtitleOnMobile
                 title={video.title}

pages/watch/[video].jsx

@@ -1,32 +0,0 @@
-import { Box, Container } 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 { ContentPageHeader } from '../../components/content-page-header';
-import MdRenderer from '../../components/md-renderer';
-
-export default function Video() {
-  const VideoContent = require(`../../content/videos/system-design-101.md`).default;
-
-  return (
-    <Box bg='white' minH='100vh'>
-      <GlobalHeader />
-      <Box mb='60px'>
-        <ContentPageHeader
-          title={'Build it and they will come?'}
-          subtitle={'Why “build it and they will come” alone won’t work anymore'}
-        />
-        <Container maxW={'container.md'} position='relative'>
-          <MdRenderer>
-            <VideoContent />
-          </MdRenderer>
-        </Container>
-      </Box>
-
-      <OpensourceBanner />
-      <UpdatesBanner />
-      <Footer />
-    </Box>
-  );
-}

pages/watch/[video].tsx

@@ -0,0 +1,84 @@
+import { Box, Container } 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 { ContentPageHeader } from '../../components/content-page-header';
+import MdRenderer from '../../components/md-renderer';
+import { getAllVideos, getVideoById, VideoType } from '../../lib/video';
+
+type VideoProps = {
+  video: VideoType;
+};
+
+export default function Video(props: VideoProps) {
+  const { video } = props;
+  const VideoContent = require(`../../content/videos/${video.id}.md`).default;
+
+  return (
+    <Box bg='white' minH='100vh'>
+      <GlobalHeader />
+      <Box mb='60px'>
+        <ContentPageHeader
+          title={video.title}
+          subtitle={video.description}
+          formattedDate={video.formattedUpdatedAt!}
+          subLink={{
+            text: 'Watch on YouTube',
+            url: 'https://youtube.com'
+          }}
+          author={{
+            twitter: video.author?.twitter!,
+            name: video.author?.name!,
+            picture: video.author?.picture!
+          }}
+        />
+        <Container maxW={'container.md'} position='relative'>
+          <MdRenderer>
+            <VideoContent />
+          </MdRenderer>
+        </Container>
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
+  );
+}
+
+type StaticPathItem = {
+  params: {
+    video: string
+  }
+};
+
+export async function getStaticPaths() {
+  const videos = getAllVideos();
+  const paramsList: StaticPathItem[] = videos.map(video => ({
+    params: { 'video': video.id }
+  }));
+
+  return {
+    paths: paramsList,
+    fallback: false
+  };
+}
+
+type ContextType = {
+  params: {
+    video: string
+  }
+};
+
+export async function getStaticProps(context: ContextType) {
+  const videoId: string = context?.params?.video;
+
+  console.log(getVideoById(videoId));
+  return {
+    props: {
+      video: getVideoById(videoId)
+    }
+  };
+}
+

pages/watch/index.tsx

@@ -26,7 +26,7 @@ export default function Watch(props: VideosProps) {
           <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             {videos.map((video, counter) => (
               <VideoGridItem
-                href={video.url}
+                href={`/watch/${video.id}`}
                 key={video.id}
                 title={video.title}
                 subtitle={video.description}