Normalize filename and url in videos

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}