feat: add floss logos and set up caroussel behavior on homepage

package-lock.json

@@ -5360,16 +5360,10 @@
       }
     },
     "node_modules/core-js": {
-<<<<<<< HEAD
       "version": "3.25.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.0.tgz",
       "integrity": "sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA==",
-=======
-      "version": "3.22.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.7.tgz",
-      "integrity": "sha512-Jt8SReuDKVNZnZEzyEQT5eK6T2RRCXkfTq7Lo09kpm+fHjgGewSbNjV+Wt4yZMhPDdzz2x1ulI5z/w4nxpBseg==",
       "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
->>>>>>> build: update dependencies
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5398,16 +5392,10 @@
       }
     },
     "node_modules/core-js-pure": {
-<<<<<<< HEAD
       "version": "3.25.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.0.tgz",
       "integrity": "sha512-IeHpLwk3uoci37yoI2Laty59+YqH9x5uR65/yiA0ARAJrTrN4YU0rmauLWfvqOuk77SlNJXj2rM6oT/dBD87+A==",
-=======
-      "version": "3.22.7",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.7.tgz",
-      "integrity": "sha512-wTriFxiZI+C8msGeh7fJcbC/a0V8fdInN1oS2eK79DMBGs8iIJiXhtFJCiT3rBa8w6zroHWW3p8ArlujZ/Mz+w==",
       "deprecated": "core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.",
->>>>>>> build: update dependencies
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -16373,15 +16361,6 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
-    "@jridgewell/source-map": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
-      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
-      "requires": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      }
-    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",

src/components/Carousel.js

