@openeventkit/event-site 2.0.115 → 2.0.117

package/src/utils/envVariables.js

@@ -1,103 +1,103 @@
-export const SITE_URL = 'SITE_URL';
-export const IDP_BASE_URL = 'IDP_BASE_URL';
-export const SUMMIT_API_BASE_URL = 'SUMMIT_API_BASE_URL';
-export const SUMMIT_ID = 'SUMMIT_ID';
-export const OAUTH2_CODE = 'OAUTH2_CODE';
-export const OAUTH2_CLIENT_ID = 'OAUTH2_CLIENT_ID';
-export const SCOPES = 'SCOPES';
-export const MARKETING_API_BASE_URL = 'MARKETING_API_BASE_URL';
-export const REGISTRATION_BASE_URL = 'REGISTRATION_BASE_URL';
-export const AUTHZ_USER_GROUPS = 'AUTHZ_USER_GROUPS';
-export const AUTHORIZED_DEFAULT_PATH = 'AUTHORIZED_DEFAULT_PATH';
-export const STREAM_IO_API_KEY = 'STREAM_IO_API_KEY';
-export const MUX_ENV_KEY = 'MUX_ENV_KEY';
-export const DISQUS_SHORTNAME = 'DISQUS_SHORTNAME';
-export const SUPABASE_URL = 'SUPABASE_URL';
-export const SUPABASE_KEY = 'SUPABASE_KEY';
-export const CHAT_API_BASE_URL = 'CHAT_API_BASE_URL';
-export const SCHEDULE_EXCLUDING_TAGS = 'SCHEDULE_EXCLUDING_TAGS';
-export const LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = 'LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS';
-export const OAUTH2_FLOW = 'OAUTH2_FLOW';
-export const API_BASE_URL = 'API_BASE_URL';
+export const SITE_URL = "SITE_URL";
+export const IDP_BASE_URL = "IDP_BASE_URL";
+export const SUMMIT_API_BASE_URL = "SUMMIT_API_BASE_URL";
+export const SUMMIT_ID = "SUMMIT_ID";
+export const OAUTH2_CODE = "OAUTH2_CODE";
+export const OAUTH2_CLIENT_ID = "OAUTH2_CLIENT_ID";
+export const SCOPES = "SCOPES";
+export const MARKETING_API_BASE_URL = "MARKETING_API_BASE_URL";
+export const REGISTRATION_BASE_URL = "REGISTRATION_BASE_URL";
+export const AUTHZ_USER_GROUPS = "AUTHZ_USER_GROUPS";
+export const AUTHORIZED_DEFAULT_PATH = "AUTHORIZED_DEFAULT_PATH";
+export const STREAM_IO_API_KEY = "STREAM_IO_API_KEY";
+export const MUX_ENV_KEY = "MUX_ENV_KEY";
+export const DISQUS_SHORTNAME = "DISQUS_SHORTNAME";
+export const SUPABASE_URL = "SUPABASE_URL";
+export const SUPABASE_KEY = "SUPABASE_KEY";
+export const CHAT_API_BASE_URL = "CHAT_API_BASE_URL";
+export const SCHEDULE_EXCLUDING_TAGS = "SCHEDULE_EXCLUDING_TAGS";
+export const LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = "LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS";
+export const OAUTH2_FLOW = "OAUTH2_FLOW";
+export const API_BASE_URL = "API_BASE_URL";
 // TODO: SUPPORT_EMAIL needs to be set via marketing api i/o env var
