Resolve "doc: how to creat new page"

Closes #11 (closed)

doc_site_froggit/comment_creer_une_nouvelle_page.md

+# Création des pages
+
+Docusaurus permet de créer des pages de façons différentes, en Markdown (`.md`), en JavaScript (`.js`).
+
+- Si nous n'avons pas besoin d'un layout spécifique pour la page à créer, nous créons une page en Markdown.
+
+- Si, au contraire, nous avons besoin d'un Layout spécifique ou de charger un certains styles (CSS) pour notre nouvelle page, alors nous créons une page en JavaScript (`.js`).
+
+- Enfin, nous pouvons également utiliser le MDX (une évolution du Markdown). Le MDX utilise la simplicité du Markdown, tout en permettant d'utiliser du JSX, d'importer des composants React. Son utilisation permet d'utiliser la coloration syntaxique, les éditeurs de code en direct... 
+Voir doc [MDX](https://mdxjs.com/)
+
+L'utilisation du Markdown offre un meilleur retour sur investissement car il est beaucoup plus simple et rapide à écrire.
+
+## Créer une page en JavaScript
+
+Pour créer une page en JavaScript, nous allons pouvoir nous appuyer sur la syntaxe utilisé par React, avec le JSX, qui va nous donner un code plus simple à écrire, à maintenir. Mais ceci demande des connaissances approfondies en JavaScript, notament avec une maîtise de l'ES6.
+
+1. Dans le dossier `pages`, créer un fichier `/src/pages/new-page-react.js`
+
+2. Y créer une fonction qui va permettre de rendre une vue:
+
+```/src/pages/new-page-react.js
+import React from 'react';
+import Layout from '@theme/Layout';
+
+function Hello() {
+  return (
+    <Layout title="Bonjour">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '50vh',
+          fontSize: '20px',
+        }}>
+        <p>
+          Editez <code>pages/new-page-react.js</code> et sauvegardez pour recharger.
+        </p>
+      </div>
+    </Layout>
+  );
+}
+export default Hello;
+```
+3. Gérer les imports, exports et le style:
+
+Nous devons importer un composant de style, le composant Layout de mise en page qui va inclure d'autres composants tels que la navbar, le footer.
+
+```/src/pages/new-page-react.js
+import React from 'react';
+import Layout from '@theme/Layout';
+    ...
+    <Layout title="Bonjour">
+        {contenu de la page} 
+    ...
+    </Layout>
+  );
+}
+export default Hello;
+```
+Docusaurus génère un composant Layout par défault.
+
+Il ne faudra pas oublier d'importer ce composant Layout, et enfin d'exporter la fonction que nous avons créé dans cette page. 
+
+Il nous suffit alors de lancer le serveur de développement pour avoir accès à notre nouvelle page.
+
+Nous pouvons désormais nous rendre sur l'URL: http://localhost:3000/new-page-react (le serveur utilise le port 3000 par défault).
+
+### Utiliser le TypeScript au lieu de JavaScript?
+
+Docusaurus permet également de créer des pages TypeScript avec l'extension `.tsx`, en remplacement du JavaScript. Le TypeScript impose un typage fort (le JavaScript étant un language très peu typé), si une erreur de type apparait dans le code, TypeScript fera apparaître cette erreur, là où le JavaScript restera permissif.
+TypeScript présente des avantages certains en terme de qualité et de sécurité du code, mais il peut être difficile et long à apprendre et à maîtriser sur un framework comme React.
+
+## Comment créer une page en Markdown?
+
+1. Dans le dossier `pages`, nous allons créer un nouveau fichier /src/pages/new-page-markdown.md :
+
+```/src/pages/new-page-markdown.md
+---
+title: titre de page
+description: description de page
+---
+
+
+## Bonjour
+
+Comment allez-vous ?
+
+```
+
+De la même manière, une page sera créée à l'adresse http://localhost:3000/new-page-markdown.
+
+Les pages Markdown sont moins flexibles que les pages React, car elles utilisent toujours la mise en page du thème, mais elles sont bien plus simple et rapide à créer.
+
+Voici un [exemple de page Markdown](https://docusaurus.io/fr/examples/markdownPageExample).
+
+## Routage
+
+Tout fichier créé dans le répertoire `/src/pages/` sera automatiquement converti en page du site, en suivant la hiérarchie du répertoire `/src/pages/`. Par exemple :
+
+`/src/pages/index.js → <baseUrl>`
+
+`/src/pages/foo.js → <baseUrl>/foo`
+
+`/src/pages/foo/test.js → <baseUrl>/foo/test`
+
+`/src/pages/foo/index.js → <baseUrl>/foo/`
+
+## Nommage et achitecture 
+
+Chaque page est un composant que l'on peut personnaliser en important un fichier CSS, nous vous recommandons de regrouper les fichiers de styles avec le fichier de page dans son propre répertoire. Par exemple, pour créer une page `Support`, nous pouvons:
+
+- Ajouter un fichier `/src/pages/support.js`
+
+ou
+
+- Créer un répertoire `/src/pages/support/` et un fichier `/src/pages/support/index.js`.
+
+La seconde solution est recommandée car elle permet de regrouper uniquement des fichiers liés à la page dans ce répertoire. Ainsi, la page sera directement regroupé avec un fichier de module CSS, `styles.module.css`, avec des styles destinés uniquement à être utilisés sur cette page, nommée "Support" pour l'exemple. 
+
+Remarque : il s'agit simplement d'une structure de répertoire recommandée. Il faut impérativement importer manuellement le fichier de module CSS dans les imports de la page (`support/index.js`). 
+
+Ces fichiers peuvent prendre l'organisation suivante: 
+
+```mon-site-web
+├── src
+│   └── pages
+│       ├── styles.module.css
+│       ├── index.js
+|       ├──_ignored.js
+│       └── support
+│           ├── index.js
+│           └── styles.module.css
+```
+
+Par défaut, tout fichier Markdown ou Javascript commençant par _ sera ignoré, et aucune route ne sera créé pour ce fichier.
+
+## Configuration
+
+Comment ajouter un lien vers une page dans les composants Navbar et Footer:
+
+Nous allons utiliser le fichier `docusaurus-config.js`, dans lequel nous pourrons configurer notre Navbar et notre Footer très facilement.
+
+Nous retrouvons dans ce fichier un objet, nommé `themeConfig` qui permet de définir des valeurs pour la navbar et le footer au travers d'un tableau d'objets clés / valeurs:
+
+Reprenons nos pages précédentes, `new-page-react.js` et `new-page-markdown.js`. Nous pouvons configurer la navbar et le footer pour créer un lien vers ces pages:
+
+```themeConfig
+
+themeConfig: {
+    navbar: {
+      items: [      
+        {to: "/new-page-react", label: "TitreDuLien", position: "left"},
+      ],
+    },
+    footer: {
+      links: [
+        {
+          title: "Columne Name",
+         items: [
+            { to: "/new-page-markdown", label: "TitreDuLien"},
+          ],
+        },
+      ],
+    },
+  },
+```
+Nous pouvons retrouver notre composant footer sous la forme d'un objet, qui va contenir par exemple un tableau `items` dans lequel une clé `label` va définir la valeur du titre du lien qui sera affiché : `TitreDuLien`.