Resolve "add Features on index"

Closes #8 (closed) #20 (closed)

doc/sections.md

+# Créer des sections 
+ 
+Docusaurus étant un Framework de la librairie React, on y retrouve la même logique.
+
+L'affichage d'une page web est un ensemble de composant réutilisable, que l'on peux assembler.
+
+Nous allons nous appuyer sur l'utilisation de ces Composants pour créer nos différentes sections d'affichage, notamment pour gérer le rendu visuel de la page d'accueil du site `index.js`.
+
+Chaque section de pages va être définie dans un Composant enfant dans le dossier `./src/components/`, puis importée dans un Composant parent dans le dossier `./src/pages/`.
+
+Un composant (_Componant_) contient: des données qui constituent un état (_state_), des comportements et un rendu (l'affichage), ces trois notions vont interagir entre elles.
+
+## Création du composant de notre section
+
+Pour l'exemple, nous allons expliquer comment nous avons créer la section chargé d'afficher les fonctionnalités (_Features_) de Froggit.
+
+Dans le dossier `src/components/`, nous avons créé un fichier React `HomepageFeatures.js`.
+
+
+Nous avons choisi de nommer notre fichier `HomepageFeatures`, en [PascalCase](https://techlib.fr/definition/pascalcase.html), car ce composent est destiné à être affiché, dans la `Homepage` (page d'Accueil) et doit afficher les `Features` (fonctionnalités) de Froggit.
+
+Ce fichier est composé de 3 parties:
+
+
+- une pour gérer les données de notre section ;
+- une pour définir les comportements que nous attendons en utilisant différentes fonctions ;
+- une pour définir l'affichage. Nous utilisons le JSX pour cette partie, voir l' [introduction au JSX](https://fr.reactjs.org/docs/introducing-jsx.html) sur la doc de React pour des explications sur cette extension syntaxique du JavaScript.
+
+### Les données de notre section
+
+Nous allons créons un tableau d'objets JavaScript pour définir les données à afficher dans notre section. il y a 3 objets pour chaque éléments du tableau :
+1. Un titres
+2. Une description
+3. Une image
+
+Nous appelons notre tableau `featuresList` car c'est la liste des fonctionnalités.
+
+```jsx
+const FeatureList = [
+  {
+    title: "1. Le Lab 🧪",   
+    Svg: require("../../static/img/logo_froggit.svg").default,
+    description: (
+      <>
+        <p>Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C&apos;est plus qu&apos;un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.</p>
+      </>
+    ), 
+  },     
+  {
+    title: "2. La CI 🔁",  
+    Svg: require("../../static/img/logo_froggit.svg").default,
+    description: (
+      <>
+        <p>Fournir un outil de collaboration de code sans Intégration Continue n&apos;était pas pensable pour nous. C&apos;est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.</p>
+      </>
+    ), 
+  },
+  {
+    title: "3. Le Chat 💬",  
+    Svg: require("../../static/img/logo_froggit.svg").default,
+    description: (
+      <>
+        <p>Pour collaborer les équipes ont besoin de communiquer. Qu&apos;elles soient physiquement au même endroit ou non une communication asynchrone est importante. C&apos;est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L&apos;authentification se fera grâce au Lab, vous n&apos;aurez qu&apos;un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !</p>
+      </>
+    ),
+  },
+  {
+    title: "4. Les Pages 🔖",  
+    Svg: require("../../static/img/logo_froggit.svg").default,
+    description: (
+      <>
+        <p>Vous avez besoin de créer des sites statiques pour vos documentations. C&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.</p>
+      </>
+    ),
+  },
+];  
+```
+Notre section affichera les 4 éléments, chacune avec un titre, une description et une image en Svg.
+
+
+### Affichage
+
+Il faut maintenant définir l'affichage que nous souhaitons que ce composant renvoie. 
+
+Nous avons créé une fonction qui renvoie le rendu, grâce à un _template_.
+
+L'utilisation du JSX va simplifier cette partie, nous avons trois éléments, les clés issues de notre tableau, à afficher.
+
+Tous élément JavaScript doit alors être affiché entre accolade: `{---}` afin d'être correctement interprété.
+
+Notre affichage doit impérativement être entouré de balises parents, telle une `div`.
+
+Nous passons comme argument les clés de notre tableau (Svg, title, description) à notre fonction
+
+```
+function Features({Svg, title, description}) {
+  return (
+    <div className="container"}>
+        <Svg alt={title} />
+      </div>
+      <div>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+```
+Ainsi, notre composant va renvoyer notre Svg en image, titre en `h3` et description en paragraphe.
+
+## Import export du Composant
+
+Nous devrons également importer certains utilitaires, puis exporter notre composant, pour qu'il puisse être réutiliser.
+Il est nécessaire d'utiliser le système d'import/export de [modules JavaScript](https://javascript.info/import-export).
+
+
+## Définition des Comportements 
+
+Nous allons maintenant itérer sur chaques valeurs de notre tableau, en utilisant la méthode JavaScript `.map`, qui est très souvent utilisé dans les Composants React. 
+
+La méthode map() crée un nouveau tableau avec les résultats de chaque élément du tableau. Voici un tutoriel expliquant cette méthode: https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/
+
+```
+export default function HomepageFeatures() {
+  return (
+      <div>
+          {FeaturesList.map((props, idx) => (
+            <Features key={idx} {...props} />
+          ))}
+      </div>
+  );
+}
+```
+Nous utilisons grâce à une `fontion fléchée`, une fonction de Callback pour boucler sur notre tableau, qui prend 2 paramètres, les `props` qui représentent les valeurs du tableau, et `idx`, les clés.
+
+Notre Composant `HomepageFeatures` est également exporté au début de la déclaration de la fonction avec `export default`.
+
+## Utilisation du composant
+
+Nous pouvons désormais utiliser notre composant dans un autre, un composant parent.
+
+Dans notre cas, ce composant parent va représenter la page d'accueil du site, `./src/pages/index.js`.
+
+Il suffit d'importer notre composant enfant, que nous venons de créer, et de le mettre, comme une balise, dans la partie return de la fonction `Home`, qui retourne la vue de notre page, de notre composant de Pages `index.js`, : 
+
+```
+import React from "react";
+import HomepagePromises from "../components/HomepagePromises";
+import HomepageFeatures from "../components/HomepageFeatures";
+
+//    (...)
+
+export default function Home() {
+  return (
+    <Layout>
+      <HomepageHeader />
+      <main>
+        <HomepagePromises />
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}
+```
+Dans notre balise `Layout`, nous retrouvons 3 composants enfants, le Header nommé <HomepageHeader /> qui a été créé à l'intérieur même de ce composant qui représente la page d'accueil de notre site.
+
+Puis nous retrouvons 2 Composants, qui ont été importé depuis le dossier `./src/components/`: 
+  - <HomepagePromises />, qui rend l'affichage de la section des Prommesses 
+    et 
+  - <HomepageFeatures />, pour la section des fonctionnalités, dont nous venons de voir en détail.
+
+## feuille de style CSS
+
+- un Composant peut être lié à sa propre feuille de style CSS, un module qui ne devra être affecter uniquement à ce composant, nous donnerons le meme nom au fichier CSS suivi du suffixe `.module.css`. Un composant peut également utiliser la feuille de style générale `custom.css`, qui regroupe les attributs de styles génériques, commun à plusieurs Composants. Chaque feuille de style que l'on souhaite utiliser doit être importer dans le Composant.