Improve the lesson sidebar design

__tests__/pages/curriculum/[lessonSlug]/[subLessonSlug].test.js

@@ -1,4 +1,6 @@
-import '../../../../__mocks__/useBreakpoint.mock'
+jest.mock('gray-matter')
+import matter from 'gray-matter'
+import { mockUseBreakpoint } from '../../../../__mocks__/useBreakpoint.mock'
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
@@ -34,6 +36,11 @@ describe('[subLessonSlug]', () => {
     { lessonSlug: 'js0', subLessonSlug: 'second_sub_lesson' },
     { lessonSlug: 'js0', subLessonSlug: 'third_sub_lesson' }
   ]
+  const mockHeadings = [
+    { text: 'heading1', depth: 1 },
+    { text: 'heading2', depth: 2 },
+    { text: 'heading3', depth: 3 }
+  ]
   const fakeGithubPath = 'some/fake/path'
 
   const dummyOneFrontMatterOnly = {
@@ -43,7 +50,7 @@ describe('[subLessonSlug]', () => {
     frontMatter: dummyParsedSubLessonMdx[2].frontMatter
   }
   const { challenges, ...dummyLessonNoChallenges } = dummyLessonsData[0] // Lesson with slug 'js0'
-  const props = {
+  const props = includeHeadings => ({
     lesson: dummyLessonNoChallenges,
     lessonSlug: mockSlugs[0].lessonSlug,
 
@@ -52,23 +59,33 @@ describe('[subLessonSlug]', () => {
     subLessons: [
       {
         ...dummyParsedSubLessonMdx[0],
-        subLessonSlug: mockSlugs[0].subLessonSlug
+        subLessonSlug: mockSlugs[0].subLessonSlug,
+        headings: includeHeadings ? [] : mockHeadings
       },
       {
         ...dummyOneFrontMatterOnly,
-        subLessonSlug: mockSlugs[1].subLessonSlug
+        subLessonSlug: mockSlugs[1].subLessonSlug,
+        headings: includeHeadings ? [] : mockHeadings
       },
       {
         ...dummyTwoFrontMatterOnly,
-        subLessonSlug: mockSlugs[2].subLessonSlug
+        subLessonSlug: mockSlugs[2].subLessonSlug,
+        headings: includeHeadings ? [] : mockHeadings
       }
     ],
 
     githubFilePath: fakeGithubPath
-  }
+  })
 
   beforeEach(() => {
     jest.clearAllMocks()
+    matter.mockReturnValue({
+      content: `
+# heading1
+## heading2
+### heading3
+        `
+    })
   })
 
   describe('getStaticPaths', () => {
@@ -128,7 +145,7 @@ describe('[subLessonSlug]', () => {
         .mockResolvedValueOnce(dummyTwoFrontMatterOnly)
 
       expect(getStaticProps({ params: mockSlugs[0] })).resolves.toEqual({
-        props,
+        props: props(false),
         revalidate: 300 // Five Minutes
       })
     })
@@ -140,7 +157,7 @@ describe('[subLessonSlug]', () => {
     })
 
     test('should have correct title', () => {
-      render(<SubLessonPage {...props} />)
+      render(<SubLessonPage {...props(false)} />)
 
       expect(Title).toHaveBeenCalledWith(
         {
@@ -151,7 +168,7 @@ describe('[subLessonSlug]', () => {
     })
 
     test('should render SubLessonLinks component with correct subLesson titles', () => {
-      render(<SubLessonPage {...props} />)
+      render(<SubLessonPage {...props(false)} />)
 
       expect(
         screen.getByRole('link', { name: 'Part 1: first sub lesson' })
@@ -164,24 +181,35 @@ describe('[subLessonSlug]', () => {
       ).toBeVisible()
     })
     test('should render next lesson link', () => {
-      render(<SubLessonPage {...props} />)
+      render(<SubLessonPage {...props(false)} />)
 
       expect(
         screen.getByRole('link', { name: 'Next part: second sub lesson' })
       ).toBeVisible()
     })
 
     test('should render EditPage component with link to docFilePath', () => {
-      render(<SubLessonPage {...props} />)
+      render(<SubLessonPage {...props(false)} />)
       expect(
         screen.getByRole('link', { name: /edit this page/i })
       ).toHaveAttribute('href', expect.stringContaining(fakeGithubPath))
     })
 
     test('should match screenshot', async () => {
-      const { container } = render(<SubLessonPage {...props} />)
+      const { container } = render(<SubLessonPage {...props(false)} />)
 
       expect(container).toMatchSnapshot()
     })
+
+    test('should render correct lg breakpoint', () => {
+      mockUseBreakpoint.mockReturnValueOnce(true)
+
+      render(<SubLessonPage {...props(false)} />)
+
+      expect(screen.getByTestId('sublesson__container')).toHaveStyle(
+        'gridTemplateColumns: auto auto'
+      )
+      expect(screen.getByTestId('toc')).toHaveStyle('position: sticky')
+    })
   })
 })

__tests__/pages/curriculum/[lessonSlug]/__snapshots__/[subLessonSlug].test.js.snap

@@ -3,60 +3,106 @@
 exports[`[subLessonSlug] Page should match screenshot 1`] = `
 <div>
   <div
-    class="lesson-wrapper card shadow-sm mt-3 d-block border-0 p-3 p-md-4 bg-white"
+    class="mt-3 sublesson__container"
+    data-testid="sublesson__container"
+    style="grid-template-columns: none;"
   >
-    <nav
-      aria-label="Sub-lesson Links"
+    <div
+      class="card shadow-sm border-0 sublesson__sidebar"
+      data-testid="toc"
+      style="position: initial;"
     >
-      <a
-        aria-current="page"
-        class="subtitle link-dark dark d-block"
-        href="/curriculum/js0/first_sub_lesson"
-      >
-        Part 1: first sub lesson
-      </a>
-      <a
-        class="subtitle text-muted d-block"
-        href="/curriculum/js0/second_sub_lesson"
-      >
-        Part 2: second sub lesson
-      </a>
-      <a
-        class="subtitle text-muted d-block"
-        href="/curriculum/js0/third_sub_lesson"
+      <ul
+        class="p-md-4 toc__container m-0 rounded"
       >
-        Part 3: third sub lesson
-      </a>
-    </nav>
-    <h1
-      class="MDX_h1"
-      id="first"
-    >
-      first
-    </h1>
-    <p>
-      simple
-    </p>
+        <li
+          style="padding-left: 0rem;"
+        >
+          <a
+            class="MDX_a text-decoration-none"
+            href="#heading1"
+          >
+            heading1
+          </a>
+        </li>
+        <li
+          style="padding-left: 1rem;"
+        >
+          <a
+            class="MDX_a text-decoration-none"
+            href="#heading2"
+          >
+            heading2
+          </a>
+        </li>
+        <li
+          style="padding-left: 2rem;"
+        >
+          <a
+            class="MDX_a text-decoration-none"
+            href="#heading3"
+          >
+            heading3
+          </a>
+        </li>
+      </ul>
+    </div>
     <div
-      class="d-flex"
+      class="card shadow-sm  d-block border-0 p-3 p-md-4 bg-white lesson-wrapper "
     >
+      <nav
+        aria-label="Sub-lesson Links"
+      >
+        <a
+          aria-current="page"
+          class="subtitle link-dark dark d-block"
+          href="/curriculum/js0/first_sub_lesson"
+        >
+          Part 1: first sub lesson
+        </a>
+        <a
+          class="subtitle text-muted d-block"
+          href="/curriculum/js0/second_sub_lesson"
+        >
+          Part 2: second sub lesson
+        </a>
+        <a
+          class="subtitle text-muted d-block"
+          href="/curriculum/js0/third_sub_lesson"
+        >
+          Part 3: third sub lesson
+        </a>
+      </nav>
+      <h1
+        class="MDX_h1"
+        id="first"
+      >
+        first
+      </h1>
+      <p>
+        simple
+      </p>
+      <div
+        class="d-flex"
+      >
+        <a
+          class="lessonLink next"
+          href="/curriculum/js0/second_sub_lesson"
+        >
+          Next part: 
+          <span>
+            second sub lesson
+          </span>
+        </a>
+      </div>
       <a
-        class="lessonLink next"
-        href="/curriculum/js0/second_sub_lesson"
+        class="MDX_a edit"
+        href="https://github.com/garageScript/c0d3-app/edit/master/some/fake/path"
+        title="Edit this page on Github"
       >
-        Next part: 
-        <span>
-          second sub lesson
-        </span>
+        Edit this page
       </a>
     </div>
-    <a
-      class="MDX_a edit"
-      href="https://github.com/garageScript/c0d3-app/edit/master/some/fake/path"
-      title="Edit this page on Github"
-    >
-      Edit this page
-    </a>
   </div>
 </div>
 `;

content/lessons/js0/sublesson/functions_and_execution_context.mdx

@@ -3,8 +3,6 @@ title: Functions and execution context
 order: 2
 ---
 
-# Table of Contents
-
 # Functions
 
 Have you ever had to do the same thing (like making rice) over and over again

content/lessons/js0/sublesson/primitive_data_and_operators.mdx

@@ -3,8 +3,6 @@ title: Primitive data and operations
 order: 1
 ---
 
-# Table of Contents
-
 # Overview
 
 Why Learn JS? JavaScript is the only language that lets you build applications

content/lessons/js1/sublesson/hypertext_markup_language.mdx

@@ -3,8 +3,6 @@ title: HyperText Markup Language
 order: 1
 ---
 
-# Table of Contents
-
 # Preflight
 
 This section contains a few questions for you to answer to make sure you

content/lessons/js1/sublesson/recursion_closure_and_async.mdx

@@ -3,8 +3,6 @@ title: Recursion, closure and async
 order: 2
 ---
 
-# Table of Contents
-
 # Interviewing
 
 During interviews for software engineering positions, your ability to write
@@ -901,9 +899,9 @@ problem.
 3. **Recursive case:** If the counter is still below 99, print 'The things I do
    for love', bring the counter one step closer to 99, and go again.
 
-   It might look strange to see `return love(counter + 1)` in the recursive case, but
-   only `return` in the base case. Shouldn't a function always either have a
-   return value or not?
+   It might look strange to see `return love(counter + 1)` in the recursive
+   case, but only `return` in the base case. Shouldn't a function always either
+   have a return value or not?
 
    Each of the 99 calls to `love` will pass its return value to the `love` that
    called it, and saying `return` is like saying `return undefined`. So the very

content/lessons/js2/sublesson/basic_array_functions.mdx

@@ -3,8 +3,6 @@ title: Basic array functions
 order: 2
 ---
 
-# Table of Contents
-
 # Introduction
 
 So far, you have used variables to store singular values: a number, a boolean, a
@@ -1192,19 +1190,19 @@ removed = fruits2.splice(1)
      > to the end of an array. `Push()` returns the new length of the array.
 
    - Continue.
-  
+
 4. **Code**
 
-  ```jsx
-  const copyArray = (a, result=[]) => {
-    if (result.length === a.length) {
-      return result
-    }
-    result.push( a[result.length] )
-    return copyArray(a, result)
+```jsx
+const copyArray = (a, result = []) => {
+  if (result.length === a.length) {
+    return result
   }
-  ```
-
+  result.push(a[result.length])
+  return copyArray(a, result)
+}
+```
+
 <Spoiler name = "Debrief">
 
 `push` was the most obvious choice for this task, because we could start out with an empty array and add all the elements to it. We could have also used `unshift` if we'd started from the end. In the next section, we'll learn a much easier way to copy arrays.

content/lessons/js2/sublesson/introduction_to_testing_inner_properties.mdx

@@ -3,8 +3,6 @@ title: Introduction to testing, inner Properties
 order: 1
 ---
 
-# Table of Contents
-
 <br />
 
 # Introduction to Testing