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

Resolve "change for froggit colors and fonts"

Merged Resolve "change for froggit colors and fonts"
21-change-for-froggit-colors-and-fonts into master
All threads resolved!
Merged Hugues requested to merge 21-change-for-froggit-colors-and-fonts into master
All threads resolved!
Viewing commit 9198d696
Show latest version
6 files
+ 84
− 149
Compare changes
  • Side-by-side
  • Inline
Files
6
doc/sections.md
+ 79
− 65
# Créer des sections
# Créer des sections
# Les Composants
Docusaurus étant un Framework de la librairie React, on y retrouve la même logique.
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.
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`.
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
Chaque section de pages va être définie dans un Composant enfant dans le dossier `./src/components/`, puis importer dans un Composant parent dans le dossier `./src/pages/`.
Nous allons nous appuyer sur l'utilisation de Composants réutilisables pour gérer la création de nos différentes sections.
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 elles.
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).
## Création du composant de notre section
Nous pouvons ainsi utiliser ce composant, qui définie notre section, dans le composant d'affichage
Pour l'exemple, nous allons expliquer comment nous avons créer la section chargé d'afficher les `Features` (ou fonctionnalités) de Froggit.
## Création du composant de notre section
Dans le dossier `./src/components/`, nous allons créer un fichier React `HomepageFeatures` avec l'extention `.js`
Dans le dossier `./src/components/` , nous allons créer un fichier React avec l'extention `.js`.
Nous choisirons de nommer notre fichier `HomepageFeatures`, en PascalCase, car ce composent est destiné à être affiché, dans la `Homepage` (soit la page d'Accueil) et doit afficher les `Features` (ou fonctionnalités) de Froggit.
Ce fichier aura 3 partie:
Ce fichier sera composé de 3 parties:
- 1 pour gérer les données de notre section,
- une pour gérer les données de notre section,
- 1 pour définir les comportements que nous attendons en utilisant différentes fonctions,
- une 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).
- une partie qui sera chargée de définir l'affichage. Nous allons utiliser le JSX pour cette dernière partie,(voir l' [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 créer un tableau d'objets JavaScript pour définir les données à afficher dans notre section. Nous allons indiquer les noms des titres, les descriptions et les images que nous voulons afficher.
Nous appelerons notre tableau `featuresList`, la liste des fonctionnalités:
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,
const FeatureList = [
{
title: "1. Le Lab 🧪",
Svg: require("../../static/img/logo_froggit.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>
</>
),
},
{
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: "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: "3. Le Chat 💬",
Svg: require("../../static/img/logo_froggit.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>
</>
),
},
{
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,
{
title: "4. Les Pages 🔖",
Svg: require("../../static/img/logo_froggit.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>
</>
),
},
];
];
```
Notre section sera décomposé en 3 parties, chacunes avec 1 titre, 1 description et 1 image différentes.
Notre section sera décomposé en 3 parties, chacunes avec 1 titre, 1 description et 1 images en Svg.
## Affichage
@@ -65,21 +80,19 @@ Il faut maintenant définir l'affichage que nous souhaitons que ce composant ren
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.
L'utilisation du JSX va simplifier cette partie, nous avons trois éléments, les clés issues de notre tableau, à afficher.
Tous élément JavaScript doit alors être affiché entre accolade: `{---}`
Tous élément JavaScript doit alors être affiché entre accolade: `{---}` afin d'être correctement interprété.
Notre affichage doit impérativement être entouré de balises parents, au minimum une div.
Notre affichage doit impérativement être entouré de balises parents, telle 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
Nous passons comme argument les clés de notre tableau (Svg, title, description) à notre fonction
```
function SectionName({image, title, description}) {
function Features({Svg, title, description}) {
return (
<div className="container"}>
<image alt={title} />
<Svg alt={title} />
</div>
<div>
<h3>{title}</h3>
@@ -89,39 +102,42 @@ function SectionName({image, title, description}) {
);
}
```
Ainsi, notre composant va renvoyer notre image, titre en `h3` et description en paragraphe.
Ainsi, notre composant va renvoyer notre Svg en 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.
Nous devrons également importer certains utilitaires, puis exporter notre composant, pour qu'il puisse être réutiliser.
Il est nécessaire d'utiliser le système d'import/export de [modules JavaScript](https://javascript.info/import-export).
## Définition du (ou des) Comportement(s)
## Définition des Comportements
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,
Nous allons maintenant itérer sur chaques valeurs de notre tableau, en utilisant la méthode JavaScript `.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/
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/
```
export default function ComponantName() {
export default function HomepageFeatures() {
return (
<div>
{ArrayNameList.map((props, idx) => (
<Promise key={idx} {...props} />
{FeaturesList.map((props, idx) => (
<Features key={idx} {...props} />
))}
</div>
);
}
```
Notre Composant est également exporté.
Nous utilisons grâce à une `fontion fléchée`, une fonction de Callback pour boucler sur notre tableau, qui prend 2 paramètres, les `props` qui représentent les valeurs du tableau, et `idx`, les clés.
## Utilisation du composant
Notre Composant `HomepageFeatures` est également exporté au début de la déclaration de la fonction avec `export default`.
## 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:
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, de notre composant de Pages `index.js`, :
```
import React from "react";
@@ -142,15 +158,13 @@ export default function Home() {
);
}
```
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
Dans notre balise `Layout`, nous retrouvons 3 composants enfants, 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
Puis nous retrouvons 2 Composants, 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
- <HomepageFeatures />, pour la section des fonctionnalités, dont nous venons de voir en détail.
- le nom d'un Composant doit commencer par une Majuscule
- le nom d'une page doit commencer par une minuscule
## feuille de style CSS
- 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
- un Composant peut être lié à sa propre feuille de style CSS, un module qui ne devra être affecter uniquement à ce composant, nous donnerons le meme nom au fichier CSS suivi du suffixe `.module.css`. Un composant peut également utiliser la feuille de style générale `custom.css`, qui regroupe les attributs de styles génériques, commun à plusieurs Composants. Chaque feuille de style que l'on souhaite utiliser doit être importer dans le Composant.

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service