-export const SUPPORT_EMAIL = 'SUPPORT_EMAIL';
-export const WS_PUB_SERVER_URL = 'WS_PUB_SERVER_URL';
-export const REAL_TIME_UPDATES_STRATEGY = 'REAL_TIME_UPDATES_STRATEGY';
-export const TIMEINTERVALSINCE1970_API_URL = 'TIMEINTERVALSINCE1970_API_URL';
-export const ABLY_API_KEY = 'ABLY_API_KEY';
-export const GOOGLE_TAGMANAGER_ID = 'GOOGLE_TAGMANAGER_ID';
+export const SUPPORT_EMAIL = "SUPPORT_EMAIL";
+export const WS_PUB_SERVER_URL = "WS_PUB_SERVER_URL";
+export const REAL_TIME_UPDATES_STRATEGY = "REAL_TIME_UPDATES_STRATEGY";
+export const TIMEINTERVALSINCE1970_API_URL = "TIMEINTERVALSINCE1970_API_URL";
+export const ABLY_API_KEY = "ABLY_API_KEY";
+export const GOOGLE_TAGMANAGER_ID = "GOOGLE_TAGMANAGER_ID";
 
 const processEnv = {
-    /**
-     * Retrieve the site URL from environment variable set by the deploy provider.
-     * See documentation for more details:
-     * - Netlify: {@link https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata}
-     * - Cloudflare Pages: {@link https://developers.cloudflare.com/pages/platform/build-configuration#environment-variables}
-     *
-     * If not available, fallback to user-defined GATSBY_SITE_URL env var.
-     */
-    SITE_URL: process.env.GATSBY_URL || process.env.GATSBY_CF_PAGES_URL || process.env.GATSBY_SITE_URL,
-    IDP_BASE_URL: process.env.GATSBY_IDP_BASE_URL,
-    SUMMIT_API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
-    API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
-    SUMMIT_ID: process.env.GATSBY_SUMMIT_ID,
-    OAUTH2_FLOW: process.env.GATSBY_OAUTH2_FLOW,
-    OAUTH2_CLIENT_ID: process.env.GATSBY_OAUTH2_CLIENT_ID,
-    SCOPES: process.env.GATSBY_SCOPES,
-    MARKETING_API_BASE_URL: process.env.GATSBY_MARKETING_API_BASE_URL,
-    REGISTRATION_BASE_URL: process.env.GATSBY_REGISTRATION_BASE_URL,
-    AUTHZ_USER_GROUPS: process.env.GATSBY_AUTHZ_USER_GROUPS,
-    AUTHORIZED_DEFAULT_PATH: process.env.GATSBY_AUTHORIZED_DEFAULT_PATH,
-    STREAM_IO_API_KEY: process.env.GATSBY_STREAM_IO_API_KEY,
-    MUX_ENV_KEY: process.env.GATSBY_MUX_ENV_KEY,
-    DISQUS_SHORTNAME: process.env.GATSBY_DISQUS_SHORTNAME,
-    SUPABASE_URL: process.env.GATSBY_SUPABASE_URL,
-    SUPABASE_KEY: process.env.GATSBY_SUPABASE_KEY,
-    CHAT_API_BASE_URL: process.env.GATSBY_CHAT_API_BASE_URL,
-    SCHEDULE_EXCLUDING_TAGS: process.env.GATSBY_SCHEDULE_EXCLUDING_TAGS,
-    LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS: process.env.GATSBY_LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS || 60,
-    SUPPORT_EMAIL: process.env.GATSBY_SUPPORT_EMAIL,
-    WS_PUB_SERVER_URL: process.env.GATSBY_WS_PUB_SERVER_URL,
-    // could be SUPA OR WS
-    REAL_TIME_UPDATES_STRATEGY: process.env.GATSBY_REAL_TIME_UPDATES_STRATEGY,
-    TIMEINTERVALSINCE1970_API_URL: process.env.GATSBY_TIMEINTERVALSINCE1970_API_URL,
-    ABLY_API_KEY: process.env.GATSBY_ABLY_API_KEY,
-    GOOGLE_TAGMANAGER_ID: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
+  /**
+   * Retrieve the site URL from environment variable set by the deploy provider.
+   * See documentation for more details:
+   * - Netlify: {@link https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata}
+   * - Cloudflare Pages: {@link https://developers.cloudflare.com/pages/platform/build-configuration#environment-variables}
+   *
+   * If not available, fallback to user-defined GATSBY_SITE_URL env var.
+   */
+  SITE_URL: process.env.URL || process.env.CF_PAGES_URL || process.env.GATSBY_SITE_URL,
+  IDP_BASE_URL: process.env.GATSBY_IDP_BASE_URL,
+  SUMMIT_API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
+  API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
+  SUMMIT_ID: process.env.GATSBY_SUMMIT_ID,
+  OAUTH2_FLOW: process.env.GATSBY_OAUTH2_FLOW,
+  OAUTH2_CLIENT_ID: process.env.GATSBY_OAUTH2_CLIENT_ID,
+  SCOPES: process.env.GATSBY_SCOPES,
+  MARKETING_API_BASE_URL: process.env.GATSBY_MARKETING_API_BASE_URL,
+  REGISTRATION_BASE_URL: process.env.GATSBY_REGISTRATION_BASE_URL,
+  AUTHZ_USER_GROUPS: process.env.GATSBY_AUTHZ_USER_GROUPS,
+  AUTHORIZED_DEFAULT_PATH: process.env.GATSBY_AUTHORIZED_DEFAULT_PATH,
+  STREAM_IO_API_KEY: process.env.GATSBY_STREAM_IO_API_KEY,
+  MUX_ENV_KEY: process.env.GATSBY_MUX_ENV_KEY,
+  DISQUS_SHORTNAME: process.env.GATSBY_DISQUS_SHORTNAME,
+  SUPABASE_URL: process.env.GATSBY_SUPABASE_URL,
+  SUPABASE_KEY: process.env.GATSBY_SUPABASE_KEY,
+  CHAT_API_BASE_URL: process.env.GATSBY_CHAT_API_BASE_URL,
+  SCHEDULE_EXCLUDING_TAGS: process.env.GATSBY_SCHEDULE_EXCLUDING_TAGS,
+  LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS: process.env.GATSBY_LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS || 60,
+  SUPPORT_EMAIL: process.env.GATSBY_SUPPORT_EMAIL,
+  WS_PUB_SERVER_URL: process.env.GATSBY_WS_PUB_SERVER_URL,
+  // could be SUPA OR WS
+  REAL_TIME_UPDATES_STRATEGY: process.env.GATSBY_REAL_TIME_UPDATES_STRATEGY,
+  TIMEINTERVALSINCE1970_API_URL: process.env.GATSBY_TIMEINTERVALSINCE1970_API_URL,
+  ABLY_API_KEY: process.env.GATSBY_ABLY_API_KEY,
+  GOOGLE_TAGMANAGER_ID: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
 }
 
 export const getEnvVariable = (name) => {
-    let res = typeof window === 'object' ? window[name] : null;
-    if (!res) {
-        res = processEnv[name];
-    }
-    return res;
+  let res = typeof window === "object" ? window[name] : null;
+  if (!res) {
+    res = processEnv[name];
+  }
+  return res;
 }
 
