doc: documented images organisation and refactored code

README.md

@@ -70,6 +70,21 @@ More details on Project structure:
 * `/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
 
+## Image organisation
+
+Static assets are arranged in a certain way, all images are contained in subfolders within the `img` folder, the subfolder depends on how they are used. The name must be the same. Following this structure: 
+
+* An image used on a page will be in a subfolder named after the page, within the `pages` folder. e.g:
+__You would find the file `kermit.png` used on the `about` page at `img/pages/about/kermit.png`__
+
+* An image used in a component will be in a subfolder named after the component, within the `components` folder. e.g:
+__You would find the file `kermit.png` used on the `slider` component at `img/components/slider/kermit.png`__
+
+* An image used on a documentation page will be in a subfolder named after the page, within the `docs` folder. e.g:
+__You would find the file `kermit.png` used on the `management` documentation page at `img/docs/management/kermit.png`__
+
+* Global images (e.g: used in the footer) will be in the `img/theme/` subfolder.
+
 ## License
 
 [![froggit.fr Copyright (c) 2021-present Lydra](https://cdn.icon-icons.com/icons2/2622/PNG/512/legal_license_mit_icon_157533.png)](https://choosealicense.com/licenses/mit/)

docs/Gestions des plans/etang_users.md

@@ -59,11 +59,11 @@ Il n'est bien sûr pas décompté de votre nombre de sièges.
 
 Dans la [liste des groupes](https://lab.frogg.it/dashboard/groups) vous allez voir le groupe privé `🗄️ Froggit data`
 
-![Groupe racine Froggit data](/img/docs/gestion_plans/froggit_data_in_group_list.png)
+![Groupe racine Froggit data](/img/docs/gestions_des_plans/froggit_data_in_group_list.png)
 
 Si vous dépliez ce groupe complètement vous allez arriver à votre **groupe client**.
 
-![Groupe client](/img/docs/gestion_plans/customer_group_in_group_list.png)
+![Groupe client](/img/docs/gestions_des_plans/customer_group_in_group_list.png)
 
 :::danger Attention !
 N'utilisez pas ce groupe pour gérer vos projets ou votre organisation. Ce groupe ne sert qu'à gérer votre flotte d'utilisateurs Froggit. Nous vous conseillons de gérer votre organisation en créant un [groupe racine (_namespace_)](https://lab.frogg.it/help/user/group/index.md#namespaces).
@@ -77,7 +77,7 @@ N'utilisez pas ce groupe pour gérer vos projets ou votre organisation. Ce group
 
 Dans votre groupe client vous avez un projet `My Froggit Customer Page` qui vous présentera des données synthétiques sur votre compte.
 
-![My Froggit Customer Page](/img/docs/gestion_plans/My_Froggit_Customer_Page.png)
+![My Froggit Customer Page](/img/docs/gestions_des_plans/My_Froggit_Customer_Page.png)
 
 ### Votre badge de sièges
 
@@ -101,7 +101,7 @@ Il est recalculé toutes les nuits.
 ### Ajouter un utilisateur à votre flotte
 
 Vous pouvez ajouter un utilisateur par son adresse courriel en cliquant sur le bouton `Invite members`.
-![invite members button](/img/docs/gestion_plans/invite_members_button.png)
+![invite members button](/img/docs/gestions_des_plans/invite_members_button.png)
 
 Vous pouvez alors remplir le formulaire d'invitation avec les informations du membre :
 
@@ -109,27 +109,27 @@ Vous pouvez alors remplir le formulaire d'invitation avec les informations du me
 - **role :** si vous voulez qu'un utilisateur puisse lui aussi gérer les membres il faut l'inviter en tant que `Maintainer` ou `Owner`
 - **date d'expiration d'accès :** après cette date le membre ne fera plus partie de votre flotte
 
-![invite members form](/img/docs/gestion_plans/invite_members_form.png)
+![invite members form](/img/docs/gestions_des_plans/invite_members_form.png)
 
 [ℹ️ Pour en savoir plus sur l'ajout des membres...](https://lab.frogg.it/help/user/group/index.md#add-users-to-a-group)
 
 Le membre va recevoir un courriel l'invitant à créer son compte sur Froggit.
 
-![invite members mail](/img/docs/gestion_plans/invite_members_mail.png)
+![invite members mail](/img/docs/gestions_des_plans/invite_members_mail.png)
 
 Tant qu'il n’aura pas créé son compte il apparaîtra dans la liste des invitations.
 
-![invite members pending](/img/docs/gestion_plans/invite_members_pending.png)
+![invite members pending](/img/docs/gestions_des_plans/invite_members_pending.png)
 
 Après avoir créé son compte, l'utilisateur apparaît alors dans la liste des membres.
 
-![invite members result](/img/docs/gestion_plans/invite_members_result.png)
+![invite members result](/img/docs/gestions_des_plans/invite_members_result.png)
 
 ### Retirer un utilisateur de votre flotte
 
 Pour retirer un membre de votre flotte, il suffit simplement de cliquer sur le bouton `Remove member` à droite de la ligne du membre.
 
-![remove members button](/img/docs/gestion_plans/remove_members_button.png)
+![remove members button](/img/docs/gestions_des_plans/remove_members_button.png)
 
 [ℹ️ Pour en savoir plus sur la suppression des membres...](https://lab.frogg.it/help/user/group/index.md#remove-a-member-from-the-group)
 

docusaurus.config.js

@@ -17,7 +17,7 @@ module.exports = {
       title: "",
       logo: {
         alt: "Froggit Logo",
-        src: "img/logo_typo_froggit.png",
+        src: "img/theme/logo_typo_froggit.png",
       },
       items: [      
         {label: "Fonctionnalités", position: "left", to: "/#features", exact: true},

src/components/CarouselLibre.js

@@ -4,42 +4,42 @@ import clsx from "clsx";
 
 const CarouselList = [
   {
-    img: "/img/CarouselLibre/gitlab_logo.png",
+    img: "/img/components/CarouselLibre/gitlab_logo.png",
     name: "GitLab",
     alt: "logo de GitLab"
   },
   {
-    img: "/img/CarouselLibre/mattermost_logo.png",
+    img: "/img/components/CarouselLibre/mattermost_logo.png",
     name: "Mattermost",
     alt: "logo de Mattermost"
   },
   {
-    img: "/img/CarouselLibre/docusaurus.png",
+    img: "/img/components/CarouselLibre/docusaurus.png",
     name: "Docusaurus",
     alt: "logo de Docusaurus"
   },
   {
-    img: "/img/CarouselLibre/debian_logo.png",
+    img: "/img/components/CarouselLibre/debian_logo.png",
     name: "Debian",
     alt: "logo de Debian"
   },
   {
-    img: "/img/CarouselLibre/Ansible_logo.png",
+    img: "/img/components/CarouselLibre/Ansible_logo.png",
     name: "Ansible",
     alt: "logo de Ansible"
   },
   {
-    img: "/img/CarouselLibre/Terraform_logo.png",
+    img: "/img/components/CarouselLibre/Terraform_logo.png",
     name: "Terraform",
     alt: "logo de Terraform"
   },
   {
-    img: "/img/CarouselLibre/borg_logo.png",
+    img: "/img/components/CarouselLibre/borg_logo.png",
     name: "Borg",
     alt: "logo de Borg"
   },
   {
-    img: "/img/CarouselLibre/restic_logo.png",
+    img: "/img/components/CarouselLibre/restic_logo.png",
     name: "Restic",
     alt: "logo de Restic"
   },

src/components/HomepageFeatures.js

@@ -67,7 +67,7 @@ export default function HomepageFeatures() {
           {FeatureList.map((em) => (
             <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
               <div className={styles.rowDisplay}>
-                <img src={useBaseUrl("img/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
                 <p className={styles.textDisplay}> {em.description} </p>
               </div>
             </TabItem>

src/components/HomepagePromises.js

@@ -5,7 +5,7 @@ import styles from "./HomepagePromises.module.css";
 const PromiseList = [
   {
     title: "Sécurisé",
-    Svg: require("../../static/img/bouclier.svg").default,
+    Svg: require("../../static/img/components/HomepagePromises/bouclier.svg").default,
     alt: "Icône d'un bouclier bleu",
     description: (
       <>
@@ -15,7 +15,7 @@ const PromiseList = [
   },
   {
     title: "Souverain",
-    Svg: require("../../static/img/rgpd.svg").default,
+    Svg: require("../../static/img/components/HomepagePromises/rgpd.svg").default,
     alt: "Icône d'un cadenas avec inscrit RGPD",
     description: (
       <>
@@ -25,7 +25,7 @@ const PromiseList = [
   },
   {
     title: "Libre",
-    Svg: require("../../static/img/liberte.svg").default,
+    Svg: require("../../static/img/components/HomepagePromises/liberte.svg").default,
     alt: "Icône de menottes brisées",
     description: (
       <>

src/pages/communaute.mdx

 import TextRight from '@site/src/components/TextRight';
 
-<TextRight img="/img/cheatsheet_cover.png" alt="Illustration de l'antisèche Git">
+<TextRight img="/img/pages/communaute/cheatsheet_cover.png" alt="Illustration de l'antisèche Git">
 
 # Devenez deux fois plus productif grâce à GitLab !
 

src/pages/tarifs.mdx

@@ -36,7 +36,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
       <div class="card card_price">
         <div class="card__image margin-top--md">
           <img
-            src={useBaseUrl("img/pricing/hidden.png")}
+            src={useBaseUrl("img/pages/tarifs/hidden.png")}
             alt="Image alt text"
             title="Plan Têtard" />
         </div>
@@ -69,7 +69,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
       <div class="card  shadow--tl card_price card_price_main">
         <div class="card__image margin-top--md">
           <img
-            src={useBaseUrl("img/pricing/computer.png")}
+            src={useBaseUrl("img/pages/tarifs/computer.png")}
             alt="Image alt text"
             title="Plan Grenouille" />
         </div>
@@ -102,7 +102,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
       <div class="card card_price">
         <div class="card__image margin-top--md">
           <img
-            src={useBaseUrl("img/pricing/cauldron.png")}
+            src={useBaseUrl("img/pages/tarifs/cauldron.png")}
             alt="Image alt text"
             title="Plan Étang" />
         </div>
@@ -142,7 +142,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
       <div class="card card_price">
         <div class="card__image margin-top--md">
           <img
-            src={useBaseUrl("img/pricing/hidden.png")}
+            src={useBaseUrl("img/pages/tarifs/hidden.png")}
             alt="Image alt text"
             title="Plan Têtard" />
         </div>
@@ -175,7 +175,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
       <div class="card  shadow--tl card_price card_price_main">
          <div class="card__image margin-top--md">
           <img
-            src={useBaseUrl("img/pricing/computer.png")}
+            src={useBaseUrl("img/pages/tarifs/computer.png")}
             alt="Image alt text"
             title="Plan Grenouille" />
         </div>
@@ -205,7 +205,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
       <div class="card card_price">
         <div class="card__image margin-top--md">
           <img
-            src={useBaseUrl("img/pricing/cauldron.png")}
+            src={useBaseUrl("img/pages/tarifs/cauldron.png")}
             alt="Image alt text"
             title="Plan Étang" />
         </div>

src/theme/Footer/index.js

@@ -12,8 +12,8 @@ import FooterLogo from "@theme/Footer/Logo";
 import FooterCopyright from "@theme/Footer/Copyright";
 import FooterLayout from "@theme/Footer/Layout";
 import { FaYoutube, FaLinkedin, FaGitlab, FaTwitter } from "react-icons/fa";
-import Froggitblanc from "/static/img/logo_froggit_blanc.png";
-import DontTrackMe from "/static/img/do-not-track-me.svg";
+import Froggitblanc from "/static/img/theme/logo_froggit_blanc.png";
+import DontTrackMe from "/static/img/theme/do-not-track-me.svg";
 import useBaseUrl from "@docusaurus/useBaseUrl";