diff --git a/chapters/chapter1.md b/chapters/chapter1.md index d9a3b41..16e4055 100644 --- a/chapters/chapter1.md +++ b/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`. diff --git a/src/templates/chapter.js b/src/templates/chapter.js index c5fbaef..a398aef 100644 --- a/src/templates/chapter.js +++ b/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 ( - + {html}