Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 6d431ed6 authored by Celeste Robert's avatar Celeste Robert Committed by Christophe Chaudier
Browse files

refactor: implemented way to change FLOSS logo color depending on theme 

closes #106
parent a068cc49
No related branches found
No related tags found
1 merge request!81Resolve "Fix: FLOSS logos in dark mode"
Hide whitespace changes
Inline Side-by-side
doc/components.md
+ 6
− 3
View file @ 6d431ed6
......@@ -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.
src/components/Carousel.js
+ 35
− 32
View file @ 6d431ed6
......@@ -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) {
......
src/components/CarouselLibre.js
+ 21
− 11
View file @ 6d431ed6
......@@ -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 ?"
},
];
......
src/css/carousel.css
+ 6
− 5
View file @ 6d431ed6
......@@ -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;
......
static/img/components/CarouselLibre/openlogo-nd.svg deleted 100644 → 0
+ 0
− 33
View file @ a068cc49
<?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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service