@openeventkit/event-site 2.0.113 → 2.0.115

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.113",
+  "version": "2.0.115",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -104,7 +104,7 @@
     "react-redux": "^7.2.6",
     "react-rte": "^0.16.3",
     "react-select": "^2.4.4",
-    "react-slick": "^0.27.0",
+    "react-slick": "^0.30.2",
     "react-star-ratings": "^2.3.0",
     "react-stars": "^2.2.5",
     "react-tabs": "^3.0.0",

package/src/components/AuthComponent.js

@@ -1,25 +1,27 @@
-import React, { useEffect, useState, useMemo } from "react"
-import { navigate } from "gatsby"
+import React, { useEffect, useState, useMemo } from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
 import { connect } from "react-redux";
-import URI from "urijs"
-// these two libraries are client-side only
-import LoginComponent from 'summit-registration-lite/dist/components/login';
-import PasswordlessLoginComponent from 'summit-registration-lite/dist/components/login-passwordless';
+import URI from "urijs";
+
 import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
-import { doLogin, passwordlessStart } from 'openstack-uicore-foundation/lib/security/methods'
+import { doLogin, passwordlessStart } from "openstack-uicore-foundation/lib/security/methods";
 import { setPasswordlessLogin, setUserOrder, checkOrderData } from "../actions/user-actions";
 import { getThirdPartyProviders } from "../actions/base-actions";
-import { validateIdentityProviderButtons } from "../utils/loginUtils";
-import 'summit-registration-lite/dist/index.css';
-import styles from '../styles/login-button.module.scss'
-import PropTypes from 'prop-types'
+
+// these two libraries are client-side only
+import LoginComponent from "summit-registration-lite/dist/components/login";
+import PasswordlessLoginComponent from "summit-registration-lite/dist/components/login-passwordless";
+import "summit-registration-lite/dist/index.css";
+import IconButton from "./IconButton";
 import Link from "./Link";
 
+import { getDefaultLocation, validateIdentityProviderButtons } from "@utils/loginUtils";
+import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import useSiteSettings from "@utils/useSiteSettings";
 import { PHASES } from "@utils/phasesUtils";
-import { getDefaultLocation } from "@utils/loginUtils";
-import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
 
