@openeventkit/event-site 2.0.115 → 2.0.117

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

@@ -1 +1,50 @@
-{"widgets":{"chat":{"enabled":true,"showQA":false,"showHelp":false,"defaultScope":"page"},"schedule":{"allowClick":true}},"favicon":{"asset":"icon.png"},"idpLogo":{"idpLogoDark":"","idpLogoLight":"","idpLogoAlt":""},"identityProviderButtons":[{"buttonColor":"#082238","providerLabel":"Continue with FNid","providerLogo":"logo_fn.svg","providerLogoSize":27},{"buttonColor":"#0A66C2","providerLabel":"Sign in with LinkedIn","providerParam":"linkedin","providerLogo":"logo_linkedin.svg","providerLogoSize":18},{"buttonColor":"#000000","providerLabel":"Sign in with Apple","providerParam":"apple","providerLogoSize":17,"providerLogo":"logo_apple.svg"},{"buttonColor":"#1877F2","providerLabel":"Login with Facebook","providerParam":"facebook","providerLogo":"logo_facebook.svg","providerLogoSize":20}],"maintenanceMode":{"enabled":false,"title":"Site under maintenance","subtitle":"Please reload page shortly"},"staticJsonFilesBuildTime":[{"file":"src/data/summit.json","build_time":1717432857795},{"file":"src/data/events.json","build_time":1717432863110},{"file":"src/data/events.idx.json","build_time":1717432863115},{"file":"src/data/speakers.json","build_time":1717432864148},{"file":"src/data/speakers.idx.json","build_time":1717432864149},{"file":"src/content/sponsors.json","build_time":1717432868235},{"file":"src/data/voteable-presentations.json","build_time":1717432868631}],"lastBuild":1717432868632}
+{
+  "favicon": {
+    "asset": "icon.png"
+  },
+  "widgets": {
+    "chat": {
+      "enabled": true,
+      "showQA": false,
+      "showHelp": false,
+      "defaultScope": "page"
+    },
+    "schedule": {
+      "allowClick": true
+    }
+  },
+  "identityProviderButtons": [
+    {
+      "buttonColor": "#082238",
+      "providerLabel": "Continue with FNid",
+      "providerLogo": "logo_fn.svg",
+      "providerLogoSize": 27
+    },
+    {
+      "buttonColor": "#0A66C2",
+      "providerLabel": "Sign in with LinkedIn",
+      "providerParam": "linkedin",
+      "providerLogo": "logo_linkedin.svg",
+      "providerLogoSize": 18
+    },
+    {
+      "buttonColor": "#000000",
+      "providerLabel": "Sign in with Apple",
+      "providerParam": "apple",
+      "providerLogoSize": 17,
+      "providerLogo": "logo_apple.svg"
+    },
+    {
+      "buttonColor": "#1877F2",
+      "providerLabel": "Login with Facebook",
+      "providerParam": "facebook",
+      "providerLogo": "logo_facebook.svg",
+      "providerLogoSize": 20
+    }
+  ],
+  "maintenanceMode": {
+    "enabled": false,
+    "title": "Site under maintenance",
+    "subtitle": "Please reload page shortly"
+  }
+}

package/src/defaults/colors.json

@@ -1 +1,33 @@
-{"color_primary":"#6d6e71","color_primary_contrast":"#f1f2f2","color_secondary":"#00CEC4","color_secondary_contrast":"#ff5e32","color_accent":"#ff5e32","color_text_dark":"#333333","color_text_med":"#828282","color_text_light":"#ffffff","color_gray_darker":"#4A4A4A","color_gray_dark":"#999999","color_gray_light":"#DFDFDF","color_gray_lighter":"#F2F2F2","color_text_input_hints":"#c4c4c4"}
+{
+  "color_accent": "#ff5e32",
+  "color_alerts": "#ff0000",
+  "color_background_light": "#ffffff",
+  "color_background_dark": "#000000",
+  "color_button_background_color": "#ffffff",
+  "color_button_color": "#000000",
+  "color_gray_lighter": "#f2f2f2",
+  "color_gray_light": "#dfdfdf",
+  "color_gray_dark": "#999999",
+  "color_gray_darker": "#4a4a4a",
+  "color_horizontal_rule_light": "#e5e5e5",
+  "color_horizontal_rule_dark": "#7b7b7b",
+  "color_icon_light": "#ffffff",
+  "color_input_background_color_light": "#ffffff",
+  "color_input_background_color_dark": "#181a1b",
+  "color_input_border_color_light": "#dbdbdb",
+  "color_input_border_color_dark": "#3a3f41",
+  "color_input_text_color_light": "#363636",
+  "color_input_text_color_dark": "#ffffff",
+  "color_input_text_color_disabled_light": "#ffffff",
+  "color_input_text_color_disabled_dark": "#ffffff",
+  "color_primary": "#6d6e71",
+  "color_primary_contrast": "#f1f2f2",
+  "color_secondary": "#00cec4",
+  "color_secondary_contrast": "#ff5e32",
+  "color_text_light": "#ffffff",
+  "color_text_med": "#828282",
+  "color_text_dark": "#333333",
+  "color_text_input_hints_light": "#7b7b7b",
+  "color_text_input_hints_dark": "#7b7b7b",
+  "color_text_input_hints": "#c4c4c4"
+}

