feat: add tutorial redirect modal

[zebateira]

This modal should appear only to users that land on a lesson page from a search engine result, mostly.

The logic for this is as follow:

        typeof document !== 'undefined' && // not available in prerender
        document.referrer &&
        tutorialRedirectModal.referrer.SEARCH_ENGINES.some(searchEngine => document.referrer.includes(searchEngine.url)) && // if the user came from a search engine
        this.lesson.id !== 1 &&
        this.lesson.type !== 'resources' &&
        !isLessonPassed(this.tutorial, this.lesson)

Breaking it down:

1. typeof document !== 'undefined' && // not available in prerender

Don't prerender the pages with the modal

2. tutorialRedirectModal.referrer.SEARCH_ENGINES.some(searchEngine => document.referrer.includes(searchEngine.url))

The document referrer indicates where the user came from. So if it's present, then we know for sure the user was linked from another website to this lesson page.
In this condition we are only show the modal to users if they came from a search engine result link.

3. this.lesson.id !== 1

Do not show users the modal if they landed on the first lesson of the tutorial.

4. this.lesson.type !== 'resources'

Do not show users the modal if they landed on the resources page.

5. !isLessonPassed(this.tutorial, this.lesson)

Do not show users the modal if they already passed the lesson.

Considerations

• These are the most sane rules that came up while implementing this, but there are others that come to mind that we could discuss:
  • Maybe we should show the modal to users that land on the resources if they haven't completed the tutorial?
  • Maybe we should also consider the situations when the user has completed, e.g., lessons 1,2 and 3, but has landed on lesson 6. In these situations maybe instead of showing "Start tutorial" link, we should show "Resume tutorial" and link to the first incomplete lesson? UPDATE: implemented by @terichadbourne
• Results: the document.referrer property comes up when linked from another website, but it is absent when users use bookmark links or OS apps. For example, when opening a lesson from Slack, referrer will be empty, but if the user clicks a link from google.com search results, the referrer will be https://google.com. This means the referrer will also have a value in situations when any blog or social media post links to ProtoSchool lessons.
• Would it make sense to have an override? In situations when we want users to land on the lesson page because we actually want to send them to it and make sure they won't get the redirect modal. A solution for this would be to include a query parameter in the link, eg, https://protos.school/blog/02?noTutorialRedirectModal=true. UPDATE: instead, we opted to only show it to users who are coming from search engines. With this users won't get the modal when coming from direct links or other situations, except for search engines.

How to test this PR

• Considering the lack of control over the document.referrer property, we need to simulate it.
  Because opening lessons from within the ProtoSchool website doesn't work, we can search on google for "filecoin storage verification" and then edit the link to one specific lesson, eg, lesson 6 through the dev tools, using the preview domain of this PR. When clicking the link it should show up the modal.
• Consider the previous conditions (lesson not passed, not lesson nr 1, etc).

[zebateira]

Current issue: it's not working if the link the user clicked doesn't have a forward slash.

[terichadbourne]

When I visit from a link that doesn't haven't a trailing slash, I get this error, the modal doesn't appear, and the document.referrer gets removed:

[terichadbourne]

Looks great, thank you!!