Merge pull request #52 from ines/feature/videos

explosion · May 14, 2020 · 7823361 · 7823361
2 parents 3820198 + f5f9696
commit 7823361
Show file tree

Hide file tree

Showing 23 changed files with 336 additions and 65 deletions.
diff --git a/chapters/en/chapter1.md b/chapters/en/chapter1.md
@@ -10,9 +10,9 @@ type: chapter
 id: 1
 ---
 
-<exercise id="1" title="Introduction to spaCy" type="slides">
+<exercise id="1" title="Introduction to spaCy" type="slides,video">
 
-<slides source="chapter1_01_introduction-to-spacy">
+<slides source="chapter1_01_introduction-to-spacy" start="0:165" end="3:01">
 </slides>
 
 </exercise>
@@ -104,9 +104,9 @@ To get the token at a certain index, you can index into the `doc`. For example,
 
 </exercise>
 
-<exercise id="5" title="Statistical models" type="slides">
+<exercise id="5" title="Statistical models" type="slides,video">
 
-<slides source="chapter1_02_statistical-models">
+<slides source="chapter1_02_statistical-models" start="3:12" end="7:01">
 </slides>
 
 </exercise>
@@ -226,9 +226,9 @@ a look at an example.
 
 </exercise>
 
-<exercise id="10" title="Rule-based matching" type="slides">
+<exercise id="10" title="Rule-based matching" type="slides,video">
 
-<slides source="chapter1_03_rule-based-matching">
+<slides source="chapter1_03_rule-based-matching" start="7:118" end="10:55">
 </slides>
 
 </exercise>

diff --git a/chapters/en/chapter2.md b/chapters/en/chapter2.md
@@ -11,9 +11,9 @@ type: chapter
 id: 2
 ---
 
-<exercise id="1" title="Data Structures (1)" type="slides">
+<exercise id="1" title="Data Structures (1)" type="slides,video">
 
-<slides source="chapter2_01_data-structures-1">
+<slides source="chapter2_01_data-structures-1" start="11:06" end="13:37">
 </slides>
 
 </exercise>
@@ -96,9 +96,9 @@ the vocab.
 
 </exercise>
 
-<exercise id="4" title="Data Structures (2)" type="slides">
+<exercise id="4" title="Data Structures (2)" type="slides,video">
 
-<slides source="chapter2_02_data-structures-2">
+<slides source="chapter2_02_data-structures-2" start="13:475" end="15:47">
 </slides>
 
 </exercise>
@@ -249,9 +249,9 @@ The `.pos_` attribute returns the coarse-grained part-of-speech tag and
 
 </exercise>
 
-<exercise id="8" title="Word vectors and semantic similarity" type="slides">
+<exercise id="8" title="Word vectors and semantic similarity" type="slides,video">
 
-<slides source="chapter2_03_word-vectors-similarity">
+<slides source="chapter2_03_word-vectors-similarity" start="15:58" end="19:47">
 </slides>
 
 </exercise>
@@ -312,9 +312,9 @@ current object to.
 
 </exercise>
 
-<exercise id="11" title="Combining models and rules" type="slides">
+<exercise id="11" title="Combining models and rules" type="slides,video">
 
-<slides source="chapter2_04_models-rules">
+<slides source="chapter2_04_models-rules" start="19:58" end="23:25">
 </slides>
 
 </exercise>

diff --git a/chapters/en/chapter3.md b/chapters/en/chapter3.md
@@ -12,9 +12,9 @@ type: chapter
 id: 3
 ---
 
-<exercise id="1" title="Processing pipelines" type="slides">
+<exercise id="1" title="Processing pipelines" type="slides,video">
 
-<slides source="chapter3_01_processing-pipelines">
+<slides source="chapter3_01_processing-pipelines" start="23:36" end="26:12">
 </slides>
 
 </exercise>
@@ -79,9 +79,9 @@ full pipeline consisting of `(name, component)` tuples is available as
 
 </exercise>
 
-<exercise id="4" title="Custom pipeline components" type="slides">
+<exercise id="4" title="Custom pipeline components" type="slides,video">
 
-<slides source="chapter3_02_custom-pipeline-components">
+<slides source="chapter3_02_custom-pipeline-components" start="26:235" end="29:05">
 </slides>
 
 </exercise>
