Merge branch '137-update-to-docsuaurus-v3' into 'main'

Resolve "update to Docsuaurus V3.^"

Closes #137

See merge request !113

.gitlab-ci.yml

-image: node:16.14.2-slim
+image: node:18.19.0-slim
 
 include:
   - template: 'Workflows/MergeRequest-Pipelines.gitlab-ci.yml'
@@ -34,6 +34,7 @@ install_dependencies:
   stage: build
   script:
     - npm ci
+    - npm run clear
 
 lint:
   extends: .cache-pull

.nvmrc

-v18.12.1
+v22.12.0

docs/Gestions des plans/etang_users.md → docs/Gestions des plans/etang_users.mdx

@@ -43,7 +43,7 @@ Votre utilisateur GitLab client est ajouté en tant que propriétaire (_owner_)
 
 :::info Exemple
 
-Pour le client `user@domain.tld`, ce **groupe client** est accessible à cette url : <https://lab.frogg.it/admin/groups/froggit_data/customers/paid/user_domain_tld>
+Pour le client `user@domain.tld`, ce **groupe client** est accessible à cette url : [https://lab.frogg.it/admin/groups/froggit_data/customers/paid/user_domain_tld](https://lab.frogg.it/admin/groups/froggit_data/customers/paid/user_domain_tld)
 
 :::
 

docusaurus.config.js

@@ -239,4 +239,5 @@ module.exports = {
       },
     ],
   ],
+  onBrokenAnchors:"ignore"
 };

package.json

@@ -18,22 +18,22 @@
     "husky": "husky install"
   },
   "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@docusaurus/core": "^3.6.3",
+    "@docusaurus/preset-classic": "^3.6.3",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@gabrielcsapo/docusaurus-plugin-matomo": "^0.1.2",
-    "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^6.2.1",
+    "@mdx-js/react": "^3.1.0",
+    "@svgr/webpack": "^8.1.0",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
     "jquery": "^3.6.0",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-icons": "^4.3.1",
+    "react": "18.2",
+    "react-dom": "18.2",
+    "react-icons": "^4.12.0",
     "react-slick": "^0.29.0",
     "react-websitecarbon-badge": "^1.0.6",
     "slick-carousel": "^1.8.1",
@@ -52,15 +52,15 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "2.2.0",
+    "@docusaurus/eslint-plugin": "^3.6.3",
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
     "eslint": "^7.30.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.37.2",
     "husky": "^8.0.1",
-    "node": "18.12.1",
-    "prettier": "^2.3.2"
+    "node": "^22.12",
+    "prettier": "^2.8.8"
   }
 }

src/components/Carousel/Carousel.js

