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

package/gatsby-browser.js

@@ -1,5 +1,3 @@
-import ReduxWrapper from "./src/state/ReduxWrapper";
+import { ReduxWrapperWithCacheProvider } from "./src/state/ReduxWrapper";
 
-export const wrapRootElement = ReduxWrapper;
-
-export const onClientEntry = () => {};
+export const wrapRootElement = ReduxWrapperWithCacheProvider;

package/gatsby-ssr.js

@@ -1,7 +1,12 @@
+import * as React from "react";
 import { JSDOM } from "jsdom";
 import { XMLHttpRequest } from "xmlhttprequest";
-import ReduxWrapper from "./src/state/ReduxWrapper";
+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") {
@@ -9,6 +14,32 @@ 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.9",
+  "version": "1.0.10",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [
@@ -24,7 +24,10 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@loadable/component": "^5.16.4",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@ncwidgets/file-relation": "^0.8.0",
@@ -110,6 +113,7 @@
     "react-iframe-comm": "^1.2.2",
     "react-immutable-proptypes": "^2.2.0",
     "react-laag": "^2.0.5",
+    "react-loadable-visibility": "^3.0.2",
     "react-medium-image-zoom": "^4.3.5",
     "react-redux": "^7.2.6",
     "react-rte": "^0.16.3",

package/src/components/Layout.js

@@ -1,40 +1,39 @@
 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 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 Navbar from "./Navbar";
 import theme from "../theme";
+import NavBarPlaceholder from "./Navbar/placeholder";
 
-import createEmotionCache from "../utils/createEmotionCache";
-
-const cache = createEmotionCache();
+const Navbar = loadable(() => import("./Navbar"), {
+  ssr: false,
+  fallback: <NavBarPlaceholder />,
+});
 
 function Layout({ children }) {
   return (
-    <CacheProvider value={cache}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
+    <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>
-    </CacheProvider>
+      </div>
+    </ThemeProvider>
   );
 }
 

package/src/components/Navbar/index.js

@@ -77,6 +77,7 @@ 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"

package/src/components/Navbar/placeholder.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import { Container } from "@mui/material";
+import styles from "./index.module.scss";
+
+function NavBarPlaceholder() {
+  return (
+    <nav role="navigation">
+      <AppBar
+        position="static"
+        className={styles.navbar}
+        sx={{ backgroundColor: "#fff", boxShadow: "none" }}
+      >
+        <Container maxWidth="xl" />
+      </AppBar>
+    </nav>
+  );
+}
+
+export default NavBarPlaceholder;

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

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

package/src/state/ReduxWrapper.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
+import { CacheProvider } from "@emotion/react";
 import { store, persistor } from "./store";
+import createEmotionCache from "../utils/createEmotionCache";
 
-function ReduxWrapper({ element }) {
+export function ReduxWrapper({ element }) {
   return (
     <Provider store={store}>
       <PersistGate persistor={persistor}>{() => element}</PersistGate>
@@ -11,4 +13,13 @@ function ReduxWrapper({ element }) {
   );
 }
 
-export default ReduxWrapper;
+export function ReduxWrapperWithCacheProvider({ element }) {
+  const cache = createEmotionCache();
+  return (
+    <CacheProvider value={cache}>
+      <Provider store={store}>
+        <PersistGate persistor={persistor}>{() => element}</PersistGate>
+      </Provider>
+    </CacheProvider>
+  );
+}