@@ -198,9 +198,9 @@ created as the variable `matcher`.
 
 </exercise>
 
-<exercise id="8" title="Extension attributes" type="slides">
+<exercise id="8" title="Extension attributes" type="slides,video">
 
-<slides source="chapter3_03_extension-attributes">
+<slides source="chapter3_03_extension-attributes" start="29:16" end="32:23">
 </slides>
 
 </exercise>
@@ -331,9 +331,9 @@ variable `CAPITALS`.
 
 </exercise>
 
-<exercise id="13" title="Scaling and performance" type="slides">
+<exercise id="13" title="Scaling and performance" type="slides,video">
 
-<slides source="chapter3_04_scaling-performance">
+<slides source="chapter3_04_scaling-performance" start="32:335" end="34:515">
 </slides>
 
 </exercise>

diff --git a/chapters/en/chapter4.md b/chapters/en/chapter4.md
@@ -12,9 +12,9 @@ type: chapter
 id: 4
 ---
 
-<exercise id="1" title="Training and updating models" type="slides">
+<exercise id="1" title="Training and updating models" type="slides,video">
 
-<slides source="chapter4_01_training-updating-models">
+<slides source="chapter4_01_training-updating-models" start="35:02" end="38:495">
 </slides>
 
 </exercise>
@@ -102,9 +102,9 @@ a set of training examples. A list of sentences is available as the variable
 
 </exercise>
 
-<exercise id="5" title="The training loop" type="slides">
+<exercise id="5" title="The training loop" type="slides,video">
 
-<slides source="chapter4_02_training-loop">
+<slides source="chapter4_02_training-loop" start="39:00" end="42:25">
 </slides>
 
 </exercise>
@@ -220,9 +220,9 @@ number of total correct entities the model _should_ have predicted.
 
 </exercise>
 
-<exercise id="9" title="Training best practices" type="slides">
+<exercise id="9" title="Training best practices" type="slides,video">
 
-<slides source="chapter4_03_training-best-practices">
+<slides source="chapter4_03_training-best-practices" start="42:36" end="44:55">
 </slides>
 
 </exercise>
@@ -373,9 +373,9 @@ the problem here.
 
 </exercise>
 
-<exercise id="12" title="Wrapping up" type="slides">
+<exercise id="12" title="Wrapping up" type="slides,video">
 
-<slides source="chapter4_04_wrapping-up">
+<slides source="chapter4_04_wrapping-up" start="45:01" end="47:195">
 </slides>
 
 </exercise>
diff --git a/locale.json b/locale.json
@@ -5,6 +5,7 @@
         "slogan": "A free online course",
         "description": "spaCy is a modern Python library for industrial-strength Natural Language Processing. In this free and interactive online course, you'll learn how to use spaCy to build advanced natural language understanding systems, using both rule-based and machine learning approaches.",
         "bio": "I'm Ines, one of the core developers of spaCy and the co-founder of Explosion. I specialize in modern developer tools for AI, Machine Learning and NLP. I also really love building stuff for the web.",
+        "video": "THduWAnG97k",
         "footerLinks": [
             {
                 "text": "spaCy Website",
@@ -40,7 +41,10 @@
             "launchingDocker": "Launching Docker container on",
             "reconnectingDocker": "Reconnecting to Docker container on",
             "prevChapter": "Previous Chapter",
-            "nextChapter": "Next Chapter"
+            "nextChapter": "Next Chapter",
+            "start": "Start",
+            "video": "Video",
+            "slides": "Slides"
         }
     },
     "de": {
@@ -84,7 +88,10 @@
             "launchingDocker": "Starte Docker-Container auf",
             "reconnectingDocker": "Verbinde mit Docker-Container auf",
             "prevChapter": "Vorheriges Kapitel",
-            "nextChapter": "Nächstes Kapitel"
+            "nextChapter": "Nächstes Kapitel",
+            "start": "Start",
+            "video": "Video",
+            "slides": "Präsentation"
         }
     },
     "es": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
         "gatsby-transformer-sharp": "^2.1.17",
         "juniper-js": "^0.1.0",
         "node-sass": "^4.11.0",
+        "plyr": "^3.6.2",
         "prismjs": "^1.15.0",
         "react": "^16.8.2",
         "react-dom": "^16.8.2",

diff --git a/src/components/button.js b/src/components/button.js
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import classNames from 'classnames'
 