package/src/styles/colors.scss

@@ -1,34 +1,40 @@
-$color_primary : #6d6e71;
-$color_primary_contrast : #f1f2f2;
-$color_secondary : #00CEC4;
-$color_secondary_contrast : #ff5e32;
-$color_accent : #ff5e32;
+/**
+* Warning:
+* Dont edit this file by hand, has been generated by colors scss util
+* Uses default colors as base and then overriden by colors set via marketing
+**/
+
+$color_accent: #ff5e32;
+$color_alerts: #ff0000;
 $color_background_light: #ffffff;
 $color_background_dark: #000000;
-$color_text_dark : #333333;
-$color_text_med : #828282;
-$color_text_light : #ffffff;
-$color_gray_darker : #4A4A4A;
-$color_gray_dark : #999999;
-$color_gray_light : #DFDFDF;
-$color_gray_lighter : #F2F2F2;
-$color_text_input_hints : #c4c4c4;
+$color_button_background_color: #ffffff;
+$color_button_color: #000000;
+$color_gray_lighter: #F2F2F2;
+$color_gray_light: #DFDFDF;
+$color_gray_dark: #999999;
+$color_gray_darker: #4A4A4A;
+$color_horizontal_rule_light: #e5e5e5;
+$color_horizontal_rule_dark: #7b7b7b;
+$color_icon_light: #ffffff;
+$color_input_background_color_light: #ffffff;
+$color_input_background_color_dark: #181a1b;
+$color_input_border_color_light: #dbdbdb;
+$color_input_border_color_dark: #3a3f41;
 $color_input_text_color_light: #363636;
-$color_input_text_color_disabled_light: #FFFFFF;
-$color_icon_light: #FFFFFF;
-$color_input_background_color_light:#fff;
-$color_input_border_color_light:#dbdbdb;
-$color_input_text_color_dark: #FFFFFF;
-$color_input_text_color_disabled_dark: #FFFFFF;
-$color_input_background_color_dark:rgb(24, 26, 27);
-$color_input_border_color_dark:rgb(58, 63, 65);
-$color_horizontal_rule_dark: #7B7B7B;
-$color_horizontal_rule_light: #E5E5E5;
-$color_text_input_hints_light:#7B7B7B;
-$color_text_input_hints_dark:#7B7B7B;
-$color_button_background_color:#ffffff;
-$color_button_color:#000000;
-$color_alerts:#FF0000;
+$color_input_text_color_dark: #ffffff;
+$color_input_text_color_disabled_light: #ffffff;
+$color_input_text_color_disabled_dark: #ffffff;
+$color_primary: #6d6e71;
+$color_primary_contrast: #f1f2f2;
+$color_secondary: #00CEC4;
+$color_secondary_contrast: #ff5e32;
+$color_text_light: #ffffff;
+$color_text_med: #828282;
+$color_text_dark: #333333;
+$color_text_input_hints_light: #7b7b7b;
+$color_text_input_hints_dark: #7b7b7b;
+$color_text_input_hints: #c4c4c4;
 
 :root {
   --color_primary: #{$color_primary};
@@ -45,7 +51,6 @@ $color_alerts:#FF0000;
   --color_gray_light: #{$color_gray_light};
   --color_gray_lighter: #{$color_gray_lighter};
   --color_input_text_color: #{$color_input_text_color_light};
-  --color_input_text_color_disabled:  #{$color_input_text_color_disabled_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};
@@ -55,7 +60,6 @@ $color_alerts:#FF0000;
   --color_button_color: #{$color_button_color};
   --color_alerts: #{$color_alerts};
 }
-
 html[data-theme="DARK"] {
   --color_text_dark: #{$color_text_light} !important;
   --color_text_light: #{$color_text_dark} !important;
@@ -66,9 +70,8 @@ html[data-theme="DARK"] {
   --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_text_color_disabled: #{$color_input_text_color_disabled_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};
-}
+  --color_horizontal_rule: #{$color_horizontal_rule_dark} !important;
+}