-if (typeof window === 'object') {
-    window.SITE_URL = processEnv[SITE_URL];
-    window.OAUTH2_FLOW = processEnv[OAUTH2_FLOW];
-    window.OAUTH2_CLIENT_ID = processEnv[OAUTH2_CLIENT_ID];
-    window.SCOPES = processEnv[SCOPES];
-    window.IDP_BASE_URL = processEnv[IDP_BASE_URL];
-    window.SUMMIT_API_BASE_URL = processEnv[SUMMIT_API_BASE_URL];
-    window.API_BASE_URL = processEnv[API_BASE_URL];
-    window.SUMMIT_ID = processEnv[SUMMIT_ID];
-    window.MARKETING_API_BASE_URL = processEnv[MARKETING_API_BASE_URL];
-    window.REGISTRATION_BASE_URL = processEnv[REGISTRATION_BASE_URL];
-    window.AUTHZ_USER_GROUPS = processEnv[AUTHZ_USER_GROUPS];
-    window.AUTHORIZED_DEFAULT_PATH = processEnv[AUTHORIZED_DEFAULT_PATH];
-    window.STREAM_IO_API_KEY = processEnv[STREAM_IO_API_KEY];
-    window.MUX_ENV_KEY = processEnv[MUX_ENV_KEY];
-    window.DISQUS_SHORTNAME = processEnv[DISQUS_SHORTNAME];
-    window.SUPABASE_URL = processEnv[SUPABASE_URL];
-    window.SUPABASE_KEY = processEnv[SUPABASE_KEY];
-    window.CHAT_API_BASE_URL = processEnv[CHAT_API_BASE_URL];
-    window.SCHEDULE_EXCLUDING_TAGS = processEnv[SCHEDULE_EXCLUDING_TAGS];
-    window.LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = processEnv[LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS];
-    window.SUPPORT_EMAIL = processEnv[SUPPORT_EMAIL];
-    window.WS_PUB_SERVER_URL = processEnv[WS_PUB_SERVER_URL];
-    window.REAL_TIME_UPDATES_STRATEGY = processEnv[REAL_TIME_UPDATES_STRATEGY];
-    window.TIMEINTERVALSINCE1970_API_URL = processEnv[TIMEINTERVALSINCE1970_API_URL];
-    window.ABLY_API_KEY = processEnv[ABLY_API_KEY];
-    window.GOOGLE_TAGMANAGER_ID = processEnv[GOOGLE_TAGMANAGER_ID];
+if (typeof window === "object") {
+  window.SITE_URL = processEnv[SITE_URL];
+  window.OAUTH2_FLOW = processEnv[OAUTH2_FLOW];
+  window.OAUTH2_CLIENT_ID = processEnv[OAUTH2_CLIENT_ID];
+  window.SCOPES = processEnv[SCOPES];
+  window.IDP_BASE_URL = processEnv[IDP_BASE_URL];
+  window.SUMMIT_API_BASE_URL = processEnv[SUMMIT_API_BASE_URL];
+  window.API_BASE_URL = processEnv[API_BASE_URL];
+  window.SUMMIT_ID = processEnv[SUMMIT_ID];
+  window.MARKETING_API_BASE_URL = processEnv[MARKETING_API_BASE_URL];
+  window.REGISTRATION_BASE_URL = processEnv[REGISTRATION_BASE_URL];
+  window.AUTHZ_USER_GROUPS = processEnv[AUTHZ_USER_GROUPS];
+  window.AUTHORIZED_DEFAULT_PATH = processEnv[AUTHORIZED_DEFAULT_PATH];
+  window.STREAM_IO_API_KEY = processEnv[STREAM_IO_API_KEY];
+  window.MUX_ENV_KEY = processEnv[MUX_ENV_KEY];
+  window.DISQUS_SHORTNAME = processEnv[DISQUS_SHORTNAME];
+  window.SUPABASE_URL = processEnv[SUPABASE_URL];
+  window.SUPABASE_KEY = processEnv[SUPABASE_KEY];
+  window.CHAT_API_BASE_URL = processEnv[CHAT_API_BASE_URL];
+  window.SCHEDULE_EXCLUDING_TAGS = processEnv[SCHEDULE_EXCLUDING_TAGS];
+  window.LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = processEnv[LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS];
+  window.SUPPORT_EMAIL = processEnv[SUPPORT_EMAIL];
+  window.WS_PUB_SERVER_URL = processEnv[WS_PUB_SERVER_URL];
+  window.REAL_TIME_UPDATES_STRATEGY = processEnv[REAL_TIME_UPDATES_STRATEGY];
+  window.TIMEINTERVALSINCE1970_API_URL = processEnv[TIMEINTERVALSINCE1970_API_URL];
+  window.ABLY_API_KEY = processEnv[ABLY_API_KEY];
+  window.GOOGLE_TAGMANAGER_ID = processEnv[GOOGLE_TAGMANAGER_ID];
 }

package/src/utils/eventTriggers.js

@@ -0,0 +1,19 @@
+import EventEmitter from "./EventEmitter";
+
+export const INIT_LOGOUT_EVENT = "site_logout";
+export const TAG_MANAGER_TRACK_EVENT = "tag_manager_track_event";
+export const TAG_MANAGER_CONSENT_EVENT = "tag_manager_consent_event";
+
+const eventEmitter = new EventEmitter();
+
+export const triggerLogoutEvent = () => {
+  eventEmitter.emit(INIT_LOGOUT_EVENT);
+};
+
+export const triggerTagManagerTrackEvent = (eventName, eventParams) => {
+  eventEmitter.emit(TAG_MANAGER_TRACK_EVENT, { eventName, eventParams });
+};
+
+export const triggerTagManagerConsentEvent = (consentArg, consentParams) => {
+  eventEmitter.emit(TAG_MANAGER_CONSENT_EVENT, { consentArg, consentParams });
+};

package/src/utils/filePath.js

@@ -7,7 +7,7 @@ const CONTENT_PAGES_DIR_PATH = `${PAGES_DIR_PATH}/${CONTENT_PAGES_PATH_NAME}`;
 const STYLES_DIR_PATH = "src/styles";
 const DEFAULT_COLORS_FILE_PATH = `${DEFAULTS_DIR_PATH}/colors.json`;
 const COLORS_FILE_PATH = `${DATA_DIR_PATH}/colors.json`;
-const COLORS_SASS_FILE_PATH = `${STYLES_DIR_PATH}/colors.scss`
+const COLORS_SCSS_FILE_PATH = `${STYLES_DIR_PATH}/colors.scss`
 const FONTS_SCSS_FILE_PATH = `${STYLES_DIR_PATH}/fonts.scss`;
 const SITE_SETTINGS_DIR_PATH = `${STATIC_CONTENT_DIR_PATH}/site-settings`;
 const SITE_SETTINGS_FILE_PATH = `${SITE_SETTINGS_DIR_PATH}/index.json`;
@@ -63,7 +63,7 @@ exports.CONTENT_PAGES_PATH_NAME = CONTENT_PAGES_PATH_NAME;
 exports.CONTENT_PAGES_DIR_PATH = CONTENT_PAGES_DIR_PATH;
 exports.DEFAULT_COLORS_FILE_PATH = DEFAULT_COLORS_FILE_PATH;
 exports.COLORS_FILE_PATH = COLORS_FILE_PATH;
-exports.COLORS_SASS_FILE_PATH = COLORS_SASS_FILE_PATH;
+exports.COLORS_SCSS_FILE_PATH = COLORS_SCSS_FILE_PATH;
 exports.FONTS_SCSS_FILE_PATH = FONTS_SCSS_FILE_PATH;
 exports.SITE_SETTINGS_DIR_PATH = SITE_SETTINGS_DIR_PATH;
 exports.SITE_SETTINGS_FILE_PATH = SITE_SETTINGS_FILE_PATH;

package/src/utils/hooks/index.js

@@ -1,5 +1,7 @@
 import useResize from "./useResize";
+import useEventListener from "./useEventListener";
 
 export {
-	useResize
+	useResize,
+	useEventListener
 }

package/src/utils/hooks/useEventListener.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import EventEmitter from "../EventEmitter";
+
+const eventEmitter = new EventEmitter();
+
+const useEventListener = (eventName, callback, options) => {
+  useEffect(() => {
+    eventEmitter.on(eventName, callback, options);
+    return () => {
+      eventEmitter.off(eventName, callback, options);
+    };
+  }, [eventName, callback, options]);
+};
+
+export default useEventListener;

package/src/utils/hooks/useResize.js

@@ -1,4 +1,5 @@
-import { useEffect, useCallback } from "react";
+import { useCallback } from "react";
+import useEventListener from "./useEventListener";
 
 const useResize = (callback, options = { passive: true }) => {
   const handleResize = useCallback(() => {
@@ -7,13 +8,7 @@ const useResize = (callback, options = { passive: true }) => {
     }
   }, [callback]);
 
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize, options);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [handleResize]);
+  useEventListener("resize", handleResize, options);
 };
 
 export default useResize;

