show course revision content on home and collection pages

Author: dqna64

components/course-revision/CourseRevisionCard.tsx

@@ -9,7 +9,6 @@ const CourseRevisionCard = styled('div', {
     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",

components/course-revision/CourseRevisionContainerHomePage.tsx

@@ -0,0 +1,40 @@
+import { styled } from "@stitches/react"
+import { CourseRevisionOffering } from "contentlayer/generated"
+import Link from "next/link"
+import CourseRevisionMiniCard from "./CourseRevisionMiniCard"
+
+type PropTypes = {
+    allCourseRevisionOfferings: CourseRevisionOffering[]
+}
+
+const CourseRevisionsContainer = styled('div', {
+    width: "100%",
+    display: 'flex',
+    flexFlow: "row wrap",
+    justifyContent: "center",
+    rowGap: '$1',
+    columnGap: '$4',
+})
+
+const CourseRevisionContainerHomePage = (props: PropTypes) => {
+    return (<CourseRevisionsContainer>
+
+        {
+            props.allCourseRevisionOfferings?.map((offering) => (
+                <Link href={`course-revision/${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 CourseRevisionContainerHomePage
+

components/course-revision/CourseRevisionMiniCard.tsx

@@ -0,0 +1,56 @@
+import { styled } from "@stitches/react";
+import { Text } from "components/Text";
+import { CourseRevisionOffering } from "contentlayer/generated";
+
+
+type PropTypes = {
+    courseOffering: CourseRevisionOffering
+}
+
+const CourseRevisionMiniCardStyled = 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',
+    maxWidth: "380px",
+    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",
+    },
+
+    '&:active': {
+        background: 'linear-gradient(0.25turn, #4287f5, #4386f0);',
+    }
+})
+
+const H1 = styled('h1', {
+    fontSize: "1.8rem",
+    marginBottom: "0.2rem",
+    lineHeight: "1.6rem",
+    '@media (min-width: 640px)': {
+        fontSize: "2rem",
+        marginBottom: "0.2rem",
+        lineHeight: "2.2rem",
+    },
+})
+
+const CourseRevisionMiniCard = (props: PropTypes) => {
+    return (
+        <CourseRevisionMiniCardStyled>
+            <div style={{ textAlign: "center" }}><H1>{props.courseOffering.course}</H1></div>
+            <Text size={"info"} style={{ color: "#dce6f5" }}>{props.courseOffering.desc}</Text>
+        </CourseRevisionMiniCardStyled >
+
+    )
+}
+
+export default CourseRevisionMiniCard

data/course-revision/1511.mdx renamed to data/course-revision/1511-22T3.mdx

@@ -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 } from 'contentlayer/generated'
+import { ArticleType, allArticleTypes, allCourseRevisionOfferings } from 'contentlayer/generated'
 import { compareDesc } from 'date-fns'
 import { NextPage } from 'next'
 import Head from 'next/head'
@@ -12,6 +12,7 @@ import { styled } from '../stitches.config'
 import { MagnifyingGlass } from 'phosphor-react'
 import { ArticleRow } from '../components/ArticleRow'
 import { ArticlesCarousel } from 'components/ArticlesCarousel'
+import CourseRevisionContainerHomePage from 'components/course-revision/CourseRevisionContainerHomePage'
 
 export async function getStaticProps() {
   const articles = allArticleTypes.sort((a, b) => {
@@ -22,7 +23,7 @@ export async function getStaticProps() {
   )
   const flattenedTags = tagLists.flat(1)
   const allTags = [...['All Topics'], ...new Set(flattenedTags)]
-  return { props: { articles, allTags } }
+  return { props: { articles, allTags, courseOfferingContent: allCourseRevisionOfferings } }
 }
 
 const SearchBar = styled('input', {
@@ -42,7 +43,7 @@ const TagsContainer = styled('div', {
 })
 
 // I'm tired, I didn't type this properly ok
-const Articles: NextPage = ({ articles, allTags }: any) => {
+const Articles: NextPage = ({ articles, allTags, courseOfferingContent }: any) => {
   const [currentTag, setCurrentTag] = useState('All Topics')
   const [currentSearch, setCurrentSearch] = useState('')
   const [filteredArticles, setFilteredArticles] = useState(articles)
@@ -110,9 +111,30 @@ const Articles: NextPage = ({ articles, allTags }: any) => {
           as="span"
           size="title-sm"
           css={{ color: '$slate12', paddingTop: '$1' }}>
-          Learn something new with our collection of articles and videos!
+          Learn something new with our collection of articles and tutorials
         </Text>
 
+        <Flex
+          as="main"
+          css={{
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '0 1rem',
+          }}>
+          <Text
+            size="headline"
+            css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
+            Course Revision
+          </Text>
+          <Text
+            as="span"
+            size="title-sm"
+            css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
+            Revise for your upcoming final exams with practice problems written by our Education Team. Solutions provided.
+          </Text>
+          <CourseRevisionContainerHomePage allCourseRevisionOfferings={courseOfferingContent} />
+        </Flex>
+
         <Text
           size="headline"
           css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$3' }}>

data/course-revision/1511/billys_books.mdx renamed to data/course-revision/1511-22T3/billys_books.mdx

@@ -24,6 +24,7 @@ const ExercisesPage = ({
     return (
         <main>
             <ArticleLayout>
+                <h1>Course Revision</h1>
                 {allCourseRevisionOfferings?.map((offering) => (
                     <Link href={`course-revision/${offering.slug}`} passHref key={offering.slug}>
                         <div style={{

data/course-revision/1511/letter_pairs.mdx renamed to data/course-revision/1511-22T3/letter_pairs.mdx

@@ -3,23 +3,32 @@ import { Button } from 'components/Button'
 import { Card } from 'components/Card'
 import { Flex } from 'components/Flex'
 import { Text } from 'components/Text'
-import { allArticleTypes } from 'contentlayer/generated'
+import { allArticleTypes, allCourseRevisionOfferings, ArticleType, CourseRevisionOffering } from 'contentlayer/generated'
 import { compareAsc, compareDesc } from 'date-fns'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import Image from 'next/image'
 import { DiscordLogo, FacebookLogo, InstagramLogo, ArrowRight } from 'phosphor-react'
 import { ArticlesCarousel } from 'components/ArticlesCarousel'
+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'
+
+type PropTypes = {
+  articles: ArticleType[],
+  courseOfferingContent: CourseRevisionOffering[],
+}
 
 export async function getStaticProps() {
   const articles = allArticleTypes.sort((a, b) => {
     return compareAsc(new Date(b.date), new Date(a.date))
   })
-  return { props: { articles } }
+  return { props: { articles, courseOfferingContent: allCourseRevisionOfferings } }
 }
 
-const Home: NextPage = ({ articles }: any) => {
+const Home: NextPage = ({ articles, courseOfferingContent }: PropTypes) => {
   return (
     <Box>
       <Head>
@@ -47,7 +56,7 @@ const Home: NextPage = ({ articles }: any) => {
         <Text
           as="span"
           size="title-sm"
-          css={{ color: '$slate12', paddingTop: '$1' }}>
+          css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
           From articles on new technologies to sample projects, your learning
           outside the classroom starts here.
         </Text>
@@ -57,6 +66,34 @@ const Home: NextPage = ({ articles }: any) => {
             <ArrowRight weight="bold" />
           </Button>
         </Link>
+      </Flex>
+      <Flex
+        as="main"
+        css={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '0 1rem',
+        }}>
+        <Text
+          size="headline"
+          css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
+          Course Revision
+        </Text>
+        <Text
+          as="span"
+          size="title-sm"
+          css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
+          Revise for your upcoming final exams with practice problems written by our Education Team. Solutions provided.
+        </Text>
+        <CourseRevisionContainerHomePage allCourseRevisionOfferings={courseOfferingContent} />
+      </Flex>
+      <Flex
+        as="main"
+        css={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '0 1rem',
+        }}>
         <Text
           size="headline"
           css={{ fontWeight: 600, paddingTop: '$8', paddingBottom: '$4' }}>
@@ -77,7 +114,7 @@ const Home: NextPage = ({ articles }: any) => {
         <Text
           as="span"
           size="title-sm"
-          css={{ color: '$slate12', paddingTop: '$1' }}>
+          css={{ color: '$slate12', paddingTop: '$1', textAlign: "center", width: "70%" }}>
           Make friends with like-minded students and stay up-to-date with
           events.
         </Text>
@@ -210,3 +247,4 @@ const Home: NextPage = ({ articles }: any) => {
 }
 
 export default Home
+

data/course-revision/2521.mdx renamed to data/course-revision/2521-22T2.mdx

@@ -36,6 +36,6 @@
     "components/Button.ts",
     "components/Logo.tsx",
     "pages/articles.js"
-  ],
+, "pages/course-revision/[course_offering]"  ],
   "exclude": ["node_modules"]
 }