Skip to content

Commit 7e3f3a3

Browse files
AllicolyerAllicolyer
committed
inital set up for FullStack Course Page
1 parent 34a6261 commit 7e3f3a3

File tree

4 files changed

+131
-12
lines changed

4 files changed

+131
-12
lines changed

‎packages/gatsby-theme/src/components/overview/ProgressBar.tsx renamed to ‎packages/gatsby-theme/src/components/ProgressBar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { styled } from '../../styles';
3-
import { Text } from '../shared/base';
2+
import { styled } from '../styles';
3+
import { Text } from './shared/base';
44

55
interface ProgressBarProps extends FillerProps, ContainerProps {}
66

@@ -21,7 +21,7 @@ const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
2121
};
2222

2323
interface ContainerProps {
24-
width: number;
24+
width?: number;
2525
}
2626

2727
const Container = styled.div<ContainerProps>`

‎packages/gatsby-theme/src/components/overview/TutorialHeader.tsx renamed to ‎packages/gatsby-theme/src/components/TutorialHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Image, Heading, Text } from '../shared/base';
2+
import { Box, Image, Heading, Text } from './shared/base';
33

44
interface TutorialHeaderProps {
55
title: string | null;
@@ -16,7 +16,7 @@ const TutorialHeader: React.FunctionComponent<TutorialHeaderProps> = ({
1616
<Box p={2}>
1717
<Image
1818
width={[0.25, 0.25, 0.25]}
19-
src="https://cdn-images-1.medium.com/max/1200/1*yTMBzO8zfEhKr4Lky6pjZQ.png"
19+
src="https://i.ibb.co/TcKwmwR/Icons.png"
2020
/>
2121
<Heading> {title} </Heading>
2222
<Text>{description} </Text>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Layout from '../layout';
33
import Chapter from '../Chapter';
44
import { TutorialOverviewQuery } from 'src/graphqlTypes';
55
import AuthorList from '../AuthorList';
6-
import TutorialHeader from '../overview/TutorialHeader';
6+
import TutorialHeader from '../TutorialHeader';
77
import { Heading, Flex, Box } from '../shared/base';
8-
import ProgressBar from '../overview/ProgressBar';
8+
import ProgressBar from '../ProgressBar';
99
import { GithubButton, SpectrumButton, TutorialButton } from '../buttons';
1010
import { Content } from '../shared/styledHelpers';
1111
import { authors } from '../../utils/sampleData';

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

Lines changed: 124 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,138 @@
11
import * as React from 'react';
22
import Layout from '../components/layout';
33
import { Content } from '../components/shared/styledHelpers';
4-
import { Heading, Text } from '../components/shared/base';
4+
import {
5+
Heading,
6+
Text,
7+
Card,
8+
Flex,
9+
Image,
10+
Box,
11+
} from '../components/shared/base';
12+
import { TutorialButton } from '../components/buttons';
13+
import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
14+
import ProgressBar from '../components/ProgressBar';
15+
16+
const courses = data => {
17+
console.log(data);
18+
let frontend = data.data.frontend.edges;
19+
let backend = data.data.backend.edges;
20+
console.log(frontend);
21+
console.log(backend);
522

6-
const courses = () => {
723
return (
824
<Layout>
925
<Content>
1026
<Heading> Fullstack Course </Heading>
11-
<Text>A general introduction to GraphQL for frontend and backend developers.</Text>
12-
<Text> Read this tutorial to learn about GraphQL's basic concepts and prepare
13-
yourself for a hands-on beginner tutorial.</Text>
27+
<Text>
28+
A general introduction to GraphQL for frontend and backend developers.
29+
</Text>
30+
<Text>
31+
{' '}
32+
Read this tutorial to learn about GraphQL's basic concepts and prepare
33+
yourself for a hands-on beginner tutorial.
34+
</Text>
35+
<Flex m={[1, 1, 1]}>
36+
<Box width={[0.2, 0.2, 0.2]}>
37+
<Heading> Frontend </Heading>
38+
<Text>
39+
Implement a web frontend for a Hacker News app that talks to a
40+
GraphQL API. We provide a hosted GraphQL API for you so that you
41+
can test your app in a real world environment.
42+
</Text>
43+
</Box>
44+
<Box width={[0.8, 0.8, 0.8]}>
45+
<Flex alignItems="top" justifyContent="center" flexWrap="wrap">
46+
{frontend.map(tutorial => (
47+
<CourseCard
48+
tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
49+
fileAbsolutePath={tutorial.node.fileAbsolutePath}
50+
/>
51+
))}
52+
</Flex>
53+
</Box>
54+
</Flex>
55+
56+
<Flex m={[1, 1, 1]}>
57+
<Box width={[0.2, 0.2, 0.2]}>
58+
<Heading> Backend </Heading>
59+
<Text>
60+
Implement a GraphQL API that's backed by a database. The tutorial
61+
teach schema design and implement features like authentication,
62+
filtering, pagination and a lot more
63+
</Text>
64+
</Box>
65+
<Box width={[0.8, 0.8, 0.8]}>
66+
<Flex alignItems="top" justifyContent="center" flexWrap="wrap">
67+
{backend.map(tutorial => (
68+
<CourseCard
69+
tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
70+
fileAbsolutePath={tutorial.node.fileAbsolutePath}
71+
/>
72+
))}
73+
</Flex>
74+
</Box>
75+
</Flex>
1476
</Content>
1577
</Layout>
1678
);
1779
};
1880

81+
const CourseCard = ({ tutorialTitle, fileAbsolutePath }) => {
82+
return (
83+
<Card m={[2, 2, 2]} p={[2, 2, 2]} width={[1 / 2, 1 / 2, 1 / 4]}>
84+
<Flex flexDirection="column" alignItems="center" justifyContent="center">
85+
<Image
86+
width={[0.5, 0.5, 0.5]}
87+
src="https://i.ibb.co/TcKwmwR/Icons.png"
88+
/>
89+
<h3>{tutorialTitle}</h3>
90+
<ProgressBar percentage={Math.floor(Math.random() * 100)} width={80} />
91+
<a href={getTutorialOverviewSlug(fileAbsolutePath)}>
92+
<TutorialButton>Start Tutorial</TutorialButton>
93+
</a>
94+
</Flex>
95+
</Card>
96+
);
97+
};
98+
99+
export const query = graphql`
100+
query FullStackCourseQuery {
101+
frontend: allMdx(
102+
filter: {
103+
frontmatter: { tutorialTitle: { ne: null } }
104+
fileAbsolutePath: { regex: "/courses/frontend/" }
105+
}
106+
) {
107+
edges {
108+
node {
109+
id
110+
fileAbsolutePath
111+
frontmatter {
112+
tutorialTitle
113+
description
114+
}
115+
}
116+
}
117+
}
118+
backend: allMdx(
119+
filter: {
120+
frontmatter: { tutorialTitle: { ne: null } }
121+
fileAbsolutePath: { regex: "/courses/backend/" }
122+
}
123+
) {
124+
edges {
125+
node {
126+
id
127+
fileAbsolutePath
128+
frontmatter {
129+
tutorialTitle
130+
description
131+
}
132+
}
133+
}
134+
}
135+
}
136+
`;
137+
19138
export default courses;

0 commit comments

Comments
 (0)