exercises sidebar

Author: dqna64

README.md

@@ -6,7 +6,7 @@
 
 A place for the CSESoc community to learn and share their knowledge and expertise.
 
-> 🌈 **Status update:**<br> Finessing the front-end!  
+> 🌈 **Status update:**<br> Creating a generic system for publishing course revision exercises
 
 > 🎨 **Design system**:<br> CSESoc Learn has its own design system with components + tokens. The Figma file is [here](https://www.figma.com/file/l5z96D2EHE5VNz3nayZ9Ht/Design-System?node-id=11%3A4381).
 
@@ -15,7 +15,8 @@ A place for the CSESoc community to learn and share their knowledge and expertis
 - Support for a wide variety of content types via Contentlayer
 - Beautiful UI/UX inspired by Medium and technical sites
 - Spotlight-style search via Stork
-- Ergonomic content creation workflow
+- Ergonomic content creation workflow powered by MDX
+- Convenient content sorting and filtering options
 
 ## Getting Started
 > For detailed instructions, see [here](https://github.com/csesoc/learning-platform/wiki/Getting-started).  

components/CourseRevisionSidebar.tsx

@@ -0,0 +1,73 @@
+import { styled } from "@stitches/react"
+import { CourseRevisionExercise, CourseRevisionOffering } from "contentlayer/generated"
+import Link from "next/link"
+import { ArrowLeft } from "phosphor-react"
+import { Button } from "./Button"
+
+type PropTypes = {
+    /* First in list must be the course offering, the rest are exercises */
+    contentList: (CourseRevisionOffering | CourseRevisionExercise)[],
+
+    /* Index of the currently selected content in contentList*/
+    currentContentIdx: number,
+}
+
+const CourseRevisionSidebarStyled = styled("div", {
+    position: "fixed",
+    top: "66px",
+    width: "250px",
+    height: "calc(100vh - 62px)",
+    overflowY: "scroll",
+    scrollbarGutter: "auto",
+})
+
+const ExerciseButton = styled("button", {
+    padding: "0.9rem 1.2rem",
+    color: "#edf8ff",
+    backgroundColor: "#0d86d6",
+    borderRadius: "0.6rem",
+    cursor: "pointer",
+    border: "none",
+    width: "100%",
+    textAlign: "left",
+    '&:hover': {
+        backgroundColor: "#31a7f5",
+    },
+})
+
+
+const CourseRevisionSidebar = ({ contentList, currentContentIdx }: PropTypes) => {
+    return (<CourseRevisionSidebarStyled>
+        <Link href={`/course-revision`}>
+            <Button css={{ padding: '3px 14px', borderRadius: '100vh', width: "fit-content" }}>
+                <ArrowLeft />Other Courses
+            </Button>
+        </Link>
+
+        <ul style={{
+            padding: "0",
+        }}>
+            {contentList.map((content, idx) => (
+                <li
+                    key={content.slug}
+                    style={{
+                        listStyle: "none",
+                        margin: "0.9rem 0",
+                    }}>
+                    <Link href={`/${content._raw.flattenedPath}`} passHref>
+                        <ExerciseButton key={content.slug} css={{
+                            backgroundColor: idx === currentContentIdx ? "#31a7f5" : "#2285c7",
+                            fontWeight: idx === currentContentIdx ? "bold" : "normal",
+                        }}>
+                            {content.title}
+                        </ExerciseButton>
+                    </Link>
+                </li>
+
+            )
+            )}
+        </ul>
+    </CourseRevisionSidebarStyled>)
+}
+
+export default CourseRevisionSidebar

components/Navbar.tsx

@@ -54,7 +54,8 @@ const NavContainer = styled('div', {
       }
     }
   },
-  backgroundColor: '#e8ebed',
+  backgroundColor: 'rgb(232, 235, 237, 0.87)',
+  backdropFilter: 'blur(8px)',
   boxShadow: "0px 0px 31px -19px rgba(0,0,0,0.54)",
   width: '100vw',
   maxWidth: '548px',
@@ -134,7 +135,8 @@ export default function Navbar() {
         zIndex: '1',
         position: 'fixed',
         width: "100%",
-        background: "linear-gradient(180deg, rgba(244,244,244,1) 0%, rgba(244,244,244,1) 90%, rgba(244,244,244,0.8084599921043882) 96%, rgba(244,244,244,0) 100%)",
+        background: "rgba(244,244,244,0.78)",
+        backdropFilter: "blur(7px)",
       }}>
       <Flex css={{ flex: 1, justifyContent: 'flex-start' }}>
         <Link href="/">

data/course-revision/1511/billys_books.mdx

@@ -5,6 +5,8 @@ class: COMP1511
 difficulty: 2
 ---
 
+# Billy's Books
+
 For this exercise, you’ll be working with the following scenario.
 
 Everyday Billy places a book on his floor, with each book being stacked on top of the previous book. On every third day, in addition to stacking a book to the top, Billy also places another book on top of his bookstack (after placing the new book). If there are an odd number of books, then Billy will move the book in the middle of his bookstack to the top. If there an even number of books, then Billy will take the book at the bottom of his bookstack, and move that to the top. He continues this for all `n` books.

