course revision sessions page

Author: dqna64

components/CourseRevisionCard.tsx

@@ -0,0 +1,30 @@
+import { styled } from "@stitches/react";
+
+
+export const CourseRevisionCard = styled('div', {
+    color: "#ebf2ff",
+    padding: '1.2rem 1.6rem',
+    display: 'flex',
+    flexFlow: 'column nowrap',
+    background: 'linear-gradient(0.25turn, #4287f5, #4386f0);',
+    boxShadow: 'inset 0px 0px 35px -22px rgba(0,0,0,0.33)',
+    borderRadius: '1.2rem',
+    length: '100%',
+    width: "100%",
+    transitionProperty: "width, padding, margin, background",
+    transitionDuration: "400ms",
+    transitionTimingFunction: "ease",
+
+    '&:hover': {
+        background: 'linear-gradient(0.25turn, #5294ff, #5796fa);',
+        cursor: 'pointer',
+        paddingTop: 'calc(1.2rem - 8px)',
+        marginBottom: "8px",
+        paddingLeft: "calc(1.6rem - 6px)",
+        width: "calc(100% - 6px)",
+    },
+
+    '&:active': {
+        background: 'linear-gradient(0.25turn, #4287f5, #4386f0);',
+    }
+})

components/Navbar.tsx

@@ -25,10 +25,6 @@ const navItems = [
     'path': 'creators',
     'title': 'Contribute',
   },
-  {
-    'path': '2521-revision-practical',
-    'title': 'COMP2521',
-  },
   {
     'path': 'opendev',
     'title': 'Open Dev',

components/ProblemCard.tsx

@@ -7,13 +7,12 @@ export const ProblemCard = styled('div', {
     display: 'flex',
     flexFlow: 'column nowrap',
     backgroundColor: '#dae9f7',
-    boxShadow: '0px 0px 35px -22px rgba(0,0,0,0.33)',
     borderRadius: '1.2rem',
     length: '100%',
 
     '&:hover': {
         backgroundColor: '#e1ecf7',
         cursor: 'pointer'
-    }
+    },
 
 })

contentlayer.config.js

@@ -62,43 +62,19 @@ export const ArticleType = defineDocumentType(() => ({
   computedFields
 }))
 
-export const Puzzle = defineDocumentType(() => ({
-  name: 'Puzzle',
-  filePathPattern: `2521-revision-practical/*.mdx`,
+export const CourseRevisionOffering = defineDocumentType(() => ({
+  name: 'CourseRevisionOffering',
+  filePathPattern: `course-revision/*.mdx`,
   contentType: 'mdx',
   fields: {
     title: {
       type: 'string',
-      description: 'The title of the puzzle',
+      description: 'The title of the exercise set e.g. COMP1511 22T3 Revision Session',
       required: true
     },
     desc: {
       type: 'string',
-      description: 'One sentence that summarises the puzzle objective.',
-      required: true
-    },
-    class: {
-      type: 'string',
-      description: 'The class the puzzle relates to',
-      required: true
-    },
-    difficulty: {
-      type: 'number',
-      description: 'The difficulty of the puzzle',
-      required: true
-    }
-  },
-  computedFields
-}))
-
-export const CourseRevisionOffering = defineDocumentType(() => ({
-  name: 'CourseRevisionOffering',
-  filePathPattern: `course-revision/*.mdx`,
-  contentType: 'mdx',
-  fields: {
-    title: {
-      type: 'string',
-      description: 'The title of the exercise set',
+      description: 'A brief 1-2 sentence description of what this course revision contains',
       required: true
     },
     course: {
@@ -144,19 +120,9 @@ export const CourseRevisionExercise = defineDocumentType(() => ({
   computedFields
 }))
 
-export const BlockContent = defineDocumentType(() => ({
-  name: 'BlockContent',
-  filePathPattern: `block-content/*.mdx`,
-  contentType: 'mdx',
-  fields: {},
-  computedFields: {
-    slug: computedFields.slug
-  }
-}))
-
 export default makeSource({
   contentDirPath: 'data',
-  documentTypes: [ArticleType, Puzzle, CourseRevisionOffering, CourseRevisionExercise, BlockContent],
+  documentTypes: [ArticleType, CourseRevisionOffering, CourseRevisionExercise],
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [

data/course-revision/1511.mdx

@@ -1,26 +1,25 @@
 ---
 title: CSESoc COMP1511 Revision Practice Problems
+desc: Practical coding exercises to help you prepare for your COMP1511 22T3 final exam 😄
 course: COMP1511
 offering: 22T3
 ---
 
-# CSESoc COMP2521 Revision Practice Problems
+# CSESoc COMP1511 Revision Practice Problems
 
-Note: For COMP2521 theory revision problems, see [here](https://learn.csesoc.org.au/articles/2521-revision-theory)
-
-This is a set of 5 practical programming problems designed to help you prepare for your COMP2521 22T2 final exam.
+This is a set of ### practical programming problems designed to help you prepare for your COMP1511 22T3 final exam.
 
 There are autotests for each problem on cse servers which you can use to check your solutions.
 
 To start, log in to cse servers via ssh and create a new folder:
 
 ```bash:~
-$ mkdir 2521-revision
-$ cd 2521-revision
+$ mkdir 1511-revision
+$ cd 1511-revision
 ```
 
 Then run the following command to copy the template files:
 
-```bash:~/2521-revision
-$ 2521 fetch revision
+```bash:~/1511-revision
+$ 1511 fetch csesoc-revision
 ```

data/course-revision/2521.mdx

@@ -1,5 +1,6 @@
 ---
 title: CSESoc COMP2521 Revision Practice Problems
+desc: Practical coding exercises to help you prepare for your COMP2521 22T2 final exam 😄
 course: COMP2521
 offering: 22T2
 ---

pages/2521-revision-practical/[slug].tsx

@@ -15,6 +15,7 @@ import Link from 'next/link'
 import { ArrowDown, ArrowLeft } from 'phosphor-react'
 import ArticleLayout from 'components/ArticleLayout'
 import { Button } from 'components/Button'
+import { useRouter } from 'next/router'
 
 const defaultComponents = {
   Image,
@@ -47,23 +48,24 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
-  const puzzle = allCourseRevisionExercises.find((e) => e.slug === params.exercise)
+  const exercise = allCourseRevisionExercises.find((e) => e.slug === params.exercise)
   return {
     props: {
-      puzzle
+      exercise
     }
   }
 }
 
-const PuzzleLayout = ({ puzzle }) => {
-  const MDXContent = useMDXComponent(puzzle.body.code)
+const ExercisePage = ({ exercise }) => {
+  const router = useRouter();
+  const MDXContent = useMDXComponent(exercise.body.code)
 
   return (
     <ArticleLayout>
       <Head>
-        <title>{puzzle.title}</title>
+        <title>{exercise.title}</title>
       </Head>
-      <Link href="/1511-revision-practical">
+      <Link href={`/course-revision/${router.query.course_offering}`}>
         <Button css={{ padding: '3px 14px', borderRadius: '100vh', width: "fit-content" }}>
           <ArrowLeft />Back
         </Button>
@@ -76,15 +78,15 @@ const PuzzleLayout = ({ puzzle }) => {
           paddingTop: '$2',
           alignSelf: 'center'
         }}>
-        {puzzle.title}
+        {exercise.title}
       </Text>
       <Box css={{ paddingTop: '$2' }}>
         <Text>
           <MDXContent components={components} />
         </Text>
       </Box>
-    </ArticleLayout>
+    </ArticleLayout >
   )
 }
 
-export default PuzzleLayout
+export default ExercisePage