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 cd7d95d0 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Apply 1 suggestion(s) to 1 file(s)

parent 00da3a4b
No related branches found
No related tags found
No related merge requests found
Pipeline #7003 canceled
This commit is part of merge request !60. Comments created here will be created in the context of that merge request.
......@@ -2,52 +2,66 @@
## Un guide pour toi qui code le site
Ce guide est un répertoire des sites utiles pour la construction et recherches des éléments constituant le projet __Froggit__ sur __Docusaurus__.
Certaines techniques sont utilisées afin de remplacer des éléments, et des problèmes peuvent se résoudre grâce à des __informations spécifiques__.
Ce guide est un répertoire des sites utiles pour la construction et recherches des éléments constituant le projet **Froggit** sur **Docusaurus**.
Certaines techniques sont utilisées afin de remplacer des éléments, et des problèmes peuvent se résoudre grâce à des **informations spécifiques**.
__[Docusaurus](https://docusaurus.io/) est la référence de base pour :__
**[Docusaurus](https://docusaurus.io/) est la référence de base pour :**
- Utiliser une méthode spécifique pour ajouter/remplacer un éléments.
- Docusaurus dispose d'un large choix d'éléments de création.
- Il est possible d'ajouter des plugins.
*Note: Docusaurus met régulièrement à jour ses versions*
_Note: Docusaurus met régulièrement à jour ses versions_
__[Infima](https://infima.dev/) est la librairie de variables et de composants que Docusaurus utilise__. Cela permet d'ajouter des éléments type bouton, grid, form, puis on leur donne un style au besoin (ça marche comme pour Bootstrap).
[Bibliothèque Infima](https://github.com/facebookincubator/infima/tree/main/packages/core/styles/)
**[Infima](https://infima.dev/) est la librairie de variables et de composants que Docusaurus utilise**. Cela permet d'ajouter des éléments type bouton, grid, form, puis on leur donne un style au besoin (ça marche comme pour Bootstrap).
#### Ressources
- [Bibliothèque Infima](https://github.com/facebookincubator/infima/tree/main/packages/core/styles/)
___
#### Variables Infima
Afin de rester dans les caractéristiques de Docusaurus, on préfère __réutiliser la liste des variables__ générée par Infima. Dès lors que nous créons un nouvel élément (par exemple un bouton), __le CSS reprend les propriétés__ que nous lui attribuons dans la liste des variables. On perd moins de temps et tout est beaucoup plus simple.
__Ressources :__
[Infima var source 1](https://github.com/facebook/docusaurus/issues/3955#issuecomment-751426089)
[Infima var source 2](https://github.com/facebookincubator/infima/blob/c270e2cbdaf0659093ae7f6fbc8899430a0e9147/packages/core/styles/common/variables.pcss)
#### Couleurs
Afin de se faciliter la tâche, on utilise un __générateur de variation des couleurs.__ Il suffit ensuite de récupérer les propriétés hexagone et de les mettre dans le fichier des variables.
__Ressources :__
[Générateur de palette](https://docusaurus.io/fr/docs/styling-layout#css-modules)
[Variables de base Infima](https://infima.dev/docs/utilities/colors/)
#### Table of content (TOC)
La TOC a une taille trop petite et nous utilisons la méthode du __swizzling__ pour augmenter sa taille. On passe de col--2 à col--3 qui est __une propriété d'Infima.__
__Ressources :__
[Github](https://github.com/facebook/docusaurus/search?q=col--2)
[Swizzling](https://docusaurus.io/fr/docs/swizzling)
[Personnalisation TOC](https://docusaurus.io/fr/docs/markdown-features/toc#customizing-table-of-contents-generation)
#### Avatar as Twitter
Avec Infima, on __récupère un code__ nous permettant de créer un petit avatar avec un texte de type citation.
__Ressources :__
[Infima avatar](https://infima.dev/docs/components/avatar)
#### Admonitions
### Variables Infima
Afin de rester dans les caractéristiques de Docusaurus, on préfère **réutiliser la liste des variables** générée par Infima. Dès lors que nous créons un nouvel élément (par exemple un bouton), **le CSS reprend les propriétés** que nous lui attribuons dans la liste des variables. On perd moins de temps et tout est beaucoup plus simple.
#### Ressources
- [Infima var source 1](https://github.com/facebook/docusaurus/issues/3955#issuecomment-751426089)
- [Infima var source 2](https://github.com/facebookincubator/infima/blob/c270e2cbdaf0659093ae7f6fbc8899430a0e9147/packages/core/styles/common/variables.pcss)
### Couleurs
Afin de se faciliter la tâche, on utilise un **générateur de variation des couleurs**. Il suffit ensuite de récupérer les propriétés hexagone et de les mettre dans le fichier des variables.
#### Ressources
- [Générateur de palette](https://docusaurus.io/fr/docs/styling-layout#css-modules)
- [Variables de base Infima](https://infima.dev/docs/utilities/colors/)
### Table of content (TOC)
La TOC a une taille trop petite et nous utilisons la méthode du _swizzling_ pour augmenter sa taille. On passe de col--2 à col--3 qui est **une propriété d'Infima**.
#### Ressources
- [Github](https://github.com/facebook/docusaurus/search?q=col--2)
- [Swizzling](https://docusaurus.io/fr/docs/swizzling)
- [Personnalisation TOC](https://docusaurus.io/fr/docs/markdown-features/toc#customizing-table-of-contents-generation)
### Avatar as Twitter
Avec Infima, on **récupère un code** nous permettant de créer un petit avatar avec un texte de type citation.
#### Ressources
- [Infima avatar](https://infima.dev/docs/components/avatar)
### Admonitions
Cette ressource utilise les couleurs de base d'Infima dans ses cadres et bordures.
__Ressources :__
[Admonitions](https://docusaurus.io/fr/docs/markdown-features/admonitions)
#### Ressources
- [Admonitions](https://docusaurus.io/fr/docs/markdown-features/admonitions)
#### Ajouter des icones avec React
Pour ajouter des icônes, des logo de marques existantes ou encore des pyctogrammes, on utilise la librairie de ressources visuelles dont dispose React.
__Ressources :__
[React Icons](https://react-icons.github.io/react-icons/icons?name=fa)
[Documentation](https://fontawesome.com/v5/docs/web/use-with/react)
#### Ressources
- [React Icons](https://react-icons.github.io/react-icons/icons?name=fa)
- [Documentation](https://fontawesome.com/v5/docs/web/use-with/react)
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