Resolve "doc: how to creat new page"

Closes #11 (closed)

docs/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, en JavaScript.
+
+- Si nous n'avons pas besoin d'un layout spécifique pour la page à créer, nous recommandons l'utilisation du Markdown, avec l'extention `.md`
+
+- Si, au contraire, nous avons besoin d'un Layout spécifique, de charger un certains styles (CSS) pour notre nouvelles pages, le JavaScript (`.js`) sera alors adapté pour notre utilisation.
+
+- 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/hello.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. L'avantage du TypeScript est qu'il 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ésnte des avantages certains en terme de qualité et de sécurité du code, mais il présente une certaine courbe d'apprentissage et peut être long à 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 JavaScript 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, achitecture et organisation
+
+Il est recommandé d'utiliser la convention de nommage des modules pour relier un fichier JavaScript à son fichier CSS.
+
+Il suffit de reprendre le nom du fichier à styliser et de lui ajouter le sufixe `.module.css`.
+
+Pour lier une feuille de style à un fichier nommé  par exemple `index.js`, il est recommandé de créer un fichier nommé `index.module.css`. 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
+```
+
+# Configuration
+
+Comment ajouter un lien vers une page dans les composents de notre Layout, Navbar, 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 la navbar, le footer comme des tableau d'objets JavaScript:
+
+- Nous retrouvons des clés auquels nous allons y associer des valeurs, par exemple:
+      
+    - une clé "label" va prendre une valeur que l'on va définir par une chaîne de charactère en indiquant le titre du lien à affiché sur la navbar...
+    
+Reprenons nos pages précédentes pour exemples: `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: "NomDePage", position: "left"},
+      ],
+    },
+    footer: {
+      links: [
+        {
+          title: "Columne Name",
+         items: [
+            {
+              label: "HelloMarkdown",
+              to: "/new-page-markdown",
+            },
+          ],
+        },
+      ],
+    },
+  },
+```