@openstack_dev/gatsby-theme-marketing-oif-core 1.0.0

package/src/components/Footer/index.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import FooterTemplate from "./template";
+
+const footerQuery = graphql`
+  query {
+    footerJson {
+      social {
+        display
+        title
+        networks {
+          display
+          icon
+          link
+        }
+      }
+      credit {
+        title
+        display
+        content
+      }
+      columns {
+        display
+        items {
+          link
+          title
+        }
+        title
+      }
+    }
+  }
+`;
+
+const Footer = () => {
+  const { footerJson: footerContent } = useStaticQuery(footerQuery);
+
+  return <FooterTemplate data={footerContent} />;
+};
+
+export default Footer;

package/src/components/Footer/index.module.scss

@@ -0,0 +1,59 @@
+.footer {
+  background-color: #333333;
+  color: #ffffff;
+  padding: 70px 0;
+  margin-top: 50px;
+  font-size: 12px;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
+
+  .footer-colummns {
+    text-align: left;
+
+    h3 {
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .link {
+      color: #AAAAAA;
+      text-decoration: none;
+      line-height: 1.5;
+
+      :hover,
+      :visited {
+        text-decoration: underline;
+      }
+    }
+
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      line-height: 1.8;
+    }
+
+    .social-container {
+      display: flex;
+      justify-content: space-between;
+      width: 70%;
+      .link {
+        color: #eaeaea !important;
+        span {
+          font-size: 36px;
+          padding-right: 10px;
+          text-decoration: none;
+          min-width: 48px;
+        }
+      }
+    }
+
+    .credit {
+        margin-top: 20px;
+        line-height: 1.5;
+        color: #AAAAAA;
+        a {
+            color: #AAAAAA;
+        }
+    }
+  }
+}

package/src/components/Footer/template.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Container, Grid, Icon } from "@mui/material";
+import Link from "../Link";
+import '@fortawesome/fontawesome-free/css/all.css';
+
+import styles from "./index.module.scss";
+
+const FooterTemplate = ({ data }) => {
+  const columns = data?.columns?.filter(col => col.display);
+  const socialColumnSpan = 4;
+  const colsSpan = columns?.length > 0 ? Math.floor((12 - socialColumnSpan) / columns.length) : 0;
+  return (
+    <footer className={styles.footer}>
+      <Container maxWidth="lg" className={styles.footerColummns}>
+        <Grid container>
+          {columns.map((col, index) => (
+            <Grid item xs={12} md={colsSpan} key={index}>
+              <h3>
+                {col?.title}
+              </h3>
+              <ul>
+                {col.items.map((item, index) => (
+                  <li key={`item-${index}`}>
+                    <Link to={item?.link} className={styles.link} key={index}>
+                      {item?.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </Grid>
+          ))}
+          {data.social?.display && (
+            <Grid item xs={12} md={socialColumnSpan}>
+              <h3>
+                {data.social?.title}
+              </h3>
+              <div className={styles.socialContainer}>
+                {data.social?.networks.filter(net => net.display).map((net, index) => {
+                  return (
+                    <Link to={net.link} className={styles.link} key={index}>
+                      <Icon className={`fab fa-${net.icon}`} />
+                    </Link>
+                  );
+                })}
+              </div>
+              { <div className={styles.credit} dangerouslySetInnerHTML={{ __html: data.credit.content }} /> }
+            </Grid>
+          )}
+        </Grid>
+      </Container>
+    </footer>
+  );
+};
+
+export default FooterTemplate;

package/src/components/Header/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import HeaderTemplate from "./template";
+
+const Header = () => {
+    return <HeaderTemplate/>;
+};
+
+export default Header;

package/src/components/Header/template.js

@@ -0,0 +1,5 @@
+const HeaderTemplate = ({ data }) => {
+    return null
+}
+
+export default HeaderTemplate;

package/src/components/Layout.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Footer from "./Footer";
+import SponsoredProjectsNav from "./SponsoredProjectsNav";
+import SubscribeForm from "./SubscribeForm";
+import AnnouncementBanner from "./AnnouncementBanner";
+import Header from "./Header";
+import Navbar from "./Navbar";
+
+function Layout({ children }) {
+  return (
+    <div>
+      <SponsoredProjectsNav />
+      <Navbar />
+      <div>
+        <Header />
+        <AnnouncementBanner />
+        <main id="content-wrapper">
+          {children}
+          <SubscribeForm />
+        </main>
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Layout;

package/src/components/Link.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Link as GatsbyLink } from "gatsby";
+// Since DOM elements <a> cannot receive activeClassName
+// and partiallyActive, destructure the prop here and
+// pass it only to GatsbyLink
+const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
+  // Tailor the following test to your environment.
+  // This example assumes that any internal link (intended for Gatsby)
+  // will start with exactly one slash, and that anything else is external.
+  const internal = /^\/(?!\/)/.test(to)
+  // Use Gatsby Link for internal links, and <a> for others
+  const email = /\S+@\S+\.\S+/.test(to);
+
+  if (internal) {
+    return (
+      <GatsbyLink
+        to={to}
+        activeClassName={activeClassName}
+        partiallyActive={partiallyActive}
+        {...other}
+      >
+        {children}
+      </GatsbyLink>
+    );
+  }
+  if (email) {
+    const href = /^mailto:/.test(to) ? to : `mailto:${to}`;
+    return (
+      <a href={href} {...other}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a href={to} {...other} target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  );
+};
+
+export default Link;