@openstack_dev/gatsby-theme-marketing-oif-core 1.0.11 → 1.0.13

package/.nvmrc

@@ -1 +1 @@
-18.15.0
+18.20.2

package/gatsby-config.js

@@ -40,6 +40,13 @@ const manifestPlugin = faviconAsset
   : [];
 
 const plugins = [
+  {
+    resolve: "gatsby-plugin-mui-theme-provider",
+    options: {
+      themePath: `${__dirname}/src/theme.js`,
+    },
+  },
+  "gatsby-plugin-emotion-cache-provider",
   ...manifestPlugin,
   {
     resolve: "gatsby-alias-imports",
@@ -47,6 +54,7 @@ const plugins = [
       aliases: {
         "@utils": `${__dirname}/src/utils`,
         "@cms": `${__dirname}/src/cms`,
+        "@content": `${__dirname}/src/content`,
       },
     },
   },

package/gatsby-node.js

@@ -140,9 +140,6 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => {
       },
       // allows content and data imports to correctly resolve when theming
       modules: [path.resolve("src")],
-      alias: {
-        "@utils": path.resolve(__dirname, "src/utils/"),
-      },
     },
     // devtool: "source-map",
     plugins: [

package/gatsby-ssr.js

@@ -1,12 +1,7 @@
-import * as React from "react";
 import { JSDOM } from "jsdom";
 import { XMLHttpRequest } from "xmlhttprequest";
-import { renderToString } from "react-dom/server";
-import { CacheProvider } from "@emotion/react";
-import createEmotionServer from "@emotion/server/create-instance";
 import { ReduxWrapper } from "./src/state/ReduxWrapper";
 import { HeadComponents } from "./src/components/head-components";
-import createEmotionCache from "./src/utils/createEmotionCache";
 
 export const onRenderBody = ({ setHeadComponents }) => {
   if (process.env.NODE_ENV === "production") {
@@ -14,32 +9,6 @@ export const onRenderBody = ({ setHeadComponents }) => {
   }
 };
 
-export const replaceRenderer = ({
-  bodyComponent,
-  setHeadComponents,
-  replaceBodyHTMLString,
-}) => {
-  const cache = createEmotionCache();
-  const { extractCriticalToChunks } = createEmotionServer(cache);
-
-  const emotionStyles = extractCriticalToChunks(
-    renderToString(<CacheProvider value={cache}>{bodyComponent}</CacheProvider>),
-  );
-
-  setHeadComponents(
-    emotionStyles.styles.map((style) => (
-      <style
-        data-emotion={`${style.key} ${style.ids.join(" ")}`}
-        key={style.key}
-        dangerouslySetInnerHTML={{ __html: style.css }}
-      />
-    )),
-  );
-
-  // render the result from `extractCritical`
-  replaceBodyHTMLString(emotionStyles.html);
-};
-
 export const wrapRootElement = ReduxWrapper;
 
 // build enabler polyfills

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { CacheProvider } from "@emotion/react";
+import getEmotionCache from "./get-emotion-cache";
+
+const cache = getEmotionCache();
+
+export const wrapRootElement = ({ element }) => (
+  <CacheProvider value={cache}>{element}</CacheProvider>
+);

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { CacheProvider } from "@emotion/react";
+import createEmotionServer from "@emotion/server/create-instance";
+import { renderToString } from "react-dom/server";
+
+import getEmotionCache from "./get-emotion-cache";
+
+export const replaceRenderer = ({
+  bodyComponent,
+  setHeadComponents,
+  replaceBodyHTMLString,
+}) => {
+  // see https://mui.com/material-ui/guides/server-rendering/
+  const cache = getEmotionCache();
+  const { extractCritical } = createEmotionServer(cache);
+
+  const initialHTML = renderToString(
+    <CacheProvider value={cache}>{bodyComponent}</CacheProvider>,
+  );
+
+  // see https://emotion.sh/docs/ssr#extractcritical
+  const { html, css, ids } = extractCritical(initialHTML);
+
+  const style = (
+    <style
+      key="theme-styles"
+      data-emotion={`css ${ids.join(" ")}`}
+      dangerouslySetInnerHTML={{ __html: css }}
+    />
+  );
+
+  setHeadComponents([style]);
+
+  // render the result from `extractCritical`
+  replaceBodyHTMLString(html);
+};

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

@@ -0,0 +1,5 @@
+import createCache from "@emotion/cache";
+
+export default function getEmotionCache(props) {
+  return createCache(props ?? { key: "css" });
+}

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

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-emotion-cache-provider"
+}

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

@@ -0,0 +1,3 @@
+import wrapThemeProvider from "./wrapThemeProvider";
+// see https://galenwong.github.io/blog/2020-02-27-mui-jss-rendering/
+export const wrapRootElement = wrapThemeProvider;

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

@@ -0,0 +1,43 @@
+const fs = require("fs");
+const path = require("path");
+
+// Copy and past from https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography
+exports.onPreBootstrap = ({ cache }, pluginOptions) => {
+  let data = "";
+  console.log(
+    "gatsby-plugin-mui-theme-provider::onPreBootstrap",
+    pluginOptions,
+  );
+  if (pluginOptions.themePath) {
+    console.log(
+      `gatsby-plugin-mui-theme-provider::onPreBootstrap loading file ${pluginOptions.themePath}`,
+    );
+    data = fs.readFileSync(pluginOptions.themePath, {
+      encoding: "utf8",
+      flag: "r",
+    });
+  }
+
+  const dir = cache.directory;
+
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
+
+  fs.writeFileSync(path.join(dir, "custom-theme.js"), data);
+};
+
+exports.onCreateWebpackConfig = ({ actions, cache }) => {
+  const themeFile = path.join(cache.directory, "custom-theme.js");
+  console.log(
+    `gatsby-plugin-mui-theme-provider::onCreateWebpackConfig ${themeFile}`,
+  );
+  const { setWebpackConfig } = actions;
+  setWebpackConfig({
+    resolve: {
+      alias: {
+        "custom-theme": themeFile,
+      },
+    },
+  });
+};

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

@@ -0,0 +1,3 @@
+import wrapThemeProvider from "./wrapThemeProvider";
+// see https://galenwong.github.io/blog/2020-02-27-mui-jss-rendering/
+export const wrapRootElement = wrapThemeProvider;

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

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-mui-theme-provider"
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import theme from "custom-theme";
+// see https://galenwong.github.io/blog/2020-02-27-mui-jss-rendering/
+const wrapThemeProvider = ({ element }) => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {element}
+  </ThemeProvider>
+);
+
+export default wrapThemeProvider;

