WIP: create new footer component to add & style social icons

docusaurus.config.js

@@ -36,6 +36,34 @@ module.exports = {
     footer: {
       style: "dark",
       links: [
+        {
+          title: "Support me",
+          items: [
+            {
+              html:`
+              
+              <a href="https://www.buymeacoffee.com/qUBm0Wh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>,
+            `
+            },
+            {
+              html:` 
+              
+              <div style="display: flex; align-items: center;"><iframe src="https://github.com/sponsors/johnnyreilly/button" title="Sponsor johnnyreilly" height="35" width="116" style="border: 0;"></iframe><div>&nbsp;on GitHub</div></div>
+            `
+            },
+            {
+              // Rend le html passé au lieu d'un simple lien
+              html: `
+                 
+              <div style="display: flex; align-items: center;">
+                <img src="./static/img/logo_froggit.svg" alt="Deploys by Froggit" />
+              </div>
+                  
+                `,
+            },
+          ],
+        }, 
+        
         {
           title: "Suivez-nous",
           items: [

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/pages/index.js

@@ -5,7 +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";
+import Footer from "../theme/Footer";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();

src/theme/Footer/components/FooterLink/index.js

+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import React from "react";
+import styles from "./styles.module.css";
+
+function FooterLink (props) {
+  const { href, to, label } = props;
+  const linkHref = useBaseUrl(href ?? "", { forcePrependBaseUrl: undefined });
+  const linkTo = useBaseUrl(to ?? "");
+
+  return (
+    <a
+      className={styles.LinkText}
+      {...(href != null
+        ? {
+          href: linkHref,
+          rel: "noopener noreferrer",
+          target: "_blank",
+        }
+        : { href: linkTo })}
+      {...props}
+    >
+      {label}
+    </a>
+  );
+}
+
+export default FooterLink;

src/theme/Footer/components/FooterLink/styles.module.css

+  
+.LinkText {
+  color: var(--ifm-color-on-background);
+}
+
+.LinkText:hover {
+  color: var(--ifm-color-on-background-3);
+}

src/theme/Footer/components/SocialIconsList.js

+import React from "react";
+/* import clsx from "clsx";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./styles.module.css"; */
+import { FaGitlab } from "react-icons/fc";
+
+// eslint-disable-next-line no-unused-vars
+const SocialsIcons = [
+  {
+    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",
+      },
+    ],
+  },
+];
+
+function SocialIconsList() {
+  return (
+    <div>
+      <FaGitlab />
+    </div>
+  );
+}
+
+export default SocialIconsList;

src/theme/Footer/index.js

+/* eslint-disable react/prop-types */
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *//* 
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import {useThemeConfig} from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import styles from "./styles.module.css";
+import ThemedImage from "@theme/ThemedImage";
+import SocialsIcons from "../../components/SocialsIcons";
+import { FaGitlab } from "react-icons/fc";
+
+function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {
+    forcePrependBaseUrl: true,
+  });
+  return (
+    <>
+      <FaGitlab />
+      <Link
+        className="footer__link-item"
+        {...(href
+          ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+          : {
+            to: toUrl,
+          })}
+        {...props}>
+        {href && !isInternalUrl(href) ? (
+          <span>
+            {label}
+            
+          </span>
+        ) : (
+          label
+        )}
+      </Link>
+    </>
+  );
+}
+
+const FooterLogo = ({sources, alt}) => (
+  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
+);
+
+function Footer() {
+  const {footer} = useThemeConfig();
+  const {copyright, links = [], logo = {}} = footer || {};
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  };
+
+  if (!footer) {
+    return null;
+  }
+
+  return (
+    <footer
+      className={clsx("footer", {
+        "footer--dark": footer.style === "dark",
+      })}>
+      <div className="container">
+        <SocialsIcons />
+        {links && links.length > 0 && (
+          <div className="row footer__links">
+            {links.map((linkItem, i) => (
+              <div key={i} className="col footer__col">
+                {linkItem.title != null ? (
+                  <div className="footer__title">{linkItem.title}</div>
+                ) : null}
+                {linkItem.items != null &&
+                Array.isArray(linkItem.items) &&
+                linkItem.items.length > 0 ? (
+                    <ul className="footer__items">
+                      {linkItem.items.map((item, key) =>
+                        item.html ? (
+                          <li
+                            key={key}
+                            className="footer__item" // Developer provided the HTML, so assume it's safe.
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{
+                              __html: item.html,
+                            }}
+                          />
+                        ) : (
+                          <li key={item.href || item.to} className="footer__item">
+                            <FooterLink {...item} />
+                          </li>
+                        ),
+                      )}
+                    </ul>
+                  ) : null}
+              </div>
+            ))}
+          </div>
+        )}
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && (logo.src || logo.srcDark) && (
+              <div className="margin-bottom--sm">
+                {logo.href ? (
+                  <Link href={logo.href} className={styles.footerLogoLink}>
+                    <FooterLogo alt={logo.alt} sources={sources} />
+                  </Link>
+                ) : (
+                  <FooterLogo alt={logo.alt} sources={sources} />
+                )}
+              </div>
+            )}
+            {copyright ? (
+              <div
+                className="footer__copyright" // Developer provided the HTML, so assume it's safe.
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: copyright,
+                }}
+              />
+            ) : null}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
+ */
+
+
+// File got generated with 'yarn run swizzle @docusaurus/theme-classic Footer --danger'
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from "react";
+import clsx from "clsx";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./styles.module.css";
+import SocialIconsList from "./components/SocialIconsList";
+/* import FooterLink from "./components/FooterLink"; 
+import { FaGitlab } from "react-icons/fc";*/
+
+const Footer = () => {
+  const { siteConfig } = useDocusaurusContext();
+  const { copyright, links = [] } = siteConfig.themeConfig.footer;
+  const hasFooter = !!siteConfig.themeConfig.footer;
+ 
+  if (!hasFooter) {
+    return null;
+  }
+ 
+  return (
+    <footer className={clsx("footer", styles.Container)}>
+      <div className={styles.InnerContainer}>
+        <div className={styles.ContentContainer}>
+          <div><SocialIconsList /> heubfjfjrjvojo</div>
+          {/*Footer Left */}
+          <div className={styles.FooterLeft}>
+            <div className={styles.BrandContainer}>
+              <img
+                className={styles.BrandImage}
+                alt="AgileTs Logo"
+                height={60}
+                width={60}
+                src="/img/logo_froggit.svg"
+                title={siteConfig.tagline}
+              />
+              <div className={styles.BrandText}>AgileTs</div>
+            </div>
+            <div className={styles.Tagline}>{siteConfig.tagline}</div>
+            
+          </div>
+
+          {/*<FaGitlab /> Footer Quick Links (Right) */}
+          <div className={styles.FooterRight}>
+            {links.map((linkItem, i) => (
+              <div className={styles.SectionContainer} key={i}>
+                {linkItem.title != null && (
+                  <li className={styles.LinkItemTitle}>{linkItem.title}</li>
+                )}
+                {linkItem.items?.map((item) => (
+                  <ul
+                    className={styles.LinkItemContainer}
+                    key={item.href ?? item.to}>
+                    {/* <FooterLink {...item} /> */}
+                  </ul>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className={styles.BottomContainer}>
+          <div
+            className={styles.CopyrightText}
+            dangerouslySetInnerHTML={{ __html: copyright }}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+};
+ 
+export default Footer;

src/theme/Footer/styles.module.css

+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.footerLogoLink {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+  opacity: 1;
+}