@openeventkit/event-site 2.0.113 → 2.0.115

package/src/styles/style.scss

@@ -188,41 +188,6 @@ h2 {
   }
 }
 
-#marketing-slider {
-  .slick-track {
-    height: inherit;
-  }
-}
-
-.my-masonry-grid {
-  display: -webkit-box;
-  /* Not needed if autoprefixing */
-  display: -ms-flexbox;
-  /* Not needed if autoprefixing */
-  display: flex;
-  width: auto;
-}
-
-.my-masonry-grid_column {
-  padding-left: 0px;
-  /* gutter size */
-  background-clip: padding-box;
-
-  .slick-slider {
-    margin-bottom: -5px;
-  }
-}
-
-/* Style your items */
-.my-masonry-grid_column > div {
-  /* change div to reference your elements you put in <Masonry> */
-  margin-bottom: 0px;
-
-  img {
-    width: 100%;
-  }
-}
-
 .sponsor-carousel {
   .slick-track {
     display: flex;
@@ -488,25 +453,11 @@ div.event-feedback-container {
   }
 }
 
-@media (max-width: 978px) {
-  #marketing-slider {
-    .slick-track {
-      height: 520px;
-    }
-  }
-}
-
 @media (max-width: 768px) {
   div.login-form {
     width: auto;
   }
 
-  #marketing-slider {
-    .slick-track {
-      height: 250px;
-    }
-  }
-
   .join-zoom-container {
     flex-direction: column;
     height: 100px;

package/src/templates/content-page/Container.js

@@ -0,0 +1,3 @@
+import Container from "../../components/Container";
+
+export default Container;

package/src/templates/content-page/template.js

@@ -1,16 +1,17 @@
 import * as React from "react";
 import PropTypes from "prop-types";
 import { MDXProvider } from "@mdx-js/react";
+import Container from "./Container";
 
 import shortcodes from "./shortcodes";
 
 const ContentPageTemplate = ({ title, content }) => (
-  <div className="content">
+  <Container className="content">
     <h1>{title}</h1>
     <MDXProvider components={shortcodes}>
       {content}
     </MDXProvider>
-  </div>
+  </Container>
 );
 
 export default ContentPageTemplate;

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

@@ -0,0 +1,3 @@
+import Container from "../../components/Container";
+
+export default Container;

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

@@ -0,0 +1,69 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import Mdx from "@mdx-js/runtime";
+import Container from "./Container";
+import LiteScheduleComponent from "../../components/LiteScheduleComponent";
+import DisqusComponent from "../../components/DisqusComponent";
+import ResponsiveImage from "../../components/ResponsiveImage";
+import Link from "../../components/Link";
+
+import styles from "./styles.module.scss";
+
+const shortcodes = {
+  a: Link,
+  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>
+);
+
+MainColumn.propTypes = {
+  widgets: PropTypes.object,
+  scheduleProps: PropTypes.object,
+  lastDataSync: PropTypes.number,
+  fullWidth: PropTypes.bool,
+  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export default MainColumn;
+

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import Masonry from "react-masonry-css";
+import Slider from "react-slick";
+import Link from "../../components/Link";
+import { formatMasonry } from "@utils/masonry";
+
+import styles from "./styles.module.scss";
+
+const sliderSettings = {
+  autoplay: true,
+  autoplaySpeed: 5000,
+  infinite: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  dots: false
+};
+
+export default React.forwardRef(({ data }, ref) => (
+  <div
+    ref={ref}
+    className={`column p-0 is-half ${styles.masonry || ""}`}
+  >
+    <Masonry
+      className={styles.grid}
+      breakpointCols={2}
+    >
+      {data.items && formatMasonry(data.items).map((item, index) => {
+        if (item.images && item.images.length === 1) {
+          const image = getImage(item.images[0].src);
+          const alt = item.images[0].alt ?? "";
+          if (item.images[0].link) {
+            return (
+              <Link key={index} to={item.images[0].link}>
+                <GatsbyImage image={image} alt={alt} />
+              </Link>
+            );
+          } else {
+            return <GatsbyImage key={index} image={image} alt={alt} />;
+          };
+        } else if (item.images && item.images.length > 1) {
+          return (
+            <Slider
+              key={index}
+              className={styles.slider}
+              {...sliderSettings}
+            >
+              {item.images.map((image, indexSlide) => {
+                const img = getImage(image.src);
+                const alt = image.alt ?? "";
+                if (image.link) {
+                  return (
+                    <Link key={indexSlide} to={image.link}>
+                      <GatsbyImage image={img} alt={alt} />
+                    </Link>
+                  );
+                } else {
+                  return <GatsbyImage key={indexSlide} image={img} alt={alt} />;
+                };
+              })}
+            </Slider>
+          );
+        } else {
+          return (
+            <div key={index} />
+          );
+        }
+      })}
+    </Masonry>
+  </div>
+));

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

@@ -0,0 +1,72 @@
+import React, { useRef, useState, useCallback } from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
+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,
+      countdown,
+      widgets,
+      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} />}
+      <div className="columns is-marginless">
+        <MainColumn
+          widgets={widgets}
+          scheduleProps={scheduleProps}
+          maxHeight={rightColumnHeight}
+          fullWidth={!shouldRenderMasonry}
+          lastDataSync={lastDataSync}
+        />
+        {shouldRenderMasonry &&
+        <Masonry data={masonry} ref={masonryRef} />
+        }
+      </div>
+    </Layout>
+  );
+};
+
+MarketingPageTemplate.propTypes = {
+  location: PropTypes.object,
+  data: PropTypes.object,
+  lastDataSync: PropTypes.number,
+  summit: PropTypes.object,
+  summitPhase: PropTypes.number,
+  isLoggedUser: PropTypes.bool
+};
+
+export default MarketingPageTemplate;

