@openstack_dev/gatsby-theme-marketing-oif-core 1.0.17 → 1.0.18

package/gatsby-config.js

@@ -39,14 +39,75 @@ const manifestPlugin = faviconAsset
   ]
   : [];
 
+const googleTagManagerPlugin = process.env.GOOGLE_TAGMANAGER_ID
+  ? [
+    {
+      resolve: "gatsby-plugin-google-tagmanager",
+      options: {
+        id: process.env.GOOGLE_TAGMANAGER_ID,
+        includeInDevelopment: false,
+        defaultDataLayer: { platform: "gatsby" },
+      },
+    },
+  ]
+  : [];
+
+const twitterPixelPlugin = process.env.TWITTER_PIXEL_ID
+  ? [
+    {
+      resolve: "gatsby-plugin-twitter-pixel",
+      options: {
+        pixelId: process.env.TWITTER_PIXEL_ID,
+      },
+    },
+  ]
+  : [];
+
+const linkedInInsightPlugin = process.env.LINKEDIN_INSIGHT_PARTNER_ID
+  ? [
+    {
+      resolve: require.resolve("./plugins/gatsby-plugin-linkedin-insight"),
+      options: {
+        partnerId: process.env.LINKEDIN_INSIGHT_PARTNER_ID,
+        includeInDevelopment: false,
+      },
+    },
+  ]
+  : [];
+
+const quantcastTagPlugin = process.env.QUANTCAST_TAG_ACCOUNT_ID
+  ? [
+    {
+      resolve: "gatsby-plugin-quantcast-tag",
+      options: {
+        acccountId: process.env.QUANTCAST_TAG_ACCOUNT_ID,
+        head: false,
+      },
+    },
+  ]
+  : [];
+
+const cookiebotPlugin = process.env.COOKIEBOT_ID
+  ? [
+    {
+      resolve: "gatsby-plugin-cookiebot",
+      options: {
+        cookiebotId: process.env.COOKIEBOT_ID,
+      },
+    },
+  ]
+  : [];
+
 const plugins = [
   {
-    resolve: "@openstack_dev/gatsby-plugin-mui-theme-provider",
+    resolve: require.resolve("./plugins/gatsby-plugin-mui-theme-provider"),
     options: {
       themePath: `${__dirname}/src/theme.js`,
     },
   },
-  "@openstack_dev/gatsby-plugin-emotion-cache-provider",
+  {
+    resolve: require.resolve("./plugins/gatsby-plugin-emotion-cache-provider"),
+  },
   ...manifestPlugin,
   {
     resolve: "gatsby-alias-imports",
@@ -156,55 +217,11 @@ const plugins = [
       },
     },
   },