-import { UiTextContext } from '../context'
+import { LocaleContext } from '../context'
 import IconCheck from '../../static/icon_check.svg'
 import classes from '../styles/button.module.sass'
 
@@ -19,7 +19,7 @@ export const Button = ({ Component = 'button', children, onClick, variant, small
 }
 
 export const CompleteButton = ({ completed, toggleComplete, small = true }) => {
-    const uiText = useContext(UiTextContext)
+    const { uiText } = useContext(LocaleContext)
     const buttonClassNames = classNames({
         [classes.completeInactive]: !completed,
         [classes.completeActive]: completed,

diff --git a/src/components/choice.js b/src/components/choice.js
@@ -2,11 +2,11 @@ import React, { useState, useCallback, useContext } from 'react'
 import classNames from 'classnames'
 
 import { Button } from './button'
-import { UiTextContext } from '../context'
+import { LocaleContext } from '../context'
 import classes from '../styles/choice.module.sass'
 
 const Choice = ({ id = '0', children = [] }) => {
-    const uiText = useContext(UiTextContext)
+    const { uiText } = useContext(LocaleContext)
     const [selected, setSelected] = useState(null)
     const [answer, setAnswer] = useState(null)
     const handleAnswer = useCallback(() => setAnswer(selected), [selected])

diff --git a/src/components/code.js b/src/components/code.js
@@ -3,7 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
 
 import { Hint } from './hint'
 import { Button } from './button'
-import { ChapterContext, UiTextContext } from '../context'
+import { ChapterContext, LocaleContext } from '../context'
 import classes from '../styles/code.module.sass'
 
 function getFiles({ allCode }, lang) {
@@ -109,8 +109,8 @@ class CodeBlock extends React.Component {
                             const solutionFile = files[solutionId]
                             const testFile = files[testId]
                             return (
-                                <UiTextContext.Consumer>
-                                    {uiText => (
+                                <LocaleContext.Consumer>
+                                    {({ uiText }) => (
                                         <div className={classes.root} key={this.state.key}>
                                             {Juniper && (
                                                 <Juniper
@@ -167,7 +167,7 @@ class CodeBlock extends React.Component {
                                             </Hint>
                                         </div>
                                     )}
-                                </UiTextContext.Consumer>
+                                </LocaleContext.Consumer>
                             )
                         }}
                     />

diff --git a/src/components/exercise.js b/src/components/exercise.js
@@ -2,14 +2,16 @@ import React, { useRef, useCallback, useContext, useEffect } from 'react'
 import classNames from 'classnames'
 
 import { Button, CompleteButton } from './button'
-import { ChapterContext, UiTextContext } from '../context'
+import { ChapterContext, LocaleContext } from '../context'
 import IconSlides from '../../static/icon_slides.svg'
+import IconVideo from '../../static/icon_video.svg'
 import classes from '../styles/exercise.module.sass'
 
 const Exercise = ({ id, title, type, children }) => {
-    const uiText = useContext(UiTextContext)
+    const { uiText } = useContext(LocaleContext)
     const excRef = useRef()
     const excId = parseInt(id)
+    const types = type ? type.split(',').map(t => t.trim()) : []
     const { activeExc, setActiveExc, completed, setCompleted } = useContext(ChapterContext)
     const isExpanded = activeExc === excId
     const isCompleted = completed.includes(excId)
@@ -31,7 +33,7 @@ const Exercise = ({ id, title, type, children }) => {
     }, [isCompleted, completed, excId])
     const rootClassNames = classNames(classes.root, {
         [classes.expanded]: isExpanded,
-        [classes.wide]: isExpanded && type === 'slides',
+        [classes.wide]: isExpanded && types.includes('slides'),
         [classes.completed]: !isExpanded && isCompleted,
     })
     const titleClassNames = classNames(classes.title, {
@@ -48,7 +50,12 @@ const Exercise = ({ id, title, type, children }) => {
                     </span>
                     {title}
                 </span>
-                {type === 'slides' && <IconSlides className={classes.icon} />}
+                {types.includes('slides') && (
+                    <IconSlides className={classes.icon} width={26} height={26} />
+                )}
+                {types.includes('video') && (
+                    <IconVideo className={classes.icon} width={26} height={26} />
+                )}
             </h2>
             {isExpanded && (
                 <div>