@openeventkit/event-site 2.0.111 → 2.0.112

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

@@ -1,8 +1,8 @@
-import * as React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { navigate } from "gatsby";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import Markdown from "markdown-to-jsx";
+import Mdx from "@mdx-js/runtime";
 
 import Layout from "../components/Layout";
 import AttendanceTrackerComponent from "../components/AttendanceTrackerComponent";
@@ -11,6 +11,7 @@ import LiteScheduleComponent from "../components/LiteScheduleComponent";
 import DisqusComponent from "../components/DisqusComponent";
 import Countdown from "../components/Countdown";
 import Link from "../components/Link";
+import ResponsiveImage from "../components/ResponsiveImage";
 
 import Masonry from "react-masonry-css";
 import Slider from "react-slick";
@@ -29,6 +30,11 @@ const sliderSettings = {
   slidesToScroll: 1
 };
 
+const shortcodes = {
+  a: Link,
+  img: ResponsiveImage
+};
+
 const MarketingPageTemplate = ({
   location,
   data,
@@ -37,6 +43,22 @@ const MarketingPageTemplate = ({
   summitPhase,
   isLoggedUser,
 }) => {
+  const rightColumnRef = useRef(null);
+  const [rightColumnHeight, setRightColumnHeight] = useState();
+
+  const onResize = () => {
+    if (rightColumnRef?.current) {
+      setRightColumnHeight(rightColumnRef.current.firstChild.clientHeight);
+    }
+  };
+
+  useEffect(() => {
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [data, rightColumnRef]);
 
   const {
     marketingPageJson: {
@@ -51,8 +73,8 @@ const MarketingPageTemplate = ({
   if (widgets?.schedule && isLoggedUser && summitPhase !== PHASES.BEFORE) {
     scheduleProps = {
       ...scheduleProps,
-      onEventClick: (ev) => navigate(`/a/event/${ev.id}`),
-    }
+      onEventClick: (ev) => navigate(`/a/event/${ev.id}`)
+    };
   }
 
   const shouldRenderMasonry = masonry?.display;
@@ -66,43 +88,49 @@ const MarketingPageTemplate = ({
       />
       {summit && countdown?.display && <Countdown summit={summit} text={countdown?.text} />}
       <div className="columns">
-        <div className={`column mt-3 px-6 py-6 ${shouldRenderMasonry ? "is-half" : ""} ${styles.leftColumn ? styles.leftColumn : ""}`} style={{ position: 'relative' }}>
-          {widgets?.text?.display && widgets?.text?.content &&
-            <Markdown>
-              {widgets.text.content}
-            </Markdown>
+        <div
+          className={`column mt-3 px-6 py-6 ${shouldRenderMasonry ? "is-half" : ""} ${styles.leftColumn || ""}`}
+          style={{ maxHeight: shouldRenderMasonry && rightColumnHeight ? rightColumnHeight : "none" }}
+        >
+          {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}
-              />
-            </>
+          <>
+            <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"/>
-            </>
+          <>
+            <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 ?? ""} />
-            </>
+          widgets?.image?.image.src &&
+          <>
+            <h2><b>{widgets.image.title}</b></h2>
+            <br />
+            <GatsbyImage image={getImage(widgets.image.image.src)} alt={widgets.image.image.alt ?? ""} />
+          </>
           }
         </div>
         {shouldRenderMasonry &&
-        <div className={`column is-half px-0 pb-0 ${styles.rightColumn ? styles.rightColumn : ""}`}>
+        <div
+          ref={rightColumnRef}
+          className={`column px-0 pb-0 is-half ${styles.rightColumn || ""}`}
+        >
           <Masonry
             breakpointCols={2}
             className="my-masonry-grid"
@@ -111,7 +139,7 @@ const MarketingPageTemplate = ({
               if (item.images && item.images.length === 1) {
                 const image = getImage(item.images[0].src);
                 return (
-                  <div className={'single'} key={index}>
+                  <div className={"single"} key={index}>
                     {item.images[0].link ?
                       <Link to={item.images[0].link}>
                         <GatsbyImage image={image} alt={item.images[0].alt ?? ""} />
@@ -120,7 +148,7 @@ const MarketingPageTemplate = ({
                       <GatsbyImage image={image} alt={item.images[0].alt ?? ""} />
                     }
                   </div>
-                )
+                );
               } else if (item.images && item.images.length > 1) {
                 return (
                   <Slider {...sliderSettings} key={index}>
@@ -136,14 +164,14 @@ const MarketingPageTemplate = ({
                             <GatsbyImage image={img} alt={image.alt ?? ""} />
                           }
                         </div>
-                      )
+                      );
                     })}
                   </Slider>
-                )
+                );
               } else {
                 return (
                   <div className="single" key={index} />
-                )
+                );
               }
             })}
           </Masonry>
@@ -151,7 +179,7 @@ const MarketingPageTemplate = ({
         }
       </div>
     </Layout>
-  )
+  );
 };
 
 MarketingPageTemplate.propTypes = {

package/src/utils/buildPolyfills.js

@@ -0,0 +1,18 @@
+import { JSDOM } from "jsdom";
+import { XMLHttpRequest } from "xmlhttprequest";
+
+const noop = () => {};
+
+const matchMedia = () => ({
+  matches: false,
+  addListener: noop,
+  removeListener: noop
+});
+
+const { window } = new JSDOM("...");
+
+global.window = window;
+global.window.matchMedia = matchMedia;
+global.document = window.document;
+global.navigator = window.navigator;
+global.XMLHttpRequest = XMLHttpRequest;

package/src/utils/filePath.js

@@ -1,7 +1,9 @@
 const DATA_DIR_PATH = "src/data";
 const STATIC_CONTENT_DIR_PATH = "src/content";
 const DEFAULTS_DIR_PATH = "src/defaults";
-const CONTENT_PAGES_DIR_PATH = "src/pages/content-pages";
+const PAGES_DIR_PATH = "src/pages";
+const CONTENT_PAGES_PATH_NAME = `content-pages`;
+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`;
@@ -33,7 +35,7 @@ const VOTEABLE_PRESENTATIONS_FILE_NAME = "voteable-presentations.json";
 const VOTEABLE_PRESENTATIONS_FILE_PATH = `${DATA_DIR_PATH}/${VOTEABLE_PRESENTATIONS_FILE_NAME}`;
 const POSTERS_PAGES_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/posters-pages.json`;
 const MARKETING_SETTINGS_FILE_PATH = `${DATA_DIR_PATH}/marketing-settings.json`;
-const MAINTENANCE_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/maintenance.json`;
+const MAINTENANCE_PATH_NAME = `maintenance`;
 const EXPO_HALL_PAGE_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/expo-hall-page/index.json`;
 const INVITATIONS_REJECT_PAGE_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/invitations-reject-page/index.json`;
 const SPONSORS_FILE_NAME = "sponsors.json";
@@ -44,25 +46,27 @@ const APPLE_PAY_DOMAIN_FILE_PATH = `/static/.well-known/`
 const APPLE_PAY_DOMAIN_FILE_NAME = `apple-developer-merchantid-domain-association`;
 
 exports.REQUIRED_DIR_PATHS = [
-	DATA_DIR_PATH,
-	STATIC_CONTENT_DIR_PATH,
-	CONTENT_PAGES_DIR_PATH,
-	STYLES_DIR_PATH,
-	SITE_SETTINGS_DIR_PATH,
-	MARKETING_PAGE_DIR_PATH,
-	LOBBY_PAGE_DIR_PATH,
-	INVITATIONS_REJECT_PAGE_FILE_PATH,
-	NAVBAR_DIR_PATH,
-	FOOTER_DIR_PATH	
+  DATA_DIR_PATH,
+  STATIC_CONTENT_DIR_PATH,
+  CONTENT_PAGES_DIR_PATH,
+  STYLES_DIR_PATH,
+  SITE_SETTINGS_DIR_PATH,
+  MARKETING_PAGE_DIR_PATH,
+  LOBBY_PAGE_DIR_PATH,
+  INVITATIONS_REJECT_PAGE_FILE_PATH,
+  NAVBAR_DIR_PATH,
+  FOOTER_DIR_PATH
 ];
 exports.STATIC_CONTENT_DIR_PATH = STATIC_CONTENT_DIR_PATH;
+exports.PAGES_DIR_PATH = PAGES_DIR_PATH;
+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.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;
-exports.CONTENT_PAGES_DIR_PATH = CONTENT_PAGES_DIR_PATH;
 exports.MARKETING_PAGE_FILE_PATH = MARKETING_PAGE_FILE_PATH;
 exports.LOBBY_PAGE_FILE_PATH = LOBBY_PAGE_FILE_PATH;
 exports.ADS_FILE_PATH = ADS_FILE_PATH;
@@ -83,7 +87,7 @@ exports.VOTEABLE_PRESENTATIONS_FILE_NAME = VOTEABLE_PRESENTATIONS_FILE_NAME;
 exports.VOTEABLE_PRESENTATIONS_FILE_PATH = VOTEABLE_PRESENTATIONS_FILE_PATH;
 exports.POSTERS_PAGES_FILE_PATH = POSTERS_PAGES_FILE_PATH;
 exports.MARKETING_SETTINGS_FILE_PATH = MARKETING_SETTINGS_FILE_PATH;
-exports.MAINTENANCE_FILE_PATH = MAINTENANCE_FILE_PATH;
+exports.MAINTENANCE_PATH_NAME = MAINTENANCE_PATH_NAME;
 exports.EXPO_HALL_PAGE_FILE_PATH = EXPO_HALL_PAGE_FILE_PATH;
 exports.INVITATIONS_REJECT_PAGE_FILE_PATH = INVITATIONS_REJECT_PAGE_FILE_PATH;
 exports.SPONSORS_FILE_PATH = SPONSORS_FILE_PATH;

package/src/utils/useSiteSettings.js

@@ -47,6 +47,10 @@ const siteSettingsQuery = graphql`
         }
         providerLogoSize
       }