package/src/utils/scssUtils.js

@@ -0,0 +1,146 @@
+const path = require("path");
+const fs = require("fs");
+
+const basePackageDir = path.resolve(__dirname, "../..");
+
+const { DEFAULT_COLORS_FILE_PATH } = require("./filePath");
+const DEFAULT_COLORS_DATA = require(path.join(basePackageDir, DEFAULT_COLORS_FILE_PATH));
+
+const generateAndWriteScssFile = (generatorFn, data, outputPath) => {
+  if (!data || Object.keys(data).length === 0) {
+    console.error(`No data provided for SCSS file generation at ${outputPath}.`);
+    return;
+  }
+  const scssFileContent = generatorFn(data);
+  if (!scssFileContent) {
+    console.error(`Failed to generate content for ${outputPath} SCSS file.`);
+    return;
+  }
+  try {
+    // since files are autogenerated, always write them in package scope
+    outputPath = path.join(basePackageDir, outputPath);
+    fs.writeFileSync(outputPath, scssFileContent);
+    console.log(`SCSS file generated successfully at ${outputPath}`);
+  } catch (err) {
+    console.error(`Error writing SCSS file: ${err.message}`);
+  }
+};
+
+const getFontFormat = (format) => {
+  const formatMap = {
+    "ttf": "format(\"truetype\")",
+    "otf": "format(\"opentype\")",
+    "woff": "format(\"woff\")",
+    "woff2": "format(\"woff2\")",
+  };
+  return formatMap[format] || "";
+};
+
+const getFontSrc = (fontPath) => fontPath.replace(/^\/static/, "");
+
+const generateFontFace = (fontFamily, fontData, fontWeight) => {
+  if (!fontFamily || !fontData || !fontData.fontFile || !fontData.fontFormat) return "";
+
+  const { fontFile, fontFormat } = fontData;
+  return `@font-face {
+  font-family: "${fontFamily}";
+  src: url("${getFontSrc(fontFile)}") ${getFontFormat(fontFormat)};
+  font-weight: ${fontWeight};
+}`;
+};
+
+const generateFontScssFile = (fontsData) => {
+  if (!fontsData || !fontsData.fontFamily || !fontsData.regularFont || !fontsData.boldFont) return null;
+
+  const { fontFamily, regularFont, boldFont } = fontsData;
+
+  if (!regularFont.fontFile || !regularFont.fontFormat) return null;
+  if (!boldFont.fontFile || !boldFont.fontFormat) return null;
+
+  const regularFontFace = generateFontFace(fontFamily, regularFont, "normal");
+  const boldFontFace = generateFontFace(fontFamily, boldFont, "bold");
+
+  return `$font-family: "${fontFamily}";
+
+:root {
+  --font_family: "${fontFamily}" !important;
+}
+
+${regularFontFace}
+${boldFontFace}
+  
+%font-regular {
+  font-family: var(--font_family);
+  font-weight: 400;
+}
+
+%font-semi {
+  font-family: var(--font_family);
+  font-weight: 600;
+}
+
+%font-bold {
+  font-family: var(--font_family);
+  font-weight: 700;
+}`;
+};
+
+const generateColorsScssFile = (colorsData) => {
+  const mergedColorsData = { ...DEFAULT_COLORS_DATA, ...colorsData };
+
+  let colorVars = "";
+  for (const [key, value] of Object.entries(mergedColorsData)) {
+    colorVars += `$${key}: ${value};\n`;
+  }
+
+  const rootColors = `
+:root {
+  --color_primary: #{$color_primary};
+  --color_primary_contrast: #{$color_primary_contrast};
+  --color_secondary: #{$color_secondary};
+  --color_secondary_contrast: #{$color_secondary_contrast};
+  --color_text_dark: #{$color_text_dark};
+  --color_text_med: #{$color_text_med};
+  --color_text_light: #{$color_text_light};
+  --color_background_light: #{$color_background_light};
+  --color_background_dark: #{$color_background_dark};
+  --color_gray_darker: #{$color_gray_darker};
+  --color_gray_dark: #{$color_gray_dark};
+  --color_gray_light: #{$color_gray_light};
+  --color_gray_lighter: #{$color_gray_lighter};
+  --color_input_text_color: #{$color_input_text_color_light};
+  --color_input_background_color: #{$color_input_background_color_light};
+  --color_input_border_color: #{$color_input_border_color_light};
+  --color_text_input_hints: #{$color_text_input_hints_light};
+  --color_horizontal_rule: #{$color_horizontal_rule_light};
+  --color_icon_light: #{$color_icon_light};
+  --color_button_background_color: #{$color_button_background_color};
+  --color_button_color: #{$color_button_color};
+  --color_alerts: #{$color_alerts};
+}`;
+
+  const darkThemeColors = `
+html[data-theme="DARK"] {
+  --color_text_dark: #{$color_text_light} !important;
+  --color_text_light: #{$color_text_dark} !important;
+  --color_background_light: #{$color_background_dark} !important;
+  --color_background_dark: #{$color_background_light} !important;
+  --color_gray_darker: #{$color_gray_lighter} !important;
+  --color_gray_dark: #{$color_gray_light} !important;
+  --color_gray_light: #{$color_gray_dark} !important;
+  --color_gray_lighter: #{$color_gray_darker} !important;
+  --color_input_text_color: #{$color_input_text_color_dark} !important;
+  --color_input_background_color: #{$color_input_background_color_dark} !important;
+  --color_input_border_color: #{$color_input_border_color_dark} !important;
+  --color_text_input_hints: #{$color_text_input_hints_dark} !important;
+  --color_horizontal_rule: #{$color_horizontal_rule_dark} !important;
+}`;
+
+  return `${colorVars}${rootColors}${darkThemeColors}`;
+};
+
+module.exports = {
+  generateAndWriteScssFile,
+  generateFontScssFile,
+  generateColorsScssFile
+};

