Add video detail page

components/md-renderer/mdx-components/a.tsx

@@ -11,7 +11,7 @@ export default function EnrichedLink(props: EnrichedLinkProps) {
   const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
 
   return (
-    <Link fontWeight={600} href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
+    <Link fontWeight={600} href={props.href} target={isExternalUrl ? '_blank' : '_self'} textDecoration='underline'>
       {props.children}
     </Link>
   );

components/md-renderer/mdx-components/iframe.tsx

@@ -1,8 +1,20 @@
-import styled from 'styled-components';
+import { AspectRatio } from '@chakra-ui/react';
 
-export const IFrame = styled.iframe`
+type IFrameProps = {
-  display: block;
+  title: string;
-  width: 100%;
+  src: string;
-  border: none;
+};
-  margin: 30px auto;
+
-`;
+export default function IFrame(props: IFrameProps) {
+  return (
+    <AspectRatio maxW='100%' ratio={2} mb='18px'>
+      <iframe
+        frameBorder={0}
+        title={props.title}
+        src={props.src}
+        allow={'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}
+        allowFullScreen
+      />
+    </AspectRatio>
+  );
+}

components/md-renderer/mdx-components/index.tsx

@@ -3,10 +3,12 @@ import Headings from './heading';
 import { Pre } from './pre';
 import BlockQuote from './blockquote';
 import { Table } from './table';
-import { IFrame } from './iframe';
+import IFrame from './iframe';
 import { Img } from './img';
 import EnrichedLink from './a';
 import { BadgeLink } from './badge-link';
+import Ul from './ul';
+import Li from './li';
 
 const MdxComponents = {
   p: P,
@@ -17,7 +19,9 @@ const MdxComponents = {
   table: Table,
   iframe: IFrame,
   img: Img,
-  BadgeLink: BadgeLink
+  BadgeLink: BadgeLink,
+  ul: Ul,
+  li: Li
 };
 
 export default MdxComponents;

components/md-renderer/mdx-components/li.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ListItem, UnorderedList } from '@chakra-ui/react';
+
+type LiProps = {
+  children: React.ReactNode;
+};
+
+export default function Li(props: LiProps) {
+  return (
+    <ListItem mb='7px'>
+      {props.children}
+    </ListItem>
+  );
+}

components/md-renderer/mdx-components/ul.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { UnorderedList } from '@chakra-ui/react';
+
+type OlProps = {
+  children: React.ReactNode;
+};
+
+export default function Ul(props: OlProps) {
+  return (
+    <UnorderedList ml='40px' mb='18px'>
+      {props.children}
+    </UnorderedList>
+  );
+}

content/videos/system-design-101.md

@@ -0,0 +1,20 @@
+System Design is a broad topic. In this video, we discuss all the bits and pieces of System Design; we will not be going
+in depth of each of the topic but this is to give you a high level overview of all the pieces involved. The topics
+covered in this video include:
+
+* DNS — Domain Name System
+* Horizontal Scaling vs Vertical Scaling
+* Content Delivery Networks
+* Load Balancers
+* Application Architectures (Microservices, SOA)
+* Storage (Database, Caching, Cloud Storage)
+* Datawarehouse
+* Logging
+* Messaging/Queues
+* Search Engines
+
+You can watch the video below or head over to the [YouTube Channel](https://www.youtube.com/watch?v=37AFBZv4_6Y), where you can find more videos and the discussions on this video.
+
+<iframe src="https://www.youtube.com/embed/37AFBZv4_6Y" title="System Design 101" />
+
+If you liked this video, you are going to love our [YouTube Channel](https://youtube.com/theroadmap?sub_confirmation=1).

pages/watch/[video].jsx

@@ -0,0 +1,32 @@
+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 { GuideHeader } from '../../components/guide-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'>
+        <GuideHeader
+          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>
+  );
+}