data/course-revision/1511/letter_pairs.mdx

@@ -5,6 +5,8 @@ class: COMP1511
 difficulty: 1
 ---
 
+# Letter Pairs
+
 A letter pair is two of the same character appearing next to each other in a string. E.g. in the string "terrifically" there are 2 letter pairs "rr" and "ll".
 
 Write a program that reads a lowercase string as input, counts and prints out the number of letter pairs in a word.
@@ -18,7 +20,9 @@ Write a program that reads a lowercase string as input, counts and prints out th
 - No letters will appear consecutively more than twice (e.g. "aaa" will not be an input).
 
 
-### Examples
+## Examples
+
+### Example 1
 
 Input: 
 
@@ -36,6 +40,8 @@ Output:
 
 Explanation: The double letter pair “ee” occurs twice in this word.
 
+### Example 2
+
 Input: 
 
 ```bash:~/1511-revision/letter_pairs
@@ -52,6 +58,8 @@ Output:
 
 Explanation: The double letter pairs “ll” and “oo” each appear once in this word, so there are two double letter pairs.
 
+### Example 3
+
 Input: 
 
 ```bash:~/1511-revision/letter_pairs

data/course-revision/2521/bstree_difference.mdx

@@ -5,6 +5,8 @@ class: COMP2521
 difficulty: 4
 ---
 
+# Binary Search Tree Difference
+
 Given a binary search tree, determine the minimum difference between any two
 different values in it. You may assume that the BST has at least two nodes.
 

data/course-revision/2521/bstree_kth_largest.mdx

@@ -5,6 +5,8 @@ class: COMP2521
 difficulty: 3
 ---
 
+# Kth Largest in Binary Search Tree
+
 Given a BST and a number `k`, find the `k`th largest element in the BST.
 
 Implement the function `kthlargest` in `bstree_kth_largest.c`. This function will then be called by the `main` function in `test_bstree_kth_largest.c`.

data/course-revision/2521/exact_price_or_not.mdx

@@ -5,6 +5,8 @@ class: COMP2521
 difficulty: 2
 ---
 
+# Exact Price or Not
+
 Jack wants to pay for an item at the convenient store. However, this particular store does not give change, i.e., the amount you pay must be the exact amount of the item you are buying, and only takes exactly three coins. Luckily, Jack brought a lot of coins. See if Jack can get the exact price for a given item price `p` he wants using exactly three coins.
 
 Complete the `sumCoins` function and return `1` if it's possible and `0` is it isn't.

data/course-revision/2521/graph_detect_cycle.mdx

@@ -5,6 +5,8 @@ class: COMP2521
 difficulty: 5
 ---
 
+# Graph Detect Cycle
+
 Given an undirected, unweighted graph with at least one edge, write a function that returns true if the graph contains a cycle, and false otherwise.
 
 Implement the function `graphDetectCycle` in `graph_detect_cycle.c`. This function will then be called by the `main` function in `test_graph_detect_cycle.c`.

data/course-revision/2521/sort_the_trio.mdx

@@ -5,6 +5,8 @@ class: COMP2521
 difficulty: 1
 ---
 
+# Sort the Trio
+
 Given an array of only 0's, 1's, or 2's, write a O(n) function which sorts this array in ascending order.
 
 Implement the function `sort` in `sort_the_trio.c`. This function will be then be called by the `main` function in

pages/course-revision/[course_offering]/[exercise]/index.tsx

@@ -16,6 +16,7 @@ import { ArrowDown, ArrowLeft } from 'phosphor-react'
 import ArticleLayout from 'components/ArticleLayout'
 import { Button } from 'components/Button'
 import { useRouter } from 'next/router'
+import CourseRevisionSidebar from 'components/CourseRevisionSidebar'
 
 const defaultComponents = {
   Image,
@@ -48,43 +49,30 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
-  const exercise = allCourseRevisionExercises.find((e) => e.slug === params.exercise)
+  const exercisesContent = allCourseRevisionExercises.filter((e) => e._raw.sourceFileDir.endsWith(params.course_offering)).sort((a, b) => a.difficulty - b.difficulty)
+  const exerciseIdx = exercisesContent.findIndex((e) => e.slug === params.exercise)
   return {
     props: {
-      exercise
+      courseOfferingContent: allCourseRevisionOfferings.find((c) => c.slug === params.course_offering),
+      exercisesContent,
+      exerciseIdx,
     }
   }
 }
 
