docs: added Scrimba lessons (#1512)

Author: perborgen

docs/.vuepress/override.styl

@@ -0,0 +1,32 @@
+.scrimba
+  background-color #e7ecf3
+  padding 1em 1.25em
+  border-radius 2px
+  color #486491
+  position relative
+  margin-top: 16px
+  a
+    color #486491 !important
+    position relative
+    padding-left 36px
+    &:before
+      content ''
+      position absolute
+      display block
+      width 30px
+      height 30px
+      top -5px
+      left -4px
+      border-radius 50%
+      background-color #73abfe
+    &:after
+      content ''
+      position absolute
+      display block
+      width 0
+      height 0
+      top 5px
+      left 8px
+      border-top 5px solid transparent
+      border-bottom 5px solid transparent
+      border-left 8px solid #fff

docs/README.md

@@ -54,6 +54,8 @@ In addition, by defining and separating the concepts involved in state managemen
 
 This is the basic idea behind Vuex, inspired by [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) and [The Elm Architecture](https://guide.elm-lang.org/architecture/). Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates.
 
+If you want to learn Vuex in an interactive way you can check out this [Vuex course on Scrimba](https://scrimba.com/g/gvuex), which gives you a mix of screencast and code playground that you can pause and play around with anytime.
+
 ![vuex](/vuex.png)
 
 ### When Should I Use It?

docs/fr/README.md

@@ -52,6 +52,8 @@ De plus, en définissant et en séparant les concepts impliqués dans la gestion
 
 Voilà l'idée de base derrière Vuex, inspiré par [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) et [l'architecture Elm](https://guide.elm-lang.org/architecture/). À l'inverse des autres modèles, Vuex est aussi une bibliothèque d'implémentation conçue spécialement pour Vue.js afin de bénéficier de son système de réactivité granulaire pour des modifications efficaces.
 
+Si vous voulez apprendre Vuex de manière interactive, jetez un oeil à ce [cours sur Vuex sur Scrimba.](https://scrimba.com/g/gvuex)
+
 ![vuex](/vuex.png)
 
 ### Quand l'utiliser ?

docs/fr/guide/README.md

@@ -1,5 +1,7 @@
 # Pour commencer
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cMPa2Uk" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 Au cœur de chaque application Vuex, il y a la **zone de stockage (« store »)**. Un « store » est tout simplement un conteneur avec l'**état (« state »)** de votre application. Il y a deux choses qui différencient un store Vuex d'un simple objet global :
 
 1. Les stores Vuex sont réactifs. Quand les composants Vue y récupèrent l'état, ils se mettront à jour de façon réactive et efficace si l'état du store a changé.

docs/fr/guide/actions.md

@@ -1,5 +1,7 @@
 # Actions
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/c6ggR3cG" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 Les actions sont similaires aux mutations, à la différence que :
 
 - Au lieu de modifier l'état, les actions actent des mutations.

docs/fr/guide/forms.md

@@ -1,5 +1,7 @@
 # Gestion des formulaires
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cqKRgEC9" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 Lorsque l'on utilise Vuex en mode strict, il peut être compliqué d'utiliser `v-model` sur une partie de l'état qui appartient à Vuex :
 
 ``` html

docs/fr/guide/getters.md

@@ -1,5 +1,7 @@
 # Accesseurs
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/c2Be7TB" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 Parfois nous avons besoin de calculer des valeurs basées sur l'état du store, par exemple pour filtrer une liste d'éléments et les compter :
 
 ``` js

docs/fr/guide/modules.md

@@ -1,5 +1,7 @@
 # Modules
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cqKK4psq" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 Du fait de l'utilisation d'un arbre d'état unique, tout l'état de notre application est contenu dans un seul et même gros objet. Cependant, au fur et à mesure que notre application grandit, le store peut devenir très engorgé.
 
 Pour y remédier, Vuex nous permet de diviser notre store en **modules**. Chaque module peut contenir ses propres états, mutations, actions, accesseurs. Il peut même contenir ses propres modules internes.

docs/fr/guide/mutations.md

@@ -1,5 +1,7 @@
 # Mutations
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/ckMZp4HN" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 La seule façon de vraiment modifier l'état dans un store Vuex est d'acter une mutation. Les mutations Vuex sont très similaires aux évènements : chaque mutation a un **type** sous forme de chaine de caractères et un **gestionnaire**. La fonction de gestion est en charge de procéder aux véritables modifications de l'état, et elle reçoit l'état en premier argument :
 
 ``` js

docs/fr/guide/plugins.md

@@ -1,5 +1,7 @@
 # Plugins
 
+<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cvp8ZkCR" target="_blank" rel="noopener noreferrer">Essayez cette partie sur Scrimba (EN)</a></div>
+
 Les stores Vuex prennent une option `plugins` qui expose des hooks pour chaque mutation. Un plugin Vuex est simplement une fonction qui reçoit un store comme unique argument :
 
 ``` js