-import useSiteSettings from "@utils/useSiteSettings";
+import styles from "../styles/auth-component.module.scss";
 
 const AuthComponent = ({
     getThirdPartyProviders,
@@ -166,23 +168,26 @@ const AuthComponent = ({
     const { loginButton } = marketingPageSettings.hero.buttons;
 
     const defaultLoginButton = () => (
-        <button className={`${styles.button} button is-large`} onClick={handleOpenPopup}>
-            <i className={`fa fa-2x fa-edit icon is-large`} />
-            <b>{loginButton.text}</b>
-        </button>
+        <IconButton
+            iconClass="fa fa-2x fa-edit"
+            buttonText={loginButton.text}
+            onClick={handleOpenPopup}
+        />
     );
 
     const defaultEnterButton = () => (
-        <Link className={styles.link} to={defaultPath}>
-            <button className={`${styles.button} button is-large`}>
-                <i className={`fa fa-2x fa-sign-in icon is-large`} />
-                <b>Enter</b>
-            </button>
+        <Link
+            to={defaultPath}
+        >
+            <IconButton
+                iconClass="fa fa-2x fa-sign-in"
+                buttonText="Enter"
+            />
         </Link>
     );
 
     return (
-        <div style={style} className={styles.loginButtonWrapper}>
+        <div style={style} className={styles.authComponent}>
             {!isLoggedUser ?
                 renderLoginButton ? renderLoginButton(handleOpenPopup) : defaultLoginButton()
                 :

package/src/components/Container.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+const Container = ({ className, children }) => (
+  <div className={`${className ?? ""}`}>
+    {children}
+  </div>
+);
+
+export default Container;

package/src/components/FooterMarketing.js

@@ -23,7 +23,7 @@ const FooterMarketing = () => (
       {footerContent.social.networks.map((net, index) => (
         net.display &&
         <Link href={net.link} className={styles.link} key={index}>
-          <FontAwesomeIcon icon={`fa-brands ${net.icon}`} />
+          <FontAwesomeIcon icon={`fa-brands ${net.icon}`} size="lg" />
         </Link>
       ))}
     </div>

package/src/components/IconButton/index.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import styles from "./styles.module.scss";
+
+const IconButton = ({
+  className = "",
+  iconClass = "",
+  buttonText,
+  onClick = () => {},
+  disabled = false
+}) => (
+  <button
+    className={`button is-large mt-5 ${styles.button} ${className}`}
+    onClick={onClick}
+    disabled={disabled}
+  >
+    <i className={`icon ${iconClass}`} />
+    <b>{buttonText}</b>
+  </button>
+);
+
+export default IconButton;

package/src/components/IconButton/styles.module.scss

@@ -0,0 +1,31 @@
+.button {
+  background-color: transparent!important;
+  color: #fff!important;
+  height: 5rem!important;
+  width: 20rem!important;
+  i {
+    color: #fff;
+    height: 1em!important;
+    width: 2.5em!important;
+    font-size: 1.8em!important;
+  }
+  b {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+  }
+  &:hover,
+  &:active {
+    border-color: #fff!important;
+  }
+  &:focus {
+    border-color: #fff!important;
+  }
+  &.register {
+    background-color: #fff!important;
+    color: #6d6e71!important;
+    i {
+      color: #6d6e71!important;
+    }
+  }
+}

package/src/components/MarketingHero/ImagesColumn.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image";
+import Slider from "react-slick";
+
+import styles from "./styles.module.scss";
+
+const sliderSettings = {
+  autoplay: false,
+  autoplaySpeed: 5000,
+  infinite: true,
+  dots: false,
+  slidesToShow: 1,
+  slidesToScroll: 1
+};
+
+const ImagesColumn = ({ images }) => {
+  return images.length === 0 ? null : (
+    <div className={`column is-half p-0 ${styles.imagesColumn}`}>
+      {images.length > 1 ? (
+        <Slider {...sliderSettings} >
+          {images.map((image, index) => (
+          <img
+            key={index}
+            src={getSrc(image.src)}
+            alt={image.alt}
+          />
+          ))}
+        </Slider>
+      ) : (
+        <GatsbyImage
+          className={styles.singleImage}
+          image={getImage(images[0].src)}
+          alt={images[0].alt}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ImagesColumn;
+

package/src/components/MarketingHero/MainColumn.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { getSrc } from "gatsby-plugin-image";
+import AuthComponent from "../AuthComponent";
+import RegistrationLiteComponent from "../RegistrationLiteComponent";
+
+import styles from "./styles.module.scss";
+
+const ButtonGroup = ({ location, registerButton, loginButton }) => (
+  <>
+    {registerButton?.display && (
+      <span className={styles.link}>
+        <RegistrationLiteComponent location={location} />
+      </span>
+    )}
+    {loginButton?.display && <AuthComponent location={location} />}
+  </>
+);
+
+const MainColumn = ({ location, title, subTitle, date, time, buttons, backgroundSrc, fullWidth }) => {
+  const backgroundImageStyle = backgroundSrc
+    ? { backgroundImage: `url(${getSrc(backgroundSrc)})` }
+    : {};
+  return (
+    <div className={`column ${!fullWidth ? "is-half" : ""} p-0 ${styles.mainColumn}`} style={backgroundImageStyle}>
+      <div className={`hero-body ${styles.heroBody}`}>
+        {title && <h1 className="title">{title}</h1>}
+        {subTitle && <h2 className="subtitle">{subTitle}</h2>}
+        {date && <h4>{date}</h4>}
+        {time && <h4>{time}</h4>}
+        <div className={styles.heroButtons}>
+          <ButtonGroup {...buttons} location={location} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MainColumn;

package/src/components/MarketingHero/index.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import MainColumn from "./MainColumn";
+import ImagesColumn from "./ImagesColumn";
+
+import styles from "./styles.module.scss";
+
+const MarketingHero = ({ location, data }) => {
+  const {
+    title,
+    subTitle,
+    date,
+    time,
+    buttons = {},
+    background,
+    images = []
+  } = data || {};
+  return (
+    <section>
+      <div className={"columns is-marginless"}>
+        <MainColumn
+          location={location}
+          title={title}
+          subTitle={subTitle}
+          date={date}
+          time={time}
+          buttons={buttons}
+          backgroundSrc={background?.src}
+          fullWidth={images.length === 0}
+        />
+        {images.length > 0 && (
+        <ImagesColumn images={images} />
+        )}
+      </div>
+    </section>
+  );
+};
+
+MarketingHero.propTypes = {
+  location: PropTypes.string.isRequired,
+  data: PropTypes.object
+};
+
+export default MarketingHero;

package/src/components/MarketingHero/styles.module.scss

@@ -0,0 +1,73 @@
+@import "../../styles/colors.scss";
+
+.mainColumn {
+  background-color: var(--color_secondary_contrast);
+  min-height: 100%;
+  background-size: cover;
+  h1 {
+    font-size: calc(50px + (50 - 42) * (100vw - 250px) / (1080 - 250));
+    font-weight: bold;
+    margin-top: 0rem;
+  }
+  h2 {
+    font-size: calc(40px + (40 - 36) * (100vw - 250px) / (1080 - 20));
+    font-weight: normal;
+  }
+  h4 {
+    font-size: calc(22px + (22 - 14) * (100vw - 250px) / (1080 - 250));
+    font-weight: bold;
+  }
+  h1,
+  h2,
+  h4 {
+    color: var(--color_text_light);
+  }
+  .heroBody {
+    padding: 4rem 3rem;
+  }
+}
+
+.imagesColumn {
+  :global(.slick-slider) {
+    height: 100%; /* Ensure the slider takes the full height of its parent */
+    position: relative; /* Position the slider container */
+    :global(.slick-list) {
+      height: 100%; /* Ensure the slick-list takes the full height of its parent */
+      overflow: hidden; /* Hide any overflow to prevent scrollbar affecting layout */
+      :global(.slick-track) {
+        display: flex;
+        align-items: stretch;
+        height: 100%; /* Ensure the slick-track takes the full height */
+        :global(.slick-slide) {
+          display: flex;
+          justify-content: center;
+          align-items: stretch;
+          height: 100%; /* Ensure each slide takes the full height of the slick-track */
+          position: relative; /* Ensure relative positioning for the slide */
+          div {
+            width: 100%;
+            position: relative; /* Position the container for enforcing aspect ratio */
+            &::before {
+              content: ""; /* Create a pseudo-element */
+              display: block;
+              padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
+            }
+            img {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              object-fit: cover; /* Cover the entire container without distorting the image */
+              object-position: center; /* Center the image within the container */
+            }
+          }
+        }
+      }
+    }
+  }
+  .singleImage {
+    height: 100%;
+    background-size: cover;
+  }
+}

package/src/components/RegistrationLiteComponent.js

@@ -1,35 +1,35 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
 import * as Sentry from "@sentry/react";
-import { navigate, withPrefix } from "gatsby"
+import { navigate, withPrefix } from "gatsby";
 import { connect } from "react-redux";
 import URI from "urijs";
-import PropTypes from 'prop-types';
-
-// these two libraries are client-side only
-import RegistrationLiteWidget from "summit-registration-lite/dist";
-import "summit-registration-lite/dist/index.css";
-import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
-import {doLogin, passwordlessStart, getAccessToken} from "openstack-uicore-foundation/lib/security/methods"
-import {doLogout} from "openstack-uicore-foundation/lib/security/actions"
-import {getEnvVariable, SUMMIT_API_BASE_URL, OAUTH2_CLIENT_ID, REGISTRATION_BASE_URL, SUPPORT_EMAIL} from "../utils/envVariables"
-import {getUserProfile, setPasswordlessLogin, setUserOrder, checkOrderData} from "../actions/user-actions";
-import {getThirdPartyProviders} from "../actions/base-actions";
-import { validateIdentityProviderButtons } from "../utils/loginUtils";
 import Swal from "sweetalert2";
-import {checkRequireExtraQuestionsByAttendee} from "../actions/user-actions";
-import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
 
+import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
+import { doLogin, passwordlessStart, getAccessToken } from "openstack-uicore-foundation/lib/security/methods"
+import { doLogout } from "openstack-uicore-foundation/lib/security/actions"
+import { getUserProfile, setPasswordlessLogin, setUserOrder, checkOrderData } from "../actions/user-actions";
+import { getThirdPartyProviders } from "../actions/base-actions";
+import { checkRequireExtraQuestionsByAttendee } from "../actions/user-actions";
 import { getExtraQuestions } from "../actions/summit-actions";
 
-import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
-import useSiteSettings from "@utils/useSiteSettings";
+import IconButton from "./IconButton";
+import iconButtonStyles from "./IconButton/styles.module.scss";
+
 import { SentryFallbackFunction } from "./SentryErrorComponent";
+// these two libraries are client-side only
+import RegistrationLiteWidget from "summit-registration-lite/dist";
+import "summit-registration-lite/dist/index.css";
 
+import useSiteSettings from "@utils/useSiteSettings";
+import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
+import { getEnvVariable, SUMMIT_API_BASE_URL, OAUTH2_CLIENT_ID, REGISTRATION_BASE_URL, SUPPORT_EMAIL } from "@utils/envVariables";
+import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import { validateIdentityProviderButtons } from "@utils/loginUtils";
 import { triggerAnalyticsTrackEvent } from "@utils/customEvents";
 import { PURCHASE_COMPLETE } from "@utils/analytics/events";
 
-import styles from "../styles/marketing-hero.module.scss";
-
 const RegistrationLiteComponent = ({
    registrationProfile,
    userProfile,
@@ -208,11 +208,13 @@ const RegistrationLiteComponent = ({
                 React.cloneElement(children, { onClick: handleOpenPopup })
                 :
                 registerButton.display &&
-                <button className={`${styles.button} button is-large`} disabled={isActive}
-                        onClick={handleOpenPopup}>
-                    <i className={`fa fa-2x fa-edit icon is-large`}/>
-                    <b>{registerButton.text}</b>
-                </button>
+                <IconButton
+                    className={iconButtonStyles.register}
+                    iconClass="fa fa-2x fa-edit"
+                    buttonText={registerButton.text}
+                    onClick={handleOpenPopup}
+                    disabled={isActive}
+                />
             }
             <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: "Registration Lite"})}>
                 {isActive && <RegistrationLiteWidget {...widgetProps} />}

package/src/components/SponsorHeader.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from "react";
+import Link from "./Link";
+import { useResize } from "@utils/hooks";
 
-import Link from './Link'
-
-import styles from '../styles/sponsor-page.module.scss'
+import styles from "../styles/sponsor-page.module.scss";
 
 const SponsorHeader = ({ sponsor, scanBadge }) => {
 
@@ -15,24 +15,13 @@ const SponsorHeader = ({ sponsor, scanBadge }) => {
   const setIsMuted = (isMuted) => {
     const player = videoParentRef.current.children[0];
     player.muted = isMuted;
-    _setIsMuted(isMuted)
+    _setIsMuted(isMuted);
   };
 
   const onResize = () => {
-    if (window.innerWidth <= 768) {
-      setIsMobile(true);
-    } else {
-      setIsMobile(false);
-    }
+    setIsMobile(window.innerWidth <= 768);
   };
-
-  useEffect(() => {
-    onResize();
-    window.addEventListener("resize", onResize);
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  });
+  useResize(onResize);
 
   return (
     <section className={styles.hero}>
@@ -107,8 +96,8 @@ const SponsorHeader = ({ sponsor, scanBadge }) => {
           </div>
         </div>
       }
-    </section >
+    </section>
   )
-}
+};
 
-export default SponsorHeader
+export default SponsorHeader;

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

@@ -1,55 +1 @@
-{
-  "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"
-  }
-}
+{"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}

package/src/styles/auth-component.module.scss

@@ -0,0 +1,37 @@
+@import "colors.scss";
+
+.authComponent {
+  #modal {
+    padding: 100px 0;
+  }
+  .modalContent {
+    overflow: initial;
+  }
+  .outerWrapper {
+    border: 1px solid var(--color_input_border_color);
+    background-color: var(--color_background_light);
+    border-radius: 5px;
+  }
+  .innerWrapper {
+    padding: 10px;
+  }
+  .title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid var(--color_input_border_color);
+    margin: 0px -10px;
+    padding: 0px 15px 5px;
+    i {
+      cursor: pointer;
+      margin-left: auto;
+    }
+    span {
+      width: 100%;
+      font-weight: bold;
+      font-size: 18px;
+      text-align: center;
+      color: var(--color_text_dark);
+    }
+  }
+}

package/src/styles/fonts.scss

@@ -1,31 +1,26 @@
-$font-family: "proximanova";
+/**
+* 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
+**/
+
+$font-family: 'Nunito Sans', sans-serif;
 
 :root {
-  --font_family: "proximanova" !important;
+  --font_family: #{$font-family};
 }
 
-@font-face {
-  font-family: "proximanova";
-  src: url("/fonts/proximanovaregular.otf") format("opentype");
-  font-weight: normal;
-}
-@font-face {
-  font-family: "proximanova";
-  src: url("/fonts/proximanovabold.otf") format("opentype");
-  font-weight: bold;
-}
-  
 %font-regular {
-  font-family: var(--font_family);
+  font-family: 'Nunito Sans', sans-serif;
   font-weight: 400;
 }
 
 %font-semi {
-  font-family: var(--font_family);
+  font-family: 'Nunito Sans', sans-serif;
   font-weight: 600;
 }
 
 %font-bold {
-  font-family: var(--font_family);
+  font-family: 'Nunito Sans', sans-serif;
   font-weight: 700;
 }

package/src/styles/marketing.module.scss

@@ -1,15 +1,11 @@
-
-.leftColumn {
-  overflow-y: auto;
+.mainColumn {
 }
 
-.rightColumn {
-  .imageSlider {
-    height: auto;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    min-height: 100%;
-    overflow: hidden;
+.masonry {
+  .grid {
+    display: flex;
+  }
+  .slide {
+    margin-bottom: -5px;
   }
 }