feat: learning outcomes

Learning outcomes can now be specified on a `section` using the `learningOutcomes` tag in the `yaml` header.

`learningOutcomes` should be a list of strings.

These are then rendered in an alert component below the title and before the content. Each learning outcome is prefixed with a 🏆 icon.

The list can be minimized by clicking the heading.

components/content/LearningOutcomes.tsx

@@ -0,0 +1,33 @@
+import { Section } from "../../lib/material"
+import ListItem from "@mui/material/ListItem"
+import ListItemText from "@mui/material/ListItemText"
+import List from "@mui/material/List"
+import Alert from "@mui/material/Alert"
+import Typography from "@mui/material/Typography"
+import Collapse from "@mui/material/Collapse"
+import Tooltip from "@mui/material/Tooltip"
+import { HiOutlineTrophy } from "react-icons/hi2";
+import ListItemIcon from "@mui/material/ListItemIcon"
+import React from "react"
+import { type Theme } from "@mui/system"
+
+export default function LearningOutcomes ({learningOutcomes}: {learningOutcomes: Section["learningOutcomes"]}) {
+ const [open, setOpen] = React.useState(true)
+ if (learningOutcomes.length === 0)
+ return null
+ return <Alert severity="success" sx={{marginBottom: (t: Theme) => t.spacing(1)}}>
+ <Tooltip title={`Click to ${open? "hide" : "show"} learning outcomes`}>
+ <Typography variant="body2" onClick={() => setOpen(!open)} sx={{cursor: "pointer"}}>
+ Learning outcomes
+ </Typography>
+ </Tooltip>
+ <Collapse in={open}>
+ <List>
+ {learningOutcomes.map((o, i) => <ListItem key={i}>
+ <ListItemIcon><HiOutlineTrophy /></ListItemIcon>
+ <ListItemText>{o}</ListItemText>
+ </ListItem>)}
+ </List>
+ </Collapse>
+ </Alert>
+}

lib/material.ts

@@ -31,6 +31,7 @@ export type Section = {
  type: string
  attribution: Attribution[]
  problems: string[]
+ learningOutcomes: string[]
 }
 
 export type Course = {
@@ -274,10 +275,12 @@ export async function getSection(
  const name = (sectionObject.attributes.name as string) || humanize(file)
  // @ts-expect-error
  const attribution = (sectionObject.attributes.attribution as Attribution[]) || []
+ // @ts-expect-error
+ const learningOutcomes = (sectionObject.attributes.learningOutcomes as string[]) || []
  const markdown = no_markdown ? "" : (sectionObject.body as string)
  const type = "Section"
  const regex =
  /:{3,}challenge\s*{\s*(?:id\s*=\s*"?([^"\s]+)"?\s*title\s*=\s*"[^"]+"|title\s*=\s*"[^"]+"\s*id\s*=\s*"?([^"\s]+)"?)\s*}/g
  const problems = Array.from(markdown.matchAll(regex)).map((match) => match[1] || match[2])
- return { id, file, theme, course, name, markdown, index, type, tags, dependsOn, attribution, problems }
+ return { id, file, theme, course, name, markdown, index, type, tags, dependsOn, attribution, learningOutcomes, problems }
 }

pages/material/[repoId]/[themeId]/[courseId]/[sectionId].tsx

@@ -17,7 +17,7 @@ import Content from "components/content/Content"
 import Title from "components/ui/Title"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
-import excludeVariablesFromRoot from "@mui/material/styles/excludeVariablesFromRoot"
+import LearningOutcomes from "../../../../../components/content/LearningOutcomes"
 
 type SectionComponentProps = {
  theme: Theme
@@ -51,6 +51,7 @@ const SectionComponent: NextPage<SectionComponentProps> = ({
  excludes={excludes}
  >
  <Title text={section.name} />
+ <LearningOutcomes learningOutcomes={section.learningOutcomes} />
  <Content markdown={section.markdown} theme={theme} course={course} section={section} />
  </Layout>
  )