Courses

.github/workflows/test.yml

@@ -136,6 +136,7 @@ jobs:
             --exclude "docs.python.org" \
             --exclude "mpich.org" \
             --exclude "medium.com" \
+            --exclude "unsplash.com" \
           ; true)
           echo "$OUTPUT"
 

README.md

@@ -61,7 +61,7 @@ This means you need to copy some source material before you have anything to dis
 The HPC materials are already listed as a source under `material` in the configuration yaml file in the `config` directory.
 
 To download those materials, so we have something to work with, run `yarn pullmat` and they will be cloned into
-a local `.materials` directory.
+a local `.material` directory.
 
 ### 5. (Setting up a postgres database)
 
@@ -92,6 +92,18 @@ The instructions for doing so are [on the Docker support pages](https://docs.doc
 With the database available, we then need to create the various tables etc. that Gutenberg uses with
 `yarn prisma migrate dev`.
 
+If you also want the local demo and test seed data, run:
+
+```shell
+npx prisma db seed
+```
+
+If you want to recreate the database from scratch and reseed it in one step, run:
+
+```shell
+yarn prisma migrate reset --force
+```
+
 ### 6. Start the development server
 
 The local development server can be started with `yarn dev`.

components/Layout.tsx

@@ -1,4 +1,4 @@
-import { Course, Section, Theme } from "lib/material"
+import { MaterialCourse, MaterialSection, MaterialTheme } from "lib/material"
 import Link from "next/link"
 
 import { useSession } from "next-auth/react"
@@ -11,24 +11,32 @@ import Overlay from "./Overlay"
 import Navbar from "./navbar/Navbar"
 import { useSidebarOpen } from "lib/hooks/useSidebarOpen"
 import useActiveEvent from "lib/hooks/useActiveEvents"
+import useActiveCourse from "lib/hooks/useActiveCourse"
 import { Provider } from "jotai"
 import { PageTemplate } from "lib/pageTemplate"
 import { SectionLink } from "./ui/LinkedSection"
 import { findLinks } from "lib/findSectionLinks"
 import PlausibleProvider from "next-plausible"
 import { useTheme } from "next-themes"
 import { ThemeProvider } from "@mui/material/styles"
+import useSWR, { Fetcher } from "swr"
 import { LightTheme, DarkTheme } from "./MuiTheme"
 import plausibleHost from "lib/plausibleHost"
+import { BreadcrumbItem } from "lib/breadcrumbs"
+import { basePath } from "lib/basePath"
+import type { Data as ActiveCourseData } from "pages/api/course/byExternal/[externalId]"
+
+const activeCourseFetcher: Fetcher<ActiveCourseData, string> = (url) => fetch(url).then((r) => r.json())
 
 type Props = {
   material: Material
-  theme?: Theme
-  course?: Course
-  section?: Section
+  theme?: MaterialTheme
+  course?: MaterialCourse
+  section?: MaterialSection
   children: ReactNode
   pageInfo: PageTemplate
   pageTitle?: string
+  breadcrumbs?: BreadcrumbItem[]
   repoUrl?: string
   excludes?: Excludes
 }
@@ -41,15 +49,21 @@ const Layout: React.FC<Props> = ({
   children,
   pageInfo,
   pageTitle,
+  breadcrumbs,
   repoUrl,
   excludes,
 }) => {
-  const [activeEvent, setActiveEvent] = useActiveEvent()
-  const { data: session } = useSession()
+  const [activeEvent] = useActiveEvent()
+  const [activeCourseExternalId] = useActiveCourse()
+  useSession()
   const { theme: currentTheme } = useTheme()
   const [showAttribution, setShowAttribution] = useState(false)
+  const { data: activeCourseData } = useSWR(
+    activeCourseExternalId ? `${basePath}/api/course/byExternal/${activeCourseExternalId}` : undefined,
+    activeCourseFetcher
+  )
   const [sidebarOpen, setSidebarOpen] = useSidebarOpen(true)
-  const sectionLinks: SectionLink[] = findLinks(material, theme, course, section, activeEvent)
+  const sectionLinks: SectionLink[] = findLinks(material, theme, course, section, activeEvent, activeCourseData?.course)
 
   const muiTheme = React.useMemo(() => (currentTheme === "light" ? LightTheme : DarkTheme), [currentTheme])
   return (
@@ -74,6 +88,7 @@ const Layout: React.FC<Props> = ({
               repoUrl={repoUrl}
               excludes={excludes}
               pageInfo={pageInfo}
+              breadcrumbs={breadcrumbs}
             />
           </header>
           <main id="main">

components/Overlay.tsx

@@ -1,4 +1,4 @@
-import { Course, Material, Section, Theme } from "lib/material"
+import { MaterialCourse, Material, MaterialSection, MaterialTheme } from "lib/material"
 import { EventFull } from "lib/types"
 import { NextPage } from "next"
 import React, { useEffect, useState } from "react"
@@ -19,9 +19,9 @@ import type { PageTemplate } from "lib/pageTemplate"
 
 interface Props {
   material: Material
-  theme?: Theme
-  course?: Course
-  section?: Section
+  theme?: MaterialTheme
+  course?: MaterialCourse
+  section?: MaterialSection
   activeEvent: EventFull | undefined
   showAttribution: boolean
   setShowAttribution: (show: boolean) => void

components/content/CodeBlock.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter"
+import CopyToClipboard from "components/ui/CopyToClipboard"
+import { FaClipboard } from "react-icons/fa"
+import { lucario as codeStyle } from "react-syntax-highlighter/dist/cjs/styles/prism"
+
+const SyntaxHighlighter = Prism as any as React.FC<SyntaxHighlighterProps>
+
+type Props = {
+  code: string
+  language?: string
+  className?: string
+}
+
+const CodeBlock: React.FC<Props> = ({ code, language, className }) => {
+  if (language) {
+    return (
+      <div className="relative m-0">
+        <CopyToClipboard text={code}>
+          <button className="group absolute top-0 right-0 bg-transparent text-xs text-grey-700 hover:bg-grey-900 px-2 py-1 rounded flex items-center space-x-1">
+            <FaClipboard className="group-hover:text-white" />
+            <span className="group-hover:text-white">Copy</span>
+          </button>
+        </CopyToClipboard>
+        <SyntaxHighlighter
+          language={language}
+          PreTag="div"
+          style={codeStyle}
+          codeTagProps={{ className: "text-sm" }}
+          customStyle={{ margin: 0 }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-3 relative">
+      <CopyToClipboard text={code}>
+        <button className="group absolute top-0 right-0 bg-transparent text-xs text-grey-700 hover:text-grey-900 px-2 py-1 rounded flex items-center space-x-1">
+          <FaClipboard className="group-hover:text-white" />
+          <span className="group-hover:text-white">Copy</span>
+        </button>
+      </CopyToClipboard>
+      <code className={className}>{code}</code>
+    </div>
+  )
+}
+
+export default CodeBlock

components/content/Content.tsx

@@ -1,10 +1,6 @@
 import React, { JSX, ReactNode, useRef } from "react"
 import ReactMarkdown, { ExtraProps, Components } from "react-markdown"
-import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter"
-import CopyToClipboard from "components/ui/CopyToClipboard"
-import { FaClipboard } from "react-icons/fa"
-
-import { lucario as codeStyle } from "react-syntax-highlighter/dist/cjs/styles/prism"
+import CodeBlock from "components/content/CodeBlock"
 
 import directive from "remark-directive"
 import { visit } from "unist-util-visit"
@@ -17,14 +13,12 @@ import "katex/dist/katex.min.css" // `rehype-katex` does not import the CSS for
 import Challenge from "./Challenge"
 import Solution from "./Solution"
 import Callout from "./Callout"
-import { Course, Section, Theme } from "lib/material"
+import { MaterialCourse, MaterialSection, MaterialTheme } from "lib/material"
 import Paragraph from "./Paragraph"
 import Heading from "./Heading"
 import { reduceRepeatingPatterns, extractTextValues } from "lib/utils"
 import Link from "next/link"
 
-const SyntaxHighlighter = Prism as any as React.FC<SyntaxHighlighterProps>
-
 type ReactMarkdownProps = React.JSX.IntrinsicElements["p"] & ExtraProps
 type HeadingProps = React.JSX.IntrinsicElements["h2"] & ExtraProps
 type CodeProps = React.JSX.IntrinsicElements["code"] & ExtraProps
@@ -111,42 +105,7 @@ function code({ node, className, children, ...props }: CodeProps): React.JSX.Ele
   const isBlockCode = Boolean(className && /language-(\w+)/.test(className))
 
   if (isBlockCode) {
-    if (match) {
-      return (
-        <div className="relative m-0">
-          <CopyToClipboard text={code}>
-            <button className="group absolute top-0 right-0 bg-transparent text-xs text-grey-700 hover:bg-grey-900 px-2 py-1 rounded flex items-center space-x-1">
-              <FaClipboard className="group-hover:text-white" />
-              <span className="group-hover:text-white">Copy</span>
-            </button>
-          </CopyToClipboard>
-          <SyntaxHighlighter
-            {...(props as any)}
-            language={match[1]}
-            PreTag="div"
-            style={codeStyle}
-            codeTagProps={{ className: "text-sm" }}
-            customStyle={{ margin: 0 }}
-          >
-            {code}
-          </SyntaxHighlighter>
-        </div>
-      )
-    } else {
-      return (
-        <div className="p-3 relative">
-          <CopyToClipboard text={code}>
-            <button className="group absolute top-0 right-0 bg-transparent text-xs text-grey-700 hover:text-grey-900 px-2 py-1 rounded flex items-center space-x-1">
-              <FaClipboard className="group-hover:text-white" />
-              <span className="group-hover:text-white">Copy</span>
-            </button>
-          </CopyToClipboard>
-          <code className={className} {...props}>
-            {children}
-          </code>
-        </div>
-      )
-    }
+    return <CodeBlock code={code} language={match?.[1]} className={className} />
   } else {
     return (
       <code className={className} {...props}>
@@ -158,9 +117,9 @@ function code({ node, className, children, ...props }: CodeProps): React.JSX.Ele
 
 type Props = {
   markdown: string
-  theme?: Theme
-  course?: Course
-  section?: Section
+  theme?: MaterialTheme
+  course?: MaterialCourse
+  section?: MaterialSection
 }
 
 const Content: React.FC<Props> = ({ markdown, theme, course, section }) => {

components/content/LearningOutcomes.tsx

@@ -1,4 +1,4 @@
-import { Section } from "../../lib/material"
+import { MaterialSection } from "../../lib/material"
 import ListItem from "@mui/material/ListItem"
 import ListItemText from "@mui/material/ListItemText"
 import List from "@mui/material/List"
@@ -11,17 +11,31 @@ import ListItemIcon from "@mui/material/ListItemIcon"
 import React from "react"
 import { type Theme } from "@mui/system"
 
-export default function LearningOutcomes({ learningOutcomes }: { learningOutcomes: Section["learningOutcomes"] }) {
+export default function LearningOutcomes({
+  learningOutcomes,
+}: {
+  learningOutcomes: MaterialSection["learningOutcomes"]
+}) {
   const [open, setOpen] = React.useState(true)
   if (learningOutcomes.length === 0) return null
   return (
     <Alert
       severity="success"
-      className="max-w-2xl mx-auto dark:bg-indigo-950 dark:text-teal-50"
-      sx={{ marginBottom: (t: Theme) => t.spacing(1) }}
+      className="mx-auto max-w-2xl border border-emerald-200 !bg-emerald-50 !text-emerald-950 shadow-sm dark:border-emerald-900 dark:!bg-emerald-950/20 dark:!text-emerald-50"
+      sx={{
+        marginBottom: (t: Theme) => t.spacing(1),
+        "& .MuiAlert-message": { width: "100%" },
+        "& .MuiListItemIcon-root": { minWidth: 36 },
+        "& .MuiListItemText-primary": { color: "inherit" },
+      }}
     >
       <Tooltip title={`Click to ${open ? "hide" : "show"} learning outcomes`}>
-        <Typography variant="body2" onClick={() => setOpen(!open)} sx={{ cursor: "pointer" }}>
+        <Typography
+          variant="body2"
+          onClick={() => setOpen(!open)}
+          sx={{ cursor: "pointer", fontWeight: 600 }}
+          className="text-emerald-900 dark:text-emerald-100"
+        >
           Learning outcomes
         </Typography>
       </Tooltip>
@@ -30,7 +44,7 @@ export default function LearningOutcomes({ learningOutcomes }: { learningOutcome
           {learningOutcomes.map((o, i) => (
             <ListItem key={i}>
               <ListItemIcon>
-                <HiOutlineTrophy color="#2e7d32" />
+                <HiOutlineTrophy className="text-emerald-600 dark:text-emerald-300" />
               </ListItemIcon>
               <ListItemText>{o}</ListItemText>
             </ListItem>

components/content/TableOfContents.tsx

@@ -141,7 +141,15 @@ const TableOfContents: FC<TableOfContentsProps> = ({ markdown, tocTitle }: Table
         <div
           className="flex items-center mb-4 absolute top-0 z-50 p-1 bg-transparent"
           style={{ cursor: "pointer", pointerEvents: "auto" }}
+          role="button"
+          tabIndex={0}
           onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault()
+              window.scrollTo({ top: 0, behavior: "smooth" })
+            }
+          }}
         >
           {collapsed ? (
             <button

components/courses/CourseActiveActions.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { Button } from "flowbite-react"
+import { CourseStatus } from "@prisma/client"
+import { HiArrowNarrowRight } from "react-icons/hi"
+import useActiveCourse from "lib/hooks/useActiveCourse"
+import useLearningContext from "lib/hooks/useLearningContext"
+
+type Props = {
+  courseExternalId: string
+  status: CourseStatus | null
+  verbose?: boolean
+  size?: "xs" | "sm"
+}
+
+const CourseActiveActions: React.FC<Props> = ({ courseExternalId, status, verbose = false, size = "xs" }) => {
+  const [activeCourseExternalId, setActiveCourseExternalId] = useActiveCourse()
+  const [, setLearningContext] = useLearningContext()
+
+  const isSelectable = status === CourseStatus.ENROLLED || status === CourseStatus.COMPLETED
+  const isActiveCourse = activeCourseExternalId === courseExternalId
+
+  if (!isSelectable) return null
+
+  return isActiveCourse ? (
+    <Button
+      size={size}
+      color="gray"
+      onClick={() => {
+        setActiveCourseExternalId(undefined)
+        setLearningContext(undefined)
+      }}
+      style={{ zIndex: 1 }}
+    >
+      {verbose ? "Deselect as active course" : "Unselect"}
+      <HiArrowNarrowRight className="ml-2 h-3 w-3" />
+    </Button>
+  ) : (
+    <Button
+      size={size}
+      color="gray"
+      onClick={() => {
+        setActiveCourseExternalId(courseExternalId)
+        setLearningContext({ type: "course", externalId: courseExternalId })
+      }}
+      style={{ zIndex: 1 }}
+    >
+      {verbose ? "Select as your active course" : "Select"}
+      <HiArrowNarrowRight className="ml-2 h-3 w-3" />
+    </Button>
+  )
+}
+
+export default CourseActiveActions