diff --git a/doc/components.md b/doc/components.md
index 14a119b72db369feeabd3d5a76cca791deb6ea2f..6827ae2f68fc7514304be255d65c0c3cc8e2605a 100644
--- a/doc/components.md
+++ b/doc/components.md
@@ -16,9 +16,14 @@ Le composant **TextRight** sert à afficher une image à la gauche de son bloc e
Le composant **Carousel** permet de générer un carrousel en utilisant le _slider_ de [React Slick] (https://react-slick.neostack.com/).
+Le composant peut recevoir 5 props. `name` (optionnel) sera le texte affiché sous l'image, `link` (optionnel) permet de rendre l'image cliquable pour ouvrir un lien dans un nouvel onglet, `alt` sera le texte alternatif à l'image ou au svg.
+Concernant l'image, il peut s'agir d'un fichier (png, svg, jpeg...) avec le props `img` ou de svg inline en html avec le props `svg` (ne pas mettre de chemin vers un fichier svg avec le props `svg`!). Si les deux arguments sont fournis, seul `img` sera pris en compte.
+
### CarouselLibre.js
-Le composant **CarouselLibre** est utilisé sur la page d'accueil pour afficher un carrousel des logiciels libres utilisés par Froggit, il utilise le composant générique **Carousel**
+Le composant **CarouselLibre** est utilisé sur la page d'accueil pour afficher un carrousel des logiciels libres (FLOSS) utilisés par Froggit, il utilise le composant générique **Carousel**
+
+Afin que les logos de FLOSS unis (par exemple blancs ou noirs) restent bien visibles peu importe le thème, les intégrer en [SVG inline](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction) dans le props `svg` et penser à supprimer les valeurs "fill". Cela leur permettra de prendre la couleur du texte selon le thème.
### HomepagePromises.js
@@ -31,5 +36,3 @@ Les éléments **Promise** de la liste sont affichés en colonne et sont compos
### HomepageFeatures.js
Le composant **HomepageFeatures** affiche les fonctionnalités de Froggit sur la page d'accueil.
-
-
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index 633e9606f163c516d04336c163806d192f6723c1..8540b92e6bc43c8b638317b9b423cab07048f401 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -5,46 +5,49 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
-function CarouselElement({name, img, link, alt}) {
- if (typeof link === "undefined" && typeof name === "undefined") {
+function Logo({img, svg, alt}) {
+ if (img) {
return (
- <div className="carousel_box">
- <div>
- <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
- </div>
- </div>
- );
- }
-
- else if (typeof link === "undefined") {
- return (
- <div className="carousel_box">
+ <>
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
- <h6 className="carousel_title">{name}</h6>
- </div>
+ </>
);
}
-
- else if (typeof name === "undefined") {
+ else if (svg) {
return (
- <div className="carousel_box">
- <a href={link} target="_blank" rel="noopener noreferrer">
- <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
- </a>
- </div>
+ <svg alt={alt}>
+ {svg}
+ </svg>
);
}
+}
- else {
- return (
- <div className="carousel_box">
- <a href={link} target="_blank" rel="noopener noreferrer">
- <img src={useBaseUrl(img) } alt={alt} className="carousel_img" />
- <h6 className="carousel_title">{name}</h6>
- </a>
- </div>
- );
- }
+function CarouselElement({name, img, svg, link, alt}) {
+ return (
+ <div className="carousel_box">
+ {(() => {
+ if (link) {
+ return (
+ <a href={link} target="_blank" rel="noopener noreferrer">
+ <Logo img={img} svg={svg} alt={alt}/>
+ </a>
+ );
+ }
+ else {
+ return (
+ <Logo img={img} svg={svg} alt={alt}/>
+ );
+ }
+ })()}
+ {(() => {
+ if (name) {
+ return (
+ <h6 className="carousel_title">{name}</h6>
+ );
+ }
+ })()}
+ </div>
+ );
}
export default function Carousel(props) {
diff --git a/src/components/CarouselLibre.js b/src/components/CarouselLibre.js
index 05188ce04cd40824969e7dd55cef41cced42eec2..0131a06f3668f86ca9bf9fa9f6a4b0fcef3d441d 100644
--- a/src/components/CarouselLibre.js
+++ b/src/components/CarouselLibre.js
@@ -6,42 +6,52 @@ const CarouselList = [
{
img: "/img/components/CarouselLibre/gitlab_logo.png",
name: "GitLab",
- alt: "logo de GitLab"
+ alt: "Pourquoi nous avons choisi Gitlab ?"
},
{
- img: "/img/components/CarouselLibre/mattermost_logo.png",
+ svg: <svg viewBox="-15 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <path d="M243.747 73.364c-8.454-18.258-20.692-33.617-36.9-46.516.432 8.756 1.374 27.484 1.374 27.484s1.01 1.327 1.42 1.901c16.38 22.876 22.365 48.231 16.91 75.771-10.94 55.222-64.772 88.91-119.325 75.138-47.892-12.091-79.878-61.06-70.82-109.609 7.15-38.327 29.801-63.859 66.584-76.833l1.333-.504 1.046-.774c4.458-6.304 8.808-12.685 13.45-19.422C63.07 2.762 7.003 47.488.58 115.522c-6.216 65.832 38.17 124.541 101.596 137.424 66.096 13.425 129.017-25.57 148.031-87.976 9.508-31.206 7.283-61.924-6.46-91.606zm-157.31 41.172c2.787 26.487 25.745 44.538 52.302 41.603 26.092-2.884 45.166-28.409 40.227-54.232-3.85-20.134-8.105-40.19-12.188-60.279-1.689-8.313-3.398-16.623-5.19-25.391-.707.621-1.035.883-1.334 1.176-8.94 8.764-17.875 17.533-26.815 26.297-10.886 10.673-21.757 21.36-32.669 32.006-10.944 10.677-15.926 23.707-14.334 38.82z"/>
+ </svg>,
name: "Mattermost",
- alt: "logo de Mattermost"
+ alt: "Pourquoi nous avons choisi Mattermost ?"
},
{
img: "/img/components/CarouselLibre/docusaurus.png",
name: "Docusaurus",
- alt: "logo de Docusaurus"
+ alt: "Pourquoi nous avons choisi Docusaurus ?"
},
{
img: "/img/components/CarouselLibre/debian_logo.png",
name: "Debian",
- alt: "logo de Debian"
+ alt: "Pourquoi nous avons choisi Debian ?",
},
{
- img: "/img/components/CarouselLibre/Ansible_logo.png",
+ svg: <svg version="1.0" encoding="utf-8" viewBox="0 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <path d="M 275.104 146.724 C 275.104 217.179 217.994 274.289 147.538 274.289 C 77.088 274.289 19.972 217.179 19.972 146.724 C 19.972 76.274 77.088 19.158 147.538 19.158 C 217.994 19.158 275.104 76.274 275.104 146.724 Z M 149.685 97.085 L 182.697 178.561 L 132.833 139.283 Z M 208.33 197.33 L 157.551 75.128 C 156.102 71.603 153.203 69.738 149.685 69.738 C 146.161 69.738 143.051 71.603 141.602 75.128 L 85.869 209.168 L 104.934 209.168 L 126.997 153.902 L 192.836 207.092 C 195.483 209.233 197.394 210.202 199.878 210.202 C 204.852 210.202 209.199 206.473 209.199 201.091 C 209.199 200.215 208.89 198.824 208.33 197.329 Z"/>
+ <path d="M 183.868 180.12 L 132.23 139.445 L 149.682 95.745 Z M 133.436 139.121 L 181.526 177.002 L 149.688 98.425 Z M 208.798 197.154 C 209.368 198.682 209.699 200.161 209.699 201.091 C 209.699 203.89 208.521 206.362 206.746 208.029 C 204.971 209.697 202.458 210.702 199.878 210.702 C 197.281 210.702 195.213 209.651 192.522 207.481 L 127.21 154.717 L 105.273 209.668 L 85.12 209.668 L 85.407 208.976 L 141.14 74.938 C 141.904 73.109 143.134 71.638 144.593 70.692 C 146.055 69.744 147.855 69.238 149.685 69.238 C 151.514 69.238 153.264 69.747 154.673 70.697 C 156.08 71.645 157.252 73.112 158.013 74.936 L 207.83 194.824 L 207.83 194.557 Z M 207.869 197.523 L 157.089 75.32 C 156.401 73.619 155.399 72.391 154.114 71.526 C 152.832 70.662 151.374 70.238 149.685 70.238 C 147.991 70.238 146.474 70.664 145.137 71.531 C 143.799 72.398 142.749 73.622 142.064 75.318 L 86.618 208.668 L 104.595 208.668 L 126.784 153.087 L 193.15 206.703 C 195.753 208.815 197.507 209.702 199.878 209.702 C 202.272 209.702 204.419 208.843 206.061 207.3 C 207.704 205.757 208.699 203.674 208.699 201.091 C 208.699 200.273 208.414 198.977 207.869 197.523 Z"/>
+ </svg>,
name: "Ansible",
- alt: "logo de Ansible"
+ alt: "Pourquoi nous avons choisi Ansible ?"
},
{
img: "/img/components/CarouselLibre/Terraform_logo.png",
name: "Terraform",
- alt: "logo de Terraform"
+ alt: "Pourquoi nous avons choisi Terraform ?"
},
{
- img: "/img/components/CarouselLibre/borg_logo.png",
+ svg: <svg version="1.0" encoding="utf-8" viewBox="0 -90 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <path id="p1" transform="matrix(1, 0, 0, 1, 20.9086, 32.2192)" d="M43.75 13.8021L26.6667 13.8021L26.6667 0L53.3854 0L67.2396 13.8021L67.2396 27.8646L60.3125 34.7917L67.2396 41.7187L67.2396 55.3125L53.3854 69.1146L26.6667 69.1146L26.6667 55.3125L43.75 55.3125L43.75 40.5729L26.6667 40.5729L26.6667 28.5417L43.75 28.5417ZM0 0L23.0208 0L23.0208 69.1146L0 69.1146Z"/>
+ <path id="p2" transform="matrix(1, 0, 0, 1, 97.679398, 46.021301)" d="M62.1354 41.5104L48.3333 55.3125L32.9167 55.3125L32.9167 42.3958L38.6458 42.3958L38.6458 13.8021L32.9167 13.8021L32.9167 0L48.3333 0L62.1354 13.8021ZM23.2813 42.3958L29.2708 42.3958L29.2708 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L29.2708 0L29.2708 13.8021L23.2813 13.8021Z"/>
+ <path id="p3" transform="matrix(1, 0, 0, 1, 170.231003, 46.021301)" d="M36.5104 13.8021L26.7187 13.8021L26.7187 7.76042L34.4271 0L48.3854 0L59.5833 12.9167L59.5833 27.2396L36.5104 27.2396ZM0 55.3125L0 7.10543e-15L23.0208 7.10543e-15L23.0208 55.3125Z"/>
+ <path id="p4" transform="matrix(1, 0, 0, 1, 236.429001, 46.021301)" d="M36.875 13.8021L26.6667 13.8021L26.6667 7.10543e-15L46.0937 7.10543e-15L59.8958 13.8021L59.8958 60.7812L46.0937 74.6875L15.7292 74.6875L8.80208 67.7083L8.80208 62.6042L36.875 62.6042ZM33.2292 42.3958L33.2292 48.4896L26.3542 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L23.0208 0L23.0208 42.3958Z"/>
+ </svg>,
name: "Borg",
- alt: "logo de Borg"
+ alt: "Pourquoi nous avons choisi Borg ?"
},
{
img: "/img/components/CarouselLibre/restic_logo.png",
name: "Restic",
- alt: "logo de Restic"
+ alt: "Pourquoi nous avons choisi Restic ?"
},
];
diff --git a/src/css/carousel.css b/src/css/carousel.css
index e9f4abb84cc53635f47e5b2907968a7d776e1f92..a2023f07add3f31f24ac5bc7ecbd44930785f6c2 100644
--- a/src/css/carousel.css
+++ b/src/css/carousel.css
@@ -9,15 +9,16 @@
height: 122px;
}
-.carousel_img {
+.carousel_img, .carousel_box svg {
padding: 8px;
- margin-bottom: 12px;
- max-width: 90px;
- max-height: 90px;
+ width: 90px;
+ height: 90px;
/* text-align: center; */
- justify-content: space-between;
}
+.carousel_box svg {
+ fill: var(--ifm-font-color-base);
+}
.carousel_title {
display: flex;
justify-content: center;
diff --git a/static/img/components/CarouselLibre/openlogo-nd.svg b/static/img/components/CarouselLibre/openlogo-nd.svg
deleted file mode 100644
index ee9a55850d777a707cf24e13f016f6db8d1dee80..0000000000000000000000000000000000000000
--- a/static/img/components/CarouselLibre/openlogo-nd.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?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