@@ -8,9 +8,9 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 function CarouselElement({name, img, link}) {
   if (typeof link === "undefined" && typeof name === "undefined") {
     return (
-      <div className="box_carousel">     
+      <div className="carousel_box">     
         <div>
-          <img src={useBaseUrl(img)} className="carousel-img" />
+          <img src={useBaseUrl(img)} className="carousel_img" />
         </div>
       </div>
     );
@@ -18,20 +18,18 @@ function CarouselElement({name, img, link}) {
 
   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 className="carousel_box">
+        <img src={useBaseUrl(img)} className="carousel_img" />
+        <h6 className="carousel_title">{name}</h6>
       </div>
     );
   }
 
   else if (typeof name === "undefined") {
     return (
-      <div className="box_carousel">
+      <div className="carousel_box">
         <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} className="carousel-img" />
+          <img src={useBaseUrl(img)} className="carousel_img" />
         </a>
       </div>
     );
@@ -39,10 +37,10 @@ function CarouselElement({name, img, link}) {
 
   else {
     return (
-      <div className="box_carousel">
+      <div className="carousel_box">
         <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} className="carousel-img" />
-          <h6 className="title_carousel">{name}</h6>
+          <img src={useBaseUrl(img)} className="carousel_img" />
+          <h6 className="carousel_title">{name}</h6>
         </a>
       </div>
     );
@@ -53,14 +51,19 @@ export default function Carousel(props) {
   const list = props.list;
   //https://react-slick.neostack.com/docs/api/
   const settings = {
-    dots: false,
     infinite: true,
+    easing: "linear",
     slidesToShow: 2,
     slidesToScroll: 1,
+    arrows: false,
     autoplay: true,
-    speed: 4000,
-    autoplaySpeed: 4000,
+    speed: 3000,
+    draggable: false,
+    swipeToSlide: false,
+    autoplaySpeed: 3000,
     variableWidth: true,
+    centerMode: true,
+    pauseOnHover: true,
     cssEase: "linear"
   };
 

src/components/CarouselLibre.js

 import React from "react";
 import Carousel from "./Carousel";
+import clsx from "clsx";
 
 const CarouselList = [
   {
-    name: "Acceuil",
-    img: "/img/docusaurus.png",
-    link: "https://froggit.fr/",
+    img: "/img/CarouselLibre/gitlab_logo.png",
+    name: "GitLab"
   },
   {
-    img: "/img/bouclier.svg",
+    img: "/img/CarouselLibre/mattermost_logo.png",
+    name: "Mattermost"
   },
   {
-    img: "/img/logo_froggit.svg",
-    link: "/communaute",
+    img: "/img/CarouselLibre/docusaurus.png",
+    name: "Docusaurus"
   },
   {
-    name: "hello",
-    img: "/img/logo_froggit.svg",
+    img: "/img/CarouselLibre/debian_logo.png",
+    name: "Debian"
   },
   {
-    name: "ki jan'w",
-    img: "/img/chemistry.svg",
+    img: "/img/CarouselLibre/Ansible_logo.png",
+    name: "Ansible"
   },
   {
-    name: "bom dia",
-    img: "/img/read-smile.svg",
+    img: "/img/CarouselLibre/Terraform_logo.png",
+    name: "Terraform"
+  },
+  {
+    img: "/img/CarouselLibre/borg_logo.png",
+    name: "Borg"
+  },
+  {
+    img: "/img/CarouselLibre/restic_logo.png",
+    name: "Restic"
   },
 ];
 
 export default function CarouselLibre() {
   return (
-    <Carousel list={CarouselList} />
+    <div>
+      <h2 className={clsx("text--center")}>Restez libres !
+      </h2>
+			<p className={"text--center"}>Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
+      </p> 
+      <section className="sections container">
+        <Carousel list={CarouselList} />
+      </section>
+    </div>
   );
 }

src/css/carousel.css

 /* CAROUSEL */
-.box_carousel {
+.carousel_box {
     display: flex;
-    text-align: center;
-    margin-right: 0px;
-    margin-left: 0px;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+    margin-right: 24px;
+    margin-left: 24px;
+		height: 122px;
 }
 
-.carousel-img {
-    margin: 20px;
-    max-width: 110px;
+.carousel_img {
+		padding: 8px;
+		margin-bottom: 12px;
+    max-width: 90px;
+		max-height: 90px;
     /* text-align: center; */
     justify-content: space-between;
 }
 
-.title_carousel {
+.carousel_title {
     display: flex;
     justify-content: center;
 }

src/pages/dummy_page.mdx

@@ -12,6 +12,7 @@ Page factice penser à créer une vraie page !
 #!/bin/bash
 echo "Hello World"
 ```
+<CarouselLibre/>
 
 <button className="button button--note">button--note</button>
 <button className="button button--success">button--success</button>

src/pages/index.js

@@ -4,6 +4,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
+import CarouselLibre from "@site/src/components/CarouselLibre";
 import Link from "@docusaurus/Link";
 
 function HomepageHeader(){
@@ -34,6 +35,7 @@ export default function Home() {
       <main>
         <HomepagePromises />
         <HomepageFeatures />
+        <CarouselLibre/> 
       </main>
     </Layout>
   );

static/img/CarouselLibre/openlogo-nd.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 10.0, SVG Export Plug-In . SVG Version: 3.0.0 Build 77)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" i:viewOrigin="262 450" i:rulerOrigin="0 0" i:pageBounds="0 792 612 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="87.041" height="108.445" viewBox="0 0 87.041 108.445" overflow="visible" enable-background="new 0 0 87.041 108.445" xml:space="preserve">
+	<metadata>
+		<variableSets xmlns="http://ns.adobe.com/Variables/1.0/">
+			<variableSet varSetName="binding1" locked="none">
+				<variables/>
+				<v:sampleDataSets xmlns="http://ns.adobe.com/GenericCustomNamespace/1.0/" xmlns:v="http://ns.adobe.com/Variables/1.0/"/>
+			</variableSet>
+		</variableSets>
+		<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
+			<slices/>
+			<sliceSourceBounds y="341.555" x="262" width="87.041" height="108.445" bottomLeftOrigin="true"/>
+		</sfw>
+	</metadata>
+	<g id="Layer_1" i:layer="yes" i:dimmedPercent="50" i:rgbTrio="#4F008000FFFF">
+		<g>
+			<path i:knockout="Off" fill="#A80030" d="M51.986,57.297c-1.797,0.025,0.34,0.926,2.686,1.287     c0.648-0.506,1.236-1.018,1.76-1.516C54.971,57.426,53.484,57.434,51.986,57.297"/>
+			<path i:knockout="Off" fill="#A80030" d="M61.631,54.893c1.07-1.477,1.85-3.094,2.125-4.766c-0.24,1.192-0.887,2.221-1.496,3.307     c-3.359,2.115-0.316-1.256-0.002-2.537C58.646,55.443,61.762,53.623,61.631,54.893"/>
+			<path i:knockout="Off" fill="#A80030" d="M65.191,45.629c0.217-3.236-0.637-2.213-0.924-0.978     C64.602,44.825,64.867,46.932,65.191,45.629"/>
+			<path i:knockout="Off" fill="#A80030" d="M45.172,1.399c0.959,0.172,2.072,0.304,1.916,0.533     C48.137,1.702,48.375,1.49,45.172,1.399"/>
+			<path i:knockout="Off" fill="#A80030" d="M47.088,1.932l-0.678,0.14l0.631-0.056L47.088,1.932"/>
+			<path i:knockout="Off" fill="#A80030" d="M76.992,46.856c0.107,2.906-0.85,4.316-1.713,6.812l-1.553,0.776     c-1.271,2.468,0.123,1.567-0.787,3.53c-1.984,1.764-6.021,5.52-7.313,5.863c-0.943-0.021,0.639-1.113,0.846-1.541     c-2.656,1.824-2.131,2.738-6.193,3.846l-0.119-0.264c-10.018,4.713-23.934-4.627-23.751-17.371     c-0.107,0.809-0.304,0.607-0.526,0.934c-0.517-6.557,3.028-13.143,9.007-15.832c5.848-2.895,12.704-1.707,16.893,2.197     c-2.301-3.014-6.881-6.209-12.309-5.91c-5.317,0.084-10.291,3.463-11.951,7.131c-2.724,1.715-3.04,6.611-4.227,7.507     C31.699,56.271,36.3,61.342,44.083,67.307c1.225,0.826,0.345,0.951,0.511,1.58c-2.586-1.211-4.954-3.039-6.901-5.277     c1.033,1.512,2.148,2.982,3.589,4.137c-2.438-0.826-5.695-5.908-6.646-6.115c4.203,7.525,17.052,13.197,23.78,10.383     c-3.113,0.115-7.068,0.064-10.566-1.229c-1.469-0.756-3.467-2.322-3.11-2.615c9.182,3.43,18.667,2.598,26.612-3.771     c2.021-1.574,4.229-4.252,4.867-4.289c-0.961,1.445,0.164,0.695-0.574,1.971c2.014-3.248-0.875-1.322,2.082-5.609l1.092,1.504     c-0.406-2.696,3.348-5.97,2.967-10.234c0.861-1.304,0.961,1.403,0.047,4.403c1.268-3.328,0.334-3.863,0.66-6.609     c0.352,0.923,0.814,1.904,1.051,2.878c-0.826-3.216,0.848-5.416,1.262-7.285c-0.408-0.181-1.275,1.422-1.473-2.377     c0.029-1.65,0.459-0.865,0.625-1.271c-0.324-0.186-1.174-1.451-1.691-3.877c0.375-0.57,1.002,1.478,1.512,1.562     c-0.328-1.929-0.893-3.4-0.916-4.88c-1.49-3.114-0.527,0.415-1.736-1.337c-1.586-4.947,1.316-1.148,1.512-3.396     c2.404,3.483,3.775,8.881,4.404,11.117c-0.48-2.726-1.256-5.367-2.203-7.922c0.73,0.307-1.176-5.609,0.949-1.691     c-2.27-8.352-9.715-16.156-16.564-19.818c0.838,0.767,1.896,1.73,1.516,1.881c-3.406-2.028-2.807-2.186-3.295-3.043     c-2.775-1.129-2.957,0.091-4.795,0.002c-5.23-2.774-6.238-2.479-11.051-4.217l0.219,1.023c-3.465-1.154-4.037,0.438-7.782,0.004     c-0.228-0.178,1.2-0.644,2.375-0.815c-3.35,0.442-3.193-0.66-6.471,0.122c0.808-0.567,1.662-0.942,2.524-1.424     c-2.732,0.166-6.522,1.59-5.352,0.295c-4.456,1.988-12.37,4.779-16.811,8.943l-0.14-0.933c-2.035,2.443-8.874,7.296-9.419,10.46     l-0.544,0.127c-1.059,1.793-1.744,3.825-2.584,5.67c-1.385,2.36-2.03,0.908-1.833,1.278c-2.724,5.523-4.077,10.164-5.246,13.97     c0.833,1.245,0.02,7.495,0.335,12.497c-1.368,24.704,17.338,48.69,37.785,54.228c2.997,1.072,7.454,1.031,11.245,1.141     c-4.473-1.279-5.051-0.678-9.408-2.197c-3.143-1.48-3.832-3.17-6.058-5.102l0.881,1.557c-4.366-1.545-2.539-1.912-6.091-3.037     l0.941-1.229c-1.415-0.107-3.748-2.385-4.386-3.646l-1.548,0.061c-1.86-2.295-2.851-3.949-2.779-5.23l-0.5,0.891     c-0.567-0.973-6.843-8.607-3.587-6.83c-0.605-0.553-1.409-0.9-2.281-2.484l0.663-0.758c-1.567-2.016-2.884-4.6-2.784-5.461     c0.836,1.129,1.416,1.34,1.99,1.533c-3.957-9.818-4.179-0.541-7.176-9.994l0.634-0.051c-0.486-0.732-0.781-1.527-1.172-2.307     l0.276-2.75C4.667,58.121,6.719,47.409,7.13,41.534c0.285-2.389,2.378-4.932,3.97-8.92l-0.97-0.167     c1.854-3.234,10.586-12.988,14.63-12.486c1.959-2.461-0.389-0.009-0.772-0.629c4.303-4.453,5.656-3.146,8.56-3.947     c3.132-1.859-2.688,0.725-1.203-0.709c5.414-1.383,3.837-3.144,10.9-3.846c0.745,0.424-1.729,0.655-2.35,1.205     c4.511-2.207,14.275-1.705,20.617,1.225c7.359,3.439,15.627,13.605,15.953,23.17l0.371,0.1     c-0.188,3.802,0.582,8.199-0.752,12.238L76.992,46.856"/>
+			<path i:knockout="Off" fill="#A80030" d="M32.372,59.764l-0.252,1.26c1.181,1.604,2.118,3.342,3.626,4.596     C34.661,63.502,33.855,62.627,32.372,59.764"/>
+			<path i:knockout="Off" fill="#A80030" d="M35.164,59.654c-0.625-0.691-0.995-1.523-1.409-2.352     c0.396,1.457,1.207,2.709,1.962,3.982L35.164,59.654"/>
+			<path i:knockout="Off" fill="#A80030" d="M84.568,48.916l-0.264,0.662c-0.484,3.438-1.529,6.84-3.131,9.994     C82.943,56.244,84.088,52.604,84.568,48.916"/>
+			<path i:knockout="Off" fill="#A80030" d="M45.527,0.537C46.742,0.092,48.514,0.293,49.803,0c-1.68,0.141-3.352,0.225-5.003,0.438     L45.527,0.537"/>
+			<path i:knockout="Off" fill="#A80030" d="M2.872,23.219c0.28,2.592-1.95,3.598,0.494,1.889     C4.676,22.157,2.854,24.293,2.872,23.219"/>
+			<path i:knockout="Off" fill="#A80030" d="M0,35.215c0.563-1.728,0.665-2.766,0.88-3.766C-0.676,33.438,0.164,33.862,0,35.215"/>
+		</g>
+	</g>
+<script xmlns=""/></svg>
\ No newline at end of file