From 75ae81f6286c74045c3ad58b3f5a18e0cfaf258d Mon Sep 17 00:00:00 2001 From: Julie Thezenas <julie.thezenas@gmail.com> Date: Mon, 4 Jul 2022 16:15:44 +0000 Subject: [PATCH] doc: create our working link doc --- README.md | 2 ++ doc/referentiel_liens.md | 67 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+) create mode 100644 doc/referentiel_liens.md diff --git a/README.md b/README.md index 56bc98a..e00f03a 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. +[See here for more](doc/referentiel_liens.md). + ## Installation ```console diff --git a/doc/referentiel_liens.md b/doc/referentiel_liens.md new file mode 100644 index 0000000..2c64611 --- /dev/null +++ b/doc/referentiel_liens.md @@ -0,0 +1,67 @@ +# Référenciel des liens et ressources pour le projet + +## 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**. + +**[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_ + +**[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 +Cette ressource utilise les couleurs de base d'Infima dans ses cadres et bordures. + +#### 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) -- GitLab