Relecture de examples/* (#22)

* Partie exemple revue Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * @rspt review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * @forresst review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
vuejs-fr · Oct 3, 2017 · aa5a431 · aa5a431
1 parent e5df56b
commit aa5a431
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 140 deletions.
diff --git a/en/examples/async-data.md b/en/examples/async-data.md
@@ -1,8 +1,6 @@
 ---
-title: Async Data (En)
-description: Async Data example with Nuxt.js
+title: Données asynchrones
+description: Exemple de données asynchrones avec Nuxt.js
 github: async-data
 documentation: /guide/async-data
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+---
diff --git a/en/examples/auth-routes.md b/en/examples/auth-routes.md
@@ -1,45 +1,47 @@
 ---
-title: Auth Routes (En)
-description: Authenticated routes example with Nuxt.js
+title: Authentification de routes
+description: Exemple d'authentification de routes avec Nuxt.js
 github: auth-routes
 livedemo: https://nuxt-auth-routes.gomix.me
 liveedit: https://gomix.com/#!/project/nuxt-auth-routes
 ---
 
 # Documentation
 
-> Nuxt.js can be used to create authenticated routes easily.
+> Nuxt.js peut être utilisé pour créer facilement des routes authentifiées.
 
-## Using Express and Sessions
+## Utilisation de Express et des sessions
 
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically.</p>
+Pour ajouter la fonctionnalité de sessions dans notre application, nous utiliserons `express` et `express-session`. Pour cela, nous devons utiliser Nuxt.js de manière programmatique.
+
+Premièrement, nous installons les dépendances :
 
-First, we install the dependencies:
 ```bash
 yarn add express express-session body-parser whatwg-fetch
 ```
 
-*We will talk about `whatwg-fetch` later.*
+*Nous parlerons de `whatwg-fetch` plus loin.*
+
+Puis nous créons notre `server.js` :
 
-Then we create our `server.js`:
 ```js
 const { Nuxt, Builder } = require('nuxt')
 const bodyParser = require('body-parser')
 const session = require('express-session')
 const app = require('express')()
 
-// Body parser, to access req.body
+// Analyse du corps de requête pour y accéder via `req.body`
 app.use(bodyParser.json())
 
-// Sessions to create req.session
+// Mise en place de sessions pour y accéder via `req.session`
 app.use(session({
   secret: 'super-secret-key',
   resave: false,
   saveUninitialized: false,
   cookie: { maxAge: 60000 }
 }))
 
-// POST /api/login to log in the user and add him to the req.session.authUser
+// Accès à `/api/login` en POST pour connecter l'utilisateur et l'ajouter à `req.session.authUser`
 app.post('/api/login', function (req, res) {
   if (req.body.username === 'demo' && req.body.password === 'demo') {
     req.session.authUser = { username: 'demo' }
@@ -48,16 +50,16 @@ app.post('/api/login', function (req, res) {
   res.status(401).json({ error: 'Bad credentials' })
 })
 
-// POST /api/logout to log out the user and remove it from the req.session
+// Accès à `/api/logout` en POST pour déconnecter l'utilisateur et le retirer de `req.session`
 app.post('/api/logout', function (req, res) {
   delete req.session.authUser
   res.json({ ok: true })
 })
 
-// We instantiate Nuxt.js with the options
+// Nous instancions Nuxt.js avec les options
 const isProd = process.env.NODE_ENV === 'production'
 const nuxt = new Nuxt({ dev: !isProd })
-// No build in production
+// Pas de build en production
 if (!isProd) {
   const builder = new Builder(nuxt)
   builder.build()
@@ -67,7 +69,8 @@ app.listen(3000)
 console.log('Server is listening on http://localhost:3000')
 ```
 
-And we update our `package.json` scripts:
+Et nous modifions nos scripts dans `package.json` :
+
 ```json
 // ...
 "scripts": {
@@ -77,24 +80,25 @@ And we update our `package.json` scripts:
 }
 // ...
 ```
-Note: You'll need to run `npm install --save-dev cross-env` for the above example to work. If you're *not* developing on Windows you can leave cross-env out of your `start` script and set `NODE_ENV` directly.
 
-## Using the store
+Note : vous devrez exécuter `npm install --save-dev cross-env` afin de faire fonctionner l'exemple précédent. Si vous n'êtes pas en train de développer sur Windows, vous pouvez laisser cross-env en dehors de votre script `start` et définir `NODE_ENV` directement.
+
+## Utilisation du store
 
-We need a global state to let our application know if the user is connected **across the pages**.
+Nous avons besoin d'un état global pour informer notre application si l'utilisateur reste **connecté entre les pages**.
 
-To let Nuxt.js use Vuex, we create a `store/index.js` file:
+Pour laisser Nuxt.js utiliser Vuex, nous créons un fichier `store/index.js`:
 
 ```js
 import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-// Polyfill for window.fetch()
+// Polyfill pour `window.fetch()`
 require('whatwg-fetch')
 
-const store = () => new Vuex.Store({
+const store = new Vuex.Store({
 
   state: {
     authUser: null
@@ -115,16 +119,17 @@ const store = () => new Vuex.Store({
 export default store
 ```
 
-1. We import `Vue` and `Vuex` (included in Nuxt.js) and we tell Vue to use Vuex to let us use `$store` in our components
-2. We `require('whatwg-fetch')` to polyfill the `fetch()` method across all browsers (see [fetch repo](https://github.com/github/fetch))
-3. We create our `SET_USER` mutation which will set the `state.authUser` to the connected user
-4. We export our store instance to Nuxt.js can inject it to our main application
+1. Nous importons `Vue` et `Vuex` (inclus dans Nuxt.js) et nous indiquons à Vue d'utiliser Vuex afin de pouvoir utiliser `$store` dans nos composants.
+2. Nous utilisons `require('whatwg-fetch')` afin d'obtenir un polyfill pour la méthode `fetch()` pour tous les navigateurs (consultez le [dépôt fetch](https://github.com/github/fetch)).
+3. Nous créons notre mutation `SET_USER` qui va instancier `state.authUser` avec l'utilisateur connecté.
+4. Nous exportons notre instance du *store* vers Nuxt.js afin qu'il puisse l'injecter dans notre application principale.
 
-### nuxtServerInit() action
+### Fonction nuxtServerInit()
 
-Nuxt.js will call a specific action called `nuxtServerInit` with the context in argument, so when the app will be loaded, the store will be already filled with some data we can get from the server.
+Nuxt.js appellera une action spécifique nommée `nuxtServerInit` avec le contexte comme argument. Ainsi, lorsque l'application sera chargée, le store sera déjà rempli avec certaines données que nous pouvons obtenir du serveur.
+
+Dans notre `store/index.js`, nous pouvons ajouter l'action `nuxtServerInit` :
 
-In our `store/index.js`, we can add the `nuxtServerInit` action:
 ```js
 nuxtServerInit ({ commit }, { req }) {
   if (req.session && req.session.authUser) {
@@ -133,18 +138,19 @@ nuxtServerInit ({ commit }, { req }) {
 }
 ```
 
-To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with:
+Pour rendre la méthode de données asynchrone, Nuxt.js vous offre différents moyens, choisissez celui avec lequel vous êtes le plus à l'aise :
+
+1. Retourner une `Promise`, Nuxt.js attendra la résolution de la promesse avant d'afficher le composant.
+2. En utilisant [`async` / `await`](https://github.com/lukehoban/ecmascript-asyncawait) ([en savoir plus](https://zeit.co/blog/async-and-await)).
 
-1. returning a `Promise`, nuxt.js will wait for the promise to be resolved before rendering the component.
-2. Using the [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) ([learn more about it](https://zeit.co/blog/async-and-await))
+### L'action login()
 
-### login() action
+Nous ajoutons une action `login` qui sera appelée à partir de nos composants de pages pour connecter l'utilisateur :
 
-We add a `login` action which will be called from our pages component to log in the user:
 ```js
 login ({ commit }, { username, password }) {
   return fetch('/api/login', {
-    // Send the client cookies to the server
+    // Envoie les cookies client au serveur
     credentials: 'same-origin',
     method: 'POST',
     headers: {
@@ -168,12 +174,12 @@ login ({ commit }, { username, password }) {
 }
 ```
 
-### logout() method
+### La méthode logout()
 
 ```js
 logout ({ commit }) {
   return fetch('/api/logout', {
-    // Send the client cookies to the server
+    // Envoie les cookies au serveur
     credentials: 'same-origin',
     method: 'POST'
   })
@@ -183,24 +189,25 @@ logout ({ commit }) {
 }
 ```
 
-## Pages components
+## Composants de pages
+
+Ensuite, nous pouvons utiliser `$store.state.authUser` dans nos composants de pages pour vérifier si l'utilisateur est connecté ou non dans notre application.
 
-Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not.
+### Rediriger l'utilisateur s'il n'est pas connecté
 
-### Redirect user if not connected
+Ajoutons une route `/secret` dont le contenu ne peut être vu que par un utilisateur connecté :
 
-Let's add a `/secret` route where only the connected user can see its content:
 ```html
 <template>
   <div>
-    <h1>Super secret page</h1>
-    <router-link to="/">Back to the home page</router-link>
+    <h1>Page super secrète</h1>
+    <router-link to="/">Retour à l'accueil</router-link>
   </div>
 </template>
 
 <script>
 export default {
-  // we use fetch() because we do not need to set data to this component
+  // Nous utilisons`fetch()` car nous n'avons pas besoin d'associer les données à ce composant
   fetch ({ store, redirect }) {
     if (!store.state.authUser) {
       return redirect('/')
@@ -210,4 +217,4 @@ export default {
 </script>
 ```
 
-We can see in the `fetch` method that we call `redirect('/')` when our user is not connected.
+Nous pouvons voir dans la méthode `fetch` que nous appelons `redirect('/')` lorsque notre utilisateur n'est pas connecté.
diff --git a/en/examples/cached-components.md b/en/examples/cached-components.md
@@ -1,8 +1,6 @@
 ---
-title: Cached Components (En)
-description: Cached Components example with Nuxt.js
+title: Composants en cache
+description: Exemple de composants mis en cache avec Nuxt.js
 github: cached-components
 documentation: /api/configuration-cache
 ---
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
diff --git a/en/examples/custom-loading.md b/en/examples/custom-loading.md
@@ -1,9 +1,7 @@
 ---
-title: Custom Loading Component (En)
-description: Custom Loading Component example with Nuxt.js
+title: Composant de chargement personnalisé
+description: Exemple de composant de chargement personnalisé avec Nuxt.js
 github: custom-loading
 livedemo: https://custom-loading.nuxtjs.org
 documentation: /api/configuration-loading
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+---
diff --git a/en/examples/custom-routes.md b/en/examples/custom-routes.md
@@ -1,9 +1,7 @@
 ---
-title: Custom Routes (En)
-description: Custom Routes example with Nuxt.js
+title: Routes personnalisées
+description: Exemple de routes personnalisées avec Nuxt.js
 github: custom-routes
 livedemo: https://custom-routes.nuxtjs.org
-documentation: /guide/routing#dynamic-routes
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+documentation: /guide/routing#routes-dynamiques
+---
diff --git a/en/examples/global-css.md b/en/examples/global-css.md
@@ -1,9 +1,7 @@
 ---
-title: Global CSS (En)
-description: Global CSS example with Nuxt.js
+title: CSS global
+description: Exemple de CSS global avec Nuxt.js
 github: global-css
 livedemo: https://global-css.nuxtjs.org
 documentation: /api/configuration-css
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+---
diff --git a/en/examples/hello-world.md b/en/examples/hello-world.md
@@ -1,11 +1,9 @@
 ---
-title: Hello World (En)
-description: Hello World example with Nuxt.js
+title: Hello World
+description: Exemple de Hello World avec Nuxt.js
 github: hello-world
 youtube: https://www.youtube.com/embed/kmf-p-pTi40
 livedemo: https://hello-world.nuxtjs.org
 liveedit: https://gomix.com/#!/project/nuxt-hello-world
-documentation: /guide/installation#starting-from-scratch
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+documentation: /guide/installation#commencer-depuis-z-ro
+---
diff --git a/en/examples/i18n.md b/en/examples/i18n.md
@@ -1,9 +1,7 @@
 ---
-title: Internationalization (i18n) (En)
-description: Internationalization (i18n) example with Nuxt.js
+title: Internationalisation (i18n)
+description: Exemple d'internationalisation (i18n) avec Nuxt.js
 github: i18n
 livedemo: https://i18n.nuxtjs.org
 documentation: /guide/routing#middleware
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+---
diff --git a/en/examples/layouts.md b/en/examples/layouts.md
@@ -1,10 +1,8 @@
 ---
-title: Layouts (En)
-description: Layouts example with Nuxt.js
+title: Mises en page
+description: Exemple de mises en page avec Nuxt.js
 github: custom-layouts
 livedemo: https://nuxt-custom-layouts.gomix.me/
 liveedit: https://gomix.com/#!/project/nuxt-custom-layouts
-documentation: /guide/views#layouts
----
-
-<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p>
+documentation: /guide/views#mises-en-page
+---
diff --git a/en/examples/menu.json b/en/examples/menu.json
@@ -1,33 +1,33 @@
 [
   {
-    "title": "Essentiel",
+    "title": "Essentiels",
     "links": [
-      { "name": "Hello world (En)", "to": "" },
-      { "name": "SEO HTML Head (En)", "to": "/seo-html-head" }
+      { "name": "Hello World", "to": "" },
+      { "name": "Entête HTML SEO", "to": "/seo-html-head" }
     ]
   },
   {
     "title": "Personnalisation",
     "links": [
-      { "name": "Cached Components (En)", "to": "/cached-components" },
-      { "name": "Custom Loading (En)", "to": "/custom-loading" },
-      { "name": "Custom Routes (En)", "to": "/custom-routes" },
-      { "name": "Global CSS (En)", "to": "/global-css" },
-      { "name": "Layouts (En)", "to": "/layouts" },
-      { "name": "Middleware (En)", "to": "/middleware" },
-      { "name": "Nested Routes (En)", "to": "/nested-routes" },
-      { "name": "Plugins (En)", "to": "/plugins" },
-      { "name": "Routes transitions (En)", "to": "/routes-transitions" }
+      { "name": "Composants en cache", "to": "/cached-components" },
+      { "name": "Composant de chargement personnalisé", "to": "/custom-loading" },
+      { "name": "Routes personnalisées", "to": "/custom-routes" },
+      { "name": "CSS global", "to": "/global-css" },
+      { "name": "Mises en page (layouts)", "to": "/layouts" },
+      { "name": "Middleware", "to": "/middleware" },
+      { "name": "Routes imbriquées", "to": "/nested-routes" },
+      { "name": "Plugins", "to": "/plugins" },
+      { "name": "Transitions de routes", "to": "/routes-transitions" }
     ]
   },
   {
-    "title": "Avancées",
+    "title": "Avancé",
     "links": [
-      { "name": "Async Data (En)", "to": "/async-data" },
-      { "name": "Auth Routes (En)", "to": "/auth-routes" },
-      { "name": "Vuex Store (En)", "to": "/vuex-store" },
-      { "name": "i18n (En)", "to": "/i18n" },
-      { "name": "Testing (En)", "to": "/testing" }
+      { "name": "Données asynchrones", "to": "/async-data" },
+      { "name": "Authentification de routes", "to": "/auth-routes" },
+      { "name": "Store Vuex", "to": "/vuex-store" },
+      { "name": "i18n", "to": "/i18n" },
+      { "name": "Tests", "to": "/testing" }
     ]
   }
 ]