feat: add tutoriel section

app/router.scrollBehavior.js

@@ -0,0 +1,80 @@
+<% if (router.scrollBehavior) { %>
+<%= isTest ? '/* eslint-disable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, space-before-function-paren  */' : '' %>
+export default <%= serializeFunction(router.scrollBehavior) %>
+  <%= isTest ? '/* eslint-enable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, space-before-function-paren  */' : '' %>
+    <% } else { %>import { getMatchedComponents } from './utils'
+
+  if (process.client) {
+    if ('scrollRestoration' in window.history) {
+      window.history.scrollRestoration = 'manual'
+
+      // reset scrollRestoration to auto when leaving page, allowing page reload
+      // and back-navigation from other pages to use the browser to restore the
+      // scrolling position.
+      window.addEventListener('beforeunload', () => {
+        window.history.scrollRestoration = 'auto'
+      })
+
+      // Setting scrollRestoration to manual again when returning to this page.
+      window.addEventListener('load', () => {
+        window.history.scrollRestoration = 'manual'
+      })
+    }
+  }
+
+export default function (to, from, savedPosition) {
+    // if the returned position is falsy or an empty object,
+    // will retain current scroll position.
+    let position = false
+
+    // if no children detected and scrollToTop is not explicitly disabled
+    const Pages = getMatchedComponents(to)
+    if (
+      Pages.length < 2 &&
+      Pages.every(Page => Page.options.scrollToTop !== false)
+    ) {
+      // scroll to the top of the page
+      position = { x: 0, y: 0 }
+    } else if (Pages.some(Page => Page.options.scrollToTop)) {
+      // if one of the children has scrollToTop option set to true
+      position = { x: 0, y: 0 }
+    }
+
+    // savedPosition is only available for popstate navigations (back button)
+    if (savedPosition) {
+      position = savedPosition
+    }
+
+    const nuxt = window.<%= globals.nuxt %>
+
+    // triggerScroll is only fired when a new component is loaded
+    if (to.path === from.path && to.hash !== from.hash) {
+      nuxt.$nextTick(() => nuxt.$emit('triggerScroll'))
+    }
+
+    return new Promise((resolve) => {
+      // wait for the out transition to complete (if necessary)
+      nuxt.$once('triggerScroll', () => {
+        // coords will be used if no selector is provided,
+        // or if the selector didn't match any element.
+        if (to.hash) {
+          let hash = to.hash
+          // CSS.escape() is not supported with IE and Edge.
+          if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
+            hash = '#' + window.CSS.escape(hash.substr(1))
+          }
+          try {
+            if (document.querySelector(hash)) {
+              // scroll to anchor by returning the selector
+              position = { selector: hash, offset: {x:0, y: 100} }
+            }
+          } catch (e) {
+          <%= isTest ? '// eslint-disable-next-line no-console' : '' %>
+              console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
+          }
+        }
+        resolve(position)
+      })
+    })
+  }
+<% } %>

assets/css/_markdown-style.scss

@@ -11,6 +11,20 @@
     font-size: 1.3em;
   }
 
