From 53239800507f71814321ddaee20cf4b03f389106 Mon Sep 17 00:00:00 2001
From: Plumtree3D <ham.in.kneesocks@gmail.com>
Date: Tue, 30 Aug 2022 11:14:03 +0200
Subject: [PATCH] moved assets to img/HomepageFeatures, renamed components and
module, fixed syntax
---
src/components/HomepageFeatures.js | 126 ++++++++++--------
src/components/HomepageFeatures.module.css | 49 +++++--
src/components/HomepageFeaturesTab.js | 81 -----------
src/components/HomepageFeaturesTab.module.css | 45 -------
src/components/TextRight.js | 4 +-
src/pages/dummy_page.mdx | 4 -
src/pages/index.js | 4 +-
static/img/{ => HomepageFeatures}/beer.png | Bin
.../img/{ => HomepageFeatures}/chemistry.svg | 0
static/img/{ => HomepageFeatures}/hello.png | Bin
static/img/{ => HomepageFeatures}/rainbow.svg | 0
.../img/{ => HomepageFeatures}/read-smile.svg | 0
static/img/{ => HomepageFeatures}/selfie.svg | 0
13 files changed, 112 insertions(+), 201 deletions(-)
delete mode 100644 src/components/HomepageFeaturesTab.js
delete mode 100644 src/components/HomepageFeaturesTab.module.css
rename static/img/{ => HomepageFeatures}/beer.png (100%)
rename static/img/{ => HomepageFeatures}/chemistry.svg (100%)
rename static/img/{ => HomepageFeatures}/hello.png (100%)
rename static/img/{ => HomepageFeatures}/rainbow.svg (100%)
rename static/img/{ => HomepageFeatures}/read-smile.svg (100%)
rename static/img/{ => HomepageFeatures}/selfie.svg (100%)
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 110fcc9..e5f788c 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -1,73 +1,81 @@
-/* eslint-disable linebreak-style */
-/* eslint react/prop-types: 0 */
import React from "react";
import clsx from "clsx";
import styles from "./HomepageFeatures.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
const FeatureList = [
- {
- title: "Le Lab 🧪",
- Svg: require("../../static/img/chemistry.svg").default,
- description: (
- <>
- Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C'est plus qu'un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.
- </>
- ),
- },
- {
- title: "La CI ðŸ”",
- Svg: require("../../static/img/rainbow.svg").default,
- description: (
- <>
- Fournir un outil de collaboration de code sans Intégration Continue n'était pas pensable pour nous. C'est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.
- </>
- ),
- },
- {
- title: "Le Chat 💬",
- Svg: require("../../static/img/selfie.svg").default,
- description: (
- <>
- Pour collaborer les équipes ont besoin de communiquer. Qu'elles soient physiquement au même endroit ou non une communication asynchrone est importante. C'est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L'authentification se fera grâce au Lab, vous n'aurez qu'un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !
- </>
- ),
- },
- {
- title: "Les Pages 🔖",
- Svg: require("../../static/img/read-smile.svg").default,
- description: (
- <>
- Vous avez besoin de créer des sites statiques pour vos documentations. C'est pour cela que nous mettons en place les GitLab pages qui vous permettent d'héberger des sites statiques.
- </>
- ),
- },
-];
+ {
+ id: 5,
+ title: "Le\u00A0SSO\u00A0🔑",
+ svg: "hello.png",
+ alt: "Kermit, sortant de sa cachette",
+ description: "Authentifiez-vous une bonne fois pour toute !"
+ },
+ {
+ id: 1,
+ title: "Le\u00A0Lab\u00A0🧪",
+ svg: "chemistry.svg",
+ alt: "Kermit manipule du matériel de laboratoire",
+ description:"Gérer vos projets, héberger votre code et collaborer autour de Git",
+ },
+ {
+ id: 2,
+ title: "La\u00A0CI\u00A0ðŸ”",
+ svg: "rainbow.svg",
+ alt: "Kermit pose devant un arc-en-ciel",
+ description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
+ },
+ {
+ id: 4,
+ title: "Les\u00A0Pages\u00A0🔖",
+ svg: "read-smile.svg",
+ alt: "Kermit porte des lunettes rondes et lit un livre",
+ description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
+ },
+ {
+ id: 3,
+ title: "Le\u00A0Chat\u00A0💬",
+ svg: "selfie.svg",
+ alt: "Kermit prend un selfie",
+ description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
+ },
+ {
+ id: 6,
+ title: "La\u00A0communauté\u00A0ðŸº",
+ svg: "beer.png",
+ alt: "Kermit faisant un clin d'oeil, une chope à la main",
+ description: "Une communauté Git pour solutionner vos pépins rapidement"
+ }
+ ];
-function Feature({Svg, title, description}) {
+export default function HomepageFeaturesTab() {
return (
- <div className="sectionsReverse row">
- <div className="col col--5 text--center">
- <Svg className={styles.svg} alt={title} />
+ <section className="sections container" id="features">
+ <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+ </h2>
+ <div className={styles.featuresSubtitle}>
+ <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
+ </p>
+ <p className={"text--center"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique.
+ </p>
</div>
- <div className="col col--5">
- <h3>{title}</h3>
- <p>{description}</p>
- </div>
- </div>
-
- );
-}
-
-export default function HomepageFeatures() {
- return (
- <section className="sections container" id="features">
- <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
<div>
- {FeatureList.map((props, idx) => (
- <Feature key={idx} {...props} />
+ <Tabs className={styles.tabsElement}>
+ {FeatureList.map((em) => (
+ <TabItem className={clsx("text--center")} value={em.title} label={em.title}>
+ <div className={styles.rowDisplay}>
+ <img src={useBaseUrl("img/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+ <p className={styles.textDisplay}> {em.description} </p>
+ </div>
+ </TabItem>
))}
+ </Tabs>
</div>
- </section>
+
+ </section>
+
);
}
diff --git a/src/components/HomepageFeatures.module.css b/src/components/HomepageFeatures.module.css
index 694a394..bc86790 100644
--- a/src/components/HomepageFeatures.module.css
+++ b/src/components/HomepageFeatures.module.css
@@ -1,12 +1,45 @@
-/* stylelint-disable docusaurus/copyright-header */
+@import url("../css/variables.css");
-.svg {
- height: 275px;
- width: 275px;
- max-width: 100%;
+.featuresSubtitle {
+ padding-top: 26px;
}
-.title {
- font-weight: bold;
- padding-bottom: 40px;
+.tabsElement {
+ width: 100%;
+ margin-bottom: 48px;
+
}
+
+.tabsElement>li {
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: start;
+ transition: 0.4s;
+}
+
+.tabImages {
+ width: 360px;
+}
+
+.rowDisplay {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.textDisplay {
+ padding: 15px;
+ width: 25%;
+ font-size: 20px;
+ text-align: left;
+}
+
+@media (max-width: 600px) {
+ .textDisplay {
+ width: 100%;
+ text-align: center;
+ }
+ }
diff --git a/src/components/HomepageFeaturesTab.js b/src/components/HomepageFeaturesTab.js
deleted file mode 100644
index 2a3bf48..0000000
--- a/src/components/HomepageFeaturesTab.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import styles from "./HomepageFeaturesTab.module.css";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-const FeatureList = [
- {
- id: 5,
- title: "Le\u00A0SSO\u00A0🔑",
- svg: "hello.png",
- alt: "Kermit, sortant de sa cachette",
- description: "Authentifiez-vous une bonne fois pour toute !"
- },
- {
- id: 1,
- title: "Le\u00A0Lab\u00A0🧪",
- svg: "chemistry.svg",
- alt: "Kermit manipule du matériel de laboratoire",
- description:"Gérer vos projets, héberger votre code et collaborer autour de Git",
- },
- {
- id: 2,
- title: "La\u00A0CI\u00A0ðŸ”",
- svg: "rainbow.svg",
- alt: "Kermit pose devant un arc-en-ciel",
- description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
- },
- {
- id: 4,
- title: "Les\u00A0Pages\u00A0🔖",
- svg: "read-smile.svg",
- alt: "Kermit porte des lunettes rondes et lit un livre",
- description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
- },
- {
- id: 3,
- title: "Le\u00A0Chat\u00A0💬",
- svg: "selfie.svg",
- alt: "Kermit prend un selfie",
- description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
- },
- {
- id: 6,
- title: "La\u00A0communauté\u00A0ðŸº",
- svg: "beer.png",
- alt: "Kermit faisant un clin d'oeil, une chope à la main",
- description: "Une communauté Git pour solutionner vos pépins rapidement."
- }
- ];
-
-
-export default function HomepageFeaturesTab() {
- return (
- <section className="sections container" id="features">
- <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
- </h2>
- <div className={styles.featuresSubtitle}>
- <h3 className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
- </h3>
- <p className={"text--center"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique.
- </p>
- </div>
- <div>
- <Tabs className={styles.tabsElement}>
- {FeatureList.map((em) => (
- <TabItem className={clsx("text--center")} value={em.title} label={em.title}>
- <div className={styles.colDisplay}>
- <img src={useBaseUrl("img/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
- <p className={styles.textDisplay}> {em.description} </p>
- </div>
- </TabItem>
- ))}
- </Tabs>
- </div>
-
- </section>
-
- );
-}
\ No newline at end of file
diff --git a/src/components/HomepageFeaturesTab.module.css b/src/components/HomepageFeaturesTab.module.css
deleted file mode 100644
index 3685dee..0000000
--- a/src/components/HomepageFeaturesTab.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-@import url("../css/variables.css");
-
-.featuresSubtitle {
- padding-top: 26px;
-}
-
-.tabsElement {
- width: 100%;
- margin-bottom: 48px;
-
-}
-
-.tabsElement>li {
- margin: auto;
- display: flex;
- justify-content: center;
- align-items: start;
- transition: 0.4s;
-}
-
-.tabImages {
- width: 360px;
-}
-
-.colDisplay {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
- flex-wrap: wrap;
-}
-
-.textDisplay {
- padding: 15px;
- width: 25%;
- font-size: 20px;
- text-align: left;
-}
-
-@media (max-width: 600px) {
- .textDisplay {
- width: 100%;
- text-align: center;
- }
- }
\ No newline at end of file
diff --git a/src/components/TextRight.js b/src/components/TextRight.js
index 35c6bb6..25212f0 100644
--- a/src/components/TextRight.js
+++ b/src/components/TextRight.js
@@ -2,12 +2,12 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
-export default function TextRight({children, img, alt}) {
+export default function TextRight({children, img}) {
return (
<>
<div className="row">
<div className="col col--6">
- <img src={useBaseUrl(img)} alt={alt}/>
+ <img src={useBaseUrl(img)}/>
</div>
<div className="col col--6">
{children}
diff --git a/src/pages/dummy_page.mdx b/src/pages/dummy_page.mdx
index d4c7e78..9690f2c 100644
--- a/src/pages/dummy_page.mdx
+++ b/src/pages/dummy_page.mdx
@@ -3,7 +3,6 @@ title: dummy
description: "page factice"
---
import CarouselLibre from "@site/src/components/CarouselLibre";
-import HomepageFeaturesTab from "@site/src/components/HomepageFeaturesTab";
# Page factice
@@ -13,9 +12,6 @@ Page factice penser à créer une vraie page !
#!/bin/bash
echo "Hello World"
```
-<HomepageFeaturesTab/>
-
-<HomepageFeatures/>
<button className="button button--note">button--note</button>
<button className="button button--success">button--success</button>
diff --git a/src/pages/index.js b/src/pages/index.js
index 0328ce8..0dbf12c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,7 +3,7 @@ import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import styles from "./index.module.css";
import HomepagePromises from "../components/HomepagePromises";
-import HomepageFeaturesTab from "../components/HomepageFeaturesTab";
+import HomepageFeatures from "../components/HomepageFeatures";
import Link from "@docusaurus/Link";
function HomepageHeader(){
@@ -33,7 +33,7 @@ export default function Home() {
<HomepageHeader/>
<main>
<HomepagePromises />
- <HomepageFeaturesTab />
+ <HomepageFeatures />
</main>
</Layout>
);
diff --git a/static/img/beer.png b/static/img/HomepageFeatures/beer.png
similarity index 100%
rename from static/img/beer.png
rename to static/img/HomepageFeatures/beer.png
diff --git a/static/img/chemistry.svg b/static/img/HomepageFeatures/chemistry.svg
similarity index 100%
rename from static/img/chemistry.svg
rename to static/img/HomepageFeatures/chemistry.svg
diff --git a/static/img/hello.png b/static/img/HomepageFeatures/hello.png
similarity index 100%
rename from static/img/hello.png
rename to static/img/HomepageFeatures/hello.png
diff --git a/static/img/rainbow.svg b/static/img/HomepageFeatures/rainbow.svg
similarity index 100%
rename from static/img/rainbow.svg
rename to static/img/HomepageFeatures/rainbow.svg
diff --git a/static/img/read-smile.svg b/static/img/HomepageFeatures/read-smile.svg
similarity index 100%
rename from static/img/read-smile.svg
rename to static/img/HomepageFeatures/read-smile.svg
diff --git a/static/img/selfie.svg b/static/img/HomepageFeatures/selfie.svg
similarity index 100%
rename from static/img/selfie.svg
rename to static/img/HomepageFeatures/selfie.svg
--
GitLab