package/src/components/Layout.js

@@ -1,14 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider } from "@mui/material/styles";
 import loadable from "@loadable/component";
 import Footer from "./Footer";
 import SponsoredProjectsNav from "./SponsoredProjectsNav";
 import SubscribeForm from "./SubscribeForm";
 import AnnouncementBanner from "./AnnouncementBanner";
 import Header from "./Header";
-import theme from "../theme";
 import NavBarPlaceholder from "./Navbar/placeholder";
 
 const Navbar = loadable(() => import("./Navbar"), {
@@ -18,22 +15,19 @@ const Navbar = loadable(() => import("./Navbar"), {
 
 function Layout({ children }) {
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
+    <div>
+      <SponsoredProjectsNav />
+      <Navbar />
       <div>
-        <SponsoredProjectsNav />
-        <Navbar />
-        <div>
-          <Header />
-          <AnnouncementBanner />
-          <main id="content-wrapper">
-            {children}
-            <SubscribeForm />
-          </main>
-          <Footer />
-        </div>
+        <Header />
+        <AnnouncementBanner />
+        <main id="content-wrapper">
+          {children}
+          <SubscribeForm />
+        </main>
+        <Footer />
       </div>
-    </ThemeProvider>
+    </div>
   );
 }
 

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

@@ -0,0 +1,145 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+
+import styles from "../index.module.scss";
+
+function AuthUserSubNavBar({
+  member,
+  isMobile,
+  navbarMenu,
+  setActiveMenu,
+  isSearchBarOpen,
+  handleNavigation,
+}) {
+  const onClickLogout = () => {
+    navigate("/auth/logout", {
+      state: {
+        backUrl: window.location.pathname,
+      },
+    });
+  };
+
+  return isMobile ? (
+    <>
+      <Button
+        className={styles.mobileOption}
+        onClick={() => setActiveMenu("My Account")}
+        disableRipple
+      >
+        My Account
+        {navbarMenu === "My Account" ? (
+          <RemoveIcon aria-hidden="true" />
+        ) : (
+          <AddIcon aria-hidden="true" />
+        )}
+      </Button>
+      {navbarMenu === "My Account" && (
+        <Box className={styles.mobileDropdownMenu}>
+          <Button
+            className={styles.mobileDropdownOption}
+            onClick={() => handleNavigation("/profile/")}
+            sx={{ display: "block" }}
+            disableRipple
+          >
+            Edit Profile
+          </Button>
+          <Button
+            className={styles.mobileDropdownOption}
+            onClick={() => handleNavigation(
+              `/community/members/profile/${
+                member.id
+              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
+            )}
+            sx={{ display: "block" }}
+            disableRipple
+          >
+            View Public Profile
+          </Button>
+          <div className={styles.divider} />
+          <Button
+            className={styles.mobileDropdownOption}
+            sx={{ display: "block" }}
+            onClick={onClickLogout}
+            disableRipple
+          >
+            Log out
+          </Button>
+        </Box>
+      )}
+    </>
+  ) : (
+    <Box
+      maxWidth="15%"
+      sx={{
+        display: {
+          xs: "none",
+          md: isSearchBarOpen ? "none" : "flex",
+        },
+        justifyContent: "flex-end",
+        marginLeft: "auto",
+      }}
+    >
+      <Box
+        className={`${styles.navbarOption}`}
+        sx={{ my: 2, display: "block" }}
+      >
+        My Account
+        <ArrowDropDownIcon className={styles.arrowDownIcon} />
+        <Box className={styles.dropDownMenu}>
+          <Button
+            className={styles.dropdownMenuOption}
+            onClick={() => handleNavigation("/profile/")}
+            sx={{ display: "block" }}
+            disableRipple
+          >
+            Edit Profile
+          </Button>
+          <Button
+            className={styles.dropdownMenuOption}
+            onClick={() => handleNavigation(
+              `/community/members/profile/${
+                member.id
+              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
+            )}
+            sx={{ display: "block" }}
+            disableRipple
+          >
+            View Public Profile
+          </Button>
+          <div className={styles.divider} />
+          <Button
+            className={styles.dropdownMenuOption}
+            sx={{ display: "block" }}
+            onClick={onClickLogout}
+            disableRipple
+          >
+            Log out
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+AuthUserSubNavBar.propTypes = {
+  member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
+  isMobile: PropTypes.bool.isRequired,
+  navbarMenu: PropTypes.string.isRequired,
+  setActiveMenu: PropTypes.func,
+  isSearchBarOpen: PropTypes.bool,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+AuthUserSubNavBar.defaultProps = {
+  member: null,
+  isSearchBarOpen: false,
+  setActiveMenu: (option) => console.log(option),
+};
+
+export default AuthUserSubNavBar;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
+import Button from "@mui/material/Button";
+
+import styles from "../index.module.scss";
+
+function LoginButton({ backUrl }) {
+  return (
+    <Button
+      className={`${styles.navbarOption} ${styles.login}`}
+      onClick={() => doLogin(backUrl)}
+      sx={{ my: 2, display: "block" }}
+      disableRipple
+    >
+      Log in
+    </Button>
+  );
+}
+
+LoginButton.propTypes = {
+  backUrl: PropTypes.string,
+};
+
+LoginButton.defaultProps = {
+  backUrl: "/",
+};
+
+export default LoginButton;

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+
+import styles from "./index.module.scss";
+
+function MobileMenu({ handleMobileMenuToggle }) {
+  return (
+    <Box
+      className={styles.mobileMenuWrapper}
+      sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
+    >
+      <IconButton
+        className={styles.toggleIcon}
+        size="large"
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={() => handleMobileMenuToggle()}
+        color="inherit"
+      >
+        <MenuIcon />
+      </IconButton>
+    </Box>
+  );
+}
+
+MobileMenu.propTypes = {
+  handleMobileMenuToggle: PropTypes.func.isRequired,
+};
+
+export default MobileMenu;

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

@@ -0,0 +1,9 @@
+.mobileMenuWrapper {
+  .toggleIcon {
+    color: #5a5a5a;
+    margin-left: auto;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+
+import styles from "../index.module.scss";
+
+function NavBarDropDown({ isMobile, items, handleNavigation }) {
+  return (
+    <Box className={isMobile ? styles.mobileDropdownMenu : styles.dropDownMenu}>
+      {items.map((subItem) => (!subItem.title && !subItem.link ? (
+        <div className={styles.divider} key={subItem.title} />
+      ) : (
+        <Button
+          className={
+              isMobile ? styles.mobileDropdownOption : styles.dropdownMenuOption
+            }
+          key={isMobile ? `${subItem.title}-mobile` : subItem.title}
+          onClick={(ev) => handleNavigation(ev, subItem.link)}
+          sx={{ display: "block" }}
+          disableRipple
+        >
+          {subItem.title}
+        </Button>
+      )))}
+    </Box>
+  );
+}
+
+NavBarDropDown.propTypes = {
+  isMobile: PropTypes.bool,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      link: PropTypes.string,
+      title: PropTypes.string,
+      display: PropTypes.bool,
+      requiresAuth: PropTypes.bool,
+    }),
+  ).isRequired,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+NavBarDropDown.defaultProps = {
+  isMobile: false,
+};
+
+export default NavBarDropDown;

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+
+import styles from "./index.module.scss";
+import SearchBar from "../SearchBar";
+
+function NavBarHeader({ setIsSearchBarOpen }) {
+  return (
+    <Box className={styles.navbarHeader}>
+      <div className={styles.brandWrapper}>
+        <a
+          className={styles.navbarBrand}
+          href="/"
+          alt="Openstack logo"
+          aria-label="Go to homepage"
+        />
+      </div>
+      <SearchBar onSearchBarOpen={(value) => setIsSearchBarOpen(value)} />
+    </Box>
+  );
+}
+
+NavBarHeader.propTypes = {
+  setIsSearchBarOpen: PropTypes.func.isRequired,
+};
+
+export default NavBarHeader;

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

@@ -0,0 +1,55 @@
+.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;
+    }
+  }
+  .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;
+      }
+    }
+  }
+}