@openeventkit/event-site 2.0.115 → 2.0.117

package/gatsby-browser.js

@@ -1,10 +1,11 @@
 import * as Sentry from "@sentry/gatsby";
 import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";
 import ReduxWrapper from "./src/state/ReduxWrapper";
-
-import AnalyticsManager from "./src/utils/analytics/AnalyticsManager";
-import GoogleTagManagerProvider from "./src/utils/analytics/providers/GoogleTagManagerProvider";
-
+import CookieManager from "./src/utils/cookies/CookieManager";
+import KlaroProvider from "./src/utils/cookies/providers/KlaroProvider";
+import cookieServices from "./src/utils/cookies/services";
+import TagManager from "./src/utils/tag-manager/TagManager";
+import GoogleTagManagerProvider from "./src/utils/tag-manager/providers/GoogleTagManagerProvider";
 import smoothscroll from "smoothscroll-polyfill";
 import "what-input";
 
@@ -18,29 +19,35 @@ import "./src/utils/fontAwesome";
 import colors from "data/colors.json";
 import marketingSettings from "data/marketing-settings.json";
 
-// smooth scroll polyfill needed for Safari
-smoothscroll.polyfill();
-
-const googleTagManagerProvider = new GoogleTagManagerProvider();
-const analyticsManager = new AnalyticsManager(googleTagManagerProvider);
-
 export const wrapRootElement = ReduxWrapper;
 
 export const onClientEntry = () => {
-  // var set at document level
-  // prevents widget color flashing from defaults to fetched by widget from marketing api
+  // smooth scroll polyfill needed for Safari
+  smoothscroll.polyfill();
+
+  // Initialize TagManager and add GoogleTagManagerProvider
+  const tagManager = new TagManager();
+  const googleTagManagerProvider = new GoogleTagManagerProvider();
+  tagManager.addProvider(googleTagManagerProvider);
+
+  // Initialize Cookie Manager with Klaro provider
+  const klaroProvider = new KlaroProvider();
+  const cookieManager = new CookieManager(klaroProvider, cookieServices);
+  cookieManager.show();
+
+  // Apply colors
   Object.entries(colors).forEach(([key, value]) => {
     document.documentElement.style.setProperty(`--${key}`, value);
     document.documentElement.style.setProperty(`--${key}50`, `${value}50`);
   });
   // set theme
-  const themeSetting = marketingSettings.find(ms => ms.key === 'EVENT_SITE_COLOR_SCHEME');
-  const theme = themeSetting?.value || 'LIGHT';
-  document.documentElement.setAttribute('data-theme', theme);
+  const themeSetting = marketingSettings.find(ms => ms.key === "EVENT_SITE_COLOR_SCHEME");
+  const theme = themeSetting?.value || "LIGHT";
+  document.documentElement.setAttribute("data-theme", theme);
 
   // init sentry
   const GATSBY_SENTRY_DSN = process.env.GATSBY_SENTRY_DSN;
-  if(GATSBY_SENTRY_DSN) {
+  if (GATSBY_SENTRY_DSN) {
     console.log("INIT SENTRY ....");
     // sentry init
     Sentry.init({
@@ -61,12 +68,12 @@ export const onClientEntry = () => {
               return frame;
             }
             const isComponentFrame = /component---src-pages-(\w*)-js(-\w*).js/.test(frame.filename);
-            if(isComponentFrame){
-              frame.filename = frame.filename.replace(/(component---src-pages-(\w*)-js)(-\w*).js$/,'$1.js')
+            if (isComponentFrame) {
+              frame.filename = frame.filename.replace(/(component---src-pages-(\w*)-js)(-\w*).js$/, '$1.js');
             }
             const isAppFrame = /app(-\w*).js/.test(frame.filename);
-            if(isAppFrame){
-              frame.filename = frame.filename.replace(/app(-\w*).js$/,'app.js')
+            if (isAppFrame) {
+              frame.filename = frame.filename.replace(/app(-\w*).js$/, 'app.js');
             }
             return frame;
           }
@@ -76,4 +83,4 @@ export const onClientEntry = () => {
     });
     window.Sentry = Sentry;
   }
-};
+};

package/gatsby-config.mjs

@@ -26,26 +26,27 @@ const {
 let siteSettings = require(`./${SITE_SETTINGS_FILE_PATH}`);
 try {
   siteSettings = require(path.resolve(SITE_SETTINGS_FILE_PATH));
-}
-catch (e) {
+} catch (e) {
   console.log("Falling back to default site settings.")
 }
 
-const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE || "Event Site";
-const description = siteSettings?.siteMetadata?.description || process.env.GATSBY_METADATA_DESCRIPTION || "Event Site";
+const packageJson = require(path.resolve(__dirname, "package.json"));
+
+const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE;
+const description = siteSettings?.siteMetadata?.description || process.env.GATSBY_METADATA_DESCRIPTION;
 const faviconAsset = siteSettings?.favicon?.asset;
 
 const manifestPlugin = faviconAsset ? [
   {
     resolve: "gatsby-plugin-manifest",
     options: {
-      name: title,
-      short_name: title,
-      description: description,
+      name: title ?? packageJson.description,
+      short_name: title ?? packageJson.description,
       start_url: "/",
       display: "minimal-ui",
       icon: path.join(SITE_SETTINGS_DIR_PATH, faviconAsset),
-      include_favicon: true
+      include_favicon: true,
+      ...description && { description }
     }
   }
 ] : [];
@@ -55,7 +56,10 @@ const googleTagManagerPlugin = process.env.GATSBY_GOOGLE_TAGMANAGER_ID ? [
     resolve: "gatsby-plugin-google-tagmanager",
     options: {
       id: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
-      includeInDevelopment: true
+      includeInDevelopment: true,
+      // defer script tags loading to after consent is given
+      // managed by Klaro cookie manager
+      deferLoading: true
     }
   }
 ] : [];

package/gatsby-node.js

@@ -1,6 +1,6 @@
 const axios = require("axios");
 const path = require("path");
-const fs = require("fs-extra");
+const fs = require("fs");
 const webpack = require("webpack");
 const {
   createFilePath
@@ -16,6 +16,7 @@ const {
   REQUIRED_DIR_PATHS,
   DEFAULT_COLORS_FILE_PATH,
   COLORS_FILE_PATH,
+  COLORS_SCSS_FILE_PATH,
   SITE_SETTINGS_FILE_PATH,
   SUMMIT_FILE_PATH,
   EVENTS_FILE_PATH,
@@ -29,7 +30,12 @@ const {
   SPONSORS_FILE_PATH,
   FONTS_SCSS_FILE_PATH
 } = require("./src/utils/filePath");
-const { generateFontFile } = require("./src/utils/cssUtils");
+
+const {
+  generateAndWriteScssFile,
+  generateFontScssFile,
+  generateColorsScssFile
+} = require("./src/utils/scssUtils");
 
 const fileBuildTimes = [];
 
@@ -228,8 +234,8 @@ exports.onPreBootstrap = async () => {
   const summitId = process.env.GATSBY_SUMMIT_ID;
   const summitApiBaseUrl = process.env.GATSBY_SUMMIT_API_BASE_URL;
   let   marketingSettings = await SSR_getMarketingSettings(process.env.GATSBY_MARKETING_API_BASE_URL, summitId);
-  const colorSettings = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
   const siteSettings = fs.existsSync(SITE_SETTINGS_FILE_PATH) ? JSON.parse(fs.readFileSync(SITE_SETTINGS_FILE_PATH)) : {};
+  const colors = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
 
   const config = {
     client: {
@@ -247,12 +253,12 @@ exports.onPreBootstrap = async () => {
 
   const accessToken = await getAccessToken(config, process.env.GATSBY_BUILD_SCOPES).then(({ token }) => token.access_token);
 
-  const FileType = 'FILE';
+  const FileType = "FILE";
   // extract colors from marketing settings
-  marketingSettings = marketingSettings.map( entry => {
-    if (entry.key.startsWith("color_")) colorSettings[entry.key] = entry.value;
-    if(entry.type === FileType) return {...entry, value: entry.file};
-    return {...entry};
+  marketingSettings = marketingSettings.map(entry => {
+    if (entry.key.startsWith("color_")) colors[entry.key] = entry.value;
+    if (entry.type === FileType) return { ...entry, value: entry.file };
+    return { ...entry };
   });
 
   // create required directories
@@ -263,7 +269,17 @@ exports.onPreBootstrap = async () => {
   });
 
   fs.writeFileSync(MARKETING_SETTINGS_FILE_PATH, JSON.stringify(marketingSettings), "utf8");
-  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
+
+  // write colors json used to set runtime colors in gatsby-browser
+  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colors), "utf8");
+
+  // generate and write colors SCSS file used by built styles 
+  generateAndWriteScssFile(generateColorsScssFile, colors, COLORS_SCSS_FILE_PATH);
+
+  if (siteSettings.siteFont) {    
+    // generate and write font SCSS file used by built styles 
+    generateAndWriteScssFile(generateFontScssFile, siteSettings.siteFont, FONTS_SCSS_FILE_PATH);
+  }
 
   // summit
   const summit = await SSR_getSummit(summitApiBaseUrl, summitId);
@@ -292,7 +308,6 @@ exports.onPreBootstrap = async () => {
   });
   fs.writeFileSync(EVENTS_IDX_FILE_PATH, JSON.stringify(allEventsIDX), "utf8");
 
-
   // Show Speakers
   const allSpeakers = await SSR_getSpeakers(summitApiBaseUrl, summitId, accessToken);
   console.log(`allSpeakers ${allSpeakers.length}`);
@@ -335,23 +350,6 @@ exports.onPreBootstrap = async () => {
   siteSettings.lastBuild = Date.now();
 
   fs.writeFileSync(SITE_SETTINGS_FILE_PATH, JSON.stringify(siteSettings), "utf8");
-
-  // Read fonts from site settings
-  const siteFonts = siteSettings.siteFont;
-
-  if(siteFonts && Object.keys(siteFonts).length > 0) {
-    // Generate the SCSS file
-    const scssFontsFile = generateFontFile(siteFonts);
-    if (scssFontsFile) {
-      const standalone = __dirname === path.resolve();
-      let fontFilePath = FONTS_SCSS_FILE_PATH;
-      if (!standalone) {
-        fontFilePath = `${__dirname}/${fontFilePath}`;
-      }
-      fs.writeFileSync(fontFilePath, scssFontsFile);
-      console.log(`CUSTOM FONT FILE ${fontFilePath} generated.`);
-    }
-  }
 };
 
 exports.createSchemaCustomization = async ({ actions, reporter, getNodeAndSavePathDependency }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.115",
+  "version": "2.0.117",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -28,7 +28,8 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.0.6",
+    "attendee-to-attendee-widget": "3.1.0",
+    "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",
     "babel-preset-gatsby": "^3.13.2",
@@ -53,7 +54,6 @@
     "gatsby": "^5.13.5",
     "gatsby-alias-imports": "^1.0.6",
     "gatsby-plugin-decap-cms": "^4.0.4",
-    "gatsby-plugin-google-tagmanager": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-mdx": "^5.12.3",
@@ -74,6 +74,7 @@
     "immutability-helper": "2.9.1",
     "immutable": "^5.0.0-beta.5",
     "jsdom": "^24.1.0",
+    "klaro": "^0.7.21",
     "lite-schedule-widget": "3.0.3",
     "live-event-widget": "4.0.2",
     "lodash": "^4.17.19",
@@ -127,7 +128,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.35",
+    "summit-registration-lite": "5.0.36",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "3.0.5",
@@ -138,6 +139,7 @@
     "video.js": "^7.8.2",
     "videojs-mux": "^3.1.0",
     "videojs-youtube": "^2.6.1",
+    "web-vitals": "^1.1.2",
     "what-input": "^5.2.10",
     "xmlhttprequest": "^1.8.0",
     "yup": "^0.32.11"

package/plugins/gatsby-plugin-google-tagmanager/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [["babel-preset-gatsby-package"]],
+  "overrides": [
+    {
+      "test": ["**/gatsby-browser.js"],
+      "presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }]]
+    }
+  ]
+}