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

doc/referentiel_liens.md

+# 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)

docs/Migration/group_migration.md

+---
+sidebar_position: 1
+---
+
+# Comment migrer un groupe GitLab vers Froggit ?
+
+Tout comme il est possible d'importer un projet depuis GitLab.com ou une autre instance GitLab, il est possible d'importer un groupe GitLab vers Froggit.
+
+## Comment procéder ?
+
+1) Connectez-vous avec votre compte Froggit sur https://lab.frogg.it/groups/new pour créer un nouveau groupe ou un nouveau sous-groupe.
+
+2) Sélectionnez **Import Group**.
+![Etapes 1 et 2](/img/docs/migration/step1-2.png)
+
+3) Entrez l'URL de l'instance GitLab depuis laquelle vous allez importer vos groupes (cela peut être gitlab.com ou une instance auto-hébergée).
+
+4) Sur l'instance GitLab sur laquelle vous allez importer les groupes : Générez ou copiez un [__personal access token__](https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html) avec les __scopes__ `api` et `read_repository`.
+
+5) Copiez le token généré dans le champ associé et sélectionnez **Connect instance**.
+![Etapes 3 à 5](/img/docs/migration/step3-5.png)
+
+6) Après avoir autorisé l'accès à votre instance GitLab, vous êtes redirigé vers la page d'importation des groupes. Les groupes que vous pourrez importer sont listés.
+
+:::info
+
+Vous ne pouvez importer que les groupes dont **vous avez le rôle de Owner (propriétaire)** sur l'instance distante.
+
+:::
+
+7) Par défaut, les espaces de noms (_namespaces_) de groupes proposés correspondent aux noms tels qu'ils existent sur l'instance distante. Cependant, suivant vos permissions, vous pouvez choisir d'éditer les noms des groupes avant leur importation.
+![Etapes 6 et 7](/img/docs/migration/step6-7.png)
+8) À côté des groupes que vous voulez importer, sélectionnez **Import**. L'importation peut prendre un peu de temps et vous en êtes informé en temps réel grâce à la colonne **Status** à côté. Une fois l'importation finie, votre groupe est désormais disponible dans Froggit. Une URL vous est donnée pour accéder au groupe.

docs/intro.md

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 🔜 Ça arrive !
 
