diff --git a/README.md b/README.md index c295f121b7776707bc90cd3fb52dda7e5784602d..e5438d59796b6ab84c1810953c5847ea560a5df0 100644 --- a/README.md +++ b/README.md @@ -68,5 +68,3 @@ More details on Project structure: * `/src/pages` - More details can be found in the [pages guide](https://docusaurus.io/docs/creating-pages) * `/static/` - Any contents inside here will be copied into the root of the final `build` directory * `/docusaurus.config.js` - This is the equivalent of `siteConfig.js` in Docusaurus v1 - - diff --git a/doc/sections.md b/doc/sections.md index dbc4318afedfd1f7d81a7c403fc9c646171c65ae..55a54106ab8a37dca0030d773e0a679ac93dc75e 100644 --- a/doc/sections.md +++ b/doc/sections.md @@ -1,4 +1,4 @@ -# Créer des sections +# Créer des sections Docusaurus étant un Framework de la librairie React, on y retrouve la même logique. @@ -39,43 +39,44 @@ Nous appelons notre tableau `featuresList` car c'est la liste des fonctionnalit ```jsx const FeatureList = [ { - title: "1. Le Lab 🧪", - Svg: require("../../static/img/logo_froggit.svg").default, + title: "Le Lab 🧪", + Svg: require("../../static/img/chemistry.svg").default, description: ( <> - <p>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.</p> + 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. </> ), }, { - title: "2. La CI ðŸ”", - Svg: require("../../static/img/logo_froggit.svg").default, + title: "La CI ðŸ”", + Svg: require("../../static/img/rainbow.svg").default, description: ( <> - <p>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.</p> + 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. </> ), }, { - title: "3. Le Chat 💬", - Svg: require("../../static/img/logo_froggit.svg").default, + title: "Le Chat 💬", + Svg: require("../../static/img/selfie.svg").default, description: ( <> - <p>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 !</p> + 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 ! </> ), }, { - title: "4. Les Pages 🔖", - Svg: require("../../static/img/logo_froggit.svg").default, + title: "Les Pages 🔖", + Svg: require("../../static/img/read-smile.svg").default, description: ( <> - <p>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.</p> + 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. </> ), }, ]; ``` + Notre section affichera les 4 éléments, chacune avec un titre, une description et une image en Svg. @@ -94,16 +95,18 @@ Notre affichage doit impérativement être entouré de balises parents, telle un Nous passons comme argument les clés de notre tableau (Svg, title, description) à notre fonction ```jsx -function Features({Svg, title, description}) { +function Feature({Svg, title, description}) { return ( - <div className={"container"}> - <Svg alt={title} /> - </div> - <div> + <div className="sectionsReverse row"> + <div className="col col--5 text--center"> + <Svg className={styles.svg} alt={title} /> + </div> + <div className="col col--5"> <h3>{title}</h3> <p>{description}</p> - </div> + </div> </div> + ); } ``` @@ -122,14 +125,17 @@ Nous itérons sur chaque élément de notre tableau, en utilisant la méthode Ja 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/). -``` +```jsx export default function HomepageFeatures() { return ( - <div> - {FeaturesList.map((props, idx) => ( - <Features key={idx} {...props} /> - ))} - </div> + <section className="sections container" id="features"> + <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2> + <div> + {FeatureList.map((props, idx) => ( + <Feature key={idx} {...props} /> + ))} + </div> + </section> ); } ``` diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js index ee921c8656f0a68973785df381f9ae9f0d5bda40..110fcc9ba74f4282a0b132c8984d23591eedf22d 100644 --- a/src/components/HomepageFeatures.js +++ b/src/components/HomepageFeatures.js @@ -41,7 +41,7 @@ const FeatureList = [ </> ), }, -]; +]; function Feature({Svg, title, description}) {