package/src/styles/fonts.scss

@@ -1,7 +1,7 @@
 /**
 * Warning:
-* Dont edit this file by hand, this file is used as default font implementation for the whole site
-* and it been re generated if font settings are set through CMS on gatsby-node.js line # 346
+* Dont edit this file by hand, has been generated by fonts scss util
+* Generated with font values set via CMS
 **/
 
 $font-family: 'Nunito Sans', sans-serif;

package/src/templates/marketing-page-template/MainColumn.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { navigate } from "gatsby";
 import PropTypes from "prop-types";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import Mdx from "@mdx-js/runtime";
@@ -8,6 +9,8 @@ import DisqusComponent from "../../components/DisqusComponent";
 import ResponsiveImage from "../../components/ResponsiveImage";
 import Link from "../../components/Link";
 
+import { PHASES } from "@utils/phasesUtils";
+
 import styles from "./styles.module.scss";
 
 const shortcodes = {
@@ -15,55 +18,63 @@ const shortcodes = {
   img: ResponsiveImage
 };
 
-const MainColumn = ({ widgets, scheduleProps, lastDataSync, fullWidth, maxHeight }) => (
-  <div
-    className={`column pt-6 pb-5 px-6 ${!fullWidth ? "is-half" : ""} ${styles.mainColumn || ""}`}
-    style={{ maxHeight: !fullWidth && maxHeight ? maxHeight : "none", overflowY: "auto" }}
-  >
-    <Container>
-      {widgets?.content?.display && widgets?.content?.body && (
-      <Mdx components={shortcodes}>
-        {widgets.content.body}
-      </Mdx>
-      )}
-      {widgets?.schedule?.display && (
-      <>
-        <h2><b>{widgets.schedule.title}</b></h2>
-        <LiteScheduleComponent
-          {...scheduleProps}
-          lastDataSync={lastDataSync}
-          id={`marketing_lite_schedule_${lastDataSync}`}
-          page="marketing-site"
-          showAllEvents={true}
-          showSearch={false}
-          showNav={true}
-        />
-      </>
-      )}
-      {widgets?.disqus?.display && (
-      <>
-        <h2><b>{widgets.disqus.title}</b></h2>
-        <DisqusComponent page="marketing-site" />
-      </>
-      )}
-     {widgets?.image?.display && widgets?.image?.image.src && (
-      <>
-        <h2><b>{widgets.image.title}</b></h2>
-        <br />
-        <GatsbyImage image={getImage(widgets.image.image.src)} alt={widgets.image.image.alt ?? ""} />
-      </>
-      )}
-    </Container>
-  </div>
-);
+const onEventClick = (ev) => navigate(`/a/event/${ev.id}`);
+
+const MainColumn = ({ widgets, summitPhase, isLoggedUser, onEventClick, lastDataSync, fullWidth, maxHeight }) => {
+  const { content, schedule, disqus, image } = widgets || {};
+  
+  const scheduleProps = schedule && isLoggedUser && summitPhase !== PHASES.BEFORE ? { onEventClick } : {};
+
+  return (
+    <div
+      className={`column pt-6 pb-5 px-6 ${!fullWidth ? "is-half" : ""} ${styles.mainColumn || ""}`}
+      style={{ maxHeight: !fullWidth && maxHeight ? maxHeight : "none", overflowY: "auto" }}
+    >
+      <Container>
+        {content?.display && content?.body && (
+          <Mdx components={shortcodes}>
+            {content.body}
+          </Mdx>
+        )}
+        {schedule?.display && (
+          <>
+            <h2><b>{schedule.title}</b></h2>
+            <LiteScheduleComponent
+              {...scheduleProps}
+              lastDataSync={lastDataSync}
+              id={`marketing_lite_schedule_${lastDataSync}`}
+              page="marketing-site"
+              showAllEvents={true}
+              showSearch={false}
+              showNav={true}
+            />
+          </>
+        )}
+        {disqus?.display && (
+          <>
+            <h2><b>{disqus.title}</b></h2>
+            <DisqusComponent page="marketing-site" />
+          </>
+        )}
+        {image?.display && image?.image.src && (
+          <>
+            <h2><b>{image.title}</b></h2>
+            <br/>
+            <GatsbyImage image={getImage(image.image.src)} alt={image.image.alt ?? ""} />
+          </>
+        )}
+      </Container>
+    </div>
+  );
+};
 
 MainColumn.propTypes = {
   widgets: PropTypes.object,
-  scheduleProps: PropTypes.object,
+  summitPhase: PropTypes.number,
+  isLoggedUser: PropTypes.bool,
   lastDataSync: PropTypes.number,
   fullWidth: PropTypes.bool,
   maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
 export default MainColumn;
-

package/src/templates/marketing-page-template/index.js

@@ -1,29 +1,28 @@
-import React, { useRef, useState, useCallback } from "react";
+import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { navigate } from "gatsby";
+import { NoSsr } from "@mui/base/NoSsr";
 import Layout from "../../components/Layout";
 import AttendanceTrackerComponent from "../../components/AttendanceTrackerComponent";
 import MarketingHero from "../../components/MarketingHero";
 import Countdown from "../../components/Countdown";
-import Link from "../../components/Link";
 import MainColumn from "./MainColumn";
 import Masonry from "./Masonry";
 import { useResize } from "@utils/hooks";
-import { PHASES } from "@utils/phasesUtils";
 
 import styles from "./styles.module.scss";
 
-const onEventClick = (ev) => navigate(`/a/event/${ev.id}`);
-
 const MarketingPageTemplate = ({ data, location, summit, summitPhase, isLoggedUser, lastDataSync }) => {
   const masonryRef = useRef();
   const [rightColumnHeight, setRightColumnHeight] = useState();
+
   const onResize = () => {
     if (masonryRef?.current) {
       setRightColumnHeight(masonryRef.current.firstChild.clientHeight);
     }
   };
+  
   useResize(onResize);
+
   const {
     marketingPageJson: {
       hero,
@@ -32,22 +31,23 @@ const MarketingPageTemplate = ({ data, location, summit, summitPhase, isLoggedUs
       masonry
     } = {}
   } = data || {};
-  const scheduleProps = useCallback(() => {
-    if (widgets?.schedule && isLoggedUser && summitPhase !== PHASES.BEFORE) {
-      return { onEventClick };
-    }
-    return {};
-  }, [widgets, isLoggedUser, summitPhase]);
+
   const shouldRenderMasonry = masonry?.display;
+
   return (
     <Layout marketing={true} location={location}>
       <AttendanceTrackerComponent />
       <MarketingHero location={location} data={hero} />
-      {summit && countdown?.display && <Countdown summit={summit} text={countdown?.text} />}
+      {summit && countdown?.display &&
+      <NoSsr>
+        <Countdown summit={summit} text={countdown?.text} />
+      </NoSsr>
+      }
       <div className="columns is-marginless">
         <MainColumn
           widgets={widgets}
-          scheduleProps={scheduleProps}
+          summitPhase={summitPhase}
+          isLoggedUser={isLoggedUser}
           maxHeight={rightColumnHeight}
           fullWidth={!shouldRenderMasonry}
           lastDataSync={lastDataSync}

package/src/utils/EventEmitter.js

@@ -0,0 +1,26 @@
+class EventEmitter extends EventTarget {
+  static instance;
+
+  constructor() {
+    if (EventEmitter.instance) {
+      return EventEmitter.instance;
+    }
+    super();
+    EventEmitter.instance = this;
+  }
+
+  emit(eventName, detail = {}) {
+    const event = new CustomEvent(eventName, { detail });
+    this.dispatchEvent(event);
+  }
+
+  on(eventName, callback, options) {
+    this.addEventListener(eventName, callback, options);
+  }
+
+  off(eventName, callback, options) {
+    this.removeEventListener(eventName, callback, options);
+  }
+}
+
+export default EventEmitter;

package/src/utils/cookies/CookieManager.js

@@ -0,0 +1,27 @@
+import CookieManagerProvider from "./CookieManagerProvider";
+
+class CookieManager {
+  static instance;
+
+  constructor(provider, services) {
+    if (CookieManager.instance) {
+      return CookieManager.instance;
+    }
+
+    if (!(provider instanceof CookieManagerProvider)) {
+      throw new Error("Provider must implement CookieManagerProvider interface");
+    }
+
+    this.provider = provider;
+    this.services = services;
+    this.provider.init(this.services);
+
+    CookieManager.instance = this;
+  }
+
+  getConsents = () => this.provider.getConsents();
+
+  show = () => this.provider.show();
+}
+
+export default CookieManager;

package/src/utils/cookies/CookieManagerProvider.js

@@ -0,0 +1,15 @@
+class CookieManagerProvider {
+  init = (services) => {
+    throw new Error("Method 'init()' must be implemented.");
+  };
+
+  getConsents = () => {
+    throw new Error("Method 'getConsents()' must be implemented.");
+  };
+
+  show = () => {
+    throw new Error("Method 'show()' must be implemented.");
+  };
+}
+
+export default CookieManagerProvider;

package/src/utils/cookies/providers/KlaroProvider.js

@@ -0,0 +1,81 @@
+import * as klaro from "klaro";
+import CookieManagerProvider from "../CookieManagerProvider";
+import { triggerTagManagerTrackEvent } from "../../eventTriggers";
+
+class KlaroProvider extends CookieManagerProvider {
+  init = (services) => {
+    /**
+     * For api methods
+     * @see https://github.com/klaro-org/klaro-js/blob/master/src/lib.js
+     **/
+    this.api = klaro;
+    this.config = this.#formatConfig(services);
+    this.consentManager = this.api.getManager(this.config);
+  };
+
+  getConsents = () => this.consentManager ? this.consentManager.consents : {};
+
+  show = () => this.api.render(this.config);
+
+  /**
+   * @see https://klaro.org/docs/integration/annotated-configuration
+   **/
+  #formatConfig = (services) => ({
+    acceptAll: true,
+    hideLearnMore: true,
+    translations: {
+      en: {
+        purposes: {
+          analytics: "Analytics",
+          marketing: "Marketing",
+          styling: "Styling"
+        },
+        consentNotice: {
+          description:
+            "Hi! Could we please enable cookies for anonymous {purposes} to improve your user experience?"
+        },
+      }
+    },
+    services: services.map(service => ({
+      name: service.name,
+      title: service.title,
+      description: service.description,
+      purposes: service.purposes,
+      required: service.required,
+      cookies: service.cookies,
+      onAccept: this.#handleAccept.bind(this, service),
+      onDecline: this.#handleDecline.bind(this, service),
+      onInit: service.onInit
+    }))
+  });
+
+  #handleAccept = (service) => {
+    if (service.name === "google-tag-manager") {
+      const consents = this.getConsents();
+      for (let k of Object.keys(consents)) {
+        if (consents[k]) {
+          let eventName = "klaro-" + k + "-accepted";
+          triggerTagManagerTrackEvent(eventName);
+        }
+      }
+    } else {
+      let eventName = "klaro-" + service.name + "-accepted";
+      triggerTagManagerTrackEvent(eventName);
+    }
+
+    if (service.onAccept) {
+      service.onAccept();
+    }
+  };
+
+  #handleDecline = (service) => {
+    const eventName = "klaro-" + service.name + "-declined";
+    triggerTagManagerTrackEvent(eventName);
+
+    if (service.onDecline) {
+      service.onDecline();
+    }
+  };
+}
+
+export default KlaroProvider;

package/src/utils/cookies/services.js

@@ -0,0 +1,57 @@
+//import GoogleTagManagerProvider from "../tag-manager/providers/GoogleTagManagerProvider";
+import { triggerTagManagerConsentEvent } from "../eventTriggers";
+
+//const googleTagManagerProvider = new GoogleTagManagerProvider();
+
+const services = [
+  {
+    name: "google-tag-manager",
+    title: "Google Tag Manager",
+    purposes: ["marketing"],
+    default: true,
+    onInit: () => {
+      triggerTagManagerConsentEvent("default", {
+        //"ad_storage": "denied",
+        "analytics_storage": "denied",
+        //"ad_user_data": "denied",
+        //"ad_personalization": "denied"
+      });
+      //googleTagManagerProvider.set("ads_data_redaction", true);
+    }
+  },
+  {
+    name: "google-analytics",
+    title: "Google Analytics",
+    purposes: ["analytics"],
+    cookies: [/^_ga(_.*)?/],
+    default: true,
+    onAccept: () => {
+      triggerTagManagerConsentEvent("update", { "analytics_storage": "granted" });
+    },
+    onDecline: () => {
+      triggerTagManagerConsentEvent("update", { "analytics_storage": "denied" });
+    }
+  }/*,
+  {
+    name: "google-ads",
+    title: "Google Ads",
+    purposes: ["marketing"],
+    cookies: [],
+    onAccept: () => {
+      triggerTagManagerConsentEvent("update", {
+        "ad_storage": "granted",
+        "ad_user_data": "granted",
+        "ad_personalization": "granted"
+      });
+    },
+    onDecline: () => {
+      triggerTagManagerConsentEvent("update", {
+        "ad_storage": "denied",
+        "ad_user_data": "denied",
+        "ad_personalization": "denied"
+      });
+    }
+  }*/
+];
+
+export default services;