Fix build errors

components/md-renderer/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 // @ts-ignore
 import { MDXProvider } from '@mdx-js/react';
+import { ChakraProvider } from '@chakra-ui/react';
 import MdxComponents from './mdx-components';
+import { roadmapTheme } from '../../lib/theme';
 
 type MdRendererType = {
   children: React.ReactNode
@@ -9,8 +11,10 @@ type MdRendererType = {
 
 export default function MdRenderer(props: MdRendererType) {
   return (
-    <MDXProvider components={MdxComponents}>
-      {props.children}
-    </MDXProvider>
+    <ChakraProvider theme={roadmapTheme} resetCSS>
+      <MDXProvider components={MdxComponents}>
+        {props.children}
+      </MDXProvider>
+    </ChakraProvider>
   );
 };

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

@@ -1,18 +1,26 @@
 import React from 'react';
-import { Link } from '@chakra-ui/react';
+import styled from 'styled-components';
 
 type EnrichedLinkProps = {
   href: string;
   children: React.ReactNode
 }
 
-export default function EnrichedLink(props: EnrichedLinkProps) {
+const Link = styled.a`
+  font-weight: 600;
+  text-decoration: underline;
+`;
+
+const EnrichedLink = (props: EnrichedLinkProps) => {
   // Is external URL or is a media URL
   const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
 
   return (
-    <Link fontWeight={600} href={props.href} target={isExternalUrl ? '_blank' : '_self'} textDecoration='underline'>
+    <Link href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
       {props.children}
     </Link>
   );
 };
+
+export default EnrichedLink;
+

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

@@ -1,13 +1,40 @@
-import { AspectRatio } from '@chakra-ui/react';
+import styled from 'styled-components';
 
 type IFrameProps = {
   title: string;
   src: string;
 };
 
+const AspectRatioBox = styled.div`
+  position: relative;
+  max-width: 100%;
+  margin-bottom: 18px;
+
+  &:before {
+    height: 0;
+    content: "";
+    display: block;
+    padding-bottom: 50%;
+  }
+
+  & > iframe {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
 export default function IFrame(props: IFrameProps) {
   return (
-    <AspectRatio maxW='100%' ratio={2} mb='18px'>
+    <AspectRatioBox>
       <iframe
         frameBorder={0}
         title={props.title}
@@ -15,6 +42,6 @@ export default function IFrame(props: IFrameProps) {
         allow={'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}
         allowFullScreen
       />
-    </AspectRatio>
+    </AspectRatioBox>
   );
 }

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

@@ -1,4 +1,5 @@
-import P from './p';
+import { Code } from '@chakra-ui/react';
+import { P } from './p';
 import Headings from './heading';
 import { Pre } from './pre';
 import BlockQuote from './blockquote';
@@ -7,10 +8,8 @@ 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';
+import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
-import { Code } from '@chakra-ui/react';
 
 const MdxComponents = {
   p: P,

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

@@ -1,14 +0,0 @@
-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/p.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Text } from '@chakra-ui/react';
+import styled from 'styled-components';
 
 type EnrichedTextType = {
   children: React.ReactNode;
 }
 
-export default function EnrichedText(props: EnrichedTextType) {
-  return <Text lineHeight='27px' fontSize='16px' color='black' mb='18px'>{props.children}</Text>;
-}
+export const P = styled.p`
+  line-height: 27px;
+  font-size: 16px;
+  color: black;
+  margin-bottom: 18px;
+`;

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

@@ -1,14 +1,12 @@
 import React from 'react';
 import { UnorderedList } from '@chakra-ui/react';
+import styled from 'styled-components';
 
-type OlProps = {
-  children: React.ReactNode;
-};
+export const Ul = styled.ul`
+  margin-left: 40px;
+  margin-bottom: 18px;
+`;
 
-export default function Ul(props: OlProps) {
-  return (
-    <UnorderedList ml='40px' mb='18px'>
-      {props.children}
-    </UnorderedList>
-  );
-}
+export const Li = styled.li`
+  margin-bottom: 7px;
+`;

content/videos/transport-protocols-tcp-vs-udp.md

@@ -1 +1 @@
-<iframe src="https://www.youtube.com/embed/37AFBZv4_6Y" title="Transport Protocols: TCP vs UDP" />
+<iframe src="https://www.youtube.com/embed/37AFBZv4_6Y" title="Transport Protocols: TCP vs UDP" />