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

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

@@ -0,0 +1,301 @@
+.navbar {
+  border-radius: 0px;
+  background: #fff;
+  margin-bottom: 0;
+  padding: 15px 0;
+  border-color: #e7e7e7;
+  position: relative;
+  min-height: 50px;
+  border: 1px solid transparent;
+  box-shadow: none;
+  .navbarHeader {
+    .brandWrapper {
+      margin: 10px 0;
+      padding-right: 20px;
+      float: left;
+      border-right: 1px solid #eee;
+      min-width: 135px;
+      a.navbarBrand {
+        background: url("../../images/openstack-logo-full.svg") left no-repeat;
+        height: 35px;
+        width: 135px;
+        color: #777;
+        padding: 15px 15px;
+        font-size: 18px;
+        line-height: 20px;
+        display: block;
+      }
+    }
+    .searchWrapper {
+      padding: 21px 0px 15px 20px;
+      float: left;
+      text-transform: uppercase;
+      color: #8a959e;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 17.15px;
+      .searchComponent {
+        cursor: pointer;
+        z-index: 5;
+        position: relative;
+        .searchIcon {
+          width: 12px;
+          height: 12px;
+          line-height: 12px;
+          margin-right: 5px;
+        }
+      }
+      .openstackSearchBar {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        z-index: 100;
+        height: 70px;
+        padding-top: 10px;
+        padding-right: 12%;
+        background-color: #fff;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      @media (max-width: 768px) {
+        display: none;
+      }
+      @media (max-width: 1160px) {
+        .headerSearchText {
+          display: none;
+        }
+      }
+    }
+    .navbarToggle {
+      appearance: button;
+      cursor: pointer;
+      position: relative;
+      float: right;
+      padding: 9px 10px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      background: transparent;
+      border: none;
+      .iconBar {
+        background-color: #5a5a5a;
+        height: 3px;
+        border-radius: 3px;
+        display: block;
+        width: 22px;
+        margin-top: 4px;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+    }
+    @media (min-width: 768px) and (max-width: 1310px) {
+      .brandWrapper {
+        width: 75px;
+        min-width: 75px;
+        margin-top: 0;
+        a.navbarBrand {
+          background: url("../../images/openstack-logo-vert.svg") left no-repeat;
+          margin-left: 0px !important;
+          height: 54px;
+          width: 59px;
+        }
+      }
+    }
+  }
+  .navbarOption {
+    color: #8a959e;
+    font-size: 12px;
+    font-weight: 400;
+    text-transform: uppercase;
+    position: relative;
+    padding: 15px 15px 20px;
+    text-decoration: none;
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    clear: both;
+    line-height: 17.15px;
+    white-space: nowrap;
+    background-color: transparent;
+    margin: 0;
+    &:hover {
+      color: #333;
+      background-color: transparent;
+      text-decoration: none;
+      .dropDownMenu {
+        display: flex;
+        opacity: 1;
+      }
+    }
+    .arrowDownIcon {
+      font-size: 20px;
+    }
+    .dropDownMenu,
+    .join {
+      display: none;
+      flex-direction: column;
+      margin-top: 5px;
+      padding: 10px 0;
+      min-width: 230px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      position: absolute;
+      top: 90%;
+      left: 0;
+      z-index: 1000;
+      float: left;
+      font-size: 14px;
+      text-align: left;
+      list-style: none;
+      background-color: #fff;
+      background-clip: padding-box;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      border-radius: 4px;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      .dropdownMenuOption {
+        color: #8a959e;
+        font-size: 12px;
+        font-weight: 400;
+        text-transform: uppercase;
+        position: relative;
+        padding: 15px 15px;
+        text-decoration: none;
+        text-align: left;
+        &:hover {
+          color: #333;
+          background-color: #f5f5f5;
+          outline: 0;
+          text-decoration: none;
+        }
+      }
+      &::before {
+        border: solid transparent;
+        border-color: rgba(170, 170, 170, 0);
+        border-bottom-color: #aaaaaa;
+        border-width: 16px;
+        margin-left: -16px;
+        bottom: 100%;
+        left: 25%;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      &::after {
+        border: solid transparent;
+        border-color: rgba(255, 255, 255, 0);
+        border-bottom-color: #ffffff;
+        border-width: 15px;
+        margin-left: -15px;
+        bottom: 100%;
+        left: 25%;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      .divider {
+        width: 100%;
+        height: 1px;
+        margin: 9px 0;
+        overflow: hidden;
+        background-color: #e5e5e5;
+      }
+    }
+    &.join {
+      border: none;
+      border-left-width: medium;
+      border-left-style: none;
+      border-left-color: currentcolor;
+      border-left: 1px solid #eee;
+      color: #2a4e68;
+      font-weight: 600;
+      white-space: nowrap;
+      margin: 0 15px 0 10px;
+      padding-right: 0px;
+      padding-left: 10px;
+    }
+    &.login {
+      background: #2a4e68;
+      padding: 3px 25px;
+      border-radius: 4px;
+      color: #fff;
+      margin-top: 12px;
+      font-size: 14px;
+      height: 22px;
+      &:hover {
+        background: #286a9d;
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+  }
+  .mobileMenuWrapper {
+    .toggleIcon {
+      color: #5a5a5a;
+      margin-left: auto;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+  .navbarMobileMenu {
+    flex-direction: column;
+    .openstackSearchBarMobile {
+      display: block;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0.3s ease;
+    }
+    .mobileOption {
+      color: #8a959e;
+      justify-content: space-between;
+      line-height: 20px;
+      padding-bottom: 20px;
+      font-size: 12px;
+      font-weight: 400;
+      text-transform: uppercase;
+      position: relative;
+      padding: 15px 15px;
+      cursor: pointer;
+      &:hover,
+      &:visited {
+        color: #333;
+        background-color: transparent;
+      }
+    }
+    .mobileDropdownMenu {
+      position: relative;
+      border: 0;
+      box-shadow: none;
+      height: auto;
+      width: 100%;
+      padding: 10px 5%;
+      background: #edf2f7;
+      opacity: 1;
+      border-radius: 4px;
+      .mobileDropdownOption {
+        color: #8a959e;
+        font-size: 12px;
+        font-weight: 400;
+        text-align: left;
+        &:hover,
+        &:visited {
+          color: #333;
+          background-color: transparent;
+        }
+      }
+      .divider {
+        width: 100%;
+        height: 1px;
+        margin: 9px 0;
+        overflow: hidden;
+        background-color: #e5e5e5;
+      }
+    }
+  }
+}

package/src/components/SponsoredProjectsNav/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import NavigationWidget from 'navigation-widget/dist';
+import 'navigation-widget/dist/index.css';
+import sponsored_projects from 'data/sponsored-projects.json';
+import styles from "./index.module.scss";
+
+const SponsoredProjectsNav = () => {
+
+    // get this from data
+    const widgetProps = {
+        projects:sponsored_projects,
+        currentProject: parseInt(process.env.GATSBY_SPONSORED_PROJECTS_CURRENT),
+        containerClass: styles.sponsored_project_nav,
+        navbarTitle: "An OpenInfra Foundation Project",
+        popupTitle: "More OpenInfra Foundation Projects",
+    };
+
+    return (
+        <NavigationWidget {...widgetProps} />
+    );
+}
+export default SponsoredProjectsNav;

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

@@ -0,0 +1,7 @@
+.sponsored_project_nav {
+    max-width: 1170px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}

package/src/components/SubscribeForm/index.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Container} from "@mui/material";
+import '@fortawesome/fontawesome-free/css/all.css';
+
+import styles from "./index.module.scss";
+
+const SubscribeForm = () => {
+
+  return (
+    <div className={styles.wrapper}>
+      <Container maxWidth="lg" className={styles.formContainer}>
+        <h3>Subscribe to News About OpenStack</h3>
+        <p>Stay up to date on OpenStack and the Open Infrastructure community.</p>
+        <form
+          method="post"
+          id="e2ma_signup"
+          action="https://app.e2ma.net/app2/audience/signup/1900249/1771360/"
+        >
+          <input id="id_prev_member_email" name="prev_member_email" type="hidden"/>
+          <input id="id_source" name="source" type="hidden"/>
+          <input id="id_group_4036448" name="group_4036448" type="hidden" value="4036448"/>
+          <input type="hidden" name="private_set" value="{num_private}"/>
+          <input
+            placeholder="Email Address"
+            id="id_email"
+            name="email"
+            type="email"
+            required
+            className={styles.feedbackInput}
+            size="is-large"
+          />
+          <button
+            type="submit"
+            className={styles.feedbackBtn}
+            data-sitekey="6LeKvr0UAAAAAItxLgobGpatgngglauCXrZw2Yw4"
+            data-callback='onSubmit'
+          >
+            <span>SUBMIT</span>
+            <i className="fa fa-chevron-right"></i>
+          </button>
+        </form>
+      </Container>
+    </div>
+  );
+};
+
+export default SubscribeForm;

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

@@ -0,0 +1,114 @@
+.wrapper {
+  background-color: #ed1944;
+  color: #ffffff;
+  padding: 50px 0;
+  text-align: center;
+  width: 100%;
+  font-size: 12px;
+  margin-bottom: -50px;
+  vertical-align: middle;
+
+  h3 {
+    font-size: 24px;
+    font-weight: 400;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: 14px;
+    padding-bottom: 20px;
+    margin: 0 0 10px;
+  }
+
+  .formContainer {
+
+    @media (max-width: 767px) {
+      padding: 0;
+    }
+
+    .feedbackInput {
+      display: inline-block;
+      background: #ed1944;
+      border: 2px solid #fff;
+      border-radius: 4px;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+      padding: 10px 20px;
+      width: 260px;
+
+      &:focus {
+        outline: none;
+        border: 2px solid #fff;
+      }
+    }
+
+    @media (max-width: 767px) {
+      .feedbackInput {
+        width: 50%;
+      }
+    }
+
+    .feedbackInput::-webkit-input-placeholder {
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
+    .feedbackInput:-moz-placeholder {
+      /* Firefox 18- */
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
+    .feedbackInput::-moz-placeholder {
+      /* Firefox 19+ */
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
+    .feedbackInput:-ms-input-placeholder {
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
+    .feedbackBtn {
+      margin-left: 11px;
+      display: inline-block;
+      background: #ed1944;
+      border: 2px solid #fff;
+      border-radius: 4px;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+      padding: 10px 30px;
+      cursor: pointer;
+
+      i {
+        margin-left: 5px;
+
+        @media (max-width: 767px) {
+          display: none;
+        }
+      }
+
+      &:hover {
+        border: 2px solid #fff;
+        color: #fff;
+      }
+    }
+
+    @media (max-width: 767px) {
+      .feedbackBtn {
+        width: 18%;
+        margin-left: 2%;
+        padding: 10px;
+      }
+    }
+
+  }
+}

package/src/components/Tracking/custom-bing-tracker.js

@@ -0,0 +1,5 @@
+const customBingTracker = `
+(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"${process.env.MICROSOFT_BING_ID}"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");
+`;
+
+export default customBingTracker;

package/src/components/Tracking/custom-google-tracker.js

@@ -0,0 +1,51 @@
+import React from "react";
+
+const CustomGoogleTracker = () => (
+  <>
+    <style>{`.async-hide { opacity: 0 !important}`}</style>
+    <script type="text/javascript">{`
+        // Used to record outbound links before the browser resets to the new site
+        function recordOutboundLink(link, category, action) {
+          try {
+              ga('send', 'event', {
+                  eventCategory: category,
+                  eventAction: 'click',
+                  eventLabel: link.href
+              });
+              setTimeout('document.location = "' + link.href + '"', 100)
+          }
+          catch(err){}
+        }
+
+        // Used to minimize flickering during GA A/B testing
+        (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
+        h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
+        (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
+        })(window,document.documentElement,'async-hide','dataLayer',4000,
+        {'${process.env.GATSBY_GOOGLE_TAGMANAGER_ID}':true});
+
+        // Google Analytics tracking script
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+        ga('create', '${process.env.GATSBY_GOOGLE_ANALYTICS_KEY}', 'auto');
+        ga('require', 'linker');
+        ga('linker:autoLink', ['openstack.org', 'eventbrite.com'] );
+        ga('require', '${process.env.GATSBY_GOOGLE_TAGMANAGER_ID}');
+        ga('send', 'pageview');
+
+        ga(function(tracker) {
+            var googleClientID = tracker.get('clientId');
+
+            $("a.eventbrite-register-link").each(function() {
+                var href = $(this).attr("href");
+                $(this).attr("href", href + '&_eboga=' + googleClientID);
+            });
+        });
+      `}</script>
+  </>
+);
+
+export default CustomGoogleTracker;

package/src/components/head-components.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import customGoogleTracker from "./Tracking/custom-google-tracker";
+import customBingTracker from "./Tracking/custom-bing-tracker";
+
+export const HeadComponents = [
+  <style
+    key="google-tracker-style"
+    dangerouslySetInnerHTML={{ __html: `.async-hide { opacity: 0 !important}` }}
+  />,
+  <script
+    key="google-tracker"
+    dangerouslySetInnerHTML={{ __html: customGoogleTracker }}
+  />,
+  <script
+    data-obct
+    type="text/javascript"
+    key={`gatsby-plugin-ms-bing`}
+    dangerouslySetInnerHTML={{ __html: customBingTracker }}
+  />,
+];

package/src/components/svgs/RightArrow.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const RightArrow = () => (
+  <svg width="21" height="11" viewBox="0 0 21 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.4828 1L19.6207 5.48M19.6207 5.48L15.4828 9.96M19.6207 5.48L1 5.48" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+  </svg>
+);
+
+export default RightArrow;

package/src/content/announcement-banner/OpenInfrastructureFoundation-icon-RGB.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#f7b749;}.cls-2{fill:#ed362f;}.cls-3{fill:#43b85c;}.cls-4{fill:#2cb4e2;}</style></defs><polygon class="cls-1" points="0 33.33 0 50 114.64 50 0 164.64 11.79 176.43 154.88 33.33 0 33.33"/><polygon class="cls-2" points="171.55 16.67 188.22 0 0 0 0 16.67 171.55 16.67"/><polygon class="cls-3" points="183.33 28.45 183.33 200 200 200 200 11.78 183.33 28.45"/><polygon class="cls-4" points="166.67 200 166.67 45.12 23.57 188.21 35.35 200 150 85.36 150 200 166.67 200"/></svg>

package/src/content/announcement-banner/index.json

@@ -0,0 +1,8 @@
+{
+  "title": "OpenInfra Summit > Asia '24",
+  "logo": "OpenInfrastructureFoundation-icon-RGB.svg",
+  "text": "Join the OpenStack community in Suwon, South Korea from September 3-4 at the first regional OpenInfra Summit Asia! Hear how OpenStack developers and operators are collaborating to define AI requirements, new OpenStack + Kubernetes production use cases and how organizations continue to scale their OpenStack footprint.",
+  "cta_title": "Submit to the CFP! Deadline: May 29, 2024",
+  "cta_label": "Submit Now",
+  "cta_link": "https://openinfrafoundation.formstack.com/forms/openinfra_asia_summit_2024"
+}