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 1ed2c511 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Merge branch '100-feat-add-alt-text-on-all-images' into 'master'

Resolve "Feat: add alt text on all images"

Closes #100

See merge request !76
parents 6a6f3408 f55b7ddd
No related branches found
No related tags found
1 merge request!76Resolve "Feat: add alt text on all images"
Pipeline #8163 passed
......@@ -5,12 +5,12 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
function CarouselElement({name, img, link}) {
function CarouselElement({name, img, link, alt}) {
if (typeof link === "undefined" && typeof name === "undefined") {
return (
<div className="carousel_box">
<div>
<img src={useBaseUrl(img)} className="carousel_img" />
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
</div>
</div>
);
......@@ -19,7 +19,7 @@ function CarouselElement({name, img, link}) {
else if (typeof link === "undefined") {
return (
<div className="carousel_box">
<img src={useBaseUrl(img)} className="carousel_img" />
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
<h6 className="carousel_title">{name}</h6>
</div>
);
......@@ -29,7 +29,7 @@ function CarouselElement({name, img, link}) {
return (
<div className="carousel_box">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} className="carousel_img" />
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
</a>
</div>
);
......@@ -39,7 +39,7 @@ function CarouselElement({name, img, link}) {
return (
<div className="carousel_box">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} className="carousel_img" />
<img src={useBaseUrl(img) } alt={alt} className="carousel_img" />
<h6 className="carousel_title">{name}</h6>
</a>
</div>
......
......@@ -5,35 +5,43 @@ import clsx from "clsx";
const CarouselList = [
{
img: "/img/CarouselLibre/gitlab_logo.png",
name: "GitLab"
name: "GitLab",
alt: "logo de GitLab"
},
{
img: "/img/CarouselLibre/mattermost_logo.png",
name: "Mattermost"
name: "Mattermost",
alt: "logo de Mattermost"
},
{
img: "/img/CarouselLibre/docusaurus.png",
name: "Docusaurus"
name: "Docusaurus",
alt: "logo de Docusaurus"
},
{
img: "/img/CarouselLibre/debian_logo.png",
name: "Debian"
name: "Debian",
alt: "logo de Debian"
},
{
img: "/img/CarouselLibre/Ansible_logo.png",
name: "Ansible"
name: "Ansible",
alt: "logo de Ansible"
},
{
img: "/img/CarouselLibre/Terraform_logo.png",
name: "Terraform"
name: "Terraform",
alt: "logo de Terraform"
},
{
img: "/img/CarouselLibre/borg_logo.png",
name: "Borg"
name: "Borg",
alt: "logo de Borg"
},
{
img: "/img/CarouselLibre/restic_logo.png",
name: "Restic"
name: "Restic",
alt: "logo de Restic"
},
];
......
......@@ -6,6 +6,7 @@ const PromiseList = [
{
title: "Sécurisé",
Svg: require("../../static/img/bouclier.svg").default,
alt: "Icône d'un bouclier bleu",
description: (
<>
<p>Vos données sont en lieu sûr et sauvegardées à deux endroits différents toutes les nuits.</p>
......@@ -15,6 +16,7 @@ const PromiseList = [
{
title: "Souverain",
Svg: require("../../static/img/rgpd.svg").default,
alt: "Icône d'un cadenas avec inscrit RGPD",
description: (
<>
<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>
......@@ -24,6 +26,7 @@ const PromiseList = [
{
title: "Libre",
Svg: require("../../static/img/liberte.svg").default,
alt: "Icône de menottes brisées",
description: (
<>
<p>Froggit se base sur des logiciels libres reconnus et des conditions générales dutilisation complètement éthiques.</p>
......@@ -33,11 +36,11 @@ const PromiseList = [
];
// eslint-disable-next-line
function Promise({Svg, title, description}) {
function Promise({Svg, alt, title, description}) {
return (
<div className={clsx("col col--4")}>
<div className="text--center">
<Svg className={styles.promiseSvg} alt={title} />
<Svg className={styles.promiseSvg} alt={alt} />
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
......
......@@ -2,12 +2,12 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
export default function TextRight({children, img}) {
export default function TextRight({children, img, alt}) {
return (
<>
<div className="row">
<div className="col col--6">
<img src={useBaseUrl(img)}/>
<img src={useBaseUrl(img)} alt={alt} />
</div>
<div className="col col--6">
{children}
......
import TextRight from '@site/src/components/TextRight';
<TextRight img="/img/cheatsheet_cover.png">
<TextRight img="/img/cheatsheet_cover.png" alt="Illustration de l'antisèche Git">
# Devenez deux fois plus productif grâce à GitLab !
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment