Resolve "doc: improve a component"

Closes #73 (closed)

doc/sections.md

@@ -2,7 +2,7 @@
  
 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 composants réutilisables, que l'on peux assembler.
+L'affichage d'une page web est un ensemble de composants réutilisables, que l'on peut 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`.
 
@@ -79,6 +79,70 @@ const FeatureList = [
 
 Notre section affichera les 4 éléments, chacune avec un titre, une description et une image en Svg.
 
+### Ajouter une image dans un fichier MDX, et la passer en paramètre dans un composant.js
+
+#### Afin d'utiliser une image.png ou une image.jpg dans un fichier MDX, procéder comme suit :
+
+- Dans le **dossier src/static/img** : mettre l'image en veillant à bien choisir son nom.
+
+- Dans le **dossier src/components** : créer un fichier **TextRight.js** et son css du même nom comme **TextRight.module.css** (le .module.css signifie qu'il apportera des modifications uniquement au fichier .js pourtant le même nom, et pas les autres page du site).
+
+À présent, penchant nous un instant sur le **composant** :
+
+```
+import React from "react";
+import styles from "./TextRight.module.css";
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function TextRight({children, img}) {
+  return (
+    <>
+      <div className="row">
+        <div className="col col--6">
+          <img src={useBaseUrl(img)} />
+        </div>
+        <div className="col col--6">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
+
+```
+
+D'abord on fait ses imports : React, le module css, et un useBaseUrl.
+
+On utilise **useBaseUrl** pour résoudre des problèmes liés à ce que le navigateur interprète. Cet import permettra d'éviter les erreurs de chemin lors de l'import d'images. Voir https://docusaurus.io/fr/docs/static-assets section ***Référencement de votre ressource static en JSX.***
+
+On exporte la fonction (qui sera importée ensuite dans le fichier mdx). Cette fonction possède deux paramètres : **children**, reprenant les propriétés des "parents" pour les renvoyer en sortie, et **img** notre image. Ce qui sera afficher se trouve dans **return** :
+
+- Des "blocks" (div) avec des className (ou des class en html). 
+- Pour imbriquer l'image, on modifie la source avec notre ***useBaseUrl*** contenant notre img en paramètre. 
+- Pour imbriquer notre texte, elle se récupére par le paramètre children. 
+
+#### Dans le dossier src/pages : créer sa nouvelle_page.mdx
+
+**Importer la fonction *TextRight* et le chemin du composant.**
+
+**Inclure l'image et son chemin :**
+
+- En haut du fichier mdx, on importe la fonction ***TextRight*** ainsi que son chemin :
+
+```
+import TextRight from '@site/src/components/TextRight';
+```
+
+- Puis on dispose l'image selon sa convenance dans le fichier mdx :
+```
+<TextRight img="/img/cheatsheet_cover.png">
+```
+On lui dit alors : l'image qu'on passe en paramètre et faisant référence à TextRight EST img cheatsheet.
+
+***Remarque: veiller aux erreurs dans les fichiers custom.css et .module.css.***
+ Il a été vu que si par exemple une class button reçoit des attribus dans le fichier.module.css, et que le fichier custom.css possède lui aussi des modification dans ce même class button, il sera retenu en priorité ce qui se trouve dans le fichier custom.css (le fichier général de style). 
+ À ce jour, nous nous questionnons : est-ce que ce qui se trouve dans la class button du fichier.module.css se retrouvera AJOUTÉ dans la class button du fichier custom.css ? 
+ Ou bien est-ce que class button du fichier.module.css sera simplement abandonné ? À confirmer.
 
 ### Affichage