+  h2 {
+    margin-bottom: 10px;
+    margin-top: 30px;
+
+    ~ h3 {
+      margin-top: 20px;
+    }
+  }
+
+
+  h3 {
+    font-size: .975em;
+  }
+
   img {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -96,7 +110,11 @@
   }
 
   a {
-    color: $NIGHT_BLUE
+    color: $NIGHT_BLUE;
+
+    &.external-link {
+      color: $TERNARY_COLOR
+    }
   }
 
   blockquote {

components/Editor/RichTextEditor.vue

@@ -124,6 +124,14 @@
 
           <div class="menubar__button__wrapper">
 
+            <button
+              class="menubar__button menubar__button--with-icon"
+              :class="{ 'button--grey-light-reverse': isActive.code_block(), 'button--grey-light': !isActive.code_block() }"
+              @click="commands.code_block"
+              title="Bloc de code"
+            >
+              <Icon type="codeBlock" :theme="isActive.code_block() ? 'theme--white' : 'theme--grey-light'"/>
+            </button>
 
             <button
               class="menubar__button menubar__button--with-icon"
@@ -134,14 +142,6 @@
               <Icon type="codeBasic" :theme="isActive.code() ? 'theme--white' : 'theme--grey-light'"/>
             </button>
 
-            <button
-              class="menubar__button menubar__button--with-icon"
-              :class="{ 'button--grey-light-reverse': isActive.code_block(), 'button--grey-light': !isActive.code_block() }"
-              @click="commands.code_block"
-              title="Bloc de code"
-            >
-              <Icon type="codeBlock" :theme="isActive.code_block() ? 'theme--white' : 'theme--grey-light'"/>
-            </button>
 
           </div>
 

components/Menu.vue

@@ -35,24 +35,31 @@
             </div>
             Bibliothèque
           </nuxt-link>
+
+          <nuxt-link class="cta-link cta-link-with-arrow" tag="li" :class="isTutorialLink" to="/tutoriel/introduction">
+            <div class="logo-link-wrapper">
+              <Icon type="info" theme="theme--white"/>
+            </div>
+            Tutoriel
+          </nuxt-link>
         </ul>
 
         <template v-if="isAuthenticated && (role === 'admin' || role === 'super_admin')">
           <span>Administration</span>
           <ul>
-            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" to="/administration/exercices">
+            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" :class="isAdministrationExerciseLink" to="/administration/exercices">
               <div class="logo-link-wrapper">
                 <Icon type="document" theme="theme--white"/>
               </div>
               Exercices
             </nuxt-link>
-            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" to="/administration/categories">
+            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" :class="isAdministrationCategoryLink" to="/administration/categories">
               <div class="logo-link-wrapper">
                 <Icon type="bookmark" theme="theme--white"/>
               </div>
               Catégories
             </nuxt-link>
-            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" to="/administration/tags">
+            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" :class="isAdministrationTagLink" to="/administration/tags">
               <div class="logo-link-wrapper">
                 <Icon type="tags" theme="theme--white"/>
               </div>
@@ -70,13 +77,13 @@
         <template v-if="isAuthenticated">
           <span>Gestion</span>
           <ul>
-            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" to="/gestion/mes-exercices">
+            <nuxt-link class="cta-link cta-link-with-arrow" :class="isGestionLink" tag="li" to="/gestion/mes-exercices">
               <div class="logo-link-wrapper">
                 <Icon type="document" theme="theme--white"/>
               </div>
               Mes exercices
             </nuxt-link>
-            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" to="/gestion/mes-favoris">
+            <nuxt-link class="cta-link cta-link-with-arrow" :class="isFavoriteLink" tag="li" to="/gestion/mes-favoris">
               <div class="logo-link-wrapper">
                 <Icon type="star" theme="theme--white"/>
               </div>
@@ -138,6 +145,42 @@
       return this.$auth.user.role
     }
 
+    get isAdministrationExerciseLink() {
+      const regex = new RegExp(/^(\/administration\/exercices)/gm);
+      if(this.$route.path.match(regex)) return 'nuxt-link-exact-active';
+      return '';
+    }
+
+    get isAdministrationTagLink() {
+      const regex = new RegExp(/^(\/administration\/tags)/gm);
+      if(this.$route.path.match(regex)) return 'nuxt-link-exact-active';
+      return '';
+    }
+
+    get isAdministrationCategoryLink() {
+      const regex = new RegExp(/^(\/administration\/categories)/gm);
+      if(this.$route.path.match(regex)) return 'nuxt-link-exact-active';
+      return '';
+    }
+
+    get isGestionLink() {
+      const regex = new RegExp(/^(\/gestion\/mes-exercices)/gm);
+      if(this.$route.path.match(regex)) return 'nuxt-link-exact-active';
+      return '';
+    }
+
+    get isFavoriteLink() {
+      const regex = new RegExp(/^(\/gestion\/mes-favoris)/gm);
+      if(this.$route.path.match(regex)) return 'nuxt-link-exact-active';
+      return '';
+    }
+
+    get isTutorialLink() {
+      const regex = new RegExp(/^(\/tutoriel)/gm);
+      if(this.$route.path.match(regex)) return 'nuxt-link-exact-active';
+      return '';
+    }
+
     async logout() {
       this.$accessor.favorites.RESET();
       this.$accessor.historical.RESET();

components/Panel/Item/FavoritePanel.vue

@@ -130,6 +130,8 @@
       searchRequest.data = searchCriterion;
 
       await this.$accessor.exercises.fetch(searchRequest);
+
+      this.$emit('fetch');
     }
   }
 </script>

components/Symbols/Icon.vue

@@ -42,6 +42,7 @@
       bookmark: () => import('./library/BookmarkSymbol.vue'),
       mail: () => import('./library/MailSymbol.vue'),
       clock: () => import('./library/ClockSymbol.vue'),
+      info: () => import('./library/InfoSymbol.vue'),
       book: () => import('./library/BookSymbol.vue')
     }
   })

components/Symbols/library/InfoSymbol.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path :class="themeStroke" d='M248,64C146.39,64,64,146.39,64,248s82.39,184,184,184,184-82.39,184-184S349.61,64,248,64Z' style='fill:none;stroke-miterlimit:10;stroke-width:32px'/><polyline :class="themeStroke" points='220 220 252 220 252 336' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line :class="themeStroke" x1='208' y1='340' x2='296' y2='340' style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path :class="theme" d='M248,130a26,26,0,1,0,26,26A26,26,0,0,0,248,130Z'/></svg>
+</template>
+
+<script lang="ts">
+  import Symbol from "../Symbol.vue";
+  import {Component, Mixins} from 'vue-property-decorator'
+
+  @Component
+  export default class InfoSymbol extends Mixins(Symbol) {}
+</script>