From fe34e7f8d72d0d9aaf6806fd1c3712e72003cc70 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 22 Aug 2021 15:36:03 +0200
Subject: [PATCH] Add video detail page

---
 components/md-renderer/mdx-components/a.tsx   |  2 +-
 .../md-renderer/mdx-components/iframe.tsx     | 26 +++++++++++----
 .../md-renderer/mdx-components/index.tsx      |  8 +++--
 components/md-renderer/mdx-components/li.tsx  | 14 ++++++++
 components/md-renderer/mdx-components/ul.tsx  | 14 ++++++++
 content/videos/system-design-101.md           | 20 ++++++++++++
 pages/watch/[video].jsx                       | 32 +++++++++++++++++++
 7 files changed, 106 insertions(+), 10 deletions(-)
 create mode 100644 components/md-renderer/mdx-components/li.tsx
 create mode 100644 components/md-renderer/mdx-components/ul.tsx
 create mode 100644 content/videos/system-design-101.md
 create mode 100644 pages/watch/[video].jsx

diff --git a/components/md-renderer/mdx-components/a.tsx b/components/md-renderer/mdx-components/a.tsx
index b2cf16984..3a2601927 100644
--- a/components/md-renderer/mdx-components/a.tsx
+++ b/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>
   );
diff --git a/components/md-renderer/mdx-components/iframe.tsx b/components/md-renderer/mdx-components/iframe.tsx
index ae19fda39..d1036eb7b 100644
--- a/components/md-renderer/mdx-components/iframe.tsx
+++ b/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`
-  display: block;
-  width: 100%;
-  border: none;
-  margin: 30px auto;
-`;
\ No newline at end of file
+type IFrameProps = {
+  title: string;
+  src: string;
+};
+
+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>
+  );
+}
diff --git a/components/md-renderer/mdx-components/index.tsx b/components/md-renderer/mdx-components/index.tsx
index b3575f24b..a02ab15a9 100644
--- a/components/md-renderer/mdx-components/index.tsx
+++ b/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;
diff --git a/components/md-renderer/mdx-components/li.tsx b/components/md-renderer/mdx-components/li.tsx
new file mode 100644
index 000000000..67ef197d3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/components/md-renderer/mdx-components/ul.tsx b/components/md-renderer/mdx-components/ul.tsx
new file mode 100644
index 000000000..cca1c310c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/content/videos/system-design-101.md b/content/videos/system-design-101.md
new file mode 100644
index 000000000..013e0595f
--- /dev/null
+++ b/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).
diff --git a/pages/watch/[video].jsx b/pages/watch/[video].jsx
new file mode 100644
index 000000000..11d2deb37
--- /dev/null
+++ b/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>
+  );
+}