WIP: import IconContext

package-lock.json

@@ -10064,6 +10064,11 @@
         "react-side-effect": "^2.1.0"
       }
     },
+    "react-icons": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
+      "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
     "url-loader": "^4.1.1"
   },
   "browserslist": {

src/components/Footer.js

+import React from "react";
+
+function Footer() {
+  return (
+    <div>
+      <footer className="footer footer--dark">
+        <div className="container container--fluid">
+          <div className="footer__links">
+            <a className="footer__link-item" href="#url">
+        Documentation
+            </a>
+            <span className="footer__link-separator">·</span>
+            <a className="footer__link-item" href="#url">
+        GitHub
+            </a>
+            <span className="footer__link-separator">·</span>
+            <a className="footer__link-item" href="#url">
+        Blog
+            </a>
+            <span className="footer__link-separator">·</span>
+            <a className="footer__link-item" href="#url">
+        Contribute
+            </a>
+          </div>
+          <div>Copyright © 2019 Facebook, Inc.</div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default Footer;

src/components/ListRenderingIcons.js

+import { FaGitlab } from "react-icons/fc";
+/* import { IconContext } from "react-icons/lib"; */
+import React from "react";
+
+export default function ListRendering() {
+  return (
+    <div>
+      <h1> My icons </h1>
+      <ul>
+        <li>
+          <FaGitlab />{" "}
+        </li>
+        <li>
+          <FaGitlab />
+        </li>
+        <li>
+          <FaGitlab />
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+
+
+/*
+links: [
+        {
+          title: "Suivez-nous",
+          items: [
+            {
+              label: "Youtube",
+              href: "https://www.youtube.com/channel/UCauIDghddUNu6Fto1nR9Bmg/?sub_confirmation=1",
+            },
+            {
+              label: "Linkedin",
+              href: "https://www.linkedin.com/company/froggit",
+            },
+            {
+              label: "Froggit",
+              href: "https://lab.frogg.it/froggit",
+            },
+            {
+              label: "GitLab",
+              href: "https://gitlab.com/froggit",
+            },
+            {
+              label: "Twitter",
+              href: "https://twitter.com/art_devops",
+            },
+            {
+              // Rend le html passé au lieu d'un simple lien
+              html: `
+                 
+                    <img src="./static/img/logo_froggit.svg" alt="Deploys by Froggit" />
+                  
+                `,
+            },
+          ],
+
+class Question extends React.Component {
+  render() {
+    return 
+  }
+} */

src/css/custom.css

@@ -26,6 +26,24 @@
   --ifm-container-width: 100%; 
   --ifm-container-max-width: 900px;
   --ifm-navbar-shadow: none; 
+
+  --ifm-footer-background-color: var(--ifm-color-tonic-one);  
+/*     --ifm-footer-link-color: white;
+    --ifm-footer-link-hover-color: white;
+    --ifm-footer-title-color: white;
+    --ifm-footer-color: white */;
+}
+footer .footer__link-item {
+  opacity: .5;
+  text-decoration: none;
+  transition: opacity 0.2s linear;
+  font-family: Sen, var(--ifm-font-family-base);
+  font-weight: 600;
+}
+
+footer .container .text {
+  color: white;
+  font-weight: 700;
 }
 
 .docusaurus-highlight-code-line {

src/pages/index.js

@@ -5,6 +5,7 @@ import styles from "./index.module.css";
 import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
 import Link from "@docusaurus/Link";
+import Footer from "../components/Footer";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -35,6 +36,7 @@ export default function Home() {
         <HomepagePromises />
         <HomepageFeatures />
       </main>
+      <Footer />
     </Layout>
   );
 }