@@ -3,6 +3,8 @@ import React from "react";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import Link from "@docusaurus/Link";
+import Heading from "@theme/Heading";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
 function Logo({img, svg, alt}) {
@@ -28,9 +30,9 @@ function CarouselElement({name, img, svg, link, alt}) {
       {(() => {
         if (link) {
           return (
-            <a href={link} target="_blank" rel="noopener noreferrer">
+            <Link to={link}>
               <Logo img={img} svg={svg} alt={alt}/>
-            </a>
+            </Link>
           );
         }
         else {
@@ -42,7 +44,7 @@ function CarouselElement({name, img, svg, link, alt}) {
       {(() => {
         if (name) {
           return (
-            <h6 className="carousel-title">{name}</h6>
+            <Heading as='h6' className="carousel-title">{name}</Heading>
           ); 
         }
       })()}

src/components/Carousel/CarouselLibre.js

 import React from "react";
 import Carousel from "./Carousel";
 import clsx from "clsx";
+import Heading from "@theme/Heading";
 
 const CarouselList = [
   {
@@ -59,8 +60,8 @@ export default function CarouselLibre() {
   return (
     <div className="homepage-section">
       <section className="sections container">
-        <h2 className={clsx("text--center")}>Restez libres !
-        </h2>
+        <Heading as='h2' className={clsx("text--center")}>Restez libres !
+        </Heading>
         <p className="text--center margin-bottom--lg">Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
         </p> 
         <Carousel list={CarouselList} />

src/components/Features/HomepageFeatures.js

 import React from "react";
 import clsx from "clsx";
 import Features from "./Features";
+import Heading from "@theme/Heading";
 
 
 const FeatureList = [
@@ -53,8 +54,8 @@ export default function HomepageFeatures() {
   return (
     <div className="homepage-section">
       <section className="sections container" id="features">   
-        <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
-        </h2>
+        <Heading as='h2' className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+        </Heading>
         <div className="padding-top--md">
           <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
           </p>

src/components/Promises/HomepagePromises.js

@@ -3,6 +3,7 @@ import bouclier from "@site/static/img/components/HomepagePromises/bouclier.svg"
 import rgpd from "@site/static/img/components/HomepagePromises/rgpd.svg";
 import liberte from "@site/static/img/components/HomepagePromises/liberte.svg";
 import Promises from "./Promises";
+import Heading from "@theme/Heading";
 
 const PromiseSectionTitle = "Faites la différence";
 
@@ -42,7 +43,7 @@ const PromiseList = [
 export default function HomepagePromises() {
   return (
     <div className="row-overflow homepage-section">
-      <h2 className="text--center"> {PromiseSectionTitle} </h2>
+      <Heading as='h2' className="text--center"> {PromiseSectionTitle} </Heading>
       <section className="section-promises">    
         <div className="row">
           {PromiseList.map((props, idx) => (

src/components/Promises/Promises.js

 import React from "react";
 import clsx from "clsx";
+import Heading from "@theme/Heading";
 
 // eslint-disable-next-line
 export default function Promises({Svg, alt, title, description}) {
@@ -9,7 +10,7 @@ export default function Promises({Svg, alt, title, description}) {
         <Svg className="promise-svg" alt={alt} />
       </div>
       <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
+        <Heading as='h3'>{title}</Heading>
         <p>{description}</p>
       </div>
     </div>

src/components/Results/HomepageResults.js

@@ -3,6 +3,7 @@ import Results from "./Results";
 import environment from "@site/static/img/components/HomepageResults/environment.png";
 import advance from "@site/static/img/components/HomepageResults/advance.png";
 import conversation from "@site/static/img/components/HomepageResults/conversation.png";
+import Heading from "@theme/Heading";
 
 const ResultsList = [
   {
@@ -43,7 +44,7 @@ export default function HomepageResults() {
   return (
     <div className="homepage-section">
       <section className="sections container" id="results">      
-        <h2 className="text--center">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
+        <Heading as='h2' className="text--center">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</Heading>
         <div>
           {ResultsList.map((props, idx) => (
             <Results key={idx} {...props} />

src/components/Results/Results.js

 import React from "react";
+import Heading from "@theme/Heading";
 
 // eslint-disable-next-line
 export default function Results({title, description, img, alt}) {
@@ -8,7 +9,7 @@ export default function Results({title, description, img, alt}) {
         <img className="results-image" src={img} alt={alt}/>
       </div>  
       <div className="col col--5">
-        <h3>{title}</h3>
+        <Heading as='h3'>{title}</Heading>
         <p>{description}</p>
       </div>      
     </div>

src/pages/CGU.md → src/pages/CGU.mdx

 ---
 title: "Conditions Générales d'Utilisation"
 description: "Conditions Générales d'Utilisation"
-keywords: Lydra, SaaS, legal, CGU
+keywords: [Lydra, SaaS, legal, CGU]
 ---
 
 # Conditions Générales d'Utilisation

src/pages/CGV.md → src/pages/CGV.mdx

 ---
 title: "Conditions Générales de Vente"
 description: "Conditions Générales de Vente"
-keywords: Lydra, SaaS, legal, CGV
+keywords: [Lydra, SaaS, legal, CGV]
 ---
 
 # Conditions Générales de Vente

src/pages/accelerateur-gitlab.mdx

@@ -120,9 +120,7 @@ Tu l’as compris : ça prend énormément de temps et d’énergie.
 
 Rien que le fait de dénicher les bonnes pratiques demande des mois de recherches et d’expérience.
 
-<p class='bold'> Notre industrie devient de plus en plus compétitive et nous, les artisans du code, sommes de plus en plus sous pression pour faire diminuer le time-to-market.
-
-Et tu dois forcément le ressentir : tu as des projets à finir, des deadlines à respecter et des comptes à rendre. </p>
+<p class='bold'> Notre industrie devient de plus en plus compétitive et nous, les artisans du code, sommes de plus en plus sous pression pour faire diminuer le time-to-market. <br/> Et tu dois forcément le ressentir : tu as des projets à finir, des deadlines à respecter et des comptes à rendre. </p>
 
 Comme la plupart des techs, tu fais face à un paradoxe qui t'empêche d’avancer :
 

src/pages/confidentialite.mdx

 ---
 title: "Politique de confidentialité"
 description: "Politique de confidentialité"
-keywords: Lydra, SaaS, legal, Privacy
+keywords: [Lydra, SaaS, legal, Privacy]
 ---
 
 # Politique de confidentialité

src/pages/contacts.md → src/pages/contacts.mdx

 ---
 title: "Page des contacts"
 description: "Page des contacts"
-keywords: Lydra, SaaS, legal, sous-traitance
+keywords: [Lydra, SaaS, legal, sous-traitance]
 ---
 
 # Page de contacts

src/pages/index.js

@@ -3,22 +3,24 @@ import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import Link from "@docusaurus/Link";
+import Heading from "@theme/Heading";
 import HomepageResults from "@site/src/components/Results/HomepageResults";
 import HomepagePromises from "@site/src/components/Promises/HomepagePromises";
 import HomepageFeatures from "@site/src/components/Features/HomepageFeatures";
 import CarouselLibre from "@site/src/components/Carousel/CarouselLibre";
 import { FaYoutube } from "react-icons/fa";
 
+
 function HomepageHeader(){
   return (
     <header className={styles.heroBanner}>
       <div className="sections container">
-        <h1 className="hero-title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</h1>
+        <Heading as='h1' className="hero-title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</Heading>
         <p className="hero-subtitle">Collaborez autour du code sur la première plateforme intégrée DevOps <i>Made in France</i>. Avec Froggit, sécurisez vos données, améliorez vos performances et protégez enfin la planète.</p>
         <div className="button-frame">
-          <a className="button button--beta button--lg" href="https://www.youtube.com/watch?v=TvWT3URosOk" target="_blank" rel="noreferrer">
+          <Link className="button button--beta button--lg" to="https://www.youtube.com/watch?v=TvWT3URosOk">
             <FaYoutube/> Voir le <br/> webinaire
-          </a>
+          </Link>
           <Link className="button button--beta button--lg" to="/tarifs">
           Je m’abonne sans engagement<br /><div className="btn-little-txt">30 jours satisfaits ou remboursés !</div>
           </Link>