Add header and alerts and errors to the DOJO exercises page

[bryanjenningz]

This pull request adds the header to the top of the DOJO exercises page and handles errors and alerts. The header and title will change depending on the exercise you input.

How to test:

• Go to /exercises/js0 or /exercises/js1 and verify it displays the exercises title and header
• Go to /exercises/randomURL and verify it gives a 404 page

This pull request is a part of #2253

[vercel]

@bryanjenningz is attempting to deploy a commit to the c0d3-prod Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
c0d3-app	✅ Ready (Inspect)	Visit Preview	Sep 7, 2022 at 11:33AM (UTC)

[codecov]

Codecov Report

Merging #2263 (56edd6f) into master (9834601) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master     #2263   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          177       177           
  Lines         2980      2990   +10     
  Branches       797       801    +4     
=========================================
+ Hits          2980      2990   +10     

Impacted Files	Coverage Δ
pages/exercises/[lessonSlug].tsx	100.00% <100.00%> (ø)

[flacial]

I like how it handles when the router isn't ready, missing data, and invalid lesson or slug query:

  if (!router.isReady) return <LoadingSpinner />

  const slug = router.query.lessonSlug as string
  if (!lessons || !alerts)
    return <Error code={StatusCode.INTERNAL_SERVER_ERROR} message="Bad data" />

  const currentLesson = lessons.find(lesson => lesson.slug === slug)
  if (!currentLesson)
    return <Error code={StatusCode.NOT_FOUND} message="Lesson not found" />

I shall consider handling these when working on a page.