package/src/utils/tag-manager/TagManager.js

@@ -0,0 +1,41 @@
+import TagManagerProvider from "./TagManagerProvider";
+import EventEmitter from "../EventEmitter";
+import { TAG_MANAGER_TRACK_EVENT, TAG_MANAGER_CONSENT_EVENT } from "../eventTriggers";
+import { normalizeData } from "../dataNormalization";
+
+const eventEmitter = new EventEmitter();
+
+class TagManager {
+  constructor() {
+    this.providers = [];
+    eventEmitter.on(TAG_MANAGER_TRACK_EVENT, this.handleTrackEvent.bind(this));
+    eventEmitter.on(TAG_MANAGER_CONSENT_EVENT, this.handleConsentEvent.bind(this));
+  }
+
+  addProvider(provider) {
+    if (!(provider instanceof TagManagerProvider)) {
+      throw new Error("An instance of TagManagerProvider is required.");
+    }
+    this.providers.push(provider);
+  }
+
+  trackEvent = (eventName, eventParams) => {
+    this.providers.forEach(provider => provider.trackEvent(eventName, normalizeData(eventParams)));
+  }
+
+  handleTrackEvent = (event) => {
+    const { eventName, eventParams } = event.detail;
+    this.trackEvent(eventName, eventParams);
+  }
+
+  consent = (consentArg, consentParams) => {
+    this.providers.forEach(provider => provider.consent && provider.consent(consentArg, consentParams));
+  }
+
+  handleConsentEvent = (event) => {
+    const { consentArg, consentParams } = event.detail;
+    this.consent(consentArg, consentParams);
+  }
+}
+
+export default TagManager;

