Created system for putting miscellaneous workshop content/questions to learning platform

components/course-revision/CourseRevisionMiniCard.tsx

@@ -1,10 +1,10 @@
 import { styled } from "@stitches/react";
 import { Text } from "components/Text";
-import { CourseRevisionOffering } from "contentlayer/generated";
+import { CourseRevisionOffering, WorkshopsOffering } from "contentlayer/generated";
 
 
 type PropTypes = {
-    courseOffering: CourseRevisionOffering
+    courseOffering: CourseRevisionOffering | WorkshopsOffering
 }
 
 const CourseRevisionMiniCardStyled = styled('div', {

components/course-revision/CourseRevisionSidebar.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@stitches/react"
-import { CourseRevisionExercise, CourseRevisionOffering } from "contentlayer/generated"
+import { CourseRevisionExercise, CourseRevisionOffering, WorkshopsOffering, WorkshopsExercise } from "contentlayer/generated"
 import Link from "next/link"
 import { ArrowLeft, CaretDown, CaretUp } from "phosphor-react"
 import { useState } from "react"
@@ -11,10 +11,10 @@ type PropTypes = {
     courseOfferingTitle: string,
 
     /* Home page for this course offering e.g. 1511 22T3 */
-    courseOfferingContent: CourseRevisionOffering,
+    courseOfferingContent: CourseRevisionOffering | WorkshopsOffering,
 
     /* List of exercises content */
-    contentList: CourseRevisionExercise[],
+    contentList: CourseRevisionExercise[] | WorkshopsExercise[]
 
     /* Index of the currently selected content in contentList */
     currentContentIdx: number,
@@ -111,6 +111,16 @@ const ExerciseButton = styled("button", {
     },
 })
 
+const determineCourseRevisionOrWorkshopsOffering = (toBeDetermined: WorkshopsOffering | CourseRevisionOffering) => {
+
+    if (toBeDetermined.type === "WorkshopsOffering") {
+        return true;
+    }
+
+    return false;
+
+}
+
 const CourseRevisionSidebar = ({ courseOfferingTitle, courseOfferingContent, contentList, currentContentIdx }: PropTypes) => {
     /* ONLY applies when width < 768px (in mobile view) */
     const [showContent, setShowContent] = useState(false)
@@ -120,11 +130,23 @@ const CourseRevisionSidebar = ({ courseOfferingTitle, courseOfferingContent, con
             justifyContent: "space-between",
             alignItems: "center",
         }}>
-            <Link href={`/course-revision`}>
+            {determineCourseRevisionOrWorkshopsOffering(courseOfferingContent) ?
+                <Link href={`/workshops`}>
+                    <BackButton>
+                        <ArrowLeft style={{ marginRight: "0.4rem" }} />Other Workshops
+                    </BackButton>
+                </Link> :
+                <Link href={`/course-revision`}>
+                    <BackButton>
+                        <ArrowLeft style={{ marginRight: "0.4rem" }} />Other Courses
+                    </BackButton>
+                </Link>
+            }
+            {/* <Link href={`/course-revision`}>
                 <BackButton>
                     <ArrowLeft style={{ marginRight: "0.4rem" }} />Other Courses
                 </BackButton>
-            </Link>
+            </Link> */}
             <ToggleContent onClick={() => setShowContent((val) => !val)}>
                 {showContent ? (<><CaretDown size={16} style={{ marginRight: "0.4rem" }} />Hide Exercises</>) : <><CaretUp size={16} style={{ marginRight: "0.4rem" }} />Show Exercises</>}
             </ToggleContent>

components/workshops/WorkshopsContainerHomePage.tsx

@@ -0,0 +1,40 @@
+import { styled } from "@stitches/react"
+import { WorkshopsOffering } from "contentlayer/generated"
+import Link from "next/link"
+import CourseRevisionMiniCard from "../course-revision/CourseRevisionMiniCard"
+
+type PropTypes = {
+    allWorkshopsOffering: WorkshopsOffering[]
+}
+
+const CourseRevisionsContainer = styled('div', {
+    width: "100%",
+    display: 'flex',
+    flexFlow: "row wrap",
+    justifyContent: "center",
+    rowGap: '$1',
+    columnGap: '$4',
+})
+
+const WorkshopsContainerHomePage = (props: PropTypes) => {
+    return (<CourseRevisionsContainer>
+
+        {
+            props.allWorkshopsOffering?.map((offering) => (
+                <Link href={`workshops/${offering.slug}`} passHref key={offering.slug}>
+                    <div style={{
+                        backgroundColor: "#3e73c7",
+                        margin: '0.6rem 0',
+                        borderRadius: '1.2rem',
+                    }}>
+                        <CourseRevisionMiniCard courseOffering={offering} />
+                    </div>
+                </Link>
+            ))
+
+        }</CourseRevisionsContainer>
+    )
+}
+
+export default WorkshopsContainerHomePage
+

contentlayer.config.js

@@ -69,22 +69,26 @@ export const CourseRevisionOffering = defineDocumentType(() => ({
   fields: {
     title: {
       type: 'string',
-      description: 'The title of the exercise set e.g. COMP1511 22T3 Revision Session',
+      description:
+        'The title of the exercise set e.g. COMP1511 22T3 Revision Session',
       required: true
     },
     desc: {
       type: 'string',
-      description: 'A brief 1-2 sentence description of what this course revision contains',
+      description:
+        'A brief 1-2 sentence description of what this course revision contains',
       required: true
     },
     course: {
       type: 'string',
-      description: 'The course that the revision set relates to (COMP1511, COMP2521, ...)',
+      description:
+        'The course that the revision set relates to (COMP1511, COMP2521, ...)',
       required: true
     },
     offering: {
       type: 'string',
-      description: 'The offering of the course that the revision set is intended for (22T3, 23T1, ...)',
+      description:
+        'The offering of the course that the revision set is intended for (22T3, 23T1, ...)',
       required: true
     }
   },
@@ -108,7 +112,71 @@ export const CourseRevisionExercise = defineDocumentType(() => ({
     },
     class: {
       type: 'string',
-      description: 'The class the exercise relates to (COMP1511, COMP2521, etc)',
+      description:
+        'The class the exercise relates to (COMP1511, COMP2521, etc)',
+      required: true
+    },
+    difficulty: {
+      type: 'number',
+      description: 'The difficulty of the exercise (1=Easy, 2=Medium, 3=Hard)',
+      required: true
+    }
+  },
+  computedFields
+}))
+
+export const WorkshopsOffering = defineDocumentType(() => ({
+  name: 'WorkshopsOffering',
+  filePathPattern: `workshops/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: {
+      type: 'string',
+      description:
+        'The title of the exercise set e.g. COMP2521 Fundamentals Workshop',
+      required: true
+    },
+    desc: {
+      type: 'string',
+      description:
+        'A brief 1-2 sentence description of what this workshop contains',
+      required: true
+    },
+    course: {
+      type: 'string',
+      description:
+        'The course that the revision set relates to (COMP1511, COMP2521, ...)',
+      required: true
+    },
+    offering: {
+      type: 'string',
+      description:
+        'The offering of the course that the revision set is intended for (22T3, 23T1, ...)',
+      required: true
+    }
+  },
+  computedFields
+}))
+
+export const WorkshopsExercise = defineDocumentType(() => ({
+  name: 'WorkshopsExercise',
+  filePathPattern: `workshops/**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: {
+      type: 'string',
+      description: 'The title of the exercise',
+      required: true
+    },
+    desc: {
+      type: 'string',
+      description: 'One sentence that summarises the exercise objective.',
+      required: true
+    },
+    class: {
+      type: 'string',
+      description:
+        'The class the exercise relates to (COMP1511, COMP2521, etc)',
       required: true
     },
     difficulty: {
@@ -122,7 +190,13 @@ export const CourseRevisionExercise = defineDocumentType(() => ({
 
 export default makeSource({
   contentDirPath: 'data',
-  documentTypes: [ArticleType, CourseRevisionOffering, CourseRevisionExercise],
+  documentTypes: [
+    ArticleType,
+    CourseRevisionOffering,
+    CourseRevisionExercise,
+    WorkshopsOffering,
+    WorkshopsExercise
+  ],
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [

pages/articles.tsx

@@ -3,7 +3,7 @@ import { Flex } from 'components/Flex'
 import { Text } from 'components/Text'
 import { Button } from 'components/Button'
 import ArticleCard from 'components/ArticleCard'
-import { ArticleType, allArticleTypes, allCourseRevisionOfferings } from 'contentlayer/generated'
+import { ArticleType, allArticleTypes, allCourseRevisionOfferings, allWorkshopsOfferings } from 'contentlayer/generated'
 import { compareDesc } from 'date-fns'
 import { NextPage } from 'next'
 import Head from 'next/head'
@@ -13,6 +13,7 @@ import { MagnifyingGlass } from 'phosphor-react'
 import { ArticleRow } from '../components/ArticleRow'
 import { ArticlesCarousel } from 'components/ArticlesCarousel'
 import CourseRevisionContainerHomePage from 'components/course-revision/CourseRevisionContainerHomePage'
+import WorkshopsContainerHomePage from 'components/workshops/WorkshopsContainerHomePage'
 
 export async function getStaticProps() {
   const articles = allArticleTypes.sort((a, b) => {
@@ -23,7 +24,7 @@ export async function getStaticProps() {
   )
   const flattenedTags = tagLists.flat(1)
   const allTags = [...['All Topics'], ...new Set(flattenedTags)]
-  return { props: { articles, allTags, courseOfferingContent: allCourseRevisionOfferings } }
+  return { props: { articles, allTags, courseOfferingContent: allCourseRevisionOfferings, workshopOfferingContent: allWorkshopsOfferings } }
 }
 
 const SearchBar = styled('input', {
@@ -43,7 +44,7 @@ const TagsContainer = styled('div', {
 })
 
 // I'm tired, I didn't type this properly ok
-const Articles: NextPage = ({ articles, allTags, courseOfferingContent }: any) => {
+const Articles: NextPage = ({ articles, allTags, courseOfferingContent, workshopOfferingContent }: any) => {
   const [currentTag, setCurrentTag] = useState('All Topics')
   const [currentSearch, setCurrentSearch] = useState('')
   const [filteredArticles, setFilteredArticles] = useState(articles)
@@ -135,6 +136,29 @@ const Articles: NextPage = ({ articles, allTags, courseOfferingContent }: any) =
           <CourseRevisionContainerHomePage allCourseRevisionOfferings={courseOfferingContent} />
         </Flex>
 
+        {/* Uncomment once we have content for workshops */}
+
+        {/* <Flex
+          as="main"
+          css={{
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '0 1rem',
+          }}>
+          <Text
+            size="headline"
+            css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
+            Workshops
+          </Text>
+          <Text
+            as="span"
+            size="title-sm"
+            css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
+            Explore the many workshops our Education Team has curated to become big brain.
+          </Text>
+          <WorkshopsContainerHomePage allWorkshopsOffering={workshopOfferingContent} />
+        </Flex> */}
+
         <Text
           size="headline"
           css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$3' }}>

pages/index.tsx

@@ -3,7 +3,7 @@ import { Button } from 'components/Button'
 import { Card } from 'components/Card'
 import { Flex } from 'components/Flex'
 import { Text } from 'components/Text'
-import { allArticleTypes, allCourseRevisionOfferings, ArticleType, CourseRevisionOffering } from 'contentlayer/generated'
+import { allArticleTypes, allCourseRevisionOfferings, ArticleType, CourseRevisionOffering, WorkshopsOffering, allWorkshopsOfferings } from 'contentlayer/generated'
 import { compareAsc, compareDesc } from 'date-fns'
 import type { NextPage } from 'next'
 import Head from 'next/head'
@@ -15,20 +15,22 @@ import CourseRevisionCard from 'components/course-revision/CourseRevisionCard'
 import { styled } from '@stitches/react'
 import CourseRevisionMiniCard from 'components/course-revision/CourseRevisionMiniCard'
 import CourseRevisionContainerHomePage from 'components/course-revision/CourseRevisionContainerHomePage'
+import WorkshopsContainerHomePage from 'components/workshops/WorkshopsContainerHomePage'
 
 type PropTypes = {
   articles: ArticleType[],
   courseOfferingContent: CourseRevisionOffering[],
+  workshopOfferingContent: WorkshopsOffering[]
 }
 
 export async function getStaticProps() {
   const articles = allArticleTypes.sort((a, b) => {
     return compareAsc(new Date(b.date), new Date(a.date))
   })
-  return { props: { articles, courseOfferingContent: allCourseRevisionOfferings } }
+  return { props: { articles, courseOfferingContent: allCourseRevisionOfferings, workshopOfferingContent: allWorkshopsOfferings } }
 }
 
-const Home: NextPage = ({ articles, courseOfferingContent }: PropTypes) => {
+const Home: NextPage = ({ articles, courseOfferingContent, workshopOfferingContent }: PropTypes) => {
   return (
     <Box>
       <Head>
@@ -87,6 +89,28 @@ const Home: NextPage = ({ articles, courseOfferingContent }: PropTypes) => {
         </Text>
         <CourseRevisionContainerHomePage allCourseRevisionOfferings={courseOfferingContent} />
       </Flex>
+      {/* Uncomment once we have content for workshops */}
+
+      {/* <Flex
+        as="main"
+        css={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '0 1rem',
+        }}>
+        <Text
+          size="headline"
+          css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
+          Workshops
+        </Text>
+        <Text
+          as="span"
+          size="title-sm"
+          css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
+          Explore the many workshops our Education Team has curated to become big brain.
+        </Text>
+        <WorkshopsContainerHomePage allWorkshopsOffering={workshopOfferingContent} />
+      </Flex> */}
       <Flex
         as="main"
         css={{