Fix handling of deep links (resolves #7)

chapters/chapter1.md

@@ -48,6 +48,8 @@ This is a code exercise. The content can be formatted in simple Markdown – so
 you can have **bold text**, `code` or [links](https://spacy.io) or lists, like
 the one for the instructions below.
 
+You can also use deep links: [go to previous exercise](#2).
+
 - These are instructions and they can have bullet points.
 - The code block below will look for the files `exc_01_03`, `solution_01_03` and
   `test_01_03` in `/exercises`.

src/templates/chapter.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { graphql, navigate } from 'gatsby'
 import useLocalStorage from '@illinois/react-use-local-storage'
 
@@ -9,7 +9,7 @@ import { Button } from '../components/button'
 
 import classes from '../styles/chapter.module.sass'
 
-const Template = ({ data }) => {
+const Template = ({ data, location }) => {
     const { markdownRemark, site } = data
     const { courseId } = site.siteMetadata
     const { frontmatter, htmlAst } = markdownRemark
@@ -21,9 +21,20 @@ const Template = ({ data }) => {
         { slug: prev, text: '« Previous Chapter' },
         { slug: next, text: 'Next Chapter »' },
     ]
+    const handleSetActiveExc = id => {
+        window.location.hash = `${id}`
+        setActiveExc(id)
+    }
+    useEffect(() => {
+        if (location.hash) {
+            setActiveExc(parseInt(location.hash.split('#')[1]))
+        }
+    }, [location.hash])
 
     return (
-        <ChapterContext.Provider value={{ activeExc, setActiveExc, completed, setCompleted }}>
+        <ChapterContext.Provider
+            value={{ activeExc, setActiveExc: handleSetActiveExc, completed, setCompleted }}
+        >
             <Layout title={title} description={description}>
                 {html}