package/src/utils/tag-manager/TagManagerProvider.js

@@ -0,0 +1,7 @@
+class TagManagerProvider {
+  trackEvent = (eventName, eventParams) => {
+    throw new Error("trackEvent method must be implemented");
+  }
+}
+
+export default TagManagerProvider;

package/src/utils/tag-manager/providers/GoogleTagManagerProvider.js

@@ -0,0 +1,49 @@
+import TagManagerProvider from "../TagManagerProvider";
+import { getEnvVariable, GOOGLE_TAGMANAGER_ID } from "@utils/envVariables";
+
+class GoogleTagManagerProvider extends TagManagerProvider {
+  static instance;
+
+  constructor() {
+    if (GoogleTagManagerProvider.instance) {
+      return GoogleTagManagerProvider.instance;
+    }
+    super();
+    if (!getEnvVariable(GOOGLE_TAGMANAGER_ID)) {
+      console.warn("GoogleTagManagerProvider: GOOGLE_TAGMANAGER_ID environment variable is not set. Tracking will be disabled.");
+    }
+    if (typeof window !== "undefined") {
+      window.dataLayer = window.dataLayer || [];
+      this.dataLayer = window.dataLayer;
+    } else {
+      this.dataLayer = [];
+    }
+    GoogleTagManagerProvider.instance = this;
+  }
+
+  #gtag() {
+    this.dataLayer.push(arguments);
+  };
+
+  trackEvent = (eventName, eventParams) => {
+    this.#gtag("event", eventName, eventParams);
+  };
+
+  config = (targetId, additionalConfig) => {
+    this.#gtag("config", targetId, additionalConfig);
+  };
+
+  set = (parameters) => {
+    this.#gtag("set", parameters);
+  };
+
+  get = (target, fieldName, callback) => {
+    this.#gtag("get", target, fieldName, callback);
+  };
+
+  consent = (consentArg, consentParams) => {
+    this.#gtag("consent", consentArg, consentParams);
+  };
+}
+
+export default GoogleTagManagerProvider;

