egoist · forresst · Jul 19, 2019
diff --git a/website/docs/fr/README.md b/website/docs/fr/README.md
@@ -0,0 +1,84 @@
+# Introduction à Docute
+
+Le moyen le plus rapide pour créer un site de documentation pour votre projet.
+
+## Qu'est-ce que Docute
+
+Docute est essentiellement un fichier JavaScript qui récupère des fichiers Markdown et les rend sous forme d'une application mono page.
+
+Il est totalement axé sur l'exécution, il n'y a donc aucun composant côté serveur, ce qui signifie également qu'il n'y a pas de processus de construction. Vous avez seulement besoin de créer un fichier HTML et plusieurs documents Markdown et votre site web est presque prêt !
+
+## Comment ça marche
+
+En bref : l'URL est l'API.
+
+Nous récupérons et faisons le rendu du fichier markdown correspondant vers l'URL que vous visitez :
+
+```
+/         => /README.md
+/foo      => /foo.md
+/foo/     => /foo/README.md
+/foo/bar  => /foo/bar.md
+```
+
+## Démarrage rapide
+
+Supposons que vous avez les fichiers suivants dans le dossier `./my-docs` :
+
+```bash
+.
+├── README.md
+└── index.html
+```
+
+Le fichier `index.html` ressemble à ceci :
+
+```html {highlight:[7,'10-16']}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>My Docs</title>
+    <link rel="stylesheet" href="https://unpkg.com/docute@4/dist/docute.css">
+  </head>
+  <body>
+    <div id="docute"></div>
+    <script src="https://unpkg.com/docute@4/dist/docute.js"></script>
+    <script>
+      new Docute({
+        target: '#docute'
+      })
+    </script>
+  </body>
+</html>
+```
+
+Vous pouvez ensuite servir ce dossier en tant que site Web statique sur votre ordinateur en utilisant :
+
+- Node.js: `npm i -g serve && serve .`
+- Python: `python -m SimpleHTTPServer`
+- Golang: `caddy`
+- ..ou quel que soit le serveur web statique
+
+Ensuite, vous pouvez utiliser [sidebar](./options.md#sidebar), [nav](./options.md#nav) ou d'autres [options](./options.md) pour personnaliser le site Web.
+
+Voici un [REPL](https://repl.it/@egoist/docute-starter) où vous pouvez essayer Docute en ligne ou [téléchargez](https://repl.it/@egoist/docute-starter.zip) le pour l'exécuter localement.
+
+## Comparaisons
+
+### VuePress / GitBook / Hexo
+
+Ils génèrent tous du HTML statique lors de la construction, ce qui est bien pour le SEO (référencement).
+
+Si le SEO vous intéresse, vous pouvez utiliser [presite](https://github.com/egoist/presite) pour pré rendre votre site web.
+
+### Docsify
+
+[Docsify](https://docsify.js.org/#/) et Docute sont à peu près les mêmes, mais avec une interface utilisateur et des usages différents.
+
+Docute (60Kb) est 3 fois plus volumineux que Docsify (20 Kb), car nous utilisons Vue, Vue Router et Vuex, alors que Docsify utilise sous le capot du JavaScript.
+
+## Compatibilité des navigateurs
+
+Docute prend en charge tous les navigateurs _ever-green_. Aucun support de IE !
diff --git a/website/docs/fr/builtin-components.md b/website/docs/fr/builtin-components.md
@@ -0,0 +1,206 @@
+# Composants intégrés
+
+Docute est livré avec un ensemble de composants Vue intégrés.
+
+## `<ImageZoom>`
+
+Utilise un effet de zoom de style moyen pour afficher certaines images.
+
+| Prop   | Type      | Par défaut | Description                           |
+| ------ | --------- | ---------- | ------------------------------------- |
+| src    | `string`  | N/A        | URL vers l'image                      |
+| title  | `string`  | N/A        | Titre de l'image                      |
+| alt    | `string`  | N/A        | Texte de remplacement                 |
+| border | `boolean` | `false`    | Affiche une bordure autour de l'image |
+| width  | `string`  | N/A        | Image width                           |
+
+<br>
+
+Exemple :
+
+```markdown
+<ImageZoom 
+  src="https://i.loli.net/2018/09/24/5ba8e878850e9.png" 
+  :border="true" 
+  width="300"
+/>
+```
+
+<ImageZoom src="https://i.loli.net/2018/09/24/5ba8e878850e9.png" :border="true" width="300"/>
+
+## `<Badge>`
+
+Un petit composant d'étiquette.
+
+| Prop     | Type                                                                 | Par défaut | Description                   |
+| -------- | -------------------------------------------------------------------- | ---------- | ----------------------------- |
+| type     | <code>'tip' &#x7C; 'success' &#x7C; 'warning' &#x7C; 'danger'</code> | N/A        | Type de badge                 |
+| color    | `string`                                                             | N/A        | Couleur de fond personnalisée |
+| children | `string`                                                             | N/A        | Texte du badge                |
+
+<br>
+
+Exemple :
+
+```markdown
+- Fonctionnalité 1 <Badge>Badge</Badge>
+- Fonctionnalité 2 <Badge type="tip">Astuce</Badge>
+- Fonctionnalité 3 <Badge type="success">Succès</Badge>
+- Fonctionnalité 4 <Badge type="warning">Attention</Badge>
+- Fonctionnalité 5 <Badge type="danger">Danger</Badge>
+- Fonctionnalité 6 <Badge color="magenta">Couleur personnalisée</Badge>
+```
+
+- Fonctionnalité 1 <Badge>Badge</Badge>
+- Fonctionnalité 2 <Badge type="tip">Astuce</Badge>
+- Fonctionnalité 3 <Badge type="success">Succès</Badge>
+- Fonctionnalité 4 <Badge type="warning">Attention</Badge>
+- Fonctionnalité 5 <Badge type="danger">Danger</Badge>
+- Fonctionnalité 6 <Badge color="magenta">Couleur personnalisée</Badge>
+
+## `<Note>`
+
+Blocs notes colorés pour accentuer une partie de votre page.
+
+| Prop     | Type                                                                 | Par défaut          | Description                                       |
+| -------- | -------------------------------------------------------------------- | ------------------- | ------------------------------------------------- |
+| type     | <code>'tip' &#x7C; 'warning' &#x7C; 'danger' &#x7C; 'success'</code> | N/A                 | Type de note                                      |
+| label    | `string` `boolean`                                                   | La valeur de `type` | Custom note label text, use `false` to hide label |
+| children | `string`                                                             | N/A                 | Contenu de la note                                |
+
+<br>
+
+Exemples :
+
+```markdown
+<Note>
+
+Ceci est une note qui détaille quelque chose d'important.<br>
+[Un lien vers des informations utiles.](https://docute.org)
+
+</Note>
+
+<!-- Tip Note -->
+<Note type="tip" label="Remarque ">
+
+Ceci est une astuce pour quelque chose de possible.
+
+</Note>
+
+<!-- Warning Note -->
+<Note type="warning" label="Attention ">
+
+Ceci est un avertissement pour quelque chose de très important.
+
+</Note>
+
+<!-- Danger Note -->
+<Note type="danger" label="Danger ">
+
+C’est un danger pour lequel il faut agir.
+
+</Note>
+```
+
+<Note>
+
+Ceci est une note qui détaille quelque chose d'important.<br>
+[Un lien vers des informations utiles.](https://docute.org)
+
+</Note>
+
+<!-- Tip Note -->
+<Note type="tip" label="Remarque ">
+
+Ceci est une astuce pour quelque chose de possible.
+
+</Note>
+
+<!-- Warning Note -->
+<Note type="warning" label="Attention ">
+
+Ceci est un avertissement pour quelque chose de très important.
+
+</Note>
+
+<!-- Danger Note -->
+<Note type="danger" label="Danger ">
+
+C’est un danger pour lequel il faut agir.
+
+</Note>
+
+## `<Gist>`
+
+Intègre un [Gist de GitHub](https://gist.github.com/) dans vos documents Markdown.
+
+| Prop | Type     | Default | Description |
+| ---- | -------- | ------- | ----------- |
+| id   | `string` | N/A     | ID du Gist  |
+
+Exemple :
+
+```markdown
+<Gist id="71b8002ecd62a68fa7d7ee52011b2c7c" />
+```
+
+<Gist id="71b8002ecd62a68fa7d7ee52011b2c7c" />
+
+## `<docute-select>`
+
+Un composant `<select>` personnalisé :
+
+<!-- prettier-ignore -->
+````vue
+<docute-select :value="favoriteFruit" @change="handleChange">
+  <option value="pomme" :selected="favoriteFruit === 'pomme'">Pomme</option>
+  <option value="banane" :selected="favoriteFruit === 'banane'">Banane</option>
+  <option value="pastèque" :selected="favoriteFruit === 'pastèque'">Pastèque</option>
+</docute-select>
+
+Ton fruit préféré : {{ favoriteFruit }}
+
+```js {mixin: true}
+module.exports = { 
+  data() { 
+    return { 
+      favoriteFruit: 'banane' 
+    }
+  }, 
+  methods: {
+    handleChange(value) { 
+      this.favoriteFruit = value
+    } 
+  }
+}
+```
+````
+
+<docute-select @change="handleChange" :value="favoriteFruit">
+  <option value="pomme" :selected="favoriteFruit === 'pomme'">Pomme</option>
+  <option value="banane" :selected="favoriteFruit === 'banane'">Banane</option>
+  <option value="pastèque" :selected="favoriteFruit === 'pastèque'">Pastèque</option>
+</docute-select>
+
+Ton fruit préféré : {{ favoriteFruit }}
+
+```js {mixin: true}
+{
+  data() {
+    return {
+      favoriteFruit: 'banane'
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.favoriteFruit = value
+    }
+  }
+}
+```
+
+## `<v-style>` `<v-script>`
+
+Un hack pour utiliser les balises `<style>` et `<script>` avec le template Vue.
+
+En général, vous n'avez pas besoin de les utiliser directement, car nous convertissons automatiquement les balises `<style>` et `<script>` du Markdown en ces composants.
diff --git a/website/docs/fr/credits.md b/website/docs/fr/credits.md
@@ -0,0 +1,12 @@
+# Crédits
+
+L'interface utilisateur de Docute s'inspire de ces sites :
+
+- [Vue.js](https://vuejs.org)
+- [Docs de ZEIT](https://zeit.co/docs)
+
+Docute est un projet gratuit et open-source qui repose sur de nombreux autres projets open-source, tels que :
+
+<ul>
+  <li v-for="dep in deps" :key="dep">{{ dep }}</li>
+</ul>