add links to individual chapters from overpage

Author: Allicolyer

packages/gatsby-theme/src/components/Chapter.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
+import { getTutorialSlug } from '../utils/getTutorialSlug';
+import { Link } from 'gatsby';
 import { Heading, Text, Flex, Card } from './shared/base';
 
 type ChapterProps = {
   num: string | number;
-  title: string | null;
-  description: string | null;
+  tutorial: Tutorial;
+};
+
+type Tutorial = {
+  id: string;
+  fileAbsolutePath: string;
+  frontmatter: FrontMatter;
 };
 
+type FrontMatter = {
+  pageTitle: string | null;
+  description: string | null;
+}
+
 const Chapter: React.FunctionComponent<ChapterProps> = ({
-  num,
-  title,
-  description,
+ num, tutorial
 }) => {
   return (
     <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
       <Flex alignItems="center">
         <Heading p={4}>{num}</Heading>
         <div>
-          <Heading as="h2">{title}</Heading>
-          <Text>{description}</Text>
+          <Link to={getTutorialSlug(tutorial.fileAbsolutePath)}>
+            <Heading as="h2">{tutorial.frontmatter.pageTitle}</Heading>
+          </Link>
+          <Text>{tutorial.frontmatter.description}</Text>
+
         </div>
       </Flex>
     </Card>

packages/gatsby-theme/src/components/templates/TutorialOverview.tsx

@@ -48,8 +48,7 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
               <div>
                 <Chapter
                   num={num < 10 ? `0${num}` : num}
-                  title={mdx.node.frontmatter!.pageTitle}
-                  description={mdx.node.frontmatter!.description}
+                  tutorial = {mdx.node}
                 />
               </div>
             );
@@ -73,6 +72,7 @@ export const query = graphql`
       edges {
         node {
           id
+          fileAbsolutePath
           frontmatter {
             pageTitle
             description