-const ExercisePage = ({ exercise }) => {
-  const router = useRouter();
-  const MDXContent = useMDXComponent(exercise.body.code)
+const ExercisePage = ({ courseOfferingContent, exercisesContent, exerciseIdx }) => {
+  const MDXContent = useMDXComponent(exercisesContent[exerciseIdx].body.code)
 
   return (
-    <ArticleLayout>
-      <Head>
-        <title>{exercise.title}</title>
-      </Head>
-      <Link href={`/course-revision/${router.query.course_offering}`}>
-        <Button css={{ padding: '3px 14px', borderRadius: '100vh', width: "fit-content" }}>
-          <ArrowLeft />Back
-        </Button>
-      </Link>
-      <Text
-        size="headline"
-        css={{
-          color: '$slate12',
-          fontWeight: '600',
-          paddingTop: '$2',
-          alignSelf: 'center'
-        }}>
-        {exercise.title}
-      </Text>
-      <Box css={{ paddingTop: '$2' }}>
-        <Text>
-          <MDXContent components={components} />
-        </Text>
-      </Box>
+    <ArticleLayout style={{
+      maxWidth: '1018px',
+    }}>
+      <CourseRevisionSidebar contentList={[courseOfferingContent, ...exercisesContent]} currentContentIdx={exerciseIdx + 1} />
+      <div style={{
+        marginLeft: "266px",
+      }}>
+        <MDXContent components={components} />
+      </div>
     </ArticleLayout >
   )
 }

pages/course-revision/[course_offering]/index.tsx

@@ -1,17 +1,19 @@
 import { Card } from '@modulz/design-system'
 import ArticleLayout from 'components/ArticleLayout'
 import { Button } from 'components/Button'
+import CourseRevisionSidebar from 'components/CourseRevisionSidebar'
 import { ProblemCard } from 'components/ProblemCard'
 import { Tag } from 'components/Tag'
-import { allCourseRevisionOfferings, allCourseRevisionExercises } from 'contentlayer/generated'
+import { allCourseRevisionOfferings, allCourseRevisionExercises, CourseRevisionOffering } from 'contentlayer/generated'
 import { InferGetStaticPropsType } from 'next'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import Link from 'next/link'
 import Router, { useRouter } from 'next/router'
 import { ArrowLeft } from 'phosphor-react'
+import { useEffect, useState } from 'react'
 
 export async function getStaticPaths() {
-  const paths = allCourseRevisionOfferings.map((o) => ({ params: { course_offering: o.slug, course: o.course } }))
+  const paths = allCourseRevisionOfferings.map((o) => ({ params: { course_offering: o.slug } }))
   return {
     paths,
     fallback: false
@@ -23,41 +25,61 @@ export const getStaticProps = async ({ params }) => {
     (c) => c.slug === params.course_offering
   )
 
-  // const courseRevisionExercises = allCourseRevisionExercises.filter((e) => e.course === params.course_offering)
-
   return {
     props: {
-      exercises: allCourseRevisionExercises.sort((a, b) => a.difficulty - b.difficulty),
+      exercisesContent: allCourseRevisionExercises.filter((e) => e._raw.sourceFileDir.endsWith(params.course_offering)).sort((a, b) => a.difficulty - b.difficulty),
       courseOfferingContent
     }
   }
 }
 
 const ExercisesPage = ({
-  exercises,
+  exercisesContent,
   courseOfferingContent
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter()
   const MDXContent = useMDXComponent(courseOfferingContent.body.code)
+  // const exercisesMDXContent = [useMDXComponent(courseOfferingContent.body.code), ...exercisesContent.map((e) => useMDXComponent(e.body.code))]
+  // const [content, setContent] = useState(0)
+  // const [MDXContent, setMDXContent] = useState(null)
+
+  // useEffect(() => {
+  //   const content = exercisesMDXContent[0]
+  //   setMDXContent(content)
+  // }, [])
+
+  // const switchExercise = (path: string) => {
+  //   const exerciseContent = allCourseRevisionExercises.find((e) => e._raw.flattenedPath === path)
+  //   // setContent(exerciseContent.body.code)
+  //   setMDXContent(useMDXComponent(exerciseContent.body.code))
+  //   router.push(path, undefined, { shallow: true })
+  // }
 
   return (
     <main>
-      <ArticleLayout>
-        <Link href={`/course-revision`}>
-          <Button css={{ padding: '3px 14px', borderRadius: '100vh', width: "fit-content" }}>
-            <ArrowLeft />Back
-          </Button>
-        </Link>
-        <MDXContent />
-        {exercises?.map((exercise) => (
-          <Link href={`${router.query.course_offering}/${exercise.slug}`} passHref key={exercise.slug}>
+      <ArticleLayout style={{
+        maxWidth: '1018px',
+      }}>
+        <CourseRevisionSidebar contentList={[courseOfferingContent, ...exercisesContent]} currentContentIdx={0} />
+        <div style={{
+          marginLeft: "266px",
+        }}>
+          <div style={{
+            marginLeft: '1.4rem',
+          }}>
+            {MDXContent && <MDXContent />}
+          </div>
+          {/* {exercisesContent?.map((exercise) => (
+            <Link href={`${router.query.course_offering}/${exercise.slug}`} passHref key={exercise.slug}>
             <ProblemCard>
-              <h1>{exercise.title}</h1>
-              <Tag>Pain score: {exercise.difficulty} 💀</Tag>
-              <p>{exercise.desc}</p>
-            </ProblemCard>
-          </Link>
-        ))}
+            <h1>{exercise.title}</h1>
+                <Tag>Pain score: {exercise.difficulty} 💀</Tag>
+                <p>{exercise.desc}</p>
+              </ProblemCard>
+            </Link>
+          ))} */}
+
+        </div>
       </ArticleLayout>
     </main>
   )