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

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.12",
   "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/content/site-settings/index.json

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