Merge pull request #20 from howtographql/community-tutorial-listing-page

Community tutorial listing page

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/TutorialListing.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Heading, Text, Card } from './shared/base';
+import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
+import { Link } from 'gatsby';
+
+type TutorialListingProps = {
+  tutorial: Tutorial;
+};
+
+type Tutorial = {
+  id: string;
+  fileAbsolutePath: string;
+  frontmatter: FrontMatter;
+};
+
+type FrontMatter = {
+  tutorialTitle: string;
+  description: string;
+};
+
+const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
+  tutorial,
+}) => {
+  return (
+    <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
+      <Link to={getTutorialOverviewSlug(tutorial.fileAbsolutePath)}>
+        <Heading>{tutorial.frontmatter.tutorialTitle}</Heading>
+      </Link>
+      <Text>{tutorial.frontmatter.description}</Text>
+    </Card>
+  );
+};
+
+export default TutorialListing;

packages/gatsby-theme/src/components/shared/Header.tsx

@@ -51,8 +51,8 @@ const Nav = withTheme(
           </Container>
           <Container justifyContent="center">
             <NavLink to="/fundamentals">Fundamentals</NavLink>
-            <NavLink to="/guides">Guides</NavLink>
-            <NavLink to="/community">Community</NavLink>
+            <NavLink to="/courses">FullStack Course</NavLink>
+            <NavLink to="/community">Community Tutorials</NavLink>
             <NavLink to="/components">Components</NavLink>
           </Container>
           <Container justifyContent="flex-end">

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

packages/gatsby-theme/src/pages/community.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Layout from '../components/layout';
+import { Content } from '../components/shared/styledHelpers';
+import { graphql } from 'gatsby';
+import TutorialListing from '../components/TutorialListing';
+import { Heading } from '../components/shared/base';
+
+const Community = data => {
+  const tutorials = data.data.tutorials.edges;
+  return (
+    <Layout>
+      <Content>
+        <Heading> Community Tutorials </Heading>
+        {tutorials.map(tutorial => {
+          return (
+            <div key={tutorial.node.id}>
+              <TutorialListing tutorial={tutorial.node} />
+            </div>
+          );
+        })}
+      </Content>
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  query CommunityTutorialQuery {
+    tutorials: allMdx(
+      filter: {
+        frontmatter: { tutorialTitle: { ne: null } }
+        fileAbsolutePath: { regex: "/community/" }
+      }
+    ) {
+      edges {
+        node {
+          id
+          fileAbsolutePath
+          frontmatter {
+            tutorialTitle
+            description
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default Community;

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

@@ -1,6 +1,6 @@
-import { Link } from "gatsby";
-import * as React from "react";
-import Layout from "../components/layout";
+import { Link } from 'gatsby';
+import * as React from 'react';
+import Layout from '../components/layout';
 import {
   Box,
   Flex,
@@ -9,10 +9,10 @@ import {
   Button,
   Image,
   Card,
-  Link as BaseLink
-} from "../components/shared/base";
+  Link as BaseLink,
+} from '../components/shared/base';
 
-const SecondPage = () => (
+const Components = () => (
   <Layout>
     <h3>Check out our rebass components!</h3>
 
@@ -65,4 +65,4 @@ const SecondPage = () => (
   </Layout>
 );
 
-export default SecondPage;
+export default Components;

packages/gatsby-theme/src/pages/courses.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Layout from '../components/layout';
+import { Content } from '../components/shared/styledHelpers';
+import { Heading, Text } from '../components/shared/base';
+
+const courses = () => {
+  return (
+    <Layout>
+      <Content>
+        <Heading> Fullstack Course </Heading>
+        <Text>A general introduction to GraphQL for frontend and backend developers.</Text>
+        <Text> Read this tutorial to learn about GraphQL's basic concepts and prepare
+          yourself for a hands-on beginner tutorial.</Text>
+      </Content>
+    </Layout>
+  );
+};
+
+export default courses;