@openeventkit/event-site 2.0.89 → 2.0.90

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.89",
+  "version": "2.0.90",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -43,7 +43,6 @@
     "final-form": "4.20.7",
     "font-awesome": "^4.7.0",
     "formik": "^2.2.9",
-    "fs-extra": "^9.0.1",
     "full-schedule-widget": "3.0.3",
     "gatsby": "^5.8.1",
     "gatsby-alias-imports": "^1.0.6",
@@ -78,7 +77,6 @@
     "moment-timezone": "^0.5.31",
     "netlify-cms-app": "^2.15.72",
     "netlify-cms-lib-widgets": "^1.8.0",
-    "node-sass-utils": "^1.1.3",
     "openstack-uicore-foundation": "4.1.65",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",

package/src/cms/config/collections/defaultPagesCollection/marketingPage/index.js

@@ -116,7 +116,7 @@ const marketingPage = {
       name: "countdown",
       fields: [
         booleanField({
-          label: "Should Display?",
+          label: "Display",
           name: "display",
           required: false
         }),
@@ -128,7 +128,7 @@ const marketingPage = {
     }),
     objectField({
       label: "Widgets",
-      name: "leftColumn",
+      name: "widgets",
       fields: [
         objectField({
           label: "Text",
@@ -196,41 +196,52 @@ const marketingPage = {
         })
       ]
     }),
-    numberField({
-      label: "Redirect to Event",
-      name: "eventRedirect",
-      required: false,
-      hint: "User will be redirected to this event after login"
-    }),
-    listField({
+    objectField({
       label: "Masonry",
       name: "masonry",
       fields: [
-        stringField({
-          label: "Placement",
-          name: "placement",
+        booleanField({
+          label: "Display",
+          name: "display",
           required: false
         }),
-        selectField({
-          label: "Size",
-          name: "size",
-          options: [
-            selectOption({
-              label: "Single",
-              value: 1
+        listField({
+          label: "Items",
+          name: "items",
+          fields: [
+            stringField({
+              label: "Placement",
+              name: "placement",
+              required: false
+            }),
+            selectField({
+              label: "Size",
+              name: "size",
+              options: [
+                selectOption({
+                  label: "Single",
+                  value: 1
+                }),
+                selectOption({
+                  label: "Double",
+                  value: 2
+                })
+              ]
             }),
-            selectOption({
-              label: "Double",
-              value: 2
+            linkImagesField({
+              label: "Images",
+              name: "images",
+              imageRequired: true
             })
           ]
-        }),
-        linkImagesField({
-          label: "Images",
-          name: "images",
-          imageRequired: true
         })
       ]
+    }),
+    numberField({
+      label: "Redirect to Event",
+      name: "eventRedirect",
+      required: false,
+      hint: "User will be redirected to this event after login"
     })
   ]
 };

package/src/cms/config/collections/defaultPagesCollection/marketingPage/typeDefs.js

@@ -9,29 +9,34 @@ module.exports = `
     alt: String
     link: String
   }
-  type MarketingPageMasonry {
+  type MarketingPageMasonryItem {
+    display: Boolean
     placement: String
     size: Int
     images: [LinkImageWithAlt]
   }
-  type MarketingPageLeftColumnTextWidget {
+  type MarketingPageMasonry {
     display: Boolean
-    content: String
+    items: [MarketingPageMasonryItem]
   }
-  type MarketingPageLeftColumnWidget {
+  type MarketingPageWidget {
     display: Boolean
     title: String
   }
-  type MarketingPageLeftColumnImageWidget {
+  type MarketingPageTextWidget {
+    display: Boolean
+    content: String
+  }
+  type MarketingPageImageWidget {
     display: Boolean
     title: String
     image: ImageWithAlt
   }
-  type MarketingPageLeftColumn {
-    text: MarketingPageLeftColumnTextWidget
-    schedule: MarketingPageLeftColumnWidget
-    disqus: MarketingPageLeftColumnWidget
-    image: MarketingPageLeftColumnImageWidget
+  type MarketingPageWidgets {
+    text: MarketingPageTextWidget
+    image: MarketingPageImageWidget
+    schedule: MarketingPageWidget
+    disqus: MarketingPageWidget
   }
   type MarketingPageCountdown {
     display: Boolean
@@ -57,9 +62,9 @@ module.exports = `
   }
   type MarketingPageJson implements Node {
     hero: MarketingPageHero
-    leftColumn: MarketingPageLeftColumn
     countdown: MarketingPageCountdown
+    widgets: MarketingPageWidgets
+    masonry: MarketingPageMasonry
     eventRedirect: Int
-    masonry: [MarketingPageMasonry]
   }
 `;

package/src/components/MarketingHeroComponent.js

@@ -12,7 +12,7 @@ import styles from "../styles/marketing-hero.module.scss";
 
 const MarketingHeroComponent = ({
   location,
-  marketingPageSettings,
+  data,
 }) => {
 
   const sliderRef = useRef(null);
@@ -32,21 +32,21 @@ const MarketingHeroComponent = ({
 
 
   const getButtons = () => {
-    const { registerButton, loginButton } = marketingPageSettings.hero.buttons;
+    const {
+      registerButton,
+      loginButton
+    } = data?.buttons || {};
 
-    return (
-      <>
-        {registerButton.display &&
-          (
-            <span className={styles.link}>
-              <RegistrationLiteComponent location={location} />
-            </span>
-          )}
-        {loginButton.display && (
-          <AuthComponent location={location} />
-        )}
-      </>
-    );
+    return <>
+      {registerButton?.display &&
+      <span className={styles.link}>
+        <RegistrationLiteComponent location={location} />
+      </span>
+      }
+      {loginButton?.display &&
+        <AuthComponent location={location} />
+      }
+    </>;
   };
 
   const sliderSettings = {
@@ -59,8 +59,8 @@ const MarketingHeroComponent = ({
   };
 
   let heroLeftColumnInlineStyles = {};
-  if (marketingPageSettings.hero?.background?.src) {
-    const imageSrc = getSrc(marketingPageSettings.hero.background.src);
+  if (data?.background?.src) {
+    const imageSrc = getSrc(data.background.src);
     heroLeftColumnInlineStyles.backgroundImage = `url(${imageSrc})`;
   }
 
@@ -73,53 +73,53 @@ const MarketingHeroComponent = ({
         >
           <div className={`${styles.heroMarketingContainer} hero-body`}>
             <div className="container">
-              <h1 className="title">{marketingPageSettings.hero.title}</h1>
-              <h2 className="subtitle">{marketingPageSettings.hero.subTitle}</h2>
+              <h1 className="title">{data?.title}</h1>
+              <h2 className="subtitle">{data?.subTitle}</h2>
               <div
                 className={styles.date}
                 style={{
-                  backgroundColor: marketingPageSettings.hero.dateLayout
+                  backgroundColor: data?.dateLayout
                     ? "var(--color_secondary)"
                     : "",
-                  display: marketingPageSettings.hero.dateLayout
+                  display: data?.dateLayout
                     ? ""
                     : "inline",
-                  transform: marketingPageSettings.hero.dateLayout
+                  transform: data?.dateLayout
                     ? "skew(-25deg)"
                     : "skew(0deg)",
                 }}
               >
-                {marketingPageSettings.hero?.dateLayout ?
-                <div style={{transform: "skew(25deg)"}}>{marketingPageSettings.hero?.date}</div>
+                {data?.dateLayout ?
+                <div style={{transform: "skew(25deg)"}}>{data?.date}</div>
                 :
                 <div style={{transform: "skew(0deg)"}}>
-                  <span>{marketingPageSettings.hero?.date}</span>
+                  <span>{data?.date}</span>
                 </div>
                 }
               </div>
-              <h4>{marketingPageSettings.hero?.time}</h4>
+              <h4>{data?.time}</h4>
               <div className={styles.heroButtons}>
                 {getButtons()}
               </div>
             </div>
           </div>
         </div>
-        {marketingPageSettings.hero?.images?.length > 0 &&
+        {data?.images?.length > 0 &&
         <div className={`${styles.rightColumn} column is-6 px-0`} id="marketing-slider" ref={sliderRef}>
-            {marketingPageSettings.hero?.images?.length > 1 ?
-            <Slider {...sliderSettings}>
-              {marketingPageSettings.hero.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={marketingPageSettings.hero.images[0].alt} style={{ backgroundImage: `url(${getSrc(marketingPageSettings.hero.images[0].src)})`}} >
-            </div>
+          {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>
       }

package/src/content/marketing-page/index.json

@@ -19,7 +19,7 @@
   "countdown": {
       "display": false
   },
-  "leftColumn": {
+  "widgets": {
     "schedule": {
       "display": false
     },
@@ -30,5 +30,5 @@
       "display": false
     }
   },
-  "masonry": []
+  "masonry": {}
 }

package/src/pages/index.js

@@ -54,7 +54,7 @@ export const marketingPageQuery = graphql`
         display
         text
       }
-      leftColumn {
+      widgets {
         text {
           content
           display
@@ -84,24 +84,27 @@ export const marketingPageQuery = graphql`
           display
         }
       }
-      eventRedirect
       masonry {
-        placement
-        size
-        images {
-          src {
-            childImageSharp {
-              gatsbyImageData (
-                quality: 100
-                placeholder: BLURRED
-                layout: FULL_WIDTH
-              )
+        display
+        items {
+          placement
+          size
+          images {
+            src {
+              childImageSharp {
+                gatsbyImageData (
+                  quality: 100
+                  placeholder: BLURRED
+                  layout: FULL_WIDTH
+                )
+              }
             }
+            alt
+            link
           }
-          alt
-          link
         }
       }
+      eventRedirect
     }
   }
 `;

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

@@ -20,6 +20,15 @@ import { PHASES } from "../utils/phasesUtils";
 
 import styles from "../styles/marketing.module.scss";
 
+const sliderSettings = {
+  autoplay: true,
+  autoplaySpeed: 5000,
+  infinite: true,
+  dots: false,
+  slidesToShow: 1,
+  slidesToScroll: 1
+};
+
 const MarketingPageTemplate = ({
   location,
   data,
@@ -30,44 +39,42 @@ const MarketingPageTemplate = ({
 }) => {
 
   const {
-    marketingPageJson
-  } = data;
+    marketingPageJson: {
+      hero,
+      countdown,
+      widgets,
+      masonry
+    } = {}
+  } = data || {};
 
   let scheduleProps = {};
-  if (marketingPageJson.leftColumn?.schedule && isLoggedUser && summitPhase !== PHASES.BEFORE) {
+  if (widgets?.schedule && isLoggedUser && summitPhase !== PHASES.BEFORE) {
     scheduleProps = {
       ...scheduleProps,
       onEventClick: (ev) => navigate(`/a/event/${ev.id}`),
     }
   }
 
-  const sliderSettings = {
-    autoplay: true,
-    autoplaySpeed: 5000,
-    infinite: true,
-    dots: false,
-    slidesToShow: 1,
-    slidesToScroll: 1
-  };
+  const shouldRenderMasonry = masonry?.display;
 
   return (
     <Layout marketing={true} location={location}>
       <AttendanceTrackerComponent />
       <MarketingHeroComponent
         location={location}
-        marketingPageSettings={marketingPageJson}
+        data={hero}
       />
-      {summit && marketingPageJson.countdown?.display && <Countdown summit={summit} text={marketingPageJson?.countdown?.text} />}
+      {summit && countdown?.display && <Countdown summit={summit} text={countdown?.text} />}
       <div className="columns">
-        <div className={`column is-half mt-3 px-6 py-6 ${styles.leftColumn}`} style={{ position: 'relative' }}>
-          {marketingPageJson.leftColumn?.text?.content && marketingPageJson.leftColumn?.text?.display &&
+        <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>
-              {marketingPageJson.leftColumn.text.content}
+              {widgets.text.content}
             </Markdown>
           }
-          {marketingPageJson.leftColumn?.schedule?.display &&
+          {widgets?.schedule?.display &&
             <>
-              <h2><b>{marketingPageJson.leftColumn.schedule.title}</b></h2>
+              <h2><b>{widgets.schedule.title}</b></h2>
               <LiteScheduleComponent
                 {...scheduleProps}
                 lastDataSync={lastDataSync}
@@ -79,28 +86,28 @@ const MarketingPageTemplate = ({
               />
             </>
           }
-          {marketingPageJson.leftColumn?.disqus?.display &&
+          {widgets?.disqus?.display &&
             <>
-              <h2><b>{marketingPageJson.leftColumn.disqus.title}</b></h2>
+              <h2><b>{widgets.disqus.title}</b></h2>
               <DisqusComponent page="marketing-site"/>
             </>
           }
-          {marketingPageJson.leftColumn?.image?.display &&
-           marketingPageJson.leftColumn?.image?.image.src &&
+          {widgets?.image?.display &&
+           widgets?.image?.image.src &&
             <>
-              <h2><b>{marketingPageJson.leftColumn.image.title}</b></h2>
+              <h2><b>{widgets.image.title}</b></h2>
               <br />
-              <GatsbyImage image={getImage(marketingPageJson.leftColumn.image.image.src)} alt={marketingPageJson.leftColumn.image.image.alt ?? ""} />
+              <GatsbyImage image={getImage(widgets.image.image.src)} alt={widgets.image.image.alt ?? ""} />
             </>
           }
         </div>
-        <div className={`column is-half px-0 pb-0 ${styles.rightColumn}`}>
+        {shouldRenderMasonry &&
+        <div className={`column is-half px-0 pb-0 ${styles.rightColumn ? styles.rightColumn : ""}`}>
           <Masonry
             breakpointCols={2}
             className="my-masonry-grid"
             columnClassName="my-masonry-grid_column">
-            { marketingPageJson.masonry &&
-              formatMasonry(marketingPageJson.masonry).map((item, index) => {
+            {masonry.items && formatMasonry(masonry.items).map((item, index) => {
               if (item.images && item.images.length === 1) {
                 const image = getImage(item.images[0].src);
                 return (
@@ -141,6 +148,7 @@ const MarketingPageTemplate = ({
             })}
           </Masonry>
         </div>
+        }
       </div>
     </Layout>
   )