package/src/utils/useSiteSettings.js

@@ -10,11 +10,7 @@ const siteSettingsQuery = graphql`
         title,
         description,
         image {
-          childImageSharp {
-            gatsbyImageData (
-              quality: 100
-            )
-          }
+          publicURL
         }
       }
       widgets {

package/src/utils/analytics/AnalyticsManager.js

@@ -1,28 +0,0 @@
-import AnalyticsProvider from "./AnalyticsProvider";
-import { CustomEventManager, ANALYTICS_TRACK_EVENT } from "../customEvents";
-import { normalizeData } from "@utils/dataNormalization";
-
-class AnalyticsManager {
-  constructor(analyticsProvider) {
-    if (!(analyticsProvider instanceof AnalyticsProvider)) {
-      throw new Error("An instance of AnalyticsProvider is required.");
-    }
-    this.analyticsProvider = analyticsProvider;
-    CustomEventManager.addEventListener(ANALYTICS_TRACK_EVENT, this.handleTrackEvent.bind(this));
-  }
-
-  get provider() {
-    return this.analyticsProvider;
-  }
-
-  handleTrackEvent = (event) => {
-    const { eventName, eventParams } = event.detail;
-    this.trackEvent(eventName, eventParams);
-  }
-
-  trackEvent = (eventName, eventParams) => {
-    this.analyticsProvider.trackEvent(eventName, normalizeData(eventParams));
-  }
-}
-
-export default AnalyticsManager;

package/src/utils/analytics/AnalyticsProvider.js

@@ -1,7 +0,0 @@
-class AnalyticsProvider {
-  trackEvent(eventName, eventParams) {
-    throw new Error("trackEvent method must be implemented");
-  }
-}
-
-export default AnalyticsProvider;

package/src/utils/analytics/events.js

@@ -1 +0,0 @@
-export const PURCHASE_COMPLETE = "purchase_complete";

package/src/utils/analytics/providers/GoogleTagManagerProvider.js

@@ -1,38 +0,0 @@
-import AnalyticsProvider from "../AnalyticsProvider";
-import { getEnvVariable, GOOGLE_TAGMANAGER_ID } from "@utils/envVariables";
-
-class GoogleTagManagerProvider extends AnalyticsProvider {
-  constructor() {
-    super();
-    if (!getEnvVariable(GOOGLE_TAGMANAGER_ID)) {
-      console.warn("GoogleTagManagerProvider: GOOGLE_TAGMANAGER_ID environment variable is not set. Tracking will be disabled.");
-    }
-    this.dataLayer = (typeof window !== "undefined" && window.dataLayer) || [];
-  }
-
-  gtag() {
-    this.dataLayer.push(arguments);
-  };
-
-  trackEvent = (eventName, eventParams) => {
-    this.gtag("event", eventName, eventParams);
-  };
-
-  config = (targetId, additionalConfig) => {
-    this.gtag("config", targetId, additionalConfig);
-  };
-
-  set = (parameters) => {
-    this.gtag("set", parameters);
-  };
-
-  get = (target, fieldName, callback) => {
-    this.gtag("get", target, fieldName, callback);
-  };
-
-  consent = (consentArg, consentParams) => {
-    this.gtag("consent", consentArg, consentParams);
-  };
-}
-
-export default GoogleTagManagerProvider;