WIP

doc/sections.md

+# Créer des sections
+ 
+# Les Composants
+
+Docusaurus étant un Framework de React, nous retrouvons la même logique, avec une vision orientée Composants.
+L'affichage d'une page web est 1 ensemble de composant réutilisable, que l'on peux assembler.
+
+Un composant (ou Componant) contient: des données (qui constitue un état, ou "state"), des comportements et un rendu (l'affichage), c'est trois notion vont interagire entre elle.
+
+Il y a également une notion de hiérarchie entre les composants.
+Nous pouvons créer une logique de composants parents / enfants:
+    - en important un composant dans un autre composant, le premier devient alors l'enfant et le second, son parent.
+    - le composant parent va alors utiliser le composant enfant
+
+Nous allons nous appuyer sur l'utilisation de Composants réutilisables pour gérer la création de nos différentes sections.
+
+Nous pouvons ensuite importer nos composants dans les fichiers qui gdans la partie du rendu de l'affichage 
+
+Pour créer un section, nous pouvons créer un composant qui contiendra les données propre à cette section, des comportements (les méthodes, fonctions..) et un rendu (affichage).
+
+Nous pouvons ainsi utiliser ce composant, qui définie notre section, dans le composant d'affichage
+
+## Création du composant de notre section
+
+Dans le dossier `./src/components/` , nous allons créer un fichier React avec l'extention `.js`.
+
+Ce fichier aura 3 partie:
+
+ - 1 pour gérer les données de notre section,
+
+ - 1 pour définir les comportements que nous attendons en utilisant différentes fonctions, 
+
+ - 1 partie qui sera chargée de définir l'affichage, le rendu visuel que nous attendons de notre section. Nous allons utiliser le JSX pour cette dernière partie,(voir [introduction au JSX](https://fr.reactjs.org/docs/introducing-jsx.html) sur la doc de React pour des explications sur cette extention syntaxique du JavaScript).
+
+## Les données de notre section
+
+Nous allons créer un tableau d'objet JavaScript pour définir les données à afficher dans notre section, Nous allons indiquer dans cet exemple les noms des titres, les descriptions et les images que nous voulons afficher...
+Nous allons ainsi pouvoir associer une clé à une valeur (voir gestion des tableau en JavaScript).
+
+Nous allons nommer notre tableau `datasArraySections` et y mettre les données à afficher:
+```
+const datasArraySections = [
+  { 
+    title: "Lorem ipsum 1 !",    
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    image: require("../../static/img/image1.png").default,
+  },
+  { 
+    title: "Lorem ipsum 2 !",    
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit.",
+    image: require("../../static/img/image2.svg").default,
+  },
+  { 
+    title: "Lorem ipsum 3 !",    
+    description: "Consectetur adipiscing elit sit. Lorem ipsum dolor sit amet, consectetur adipiscing elit sit.",
+    image: require("../../static/img/image3.jpg").default,
+  },
+];
+```
+Notre section sera décomposé en 3 parties, chacunes avec 1 titre, 1 description et 1 image différentes.
+
+## Affichage
+
+Il faut maintenant définir l'affichage que nous souhaitons que ce composant renvoie. 
+
+Nous allons tout d'abord créer une fonction dans laquelle nous plaçons le rendu, tel un template.
+
+L'utilisation du JSX va simplifier cette partie, nous avons trois éléments, les clés issues de notre tableau, à afficher à l'intérieur de balises HTML.
+
+Tous élément JavaScript doit alors être affiché entre accolade: `{---}` 
+
+Notre affichage doit impérativement être entouré de balises parents, au minimum une div.
+
+Nous allons appeller notre fonction de nom de la section que nous voulons renvoyer sur notre page, comme `Header`, `Footer`, par exemple.
+
+Nous passons comme argument les clés de notre tableau (image, title, description) à notre fonction
+
+```
+function SectionName({image, title, description}) {
+  return (
+    <div className="container"}>
+        <image alt={title} />
+      </div>
+      <div>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+```
+Ainsi, notre composant va renvoyer notre image, titre en `h3` et description en paragraphe.
+
+## Import export du Composant
+
+Il est également nécessaire d'utiliser le système d'import/export de [modules JavaScript](https://javascript.info/import-export), nous aurons dans notre cas besoin d'importer la librairie React et les feuilles de styles CSS nécéssairest ( le fichier CSS associé à notre composant) et la dépendance `clsx`, un petit utilitaire pour construire des className de manière conditionnelle).
+Nous devrons également exporter notre composant, pour qu'il puisse être réutiliser.
+
+## Définition du (ou des) Comportement(s) 
+
+Nous allons maintenant itérer sur chaque valeur de notre tableau, en utilisant la méthode .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 l'appel d'une fonction fournie sur 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 ComponantName() {
+  return (
+      <div>
+          {ArrayNameList.map((props, idx) => (
+            <Promise key={idx} {...props} />
+          ))}
+      </div>
+  );
+}
+```
+Notre Composant est également exporté.
+
+## 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: 
+
+```
+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 Layout, nous retrouvons 3 composants, 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 enfants, 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.
+
+## Conventions
+
+- le nom d'un Composant doit commencer par une Majuscule
+- le nom d'une page doit commencer par une minuscule
+
+- nous pouvons créer une feuille de style CSS à un Composant mais elle devra être affecter uniquement à ce composant, nous donnerons le meme nom au fichier CSS suivi du suffixe `.module.css`, les 

docusaurus.config.js

@@ -12,46 +12,6 @@ module.exports = {
   favicon: "img/favicon/favicon.ico",
   organizationName: "facebook", // Usually your GitHub org/user name.
   projectName: "docusaurus", // Usually your repo name.
-  customFields: {
-    blockSections:  [
-      {
-        title: "1. Le Lab 🧪",   
-        text: "Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C'est plus qu'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.",
-        img: 
-            { 
-              alt: "My Site Logo",
-              src: "img/logo_froggit.svg",
-            },
-      },       
-      {
-        title: "2. La CI 🔁",  
-        text: "Fournir un outil de collaboration de code sans Intégration Continue n'était pas pensable pour nous. C'est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.", 
-        img: 
-          { 
-            alt: "My Site Logo",
-            src: "img/logo_froggit.svg",
-          },
-      }, 
-      {
-        title: "3. Le Chat 💬",
-        text: "Pour collaborer les équipes ont besoin de communiquer. Qu'elles soient physiquement au même endroit ou non une communication asynchrone est importante. C'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’authentification se fera grâce au Lab, vous n’aurez qu'un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !",   
-        img: 
-          { 
-            alt: "My Site Logo",
-            src: "img/logo_froggit.svg",
-          },
-      },
-      {
-        title: "4. Les Pages 🔖",
-        text: "Vous avez besoin de créer des sites statiques pour vos documentations. C'est pour cela que nous mettons en place les GitLab pages qui vous permettent d'héberger des sites statiques.",  
-        img: 
-           { 
-             alt: "My Site Logo",
-             src: "img/logo_froggit.svg",       
-           } 
-      },   
-    ],      
-  },
   themeConfig: {
     navbar: {
       title: "Froggit",
@@ -60,7 +20,7 @@ module.exports = {
         src: "img/logo_froggit.svg",
       },
       items: [      
-        {href: "https://lydra.systeme.io/froggit-beta-inscription", label: "Fonctionnalités", position: "left"},
+        {to: "/", label: "Fonctionnalités", position: "left"},
         {to: "/faq", label: "FAQ", position: "left"},
         {to: "/dummy_page", label: "Tarifs", position: "left"},
         {to: "/blog", label: "Blog", position: "left"},        

src/components/HomepageFeatures.js

+/* eslint-disable linebreak-style */
 import React from "react";
 import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
 
+// eslint-disable-next-line no-unused-vars
 const FeatureList = [
   {
-    title: "Sûr",
-    // eslint-disable-next-line
-		Svg: require("../../static/img/bouclier.svg").default,
+    title: "1. Le Lab 🧪",   
+    Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Vos données sont en lieu sûr et sauvegardées toutes les nuits.</p>
+        <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: "Souverain",
-    // eslint-disable-next-line
-		Svg: require("../../static/img/rgpd.svg").default,
+    title: "3. Le Chat 💬",  
+    Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Nous sommes hébergés en France et conformes au RGPD.</p>
+        <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>
       </>
     ),
   },
   {
-    // eslint-disable-next-line
-		title: "Libre",
-    // eslint-disable-next-line
-		Svg: require("../../static/img/liberte.svg").default,
+    title: "4. Les Pages 🔖",  
+    Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Notre solution s&apos;appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
+        <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>
       </>
     ),
   },
-];
+];  
+
+
+  
+/* const Section = blockSections.map((blockSection, i) => {
+  return (
+    <div className={clsx("hero hero--primary", styles.sectionContainer)} key={i}>
+      <div className={styles.sectionImg}>
+        <img className={styles.imgFeature} src={blockSection.img.src} alt={blockSection.img.alt}  />
+      </div>
+      <div className={styles.sectionText} >
+        <h2>{blockSection.title}</h2>
+        <p>{blockSection.text}</p>
+      </div>
+    </div>
+  );
+}); */
+
+
+
 
 // eslint-disable-next-line
 function Feature({Svg, title, description}) {
   return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} alt={title} />
+    <div className={clsx("hero hero--primary text--center padding-horiz--md", styles.featureContainer)}>
+      <div className={styles.featureSvg}>
+        <Svg className={styles.svg} alt={title} />
       </div>
-      <div className="text--center padding-horiz--md">
+      <div className={styles.featureText}>
         <h3>{title}</h3>
         <p>{description}</p>
       </div>
@@ -54,12 +80,10 @@ function Feature({Svg, title, description}) {
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
+      <div>
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
       </div>
     </section>
   );

src/components/HomepageFeatures.module.css

@@ -7,7 +7,37 @@
   width: 100%;
 }
 
-.featureSvg {
-  height: 150px;
-  width: 150px;
+.svg {
+  height: 175px;
+  width: 175px;
+}
+
+.featureContainer {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+  min-height: 200px;
+  padding: 2.5rem 0;
+  margin-bottom: -1px;
+  border-top: 1px solid rgb(238, 238, 238);
+  border-bottom: 1px solid rgb(238, 238, 238);
+  transition: all 0.2s ease 0s;
+  flex-direction: row;
+}
+
+.featureContainer > .featureSvg {
+  width: 50%;
+  flex-shrink: 1;
+  text-align: center;
+}
+
+.featureContainer:hover {
+  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.1);
+}
+
+.featureText {
+  padding-left: 70px;
+  width: 80%;
+  flex-shrink: 0;
 }

src/components/HomepagePromises.js

+import React from "react";
+import clsx from "clsx";
+import styles from "./HomepagePromises.module.css";
+
+const PromiseList = [
+  {
+    title: "Sûr",
+    // eslint-disable-next-line
+		Svg: require("../../static/img/bouclier.svg").default,
+    description: (
+      <>
+        <p>Vos données sont en lieu sûr et sauvegardées toutes les nuits.</p>
+      </>
+    ),
+  },
+  {
+    title: "Souverain",
+    // eslint-disable-next-line
+		Svg: require("../../static/img/rgpd.svg").default,
+    description: (
+      <>
+        <p>Nous sommes hébergés en France et conformes au RGPD.</p>
+      </>
+    ),
+  },
+  {
+    // eslint-disable-next-line
+		title: "Libre",
+    // eslint-disable-next-line
+		Svg: require("../../static/img/liberte.svg").default,
+    description: (
+      <>
+        <p>Notre solution s&apos;appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
+      </>
+    ),
+  },
+];
+
+// eslint-disable-next-line
+function Promise({Svg, title, description}) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className={styles.promiseSvg} alt={title} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepagePromises() {
+  return (
+    <section className={styles.promises}>
+      <div className="container">
+        <div className="row">
+          {PromiseList.map((props, idx) => (
+            <Promise key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepagePromises.module.css

+/* stylelint-disable docusaurus/copyright-header */
+.promises {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+  
+.promiseSvg {
+  height: 150px;
+  width: 150px;
+}

src/css/custom.css

@@ -27,15 +27,3 @@
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
-
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 150px;
-  width: 150px;
-}

src/pages/index.js

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
+import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
 
 function HomepageHeader() {
@@ -19,7 +20,8 @@ function HomepageHeader() {
 
 export default function Home() {
 
-  const context = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
+  /* const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
   const blockSections = siteConfig.customFields.blockSections;
              
@@ -27,7 +29,7 @@ export default function Home() {
     return (
       <div className={clsx("hero hero--primary", styles.sectionContainer)} key={i}>
         <div className={styles.sectionImg}>
-          <img src={blockSection.img.src} alt={blockSection.img.alt} />
+          <img className={styles.imgFeature} src={blockSection.img.src} alt={blockSection.img.alt}  />
         </div>
         <div className={styles.sectionText} >
           <h2>{blockSection.title}</h2>
@@ -35,7 +37,7 @@ export default function Home() {
         </div>
       </div>
     );
-  });
+  }); */
 
   return (
     <Layout
@@ -44,12 +46,8 @@ export default function Home() {
     >
       <HomepageHeader />
       <main>
+        <HomepagePromises />
         <HomepageFeatures />
-        <div className={clsx("hero hero--primary", styles.sectionContainer)}>
-          <div className="container">           
-            {Section}
-          </div>
-        </div>
       </main>
     </Layout>
   );

src/pages/index.module.css

@@ -23,33 +23,8 @@
   align-items: center;
   justify-content: center;
 }
-  
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 150px;
-  width: 150px;
-}
-
- .sectionContainer {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-  min-height: 200px;
-  padding: 2.5rem 0;
-  margin-bottom: -1px;
-  border-top: 1px solid rgb(238, 238, 238);
-  border-bottom: 1px solid rgb(238, 238, 238);
-  transition: all 0.2s ease 0s;
-  flex-direction: row;
-}
-
+ 
+/* 
 .sectionContent {
   max-width: 960px;
   margin: 0 auto;
@@ -60,23 +35,23 @@
   flex-direction: row;
 }
 
-.sectionContainer:hover {
-  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.1);
-}
-
 .sectionContainer > .sectionImg {
   width: 50%;
   flex-shrink: 1;
   text-align: center;
 }
 
+.sectionContainer:hover {
+  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.1);
+}
+
 .sectionText {
   padding-left: 70px;
   width: 50%;
   flex-shrink: 0;
-}
+} */
 
-img {
-  height: 175px;
+.imgFeature > img {
+  height: 1075px;
   width: 175px;
 }