-Mais en attendant vous pouvez consulter les docs officiels de :
+Mais en attendant, vous pouvez consulter les docs officielles de :
 - [Gitlab](https://docs.gitlab.com/)
 - [GitLab-CI](https://docs.gitlab.com/ee/ci/index.html)
 - [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/index.html)

docusaurus.config.js

@@ -3,8 +3,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: "Simplifiez-vous le code !",
-  tagline: "Améliorez la coopération de vos équipes autour du code source, sans gérer votre forge logicielle !",
+  title: "Simplifiez-vous le code",
+  tagline: "",
   url: process.env.DOCUSAURUS_URL || "https://froggit.fr",
   baseUrl: process.env.DOCUSAURUS_BASEURL || "/",
   onBrokenLinks: "throw",

package.json

@@ -27,10 +27,13 @@
     "@svgr/webpack": "^6.2.1",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
+    "jquery": "^3.6.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.3.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "url-loader": "^4.1.1"
   },
   "browserslist": {

src/components/Carousel.js

+/* eslint react/prop-types: 0 */
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+function CarouselElement({name, img, link}) {
+  if (typeof link === "undefined" && typeof name === "undefined") {
+    return (
+      <div className="box_carousel">     
+        <div>
+          <img src={useBaseUrl(img)} className="carousel-img" />
+        </div>
+      </div>
+    );
+  }
+
+  else if (typeof link === "undefined") {
+    return (
+      <div className="box_carousel">     
+        <div>
+          <img src={useBaseUrl(img)} className="carousel-img" />
+          <h6 className="title_carousel">{name}</h6>
+        </div>
+      </div>
+    );
+  }
+
+  else if (typeof name === "undefined") {
+    return (
+      <div className="box_carousel">
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img src={useBaseUrl(img)} className="carousel-img" />
+        </a>
+      </div>
+    );
+  }
+
+  else {
+    return (
+      <div className="box_carousel">
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img src={useBaseUrl(img)} className="carousel-img" />
+          <h6 className="title_carousel">{name}</h6>
+        </a>
+      </div>
+    );
+  }
+}
+
+export default function Carousel(props) {
+  const list = props.list;
+  //https://react-slick.neostack.com/docs/api/
+  const settings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: 4000,
+    autoplaySpeed: 4000,
+    variableWidth: true,
+    cssEase: "linear"
+  };
+
+  return (
+    <div>
+      <Slider {...settings}>
+        {list.map((props, idx) => (
+          <CarouselElement key={idx} {...props} />
+        ))}
+      </Slider>
+    </div>
+  );
+}

src/components/CarouselLibre.js

+import React from "react";
+import Carousel from "./Carousel";
+
+const CarouselList = [
+  {
+    name: "Acceuil",
+    img: "/img/docusaurus.png",
+    link: "https://froggit.fr/",
+  },
+  {
+    img: "/img/bouclier.svg",
+  },
+  {
+    img: "/img/logo_froggit.svg",
+    link: "/communaute",
+  },
+  {
+    name: "hello",
+    img: "/img/logo_froggit.svg",
+  },
+  {
+    name: "ki jan'w",
+    img: "/img/chemistry.svg",
+  },
+  {
+    name: "bom dia",
+    img: "/img/read-smile.svg",
+  },
+];
+
+export default function CarouselLibre() {
+  return (
+    <Carousel list={CarouselList} />
+  );
+}

src/components/HomepagePromises.js

@@ -4,11 +4,11 @@ import styles from "./HomepagePromises.module.css";
 
 const PromiseList = [
   {
-    title: "Sûr",
+    title: "Sécurisé",
     Svg: require("../../static/img/bouclier.svg").default,
     description: (
       <>
-        <p>Vos données sont en lieu sûr et sauvegardées toutes les nuits.</p>
+        <p>Vos données sont en lieu sûr et sauvegardées à deux endroits différents toutes les nuits.</p>
       </>
     ),
   },
@@ -17,7 +17,7 @@ const PromiseList = [
     Svg: require("../../static/img/rgpd.svg").default,
     description: (
       <>
-        <p>Nous sommes hébergés en France et conformes au RGPD.</p>
+        <p>Dites bye-bye au <i>Cloud Act</i> et aux risques d’espionnage industriel. Avec Froggit vous êtes hébergé en France et protégé par les normes RGPD.</p>
       </>
     ),
   },
@@ -26,7 +26,7 @@ const PromiseList = [
     Svg: require("../../static/img/liberte.svg").default,
     description: (
       <>
-        <p>Notre solution s&apos;appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
+        <p>Froggit se base sur des logiciels libres reconnus et des conditions générales d’utilisation complètement éthiques.</p>
       </>
     ),
   },
@@ -49,12 +49,15 @@ function Promise({Svg, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <section className="section-promises">    
-      <div className="row">
-        {PromiseList.map((props, idx) => (
-          <Promise key={idx} {...props} />
-        ))}
-      </div>   
-    </section>
+    <div>
+      <h2 className="promise-title">Faites la différence</h2>
+      <section className="section-promises">    
+        <div className="row">
+          {PromiseList.map((props, idx) => (
+            <Promise key={idx} {...props} />
+          ))}
+        </div>   
+      </section>
+    </div>
   );
 }

src/css/buttons.css

+/***** BUTTON *****/
+.button {
+    margin: 10px;
+    border-color: var(--ifm-color-success);
+    color: var(--ifm-color-frame);
+    border-style: none;
+    white-space : initial;
+    font-family: var(--ifm-font-family-base);
+}
+
+.button--beta {
+    background-color: var(--ifm-color-success);
+    border-color: var(--ifm-color-success);
+    color: var(--ifm-color-frame);
+    border-style: none;
+}
+
+.button--beta:hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-info);
+    border-style: none;
+}
+
+/* btn note */
+.button--note {
+    background-color: var(--ifm-color-gray-300);
+    color: var(--ifm-color-gray-800);
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:not(.button--outline) {
+    background-color: var(--ifm-color-gray-300);
+    color: var(--ifm-color-gray-800);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:hover, .button--note:not(.button--outline):hover {
+    color: var(--ifm-color-gray-800);
+    background-color: var(--ifm-color-gray-100);
+    border-style: none;
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+/* btn success */
+.button--success {
+    background-color: var(--ifm-color-success-darkest);
+    color: var(--ifm-color-white);
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:not(.button--outline) {
+    background-color: var(--ifm-color-success-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:hover, .button--success:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-success);
+    border-style: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn info */
+.button--info {
+    background-color: var(--ifm-color-info-darkest);
+    color: var(--ifm-color-white);
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:not(.button--outline) {
+    background-color: var(--ifm-color-info-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:hover, .button--info:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-info-dark);
+    border-style: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn warning */
+.button--warning {
+    background-color: var(--ifm-color-warning-darkest);
+    color: var(--ifm-color-white);
+}
+
+.button--warning:not(.button--outline) {
+    background-color: var(--ifm-color-warning-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--warning:hover, .button--warning:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-warning-darker);
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn danger */
+.button--danger {
+    background-color: var(--ifm-color-danger-darkest);
+    color: var(--ifm-color-white);
+}
+
+.button--danger:not(.button--outline) {
+    background-color: var(--ifm-color-danger-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--danger:hover, .button--danger:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-danger);
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* button "La doc de Froggit" */
+.breadcrumbs__item--active .breadcrumbs__link {
+    background: var(--ifm-breadcrumb-item-background-active);
+    color: var(--ifm-color-warning);
+}

src/css/carousel.css

+/* CAROUSEL */
+.box_carousel {
+    display: flex;
+    text-align: center;
+    margin-right: 0px;
+    margin-left: 0px;
+}
+
+.carousel-img {
+    margin: 20px;
+    max-width: 110px;
+    /* text-align: center; */
+    justify-content: space-between;
+}
+
+.title_carousel {
+    display: flex;
+    justify-content: center;
+}

src/css/custom.css

 @import url("variables.css");
+@import url("buttons.css");
 @import url("fonts.css");
 @import url("footer.css");
 @import url("dark-theme.css");
 @import url("matomo.css");
 @import url("tarifs.css");
+@import url("carousel.css");
 
 
 html, body {
@@ -125,44 +127,6 @@ ul {
   padding-bottom: 20px;
 }
 
-/***** BUTTON *****/
-.button {
-  margin: 10px;
-  border-color: var(--ifm-color-success);
-  color: var(--ifm-color-frame);
-  border-style: none;
-  white-space : initial;
-  font-family: var(--ifm-font-family-base);
-}
-
-.button--beta {
-  background-color: var(--ifm-color-success);
-  border-color: var(--ifm-color-success);
-  color: var(--ifm-color-frame);
-  border-style: none;
-}
-
-.button--beta:hover {
-  color: var(--ifm-color-secondary);
-  background-color: var(--ifm-color-info);
-  border-style: none;
-}
-
-.button--warning {
-  color: var(--ifm-color-success);
-  border-style: none;
-}
-
-.button--warning:hover, .button--warning:not(.button--outline):hover {
-  color: var(--ifm-color-secondary);
-  background-color: var(--ifm-color-info);
-  border-style: none;
-}
-
-.button--warning:not(.button--outline) {
-  background-color: var(--ifm-color-frame);
-}
-
 /******* MAIN ELEM *******/
 .section-promises {
   padding: 4rem 0;
@@ -234,15 +198,14 @@ ul {
   color: var(--ifm-color-warning);
 }
 
-/* button "La doc de Froggit" */
-.breadcrumbs__item--active .breadcrumbs__link {
-  background: var(--ifm-breadcrumb-item-background-active);
-  color: var(--ifm-color-warning);
-}
-
 /****** MEDIA SCREEN *******/
 @media screen and (max-width:330px) {
   .navbar {
       width: 330px;
   }
 }
+
+.promise-title {
+  display: flex;
+  justify-content: center;
+}

src/css/dark-theme.css

@@ -40,13 +40,6 @@ html[data-theme='dark'] .clean-btn :hover {
     color: var(--ifm-color-secondary);
 }
 
-/* dark theme button*/
-html[data-theme='dark'] .button--beta:hover {
-    color: var(--ifm-color-secondary);
-    background-color: var(--ifm-color-info);
-    border-style: none;
-}
-
 /* a & text */
 html[data-theme='dark'] .theme-doc-footer-edit-meta-row a {
    color: var(--ifm-color-warning);

src/pages/dummy_page.md → src/pages/dummy_page.mdx

@@ -2,6 +2,7 @@
 title: dummy
 description: "page factice"
 ---
+import CarouselLibre from "@site/src/components/CarouselLibre";
 
 # Page factice
 
@@ -12,6 +13,33 @@ Page factice penser à créer une vraie page !
 echo "Hello World"
 ```
 
+<button className="button button--note">button--note</button>
+<button className="button button--success">button--success</button>
+<button className="button button--info">button--info</button>
+<button className="button button--warning">button--warning</button>
+<button className="button button--danger">button--danger</button>
+
+
+:::note Encart note
+🔜 **Les tarifs arrivent !** <a class="button button--note" href="#">Bouton note !</a>
+:::
+
+:::success Encart success
+🔜 **Les tarifs arrivent !** <a class="button button--success" href="#">Bouton success !</a>
+:::
+
+:::info Encart info
+🔜 **Les tarifs arrivent !** <a class="button button--info" href="#">Bouton info !</a>
+:::
+
+:::caution Encart caution
+🔜 **Les tarifs arrivent !** <a class="button button--warning" href="#">Bouton caution !</a>
+:::
+
+:::danger Encart danger
+🔜 **Les tarifs arrivent !** <a class="button button--danger" href="#">Bouton danger !</a>
+:::
+
 :::note
 
 Some **content** with _markdown_ `syntax`. Check [this `api`](#).

src/pages/index.js

@@ -7,19 +7,16 @@ import HomepageFeatures from "../components/HomepageFeatures";
 import Link from "@docusaurus/Link";
 
 function HomepageHeader(){
-  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={styles.heroBanner}>
       <div className="sections container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w">
-              ▶️ En savoir plus
-        </Link>
-        <Link className="button button--beta button--lg" to="http://beta.froggit.fr/">
-              Rejoindre la bêta gratuite 🧪
-        </Link>
-
+        <h1 className="hero__title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</h1>
+        <p className="hero__subtitle">Collaborez autour du code sur la première plateforme intégrée DevOps <i>Made in France</i>. Avec Froggit, sécurisez vos données, améliorez vos performances et protégez enfin la planète.</p>
+        <div className="button-frame">
+          <Link className="button button--beta button--lg" to="/tarifs">
+          Je m’abonne sans engagement<br /><div className="btn-little-txt">30 jours satisfaits ou remboursés !</div>
+          </Link>
+        </div>
       </div>
     </header>      
   );