@openeventkit/event-site 2.0.149 → 2.1.0-beta.0

package/gatsby-browser.js

@@ -1,6 +1,7 @@
 import * as Sentry from "@sentry/gatsby";
 import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";
 import ReduxWrapper from "./src/state/ReduxWrapper";
+import wrapThemeProvider from "./src/utils/wrapThemeProvider";
 import CookieManager from "./src/utils/cookies/CookieManager";
 import KlaroProvider from "./src/utils/cookies/providers/KlaroProvider";
 import cookieServices from "./src/utils/cookies/services";
@@ -20,7 +21,9 @@ import "./src/utils/fontAwesome";
 import colors from "data/colors.json";
 import marketingSettings from "data/marketing-settings.json";
 
-export const wrapRootElement = ReduxWrapper;
+export const wrapRootElement = ({ element }) => {
+  return wrapThemeProvider({ element: ReduxWrapper({ element }) });
+};
 
 export const onClientEntry = () => {
   // smooth scroll polyfill needed for Safari

package/gatsby-ssr.js

@@ -1,20 +1,54 @@
-import ReduxWrapper from "./src/state/ReduxWrapper";
-import { 
+import * as React from "react";
+import * as ReactDOMServer from "react-dom/server";
+import createEmotionServer from "@emotion/server/create-instance";
+import createEmotionCache from "./src/utils/createEmotionCache";
+import {
   HtmlAttributes,
   HeadComponents,
   PreBodyComponents
 } from "./src/components/HeadComponents";
+import ReduxWrapper from "./src/state/ReduxWrapper";
+import wrapThemeProvider from "./src/utils/wrapThemeProvider";
 
-// build enabler polyfills
+// Polyfills for build environment
 import "./src/utils/buildPolyfills";
 
-export const wrapRootElement = ReduxWrapper;
+const renderToStringWithEmotion = (bodyComponent) => {
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
+
+  const wrappedComponent = wrapThemeProvider({ element: ReduxWrapper({ element: bodyComponent }) });
+
+  const html = ReactDOMServer.renderToString(wrappedComponent);
+  const emotionChunks = extractCriticalToChunks(html);
+  const emotionCss = constructStyleTagsFromChunks(emotionChunks);
+
+  return { html, emotionCss };
+};
+
+export const replaceRenderer = ({
+  bodyComponent,
+  setHeadComponents,
+  replaceBodyHTMLString
+}) => {
+  const { html, emotionCss } = renderToStringWithEmotion(bodyComponent);
+
+  const emotionStyleTags = (
+    <style
+      key="emotion-style"
+      dangerouslySetInnerHTML={{ __html: emotionCss }}
+    />
+  );
+
+  setHeadComponents([emotionStyleTags]);
+  replaceBodyHTMLString(html);
+};
 
 export const onRenderBody = ({
   setHtmlAttributes,
   setHeadComponents,
   setPreBodyComponents
-}, pluginOptions) => {
+}) => {
   setHtmlAttributes(HtmlAttributes);
   setHeadComponents(HeadComponents);
   setPreBodyComponents(PreBodyComponents);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.149",
+  "version": "2.1.0-beta.0",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",

package/src/pages/a/[...].js

@@ -82,12 +82,12 @@ const App = ({ isLoggedUser, user, summitPhase, allowClick = true, data }) => {
             <MyTicketsPage path="/my-tickets" isLoggedIn={isLoggedUser} user={user} location={location} />
             <FullProfilePage path="/profile" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location} />
             <ExtraQuestionsPage path="/extra-questions" isLoggedIn={isLoggedUser} user={user} location={location} />
-            { !mySchedulePageJson.needsTicketAuthz && mySchedulePage({location, summitPhase,isLoggedUser, user, allowClick, title:mySchedulePageJson.title, key: mySchedulePageJson.key }) }
+            { !mySchedulePageJson?.needsTicketAuthz && mySchedulePage({location, summitPhase,isLoggedUser, user, allowClick, title: mySchedulePageJson?.title, key: mySchedulePageJson?.key }) }
             <WithAuthzRoute path="/" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location}>
                 <PostersPage path="/posters" trackGroupId={0} location={location} />
                 <PostersPage path="/posters/:trackGroupId" location={location} />
                 <PosterDetailPage path="/poster/:presentationId/" isLoggedIn={isLoggedUser} user={user} location={location} />
-                { mySchedulePageJson.needsTicketAuthz && mySchedulePage({location, summitPhase,isLoggedUser, user, allowClick, title: mySchedulePageJson.title, key: mySchedulePageJson.key }) }
+                { mySchedulePageJson?.needsTicketAuthz && mySchedulePage({location, summitPhase,isLoggedUser, user, allowClick, title: mySchedulePageJson?.title, key: mySchedulePageJson?.key }) }
                 <ShowOpenRoute path="/" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location}>
                   <WithBadgeRoute path="/event/:eventId" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location}>
                     <EventPage path="/" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location} />

package/src/styles/theme.js

@@ -0,0 +1,10 @@
+import { createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  cssVariables: true,
+  typography: {
+    fontFamily: "var(--font_family)"
+  }
+});
+
+export default theme;

package/src/utils/createEmotionCache.js

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

package/src/utils/wrapThemeProvider.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { CacheProvider } from "@emotion/react";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+
+import createEmotionCache from "./createEmotionCache";
+
+import theme from "../styles/theme";
+
+const cache = createEmotionCache();
+
+const wrapThemeProvider = ({ element }) => (
+  <CacheProvider value={cache}>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {element}
+    </ThemeProvider>
+  </CacheProvider>
+);
+
+export default wrapThemeProvider;