+      maintenanceMode {
+        title
+        subtitle
+      }
     }
   }
 `;

package/src/components/Content.js

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import sanitizeHtml from 'sanitize-html';
-
-export const HTMLContent = ({ content, className }) => {
-  const [cleanHTML, setCleanHTML] = useState(content);
-
-  useEffect(() => {
-    const clean = sanitizeHtml(content, {
-      // adds custom settings to default settings (https://www.npmjs.com/package/sanitize-html#default-options)
-      allowedTags: sanitizeHtml.defaults.allowedTags.concat(['iframe', 'img']),
-      allowedAttributes: {
-        ...sanitizeHtml.defaults.allowedAttributes,
-        'iframe': ['src', 'width', 'height', 'frameborder', 'allow', 'allowfullscreen'],
-        'a': ['target'],
-        '*': ['href', 'class']
-      },
-      exclusiveFilter: (frame) => {
-        // removing a and p tags with no text or media childrens
-        return (frame.tag === 'a' || frame.tag === 'p') && !frame.text.trim() && !frame.mediaChildren;
-      }
-    });
-    setCleanHTML(clean);
-  }, [content])
-
-  return (
-    <div className={className} dangerouslySetInnerHTML={{ __html: cleanHTML }} />
-  )
-}
-
-const Content = ({ content, className }) => (
-  <div className={className}>{content}</div>
-)
-
-Content.propTypes = {
-  content: PropTypes.node,
-  className: PropTypes.string,
-}
-
-HTMLContent.propTypes = Content.propTypes
-
-export default Content

package/src/content/maintenance.json

@@ -1,5 +0,0 @@
-{
-  "enabled": false,
-  "title": "Site under maintenance",
-  "subtitle": "Please reload page shortly"
-}

package/src/pages/maintenance.md

@@ -1,3 +0,0 @@
----
-templateKey: maintenance-page
----

package/src/templates/content-page.js

@@ -1,92 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { graphql } from "gatsby";
-import { Redirect } from "@gatsbyjs/reach-router";
-import Seo from "../components/Seo";
-import Layout from "../components/Layout";
-import Content, { HTMLContent } from "../components/Content";
-import { titleFromPathname } from "../utils/urlFormating";
-
-
-import { USER_REQUIREMENTS } from "../cms/config/collections/contentPagesCollection"
-
-export const ContentPageTemplate = ({
-  title,
-  content,
-  contentComponent
-}) => {
-  const PageContent = contentComponent || Content
-
-  return (
-    <div className="content">
-      <h1>{title}</h1>
-      <PageContent content={content} />
-    </div>
-  )
-}
-
-ContentPageTemplate.propTypes = {
-  title: PropTypes.string,
-  content: PropTypes.string,
-  contentComponent: PropTypes.func,
-}
-
-const ContentPage = ({ data, isLoggedUser, hasTicket, isAuthorized }) => {
-  const { frontmatter: {title, userRequirement}, html } = data.markdownRemark
-  // if isAuthorized byoass the AUTHZ check
-  if (!isAuthorized && (
-    (userRequirement === USER_REQUIREMENTS.loggedIn && !isLoggedUser) || (userRequirement === USER_REQUIREMENTS.hasTicket && !hasTicket)
-  )) {
-    return <Redirect to='/' noThrow />
-  }
-
-  return (
-    <Layout>
-      <ContentPageTemplate
-        contentComponent={HTMLContent}
-        title={title}
-        content={html}
-      />
-    </Layout>
-  )
-}
-
-ContentPage.propTypes = {
-  data: PropTypes.shape({
-    markdownRemark: PropTypes.shape({
-      frontmatter: PropTypes.object,
-    }),
-  }),
-  isLoggedUser: PropTypes.bool,
-  hasTicket: PropTypes.bool
-};
-
-const mapStateToProps = ({ loggedUserState, userState }) => ({
-  isLoggedUser: loggedUserState.isLoggedUser,
-  hasTicket: userState.hasTicket,
-  isAuthorized: userState.isAuthorized
-});
-
-export default connect(mapStateToProps, null)(ContentPage);
-
-export const contentPageQuery = graphql`
-  query ($id: String!) {    
-    markdownRemark(id: { eq: $id }) {
-      html
-      frontmatter {        
-        title
-        userRequirement
-      }
-    }
-  }
-`;
-
-export const Head = ({
-  location
-}) => (
-  <Seo
-    title={titleFromPathname(location.pathname)}
-    location={location}
-  />
-);

package/src/templates/maintenance-page.js

@@ -1,40 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import maintenanceMode from "content/maintenance.json";
-
-import HeroComponent from "../components/HeroComponent";
-
-import "../styles/bulma.scss";
-
-const MaintenancePageTemplate = ({
-  title,
-  subtitle
-}) => {
-  return (
-    <HeroComponent
-      title={title}
-      subtitle={subtitle}
-    />
-  );
-}
-
-MaintenancePageTemplate.propTypes = {
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-}
-
-const MaintenancePage = () => {
-  const {
-    title,
-    subtitle
-  } = maintenanceMode;
-
-  return (
-    <MaintenancePageTemplate
-      title={title}
-      subtitle={subtitle}
-    />
-  )
-};
-
-export default MaintenancePage;

package/static/admin/admin.css

@@ -1,3 +0,0 @@
-[data-slate-editor] { 
-    -webkit-user-modify: read-write !important; 
-}