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`
-  display: block;
-  width: 100%;
-  border: none;
-  margin: 30px auto;
-`;
+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>
+  );
+}

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>
+  );
+}