Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit a8069cae authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

docs: update component

parent d1980bb3
No related branches found
No related tags found
1 merge request!22Resolve "features like componentkit.org"
Pipeline #2591 passed
......@@ -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
# 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&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>
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.
</>
),
},
{
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&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>
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.
</>
),
},
{
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&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>
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 !
</>
),
},
{
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&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.</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.
</>
),
},
];
```
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>
);
}
```
......
......@@ -41,7 +41,7 @@ const FeatureList = [
</>
),
},
];
];
function Feature({Svg, title, description}) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment