Skip to content

Work / Learning Platform / Wiki / Surfaces

lesson

Surfacecanonicalverified 2026-10-04

SURFACE.WEB.LEARN.LESSON

Summary

A lesson, for an enrolled student.

Raw wireframe

  • .context/designs/web/learn/lesson.html
  • .context/designs/web/learn/lesson-loading.html
  • .context/designs/web/learn/lesson-error.html
  • .context/designs/web/learn/lesson-locked.html
  • .context/designs/web/learn/lesson-empty.html

Why it is drawn this way

There is no course detail page. /courses/[slug] rewrites its own URL to the first lesson, then to the first phase.

The viewer is one window tall under the site header. So the page scrolls by the header's height, and the site footer sits below the fold.

The lesson rows are not links here. Each opens the same screen with another lesson; the set draws one.

Content is MDX from the repository. Questions sit inline where the MDX places them. See course-as-code and question-types.

The progress bar counts finished lessons. The sidebar circle turns green only when all three phases are done. See lesson-phases.

Locked is a real state. The message names the last open lesson. Its button opens that lesson, so it is a button here.

The error state is "Course not found". A lesson that fails to load shows a yellow box instead; not drawn.

Three of five question types are drawn, and none after answering. routes.js missing lists the rest.

Related

Sources

  • apps/website/src/app/courses/[courseSlug]/page.tsx
  • apps/website/src/components/course/course-page.tsx
  • apps/website/src/components/course/course-sidebar.tsx
  • apps/website/src/components/course/course-header.tsx
  • apps/website/src/components/course/course-content.tsx
  • apps/website/src/components/course/question-renderer.tsx