From a8069caea2e2b6ca14d9966ae3769e5817bf2613 Mon Sep 17 00:00:00 2001
From: Christophe Chaudier <christophe@lydra.fr>
Date: Thu, 12 Aug 2021 14:34:25 +0200
Subject: [PATCH] docs: update component
---
README.md | 2 --
doc/sections.md | 56 +++++++++++++++++-------------
src/components/HomepageFeatures.js | 2 +-
3 files changed, 32 insertions(+), 28 deletions(-)
diff --git a/README.md b/README.md
index c295f12..e5438d5 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 dbc4318..55a5410 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 ee921c8..110fcc9 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -41,7 +41,7 @@ const FeatureList = [
</>
),
},
-];
+];
function Feature({Svg, title, description}) {
--
GitLab