-  {
-    resolve: "gatsby-plugin-google-tagmanager",
-    options: {
-      id: process.env.GOOGLE_TAGMANAGER_ID,
-
-      // Include GTM in development.
-      //
-      // Defaults to false meaning GTM will only be loaded in production.
-      includeInDevelopment: false,
-
-      // datalayer to be set before GTM is loaded
-      // should be an object or a function that is executed in the browser
-      //
-      // Defaults to null
-      defaultDataLayer: { platform: "gatsby" },
-    },
-  },
-  {
-    resolve: "gatsby-plugin-twitter-pixel",
-    options: {
-      pixelId: process.env.TWITTER_PIXEL_ID,
-    },
-  },
-  {
-    resolve: "gatsby-plugin-linkedin-insight",
-    options: {
-      partnerId: process.env.LINKEDIN_INSIGHT_PARTNER_ID,
-
-      // Include LinkedIn Insight in development.
-      // Defaults to false meaning LinkedIn Insight will only be loaded in production.
-      includeInDevelopment: false,
-    },
-  },
-  {
-    resolve: "gatsby-plugin-quantcast-tag",
-    options: {
-      acccountId: process.env.QUANTCAST_TAG_ACCOUNT_ID,
-
-      // If true, add tracking code to head. Otherwise, tracking code is
-      // added to the bottom of body.
-      head: false,
-    },
-  },
-  {
-    resolve: "gatsby-plugin-cookiebot",
-    options: {
-      cookiebotId: process.env.COOKIEBOT_ID,
-    },
-  },
+  ...googleTagManagerPlugin,
+  ...twitterPixelPlugin,
+  ...linkedInInsightPlugin,
+  ...quantcastTagPlugin,
+  ...cookiebotPlugin,
   {
     resolve: "gatsby-plugin-google-fonts-v2",
     options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [
@@ -22,6 +22,7 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@babel/core": "^7.12.3",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
@@ -68,7 +69,6 @@
     "gatsby-plugin-google-fonts-v2": "^1.0.1",
     "gatsby-plugin-google-tagmanager": "^5.13.1",
     "gatsby-plugin-image": "^3.8.0",
-    "gatsby-plugin-linkedin-insight": "^1.0.1",
     "gatsby-plugin-manifest": "^5.12.3",
     "gatsby-plugin-netlify": "^5.1.0",
     "gatsby-plugin-quantcast-tag": "^0.1.1",
@@ -80,6 +80,7 @@
     "gatsby-transformer-json": "^5.8.0",
     "gatsby-transformer-remark": "^6.8.0",
     "gatsby-transformer-sharp": "^5.12.3",
+    "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "history": "^4.10.1",
     "i18n-react": "^0.6.4",
     "i18next": "^21.8.3",

package/plugins/gatsby-plugin-emotion-cache-provider/index.js

@@ -0,0 +1 @@
+// no-op

package/plugins/gatsby-plugin-emotion-cache-provider/package.json

@@ -1,4 +1,14 @@
 {
   "name": "@openstack_dev/gatsby-plugin-emotion-cache-provider",
-  "version": "1.0.2"
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "peerDependencies": {
+    "@babel/core": "^7.12.3",
+    "gatsby": "^5.0.0-next",
+    "gatsby-plugin-sharp": "^5.0.0-next",
+    "gatsby-source-filesystem": "^5.0.0-next",
+    "react": "^18.0.0 || ^0.0.0",
+    "react-dom": "^18.0.0 || ^0.0.0"
+  }
 }

package/plugins/gatsby-plugin-linkedin-insight/gatsby-ssr.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { stripIndent } from "common-tags";
+
+export const onRenderBody = ({ setPostBodyComponents }, pluginOptions) => {
+  const { partnerId, includeInDevelopment = false } = pluginOptions;
+
+  if (process.env.NODE_ENV === "production" || includeInDevelopment) {
+    setPostBodyComponents([
+      <React.Fragment key="gatsby-plugin-linkedin-insight">
+        <script
+          type="text/javascript"
+          dangerouslySetInnerHTML={{
+            __html: stripIndent`
+                _linkedin_partner_id = "${partnerId}";
+                window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+                window._linkedin_data_partner_ids.push(_linkedin_partner_id);`,
+          }}
+        />
+        <script
+          type="text/javascript"
+          dangerouslySetInnerHTML={{
+            __html: stripIndent`
+                (function () {
+                    var s = document.getElementsByTagName("script")[0];
+                    var b = document.createElement("script");
+                    b.type = "text/javascript";
+                    b.async = true;
+                    b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+                    s.parentNode.insertBefore(b, s);
+                })();`,
+          }}
+        />
+        <noscript>
+          <img
+            height="1"
+            width="1"
+            style={{ display: "none" }}
+            alt=""
+            src={`https://dc.ads.linkedin.com/collect/?pid=${partnerId}&fmt=gif`}
+          />
+        </noscript>
+      </React.Fragment>,
+    ]);
+  }
+};

package/plugins/gatsby-plugin-linkedin-insight/index.js

@@ -0,0 +1 @@
+// no-op

package/plugins/gatsby-plugin-linkedin-insight/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@openstack_dev/gatsby-plugin-linkedin-insight",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js"
+}

package/plugins/gatsby-plugin-mui-theme-provider/index.js

@@ -0,0 +1 @@
+// no-op

package/plugins/gatsby-plugin-mui-theme-provider/package.json

@@ -1,4 +1,13 @@
 {
   "name": "@openstack_dev/gatsby-plugin-mui-theme-provider",
-  "version": "1.0.2"
+  "private": true,
+  "main": "index.js",
+  "peerDependencies": {
+    "@babel/core": "^7.12.3",
+    "gatsby": "^5.0.0-next",
+    "gatsby-plugin-sharp": "^5.0.0-next",
+    "gatsby-source-filesystem": "^5.0.0-next",
+    "react": "^18.0.0 || ^0.0.0",
+    "react-dom": "^18.0.0 || ^0.0.0"
+  }
 }

package/src/components/Navbar/AuthUserSubNavBar/index.js

@@ -42,11 +42,7 @@ function AuthUserSubNavBar({
       {navbarMenu === "My Account" && (
         <Box className={styles.mobileDropdownMenu} component="ul">
           <li role="presentation">
-            <Link
-              className={styles.mobileDropdownOption}
-              to="/profile/"
-              sx={{ display: "block" }}
-            >
+            <Link className={styles.mobileDropdownOption} to="/profile/">
               Edit Profile
             </Link>
           </li>
@@ -56,7 +52,6 @@ function AuthUserSubNavBar({
               to={`/community/members/profile/${
                 member.id
               }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`}
-              sx={{ display: "block" }}
             >
               View Public Profile
             </Link>
@@ -85,49 +80,46 @@ function AuthUserSubNavBar({
         },
         justifyContent: "flex-end",
         marginLeft: "auto",
+        position: "relative",
       }}
     >
       <Box
-        className={`${styles.navbarOption}`}
-        sx={{ my: 2, display: "block" }}
+        className={styles.navbarOption}
+        sx={{ display: "block" }}
+        component="li"
       >
         My Account
         <ArrowDropDownIcon className={styles.arrowDownIcon} />
-        <Box className={styles.dropDownMenu} component="ul">
-          <li role="presentation">
-            <Link
-              className={styles.dropdownMenuOption}
-              to="/profile/"
-              sx={{ display: "block" }}
-            >
-              Edit Profile
-            </Link>
-          </li>
-          <li role="presentation">
-            <Link
-              className={styles.dropdownMenuOption}
-              to={`/community/members/profile/${
-                member.id
-              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`}
-              sx={{ display: "block" }}
-            >
-              View Public Profile
-            </Link>
-          </li>
-          <li role="presentation">
-            <div className={styles.divider} />
-          </li>
-          <li role="presentation">
-            <Button
-              className={styles.dropdownMenuOption}
-              sx={{ display: "block" }}
-              onClick={onClickLogout}
-              disableRipple
-            >
-              Log out
-            </Button>
-          </li>
-        </Box>
+      </Box>
+      <Box className={styles.dropDownMenu} component="ul">
+        <li role="presentation">
+          <Link className={styles.dropdownMenuOption} to="/profile/">
+            Edit Profile
+          </Link>
+        </li>
+        <li role="presentation">
+          <Link
+            className={styles.dropdownMenuOption}
+            to={`/community/members/profile/${
+              member.id
+            }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`}
+          >
+            View Public Profile
+          </Link>
+        </li>
+        <li role="presentation">
+          <div className={styles.divider} />
+        </li>
+        <li role="presentation">
+          <Button
+            className={styles.dropdownMenuOption}
+            sx={{ display: "block" }}
+            onClick={onClickLogout}
+            disableRipple
+          >
+            Log out
+          </Button>
+        </li>
       </Box>
     </Box>
   );

package/src/components/Navbar/MobileMenu/index.js

@@ -20,6 +20,7 @@ function MobileMenu({ handleMobileMenuToggle }) {
         aria-haspopup="true"
         onClick={() => handleMobileMenuToggle()}
         color="inherit"
+        disableRipple
       >
         <MenuIcon />
       </IconButton>

package/src/components/Navbar/NavBarDropDown/index.js

@@ -12,21 +12,21 @@ function NavBarDropDown({ isMobile, items }) {
       component="ul"
     >
       {items.map((subItem) => (!subItem.title && !subItem.link ? (
-        <li role="presentation">
-          <div className={styles.divider} key={subItem.title} />
+        <li role="presentation" key={subItem.title}>
+          <div className={styles.divider} />
         </li>
       ) : (
-        <li role="presentation">
+        <li
+          role="presentation"
+          key={isMobile ? `${subItem.title}-mobile` : subItem.title}
+        >
           <Link
             className={
                 isMobile
                   ? styles.mobileDropdownOption
                   : styles.dropdownMenuOption
               }
-            key={isMobile ? `${subItem.title}-mobile` : subItem.title}
             to={subItem.link}
-            sx={{ display: "block" }}
-            disableRipple
           >
             {subItem.title}
           </Link>

package/src/components/Navbar/NavBarItem/index.js

@@ -33,22 +33,13 @@ function NavBarItem({
     </>
   ) : (
     <li role="presentation">
-      <Link
-        className={styles.navbarOption}
-        key={item.title}
-        sx={{ my: 2, display: "block" }}
-        to={item.link}
-      >
-        {item.items?.length > 0 ? (
-          <>
-            {item.title}
-            <ArrowDropDownIcon className={styles.arrowDownIcon} />
-            <NavBarDropDown items={item.items} />
-          </>
-        ) : (
-          item.title
+      <Link className={styles.navbarOption} key={item.title} to={item.link}>
+        {item.title}
+        {item.items?.length > 0 && (
+          <ArrowDropDownIcon className={styles.arrowDownIcon} />
         )}
       </Link>
+      {item.items?.length > 0 && <NavBarDropDown items={item.items} />}
     </li>
   );
 }

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

@@ -8,13 +8,16 @@
   min-height: 50px;
   border: 1px solid transparent;
   box-shadow: none;
+  li {
+    position: relative;
+  }
   .navbarOption {
     color: #8a959e;
     font-size: 12px;
     font-weight: 400;
     text-transform: uppercase;
     position: relative;
-    padding: 20px 15px 15px;
+    padding: 20px 15px 25px;
     text-decoration: none;
     text-align: left;
     cursor: pointer;
@@ -23,13 +26,13 @@
     line-height: 17.15px;
     white-space: nowrap;
     background-color: transparent;
-    margin: 0;
+    margin-top: 10px;
     align-items: center;
     &:hover {
       color: #333;
       background-color: transparent;
       text-decoration: none;
-      .dropDownMenu {
+      & + .dropDownMenu {
         display: flex;
         opacity: 1;
       }
@@ -37,84 +40,6 @@
     .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 {
-        display: inline-block;
-        color: #8a959e;
-        font-size: 12px;
-        font-weight: 400;
-        text-transform: uppercase;
-        position: relative;
-        padding: 15px 15px;
-        text-decoration: none;
-        text-align: left;
-        width: 100%;
-        &: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;
@@ -135,7 +60,7 @@
       color: #fff;
       margin-top: 17px;
       font-size: 14px;
-      height: 22px;
+      height: 26px;
       &:hover {
         background: #286a9d;
         color: #fff;
@@ -143,6 +68,88 @@
       }
     }
   }
+  .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 {
+      display: inline-block;
+      color: #8a959e;
+      font-size: 12px;
+      font-weight: 400;
+      text-transform: uppercase;
+      position: relative;
+      padding: 15px 15px;
+      text-decoration: none;
+      text-align: left;
+      width: 100%;
+      &:hover {
+        color: #333;
+        background-color: #f5f5f5;
+        outline: 0;
+        text-decoration: none;
+      }
+    }
+    &:hover {
+      display: flex;
+      opacity: 1;
+    }
+    &::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;
+    }
+  }
   .navbarMobileMenu {
     flex-direction: column;
     padding-inline-start: 0px;

package/src/components/Navbar/template.js

@@ -51,6 +51,7 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
                   xs: "none",
                   md: isSearchBarOpen ? "none" : "flex",
                 },
+                alignItems: "center",
                 justifyContent: "flex-end",
               }}
               component="ul"

package/src/content/site-settings/index.json

@@ -1 +1 @@
-{ "staticJsonFilesBuildTime": [], "lastBuild": 1714750103949 }
+{ "staticJsonFilesBuildTime": [], "lastBuild": 1714760006562 }