@openstack_dev/gatsby-theme-marketing-oif-core 1.0.7 → 1.0.9

package/gatsby-config.js

@@ -17,8 +17,6 @@ try {
   console.log("Falling back to default site settings.");
 }
 
-console.log("loaded siteSettings on gatsby config ...", siteSettings);
-
 const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE;
 const description = siteSettings?.siteMetadata?.description
   || process.env.GATSBY_METADATA_DESCRIPTION;
@@ -217,12 +215,13 @@ const plugins = [
   "gatsby-plugin-netlify", // make sure to keep it last in the array
 ];
 
-console.log(`title ${title} description ${description}`);
-
 module.exports = {
   siteMetadata: {
     title,
     description,
   },
   plugins,
+  flags: {
+    DEV_SSR: true,
+  },
 };

package/gatsby-ssr.js

@@ -1,50 +1,25 @@
-import * as ReactDOMServer from "react-dom/server";
 import { JSDOM } from "jsdom";
 import { XMLHttpRequest } from "xmlhttprequest";
-import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import theme from "./src/theme";
 import ReduxWrapper from "./src/state/ReduxWrapper";
 import { HeadComponents } from "./src/components/head-components";
 
-
-export const onRenderBody = ({
-  setHtmlAttributes,
-  setHeadComponents,
-  setPreBodyComponents,
-  setPostBodyComponents,
-}, pluginOptions) => {
-  if (process.env.NODE_ENV === `production`) {
+export const onRenderBody = ({ setHeadComponents }) => {
+  if (process.env.NODE_ENV === "production") {
     setHeadComponents(HeadComponents);
   }
 };
 
-export const replaceRenderer = ({
-                                  bodyComponent,
-                                  setHeadComponents,
-                                  replaceBodyHTMLString,
-                                }) => {
-
-  const html = ReactDOMServer.renderToString(
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          {bodyComponent}
-        </ThemeProvider>
-  );
-
-  replaceBodyHTMLString(html);
-};
-
 export const wrapRootElement = ReduxWrapper;
 
 // build enabler polyfills
 global.dom = new JSDOM("...");
-global.window = dom.window;
-global.document = dom.window.document;
+global.window = global.dom.window;
+global.document = global.dom.window.document;
 global.navigator = global.window.navigator;
 global.window.matchMedia = () => ({
   matches: false,
   addListener: () => {},
-  removeListener: () => {}
+  removeListener: () => {},
 });
+
 global.XMLHttpRequest = XMLHttpRequest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [
@@ -22,6 +22,8 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",

package/src/components/Layout.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CssBaseline from "@mui/material/CssBaseline";
+import { CacheProvider } from "@emotion/react";
 import { ThemeProvider } from "@mui/material/styles";
 import Footer from "./Footer";
 import SponsoredProjectsNav from "./SponsoredProjectsNav";
@@ -10,24 +11,30 @@ import Header from "./Header";
 import Navbar from "./Navbar";
 import theme from "../theme";
 
+import createEmotionCache from "../utils/createEmotionCache";
+
+const cache = createEmotionCache();
+
 function Layout({ children }) {
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <div>
-        <SponsoredProjectsNav />
-        <Navbar />
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
         <div>
-          <Header />
-          <AnnouncementBanner />
-          <main id="content-wrapper">
-            {children}
-            <SubscribeForm />
-          </main>
-          <Footer />
+          <SponsoredProjectsNav />
+          <Navbar />
+          <div>
+            <Header />
+            <AnnouncementBanner />
+            <main id="content-wrapper">
+              {children}
+              <SubscribeForm />
+            </main>
+            <Footer />
+          </div>
         </div>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </CacheProvider>
   );
 }
 

package/src/components/Navbar/index.js

@@ -15,6 +15,7 @@ import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "@mui/material/Button";
+import Link from "../Link";
 
 import navbarContent from "../../content/navbar/index.json";
 
@@ -76,7 +77,6 @@ function Navbar({ isLoggedUser, member }) {
     <nav role="navigation">
       <Script
         src={`${getEnvVariable(SEARCH_WIDGET_BASE_URL)}/widget/embed.min.js`}
-        onLoad={() => console.log("Script loaded")}
       />
       <AppBar
         position="static"
@@ -142,18 +142,20 @@ function Navbar({ isLoggedUser, member }) {
             <Box
               sx={{
                 flexGrow: 1,
-                display: { xs: "none", md: isSearchBarOpen ? "none" : "flex" },
+                display: {
+                  xs: "none",
+                  md: isSearchBarOpen ? "none" : "flex",
+                },
                 justifyContent: "flex-end",
               }}
             >
               {navbarContent.items.map(
                 (item) => item.display && (
-                <Button
+                <Link
                   className={styles.navbarOption}
                   key={item.title}
                   sx={{ my: 2, display: "block" }}
-                  disableRipple
-                  onClick={() => handleNavigation(item.link)}
+                  href={item.link}
                 >
                   {item.items?.length > 0 ? (
                     <>
@@ -161,7 +163,10 @@ function Navbar({ isLoggedUser, member }) {
                       <ArrowDropDownIcon className={styles.arrowDownIcon} />
                       <Box className={styles.dropDownMenu}>
                         {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
-                          <div className={styles.divider} />
+                          <div
+                            className={styles.divider}
+                            key={subItem.title}
+                          />
                         ) : (
                           <Button
                             className={styles.dropdownMenuOption}
@@ -178,7 +183,7 @@ function Navbar({ isLoggedUser, member }) {
                   ) : (
                     item.title
                   )}
-                </Button>
+                </Link>
                 ),
               )}
             </Box>
@@ -194,10 +199,9 @@ function Navbar({ isLoggedUser, member }) {
                   marginLeft: "auto",
                 }}
               >
-                <Button
+                <Box
                   className={`${styles.navbarOption}`}
                   sx={{ my: 2, display: "block" }}
-                  disableRipple
                 >
                   My Account
                   <ArrowDropDownIcon className={styles.arrowDownIcon} />
@@ -232,7 +236,7 @@ function Navbar({ isLoggedUser, member }) {
                       Log out
                     </Button>
                   </Box>
-                </Button>
+                </Box>
               </Box>
             ) : (
               <Box
@@ -246,10 +250,9 @@ function Navbar({ isLoggedUser, member }) {
                   marginLeft: "auto",
                 }}
               >
-                <Button
+                <Box
                   className={`${styles.navbarOption} ${styles.join}`}
                   sx={{ my: 2, display: "block" }}
-                  disableRipple
                 >
                   Join
                   <ArrowDropDownIcon className={styles.arrowDownIcon} />
@@ -279,7 +282,7 @@ function Navbar({ isLoggedUser, member }) {
                       More about the Foundation
                     </Button>
                   </Box>
-                </Button>
+                </Box>
                 <Button
                   className={`${styles.navbarOption} ${styles.login}`}
                   onClick={() => doLogin("/")}
@@ -332,11 +335,14 @@ function Navbar({ isLoggedUser, member }) {
                   {item.items?.length > 0 && item.title === navbarMenu && (
                   <Box className={styles.mobileDropdownMenu}>
                     {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
-                      <div className={styles.divider} />
+                      <div
+                        className={styles.divider}
+                        key={subItem.title}
+                      />
                     ) : (
                       <Button
                         className={styles.mobileDropdownOption}
-                        key={subItem.title}
+                        key={`${subItem.title}-mobile`}
                         onClick={() => handleNavigation(subItem.link)}
                         sx={{ display: "block" }}
                         disableRipple
@@ -399,10 +405,9 @@ function Navbar({ isLoggedUser, member }) {
                 </>
               ) : (
                 <Box>
-                  <Button
+                  <Box
                     className={`${styles.navbarOption} ${styles.join}`}
                     sx={{ my: 2, display: "block" }}
-                    disableRipple
                   >
                     Join
                     <ArrowDropDownIcon className={styles.arrowDownIcon} />
@@ -432,7 +437,7 @@ function Navbar({ isLoggedUser, member }) {
                         More about the Foundation
                       </Button>
                     </Box>
-                  </Button>
+                  </Box>
                   <Button
                     className={`${styles.navbarOption} ${styles.login}`}
                     onClick={() => doLogin("/")}
@@ -453,7 +458,8 @@ function Navbar({ isLoggedUser, member }) {
 
 Navbar.propTypes = {
   isLoggedUser: PropTypes.bool.isRequired,
-  member: PropTypes.object.isRequired,
+  member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])])
+    .isRequired,
 };
 
 const mapStateToProps = ({ loggedUserState }) => ({

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

@@ -118,6 +118,7 @@
     white-space: nowrap;
     background-color: transparent;
     margin: 0;
+    align-items: center;
     &:hover {
       color: #333;
       background-color: transparent;

package/src/components/Seo.js

@@ -26,7 +26,7 @@ function Seo({
     url: buildUrl(scheme, host, pathname),
     image: host && image ? buildUrl(scheme, host, getSrc(image)) : null,
   };
-  console.log("SEO", seo);
+
   return (
     <>
       {seo.title && <title>{seo.title}</title>}

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

@@ -1 +1 @@
-{ "staticJsonFilesBuildTime": [], "lastBuild": 1713848863370 }
+{ "staticJsonFilesBuildTime": [], "lastBuild": 1713949648791 }

package/src/state/ReduxWrapper.js

@@ -3,21 +3,10 @@ import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { store, persistor } from "./store";
 
-const onBeforeLift = () => {
-  const params = new URLSearchParams(window.location.search);
-  const flush = params.has("flushState");
-
-  if (flush) {
-    // store.dispatch({ type: RESET_STATE, payload: null });
-  }
-};
-
 function ReduxWrapper({ element }) {
   return (
     <Provider store={store}>
-      <PersistGate onBeforeLift={onBeforeLift} persistor={persistor}>
-        {() => element}
-      </PersistGate>
+      <PersistGate persistor={persistor}>{() => element}</PersistGate>
     </Provider>
   );
 }

package/src/state/store.js

@@ -21,13 +21,11 @@ const states = {
   loggedUserState: reducers.loggedUserReducer,
 };
 
-const appendLoggedUser = () => (next) => (action) => next(action);
-
 const composeEnhancers = typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   : compose;
 
-const enhancer = composeEnhancers(applyMiddleware(appendLoggedUser, thunk));
+const enhancer = composeEnhancers(applyMiddleware(thunk));
 
 // Create store with persistor
 export const { store, persistor } = (() => {

package/src/utils/createEmotionCache.js

@@ -0,0 +1,5 @@
+import createCache from "@emotion/cache";
+
+const createEmotionCache = (options) => createCache(options ?? { key: "css" });
+
+export default createEmotionCache;

package/src/state/storage.js

@@ -1,21 +0,0 @@
-import createWebStorage from "redux-persist/lib/storage/createWebStorage";
-// create a mock storage for SSR
-const createNoopStorage = () => {
-    return {
-        getItem(_key) {
-            return Promise.resolve(null);
-        },
-        setItem(_key, value) {
-            return Promise.resolve(value);
-        },
-        removeItem(_key) {
-            return Promise.resolve();
-        },
-    };
-};
-
-// and set the proper storege depending if we are in browser side or SSR side
-//  because you cannot create the local storage in Node.js
-const storage = typeof window !== "undefined" ? createWebStorage("local") : createNoopStorage();
-
-export default storage;