Compare revisions

Julie Thezenas · Christophe Chaudier · Christophe Chaudier · Julie Thezenas · Christophe Chaudier · Christophe Chaudier
--- 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

--- a/doc/referentiel_liens.md
+++ b/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)
--- a/docusaurus.config.js
+++ b/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",

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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": {

--- a/src/components/Carousel.js
+++ b/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>
+  );
+}
--- a/src/components/CarouselLibre.js
+++ b/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} />
+  );
+}
--- a/src/components/HomepagePromises.js
+++ b/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>
  );
 }
--- a/src/css/carousel.css
+++ b/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;
+}
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -4,6 +4,7 @@
 @import url("dark-theme.css");
 @import url("matomo.css");
 @import url("tarifs.css");
+@import url("carousel.css");


 html, body {
@@ -125,6 +126,10 @@ ul {
  padding-bottom: 20px;
 }

+.btn-little-txt {
+  font-size: small;
+}
+
 /***** BUTTON *****/
 .button {
  margin: 10px;
@@ -136,15 +141,15 @@ ul {
 }

 .button--beta {
-  background-color: var(--ifm-color-success);
  border-color: var(--ifm-color-success);
-  color: var(--ifm-color-frame);
  border-style: none;
+  background-color: var(--ifm-color-frame);
+  color: var(--ifm-color-black);
 }

 .button--beta:hover {
  color: var(--ifm-color-secondary);
-  background-color: var(--ifm-color-info);
+  background-color: var(--ifm-color-success);
  border-style: none;
 }

@@ -246,3 +251,8 @@ ul {
      width: 330px;
  }
 }
+
+.promise-title {
+  display: flex;
+  justify-content: center;
+}
--- a/src/pages/dummy_page.md
+++ b/src/pages/dummy_page.md
@@ -2,6 +2,7 @@
 title: dummy
 description: "page factice"
 ---
+import CarouselLibre from "@site/src/components/CarouselLibre";

 # Page factice

@@ -12,6 +13,12 @@ Page factice penser à créer une vraie page !
 echo "Hello World"
 ```

+## Hello mon carousel Libre !
+
+<div>
+    <CarouselLibre />
+</div>
+
 :::note

 Some **content** with _markdown_ `syntax`. Check [this `api`](#).

--- a/src/pages/index.js
+++ b/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>      
  );
No results found