package/src/templates/marketing-page-template/styles.module.scss

@@ -0,0 +1,11 @@
+.mainColumn {
+}
+
+.masonry {
+  .grid {
+    display: flex;
+  }
+  .slider {
+    margin-bottom: -5px;
+  }
+}

package/src/utils/hooks/index.js

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

package/src/utils/hooks/useResize.js

@@ -0,0 +1,19 @@
+import { useEffect, useCallback } from "react";
+
+const useResize = (callback, options = { passive: true }) => {
+  const handleResize = useCallback(() => {
+    if (typeof callback === "function") {
+      callback();
+    }
+  }, [callback]);
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize, options);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize]);
+};
+
+export default useResize;

package/src/components/MarketingHeroComponent.js

@@ -1,120 +0,0 @@
-import React, {
-  useRef,
-  useState,
-  useEffect
-} from "react";
-import { getSrc } from "gatsby-plugin-image";
-import Slider from "react-slick";
-import AuthComponent from "./AuthComponent";
-import RegistrationLiteComponent from "./RegistrationLiteComponent";
-
-import styles from "../styles/marketing-hero.module.scss";
-
-const MarketingHeroComponent = ({
-  location,
-  data,
-}) => {
-
-  const sliderRef = useRef(null);
-  const [sliderHeight, setSliderHeight] = useState(424);
-
-  const onResize = () => {
-    sliderRef?.current && setSliderHeight(sliderRef.current.clientHeight);
-  };
-
-  useEffect(() => {
-    onResize();
-    window.addEventListener("resize", onResize, { passive: true });
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  }, []);
-
-
-  const getButtons = () => {
-    const {
-      registerButton,
-      loginButton
-    } = data?.buttons || {};
-
-    return <>
-      {registerButton?.display &&
-      <span className={styles.link}>
-        <RegistrationLiteComponent location={location} />
-      </span>
-      }
-      {loginButton?.display &&
-        <AuthComponent location={location} />
-      }
-    </>;
-  };
-
-  const sliderSettings = {
-    autoplay: true,
-    autoplaySpeed: 5000,
-    infinite: true,
-    dots: false,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-  };
-
-  let heroLeftColumnInlineStyles = {};
-  if (data?.background?.src) {
-    const imageSrc = getSrc(data.background.src);
-    heroLeftColumnInlineStyles.backgroundImage = `url(${imageSrc})`;
-  }
-
-  return (
-    <section className={styles.heroMarketing}>
-      <div className={`${styles.heroMarketingColumns} columns is-gapless`}>
-        <div
-          className={`${styles.leftColumn} column is-6`}
-          style={heroLeftColumnInlineStyles}
-        >
-          <div className={`${styles.heroMarketingContainer} hero-body`}>
-            <div className="container">
-              <h1 className="title">{data?.title}</h1>
-              <h2 className="subtitle">{data?.subTitle}</h2>
-              <div
-                className={styles.date}
-                style={{
-                  display: "inline",
-                  transform: "skew(0deg)",
-                }}
-              >                
-                <div style={{transform: "skew(0deg)"}}>
-                  <span>{data?.date}</span>
-                </div>
-              </div>
-              <h4>{data?.time}</h4>
-              <div className={styles.heroButtons}>
-                {getButtons()}
-              </div>
-            </div>
-          </div>
-        </div>
-        {data?.images?.length > 0 &&
-        <div className={`${styles.rightColumn} column is-6 px-0`} id="marketing-slider" ref={sliderRef}>
-          {data?.images?.length > 1 ?
-          <Slider {...sliderSettings}>
-            {data.images.map((image, index) => {
-              const imageSrc = getSrc(image.src);
-              return (
-                <div key={index}>
-                  <div className={styles.imageSlider} aria-label={image.alt} style={{ backgroundImage: `url(${imageSrc})`, height: sliderHeight, marginBottom: -6 }} />
-                </div>
-              );
-            })}
-          </Slider>
-          :
-          <div className={styles.singleImage} aria-label={data.images[0].alt} style={{ backgroundImage: `url(${getSrc(data.images[0].src)})`}} >
-          </div>
-          }
-        </div>
-      }
-      </div>
-    </section>
-  );
-}
-
-export default MarketingHeroComponent;

package/src/styles/login-button.module.scss

@@ -1,84 +0,0 @@
-@import "colors.scss";
-
-.login-button-wrapper {
-  :first-of-type.button {
-    background-color: transparent;
-    color: #fff;
-    height: 5rem;
-    width: 20rem;
-    margin: 0 10px 10px 0;
-
-    i {
-      color: #fff;
-      height: 1em;
-      width: 2.5em;
-      margin-right: auto;
-      font-size: 1.8em;
-    }
-
-    b {
-      display: inline-block;
-      width: 100%;
-      text-align: center;
-    }
-
-    &:hover,
-    &:active {
-      border-color: #fff;
-      text-decoration: none;
-    }
-
-    &:focus {
-      border-color: #fff;
-      box-shadow: none;
-    }
-
-    &.white {
-      background-color: #fff;
-      color: #6d6e71;
-
-      b,
-      i {
-        color: inherit;
-      }
-    }
-  }
-
-  #modal {
-    padding: 100px 0;
-  }
-
-  .modal-content {
-    overflow: initial;
-  }
-
-  .outer-wrapper {
-    border: 1px solid var(--color_input_border_color);
-    background-color: var(--color_background_light);
-    border-radius: 5px;
-  }
-
-  .inner-wrapper {
-    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);
-    }
-  }
-}