Skip to content

Commit 8dfea25

Browse files
AllynixtorAllynixtor
authored
Created system for putting miscellaneous workshop content/questions to learning platform (#239)
* workshop elements displayed on home page * Added functionality for workshop exercises to return to a list of workshop exercises instead of course revision * display workshop exercises * workshop and course revision pages have approporiate back btns * hide workshops display until there is content
1 parent 3c75744 commit 8dfea25

File tree

10 files changed

+417
-20
lines changed

10 files changed

+417
-20
lines changed

‎components/course-revision/CourseRevisionMiniCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { styled } from "@stitches/react";
22
import { Text } from "components/Text";
3-
import { CourseRevisionOffering } from "contentlayer/generated";
3+
import { CourseRevisionOffering, WorkshopsOffering } from "contentlayer/generated";
44

55

66
type PropTypes = {
7-
courseOffering: CourseRevisionOffering
7+
courseOffering: CourseRevisionOffering | WorkshopsOffering
88
}
99

1010
const CourseRevisionMiniCardStyled = styled('div', {

‎components/course-revision/CourseRevisionSidebar.tsx

+27-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { styled } from "@stitches/react"
2-
import { CourseRevisionExercise, CourseRevisionOffering } from "contentlayer/generated"
2+
import { CourseRevisionExercise, CourseRevisionOffering, WorkshopsOffering, WorkshopsExercise } from "contentlayer/generated"
33
import Link from "next/link"
44
import { ArrowLeft, CaretDown, CaretUp } from "phosphor-react"
55
import { useState } from "react"
@@ -11,10 +11,10 @@ type PropTypes = {
1111
courseOfferingTitle: string,
1212

1313
/* Home page for this course offering e.g. 1511 22T3 */
14-
courseOfferingContent: CourseRevisionOffering,
14+
courseOfferingContent: CourseRevisionOffering | WorkshopsOffering,
1515

1616
/* List of exercises content */
17-
contentList: CourseRevisionExercise[],
17+
contentList: CourseRevisionExercise[] | WorkshopsExercise[]
1818

1919
/* Index of the currently selected content in contentList */
2020
currentContentIdx: number,
@@ -111,6 +111,16 @@ const ExerciseButton = styled("button", {
111111
},
112112
})
113113

114+
const determineCourseRevisionOrWorkshopsOffering = (toBeDetermined: WorkshopsOffering | CourseRevisionOffering) => {
115+
116+
if (toBeDetermined.type === "WorkshopsOffering") {
117+
return true;
118+
}
119+
120+
return false;
121+
122+
}
123+
114124
const CourseRevisionSidebar = ({ courseOfferingTitle, courseOfferingContent, contentList, currentContentIdx }: PropTypes) => {
115125
/* ONLY applies when width < 768px (in mobile view) */
116126
const [showContent, setShowContent] = useState(false)
@@ -120,11 +130,23 @@ const CourseRevisionSidebar = ({ courseOfferingTitle, courseOfferingContent, con
120130
justifyContent: "space-between",
121131
alignItems: "center",
122132
}}>
123-
<Link href={`/course-revision`}>
133+
{determineCourseRevisionOrWorkshopsOffering(courseOfferingContent) ?
134+
<Link href={`/workshops`}>
135+
<BackButton>
136+
<ArrowLeft style={{ marginRight: "0.4rem" }} />Other Workshops
137+
</BackButton>
138+
</Link> :
139+
<Link href={`/course-revision`}>
140+
<BackButton>
141+
<ArrowLeft style={{ marginRight: "0.4rem" }} />Other Courses
142+
</BackButton>
143+
</Link>
144+
}
145+
{/* <Link href={`/course-revision`}>
124146
<BackButton>
125147
<ArrowLeft style={{ marginRight: "0.4rem" }} />Other Courses
126148
</BackButton>
127-
</Link>
149+
</Link> */}
128150
<ToggleContent onClick={() => setShowContent((val) => !val)}>
129151
{showContent ? (<><CaretDown size={16} style={{ marginRight: "0.4rem" }} />Hide Exercises</>) : <><CaretUp size={16} style={{ marginRight: "0.4rem" }} />Show Exercises</>}
130152
</ToggleContent>

‎components/workshops/WorkshopsContainerHomePage.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { styled } from "@stitches/react"
2+
import { WorkshopsOffering } from "contentlayer/generated"
3+
import Link from "next/link"
4+
import CourseRevisionMiniCard from "../course-revision/CourseRevisionMiniCard"
5+
6+
type PropTypes = {
7+
allWorkshopsOffering: WorkshopsOffering[]
8+
}
9+
10+
const CourseRevisionsContainer = styled('div', {
11+
width: "100%",
12+
display: 'flex',
13+
flexFlow: "row wrap",
14+
justifyContent: "center",
15+
rowGap: '$1',
16+
columnGap: '$4',
17+
})
18+
19+
const WorkshopsContainerHomePage = (props: PropTypes) => {
20+
return (<CourseRevisionsContainer>
21+
22+
{
23+
props.allWorkshopsOffering?.map((offering) => (
24+
<Link href={`workshops/${offering.slug}`} passHref key={offering.slug}>
25+
<div style={{
26+
backgroundColor: "#3e73c7",
27+
margin: '0.6rem 0',
28+
borderRadius: '1.2rem',
29+
}}>
30+
<CourseRevisionMiniCard courseOffering={offering} />
31+
</div>
32+
</Link>
33+
))
34+
35+
}</CourseRevisionsContainer>
36+
)
37+
}
38+
39+
export default WorkshopsContainerHomePage
40+

‎contentlayer.config.js

+80-6
Original file line numberDiff line numberDiff line change
@@ -69,22 +69,26 @@ export const CourseRevisionOffering = defineDocumentType(() => ({
6969
fields: {
7070
title: {
7171
type: 'string',
72-
description: 'The title of the exercise set e.g. COMP1511 22T3 Revision Session',
72+
description:
73+
'The title of the exercise set e.g. COMP1511 22T3 Revision Session',
7374
required: true
7475
},
7576
desc: {
7677
type: 'string',
77-
description: 'A brief 1-2 sentence description of what this course revision contains',
78+
description:
79+
'A brief 1-2 sentence description of what this course revision contains',
7880
required: true
7981
},
8082
course: {
8183
type: 'string',
82-
description: 'The course that the revision set relates to (COMP1511, COMP2521, ...)',
84+
description:
85+
'The course that the revision set relates to (COMP1511, COMP2521, ...)',
8386
required: true
8487
},
8588
offering: {
8689
type: 'string',
87-
description: 'The offering of the course that the revision set is intended for (22T3, 23T1, ...)',
90+
description:
91+
'The offering of the course that the revision set is intended for (22T3, 23T1, ...)',
8892
required: true
8993
}
9094
},
@@ -108,7 +112,71 @@ export const CourseRevisionExercise = defineDocumentType(() => ({
108112
},
109113
class: {
110114
type: 'string',
111-
description: 'The class the exercise relates to (COMP1511, COMP2521, etc)',
115+
description:
116+
'The class the exercise relates to (COMP1511, COMP2521, etc)',
117+
required: true
118+
},
119+
difficulty: {
120+
type: 'number',
121+
description: 'The difficulty of the exercise (1=Easy, 2=Medium, 3=Hard)',
122+
required: true
123+
}
124+
},
125+
computedFields
126+
}))
127+
128+
export const WorkshopsOffering = defineDocumentType(() => ({
129+
name: 'WorkshopsOffering',
130+
filePathPattern: `workshops/*.mdx`,
131+
contentType: 'mdx',
132+
fields: {
133+
title: {
134+
type: 'string',
135+
description:
136+
'The title of the exercise set e.g. COMP2521 Fundamentals Workshop',
137+
required: true
138+
},
139+
desc: {
140+
type: 'string',
141+
description:
142+
'A brief 1-2 sentence description of what this workshop contains',
143+
required: true
144+
},
145+
course: {
146+
type: 'string',
147+
description:
148+
'The course that the revision set relates to (COMP1511, COMP2521, ...)',
149+
required: true
150+
},
151+
offering: {
152+
type: 'string',
153+
description:
154+
'The offering of the course that the revision set is intended for (22T3, 23T1, ...)',
155+
required: true
156+
}
157+
},
158+
computedFields
159+
}))
160+
161+
export const WorkshopsExercise = defineDocumentType(() => ({
162+
name: 'WorkshopsExercise',
163+
filePathPattern: `workshops/**/*.mdx`,
164+
contentType: 'mdx',
165+
fields: {
166+
title: {
167+
type: 'string',
168+
description: 'The title of the exercise',
169+
required: true
170+
},
171+
desc: {
172+
type: 'string',
173+
description: 'One sentence that summarises the exercise objective.',
174+
required: true
175+
},
176+
class: {
177+
type: 'string',
178+
description:
179+
'The class the exercise relates to (COMP1511, COMP2521, etc)',
112180
required: true
113181
},
114182
difficulty: {
@@ -122,7 +190,13 @@ export const CourseRevisionExercise = defineDocumentType(() => ({
122190

123191
export default makeSource({
124192
contentDirPath: 'data',
125-
documentTypes: [ArticleType, CourseRevisionOffering, CourseRevisionExercise],
193+
documentTypes: [
194+
ArticleType,
195+
CourseRevisionOffering,
196+
CourseRevisionExercise,
197+
WorkshopsOffering,
198+
WorkshopsExercise
199+
],
126200
mdx: {
127201
remarkPlugins: [remarkGfm],
128202
rehypePlugins: [

‎pages/articles.tsx

+27-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Flex } from 'components/Flex'
33
import { Text } from 'components/Text'
44
import { Button } from 'components/Button'
55
import ArticleCard from 'components/ArticleCard'
6-
import { ArticleType, allArticleTypes, allCourseRevisionOfferings } from 'contentlayer/generated'
6+
import { ArticleType, allArticleTypes, allCourseRevisionOfferings, allWorkshopsOfferings } from 'contentlayer/generated'
77
import { compareDesc } from 'date-fns'
88
import { NextPage } from 'next'
99
import Head from 'next/head'
@@ -13,6 +13,7 @@ import { MagnifyingGlass } from 'phosphor-react'
1313
import { ArticleRow } from '../components/ArticleRow'
1414
import { ArticlesCarousel } from 'components/ArticlesCarousel'
1515
import CourseRevisionContainerHomePage from 'components/course-revision/CourseRevisionContainerHomePage'
16+
import WorkshopsContainerHomePage from 'components/workshops/WorkshopsContainerHomePage'
1617

1718
export async function getStaticProps() {
1819
const articles = allArticleTypes.sort((a, b) => {
@@ -23,7 +24,7 @@ export async function getStaticProps() {
2324
)
2425
const flattenedTags = tagLists.flat(1)
2526
const allTags = [...['All Topics'], ...new Set(flattenedTags)]
26-
return { props: { articles, allTags, courseOfferingContent: allCourseRevisionOfferings } }
27+
return { props: { articles, allTags, courseOfferingContent: allCourseRevisionOfferings, workshopOfferingContent: allWorkshopsOfferings } }
2728
}
2829

2930
const SearchBar = styled('input', {
@@ -43,7 +44,7 @@ const TagsContainer = styled('div', {
4344
})
4445

4546
// I'm tired, I didn't type this properly ok
46-
const Articles: NextPage = ({ articles, allTags, courseOfferingContent }: any) => {
47+
const Articles: NextPage = ({ articles, allTags, courseOfferingContent, workshopOfferingContent }: any) => {
4748
const [currentTag, setCurrentTag] = useState('All Topics')
4849
const [currentSearch, setCurrentSearch] = useState('')
4950
const [filteredArticles, setFilteredArticles] = useState(articles)
@@ -135,6 +136,29 @@ const Articles: NextPage = ({ articles, allTags, courseOfferingContent }: any) =
135136
<CourseRevisionContainerHomePage allCourseRevisionOfferings={courseOfferingContent} />
136137
</Flex>
137138

139+
{/* Uncomment once we have content for workshops */}
140+
141+
{/* <Flex
142+
as="main"
143+
css={{
144+
flexDirection: 'column',
145+
alignItems: 'center',
146+
padding: '0 1rem',
147+
}}>
148+
<Text
149+
size="headline"
150+
css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
151+
Workshops
152+
</Text>
153+
<Text
154+
as="span"
155+
size="title-sm"
156+
css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
157+
Explore the many workshops our Education Team has curated to become big brain.
158+
</Text>
159+
<WorkshopsContainerHomePage allWorkshopsOffering={workshopOfferingContent} />
160+
</Flex> */}
161+
138162
<Text
139163
size="headline"
140164
css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$3' }}>

‎pages/index.tsx

+27-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button } from 'components/Button'
33
import { Card } from 'components/Card'
44
import { Flex } from 'components/Flex'
55
import { Text } from 'components/Text'
6-
import { allArticleTypes, allCourseRevisionOfferings, ArticleType, CourseRevisionOffering } from 'contentlayer/generated'
6+
import { allArticleTypes, allCourseRevisionOfferings, ArticleType, CourseRevisionOffering, WorkshopsOffering, allWorkshopsOfferings } from 'contentlayer/generated'
77
import { compareAsc, compareDesc } from 'date-fns'
88
import type { NextPage } from 'next'
99
import Head from 'next/head'
@@ -15,20 +15,22 @@ import CourseRevisionCard from 'components/course-revision/CourseRevisionCard'
1515
import { styled } from '@stitches/react'
1616
import CourseRevisionMiniCard from 'components/course-revision/CourseRevisionMiniCard'
1717
import CourseRevisionContainerHomePage from 'components/course-revision/CourseRevisionContainerHomePage'
18+
import WorkshopsContainerHomePage from 'components/workshops/WorkshopsContainerHomePage'
1819

1920
type PropTypes = {
2021
articles: ArticleType[],
2122
courseOfferingContent: CourseRevisionOffering[],
23+
workshopOfferingContent: WorkshopsOffering[]
2224
}
2325

2426
export async function getStaticProps() {
2527
const articles = allArticleTypes.sort((a, b) => {
2628
return compareAsc(new Date(b.date), new Date(a.date))
2729
})
28-
return { props: { articles, courseOfferingContent: allCourseRevisionOfferings } }
30+
return { props: { articles, courseOfferingContent: allCourseRevisionOfferings, workshopOfferingContent: allWorkshopsOfferings } }
2931
}
3032

31-
const Home: NextPage = ({ articles, courseOfferingContent }: PropTypes) => {
33+
const Home: NextPage = ({ articles, courseOfferingContent, workshopOfferingContent }: PropTypes) => {
3234
return (
3335
<Box>
3436
<Head>
@@ -87,6 +89,28 @@ const Home: NextPage = ({ articles, courseOfferingContent }: PropTypes) => {
8789
</Text>
8890
<CourseRevisionContainerHomePage allCourseRevisionOfferings={courseOfferingContent} />
8991
</Flex>
92+
{/* Uncomment once we have content for workshops */}
93+
94+
{/* <Flex
95+
as="main"
96+
css={{
97+
flexDirection: 'column',
98+
alignItems: 'center',
99+
padding: '0 1rem',
100+
}}>
101+
<Text
102+
size="headline"
103+
css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
104+
Workshops
105+
</Text>
106+
<Text
107+
as="span"
108+
size="title-sm"
109+
css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
110+
Explore the many workshops our Education Team has curated to become big brain.
111+
</Text>
112+
<WorkshopsContainerHomePage allWorkshopsOffering={workshopOfferingContent} />
113+
</Flex> */}
90114
<Flex
91115
as="main"
92116
css={{

0 commit comments

Comments
 (0)