feature: add cms config for openinfra summit and days pages

gatsby-node.js

@@ -532,6 +532,26 @@ exports.createSchemaCustomization = ({actions}) => {
       url: String
       logo: String
       big_logo: String
+    }        
+    type MarkdownRemarkFrontmatterUpcomingMeetupsMeetups {
+      background: File @fileByRelativePath
+      date: String
+      location: String
+      link: String
+    }    
+    type MarkdownRemarkFrontmatterUpcomingMeetupsBannerButton {
+      text: String
+      url: String
+    }    
+    type MarkdownRemarkFrontmatterUpcomingMeetupsBanner {
+      title: String
+      content: String
+      button: MarkdownRemarkFrontmatterUpcomingMeetupsBannerButton
+    }    
+    type MarkdownRemarkFrontmatterUpcomingMeetups {
+      title: String
+      banner: MarkdownRemarkFrontmatterUpcomingMeetupsBanner
+      meetups: [MarkdownRemarkFrontmatterUpcomingMeetupsMeetups]
     }
     `
   createTypes(typeDefs)

src/cms/cms.js

@@ -25,6 +25,8 @@ import ElectionPagePreview from './preview-templates/ElectionPagePreview'
 import ContributorsPagePreview from './preview-templates/ContributorsPagePreview'
 import AnnualReportPagePreview from './preview-templates/AnnualReportPagePreview'
 import ProjectsContactPagePreview from './preview-templates/ProjectsContactPagePreview'
+import SummitLandingPagePreview from './preview-templates/SummitLandingPagePreview'
+import OpenInfraDaysPagePreview from './preview-templates/OpenInfraDaysPagePreview'
 
 CMS.registerPreviewStyle('style/styles.scss');
 CMS.registerPreviewStyle('style/previews.css');
@@ -54,4 +56,6 @@ CMS.registerPreviewTemplate('hybrid-cloud-page', HybridCloudPagePreview)
 CMS.registerPreviewTemplate('electionPage', ElectionPagePreview)
 CMS.registerPreviewTemplate('contributors-pages', ContributorsPagePreview)
 CMS.registerPreviewTemplate('annual-report-pages', AnnualReportPagePreview)
-CMS.registerPreviewTemplate('projects-contact', ProjectsContactPagePreview)
+CMS.registerPreviewTemplate('projects-contact', ProjectsContactPagePreview)
+CMS.registerPreviewTemplate('summit-landing-page', SummitLandingPagePreview)
+CMS.registerPreviewTemplate('openinfra-days', OpenInfraDaysPagePreview)

src/cms/preview-templates/IndexPagePreview.js

@@ -14,6 +14,7 @@ const IndexPagePreview = ({ entry, getAsset }) => {
         projects={data.projects || {}}
         people={data.people || {}}
         sponsor={data.sponsor || {}}
+        openInfraEvents={data.openInfraEvents || {}}
         content={data.content || {}}
       />
     )

src/cms/preview-templates/OpenInfraDaysPagePreview.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { OpenInfraDaysPageTemplate } from '../../templates/open-infra-days-page'
+
+const OpenInfraDaysPagePreview = ({ entry }) => {
+  const data = entry.getIn(['data']).toJS()
+
+  const upcomingDaysEventsArray = entry.getIn(['data', 'upcomingDaysEvents', 'events'])
+  const upcomingDaysEvents = upcomingDaysEventsArray ? upcomingDaysEventsArray.toJS() : []
+
+  const upcomingMeetupsArray = entry.getIn(['data', 'upcomingMeetups', 'meetups'])
+  const upcomingMeetups = upcomingMeetupsArray ? upcomingMeetupsArray.toJS() : []
+
+  const pastMeetupsArray = entry.getIn(['data', 'pastMeetups', 'meetups'])
+  const pastMeetups = pastMeetupsArray ? pastMeetupsArray.toJS() : []
+
+  const communityEventsArray = entry.getIn(['data', 'communityEvents', 'events'])
+  const communityEvents = communityEventsArray ? communityEventsArray.toJS() : []
+
+  if (data) {
+    return (
+      <OpenInfraDaysPageTemplate
+        title={entry.getIn(['data', 'title'])}
+        subTitle={entry.getIn(['data', 'subTitle'])}
+        headerImageUrl={entry.getIn(['data', 'headerImageUrl'])}
+        upcomingDaysEvents={{
+          isVisible: entry.getIn(['data', 'upcomingDaysEvents', 'isVisible']),
+          title: entry.getIn(['data', 'upcomingDaysEvents', 'title']),
+          headerImage: {
+            img: {
+              publicURL: entry.getIn(['data', 'upcomingDaysEvents', 'headerImage', 'img'])
+            },
+            alt: entry.getIn(['data', 'upcomingDaysEvents', 'headerImage', 'alt'])
+          },
+          events: upcomingDaysEvents
+        }}
+        upcomingMeetups={{
+          title: entry.getIn(['data', 'upcomingMeetups', 'title']),
+          banner: {
+            title: entry.getIn(['data', 'upcomingMeetups', 'banner', 'title']),
+            content: entry.getIn(['data', 'upcomingMeetups', 'banner', 'content']),
+            button: {
+              text: entry.getIn(['data', 'upcomingMeetups', 'banner', 'button', 'text']),
+              url: entry.getIn(['data', 'upcomingMeetups', 'banner', 'button', 'url'])
+            }
+          },
+          meetups: upcomingMeetups.map(meetup => ({
+            ...meetup,
+            background: {
+              publicURL: meetup.background
+            }
+          }))
+        }}
+        pastMeetups={{
+          title: entry.getIn(['data', 'pastMeetups', 'title']),
+          meetups: pastMeetups.map(meetup => ({
+            ...meetup,
+            background: {
+              publicURL: meetup.background
+            }
+          }))
+        }}
+        communityEvents={{
+          title: entry.getIn(['data', 'communityEvents', 'title']),
+          events: communityEvents
+        }}
+        bottomBanner={{
+          background: {
+            publicURL: entry.getIn(['data', 'bottomBanner', 'background'])
+          },
+          title: entry.getIn(['data', 'bottomBanner', 'title']),
+          button: {
+            link: entry.getIn(['data', 'bottomBanner', 'button', 'link']),
+            text: entry.getIn(['data', 'bottomBanner', 'button', 'text'])
+          }
+        }}
+        isLoggedUser={false}
+      />
+    )
+  } else {
+    return <div>Loading...</div>
+  }
+}
+
+OpenInfraDaysPagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  getAsset: PropTypes.func,
+}
+
+export default OpenInfraDaysPagePreview

src/cms/preview-templates/SummitLandingPagePreview.js

@@ -0,0 +1,112 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { SummitLandingPageTemplate } from '../../templates/summit-landing-page'
+
+const SummitLandingPagePreview = ({ entry }) => {
+  const data = entry.getIn(['data']).toJS()
+
+  const pastSummitsArray = entry.getIn(['data', 'pastSummits', 'summits'])
+  const pastSummits = pastSummitsArray ? pastSummitsArray.toJS() : []
+
+  const middleBannerArray = entry.getIn(['data', 'middleBanner'])
+  const middleBanner = middleBannerArray ? middleBannerArray.toJS() : []
+
+  const previousSummitsArray = entry.getIn(['data', 'previousSummits', 'summits'])
+  const previousSummits = previousSummitsArray ? previousSummitsArray.toJS() : []
+
+  if (data) {
+    return (
+      <SummitLandingPageTemplate
+        title={entry.getIn(['data', 'title'])}
+        subTitle={entry.getIn(['data', 'subTitle'])}
+        headerImage={{
+          backgroundImage: {
+            publicURL: entry.getIn(['data', 'headerImage', 'backgroundImage'])
+          },
+          overview: entry.getIn(['data', 'headerImage', 'overview']),
+          caption: entry.getIn(['data', 'headerImage', 'caption']),
+          logo: {
+            src: {
+              publicURL: entry.getIn(['data', 'headerImage', 'logo', 'src'])
+            },
+            alt: entry.getIn(['data', 'headerImage', 'logo', 'alt'])
+          }
+        }}
+        subHeader={{
+          overview: entry.getIn(['data', 'subHeader', 'overview']),
+          title: entry.getIn(['data', 'subHeader', 'title']),
+          text: entry.getIn(['data', 'subHeader', 'text']),
+          badge: {
+            src: {
+              publicURL: entry.getIn(['data', 'subHeader', 'badge', 'src'])
+            },
+            alt: entry.getIn(['data', 'subHeader', 'badge', 'alt'])
+          },
+          footer: {
+            src: {
+              publicURL: entry.getIn(['data', 'subHeader', 'footer', 'src'])
+            },
+            alt: entry.getIn(['data', 'subHeader', 'footer', 'alt'])
+          }
+        }}
+        sponsorBanner={{
+          upperText: entry.getIn(['data', 'sponsorBanner', 'upperText']),
+          title: entry.getIn(['data', 'sponsorBanner', 'title']),
+          image: {
+            publicURL: entry.getIn(['data', 'sponsorBanner', 'image'])
+          },
+          button: {
+            text: entry.getIn(['data', 'sponsorBanner', 'button', 'text']),
+            link: entry.getIn(['data', 'sponsorBanner', 'button', 'link'])
+          }
+        }}
+        pastSummits={{
+          title: entry.getIn(['data', 'pastSummits', 'title']),
+          summits: pastSummits.map(summit => ({
+            ...summit,
+            background: {
+              publicURL: summit.background
+            }
+          }))
+        }}
+        middleBanner={middleBanner.map(banner => ({
+          ...banner,
+          image: {
+            publicURL: banner.image
+          }
+        }))}
+        previousSummits={{
+          title: entry.getIn(['data', 'previousSummits', 'title']),
+          summits: previousSummits.map(summit => ({
+            ...summit,
+            image: {
+              publicURL: summit.image
+            }
+          }))
+        }}
+        bottomBanner={{
+          background: {
+            publicURL: entry.getIn(['data', 'bottomBanner', 'background'])
+          },
+          title: entry.getIn(['data', 'bottomBanner', 'title']),
+          button: {
+            link: entry.getIn(['data', 'bottomBanner', 'button', 'link']),
+            text: entry.getIn(['data', 'bottomBanner', 'button', 'text'])
+          }
+        }}
+        isLoggedUser={false}
+      />
+    )
+  } else {
+    return <div>Loading...</div>
+  }
+}
+
+SummitLandingPagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  getAsset: PropTypes.func,
+}
+
+export default SummitLandingPagePreview

src/components/BottomBanner/index.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
 
-import background from '../../../static/img/summit-landing/subscribe/subscribe-banner-bg.png'
 import './styles.scss';
 import RoundedButton from '../RoundedButton';
 
-const BottomBanner = ({ title, button }) => (
+const BottomBanner = ({ background, title, button }) => (
 
-    <section className='bottom-banner-wrapper' style={{ backgroundImage: `url(${background}` }}>
+    <section className='bottom-banner-wrapper' style={{ backgroundImage: `url(${background?.publicURL || background}` }}>
         <div className="container bottom-banner-container">
             <span className='bottom-banner-title' dangerouslySetInnerHTML={{ __html: title }} />
             <RoundedButton link={button.link} text={button.text} className='bottom-banner-button' />

src/components/HeaderImage.js

@@ -7,9 +7,9 @@ const HeaderImage = ({backgroundImage, overview, logo, caption}) => {
     <main className="main">
       <section className="hero-main-v2 header-image" style={{backgroundImage: `url(${backgroundImage})`}}>
         <div className="container">
-          <p className="overview">{overview}</p>
+          <p className="overview" dangerouslySetInnerHTML={{__html: overview}} />
           <img src={logo.src} alt={logo.alt} />
-          <p className="caption">{caption}</p>
+          <p className="caption" dangerouslySetInnerHTML={{__html: caption}} />
         </div>
       </section>
     </main>

src/components/HomeV2/OpenInfraEventsSection.js

@@ -5,7 +5,7 @@ import RoundedButton from '../RoundedButton';
 import calendarIcon from '../../../static/img/summit-landing/icons/calendar-icon.svg'
 import locationIcon from '../../../static/img/summit-landing/icons/location-icon.svg'
 
-const OpenInfraEventsSection = () => {
+const OpenInfraEventsSection = ({events}) => {
 
     const arrowIcon = (color) => {
         return (
@@ -17,42 +17,6 @@ const OpenInfraEventsSection = () => {
         )
     }
 
-    const OpenInfraEventsData = [
-        {
-            link: 'https://openinfraasia.org',
-            logo: '/img/homeV2/events-images/logo-asia.svg',
-            text: 'openinfraasia.org',
-            color: '#FFB325',
-        },
-        {
-            link: 'https://openinfraeurope.org',
-            logo: '/img/homeV2/events-images/logo-europe.svg',
-            text: 'openinfraeurope.org',
-            color: '#2CB4E2',
-        }
-    ];
-
-    const UpcomingEventsData = [
-        {
-            image: '/img/homeV2/events-images/openinfra-asia-img-2026.png',
-            date: "September 8-9, 2026",
-            location: "Shanghai International Convention Center Oriental Riverside Hotel",
-            button: {
-                link: 'https://www.lfasiallc.com/kubecon-cloudnativecon-openinfra-summit-china/',
-                text: 'LEARN MORE'
-            }
-        },
-        {
-            image: '/img/homeV2/events-images/openinfra-europe-img-2025.png',
-            date: 'October 17-19, 2025',
-            location: 'École Polytechnique, Paris-Saclay, France',
-            button: {
-                link: 'https://www.youtube.com/playlist?list=PLKqaoAnDyfgr91wN_12nwY321504Ctw1s',
-                text: 'WATCH VIDEOS'
-            }
-        }        
-    ]
-
     return (
         <div className='home-v2-events-section container'>
             <span className='home-v2-header-events'>
@@ -61,11 +25,11 @@ const OpenInfraEventsSection = () => {
                 <br />OPEN SOURCE INFRASTRUCTURE
             </span>
             <div className='openinfra-events-section-wrapper'>
-                {OpenInfraEventsData.map(event => {
+                {events.openInfraEventsData.map(event => {
                     return (
                         <LinkComponent href={event.link}>
                             <div className='openinfra-event' style={{ color: event.color, borderColor: event.color }}>
-                                <img src={event.logo} />
+                                <img src={event.logo?.publicURL} />
                                 <span>{arrowIcon(event.color)} {event.text}</span>
                             </div>
                         </LinkComponent>
@@ -75,10 +39,10 @@ const OpenInfraEventsSection = () => {
             <div className='upcoming-events-section-wrapper'>
                 <span className='upcoming-events-title'>OPENINFRA <span className='red'>community events</span></span>
                 <div className="events-wrapper">
-                    {UpcomingEventsData.map(event => {
+                    {events.upcomingEvents.map(event => {
                         return (
                             <div className="event-container">
-                                <img className="event-image" src={event.image} />
+                                <img className="event-image" src={event.image?.publicURL} />
                                 <span className='event-info'>
                                     <img src={calendarIcon} /> {event.date}
                                 </span>
@@ -96,4 +60,4 @@ const OpenInfraEventsSection = () => {
     );
 }
 
-export default OpenInfraEventsSection
+export default OpenInfraEventsSection

src/components/MeetupBanner/index.jsx

@@ -6,19 +6,15 @@ import RoundedButton from '../RoundedButton'
 
 import './styles.scss'
 
-const MeetupBanner = () => {
+const MeetupBanner = ({ background, logo, button, text }) => {
     return (
         <section className='container meetup-banner-wrapper'>
             <div className="meetup-banner" style={{ backgroundImage: `url(${background}` }}>
                 <div className='meetup-banner-content'>
-                    <img src={openinfraUserGroup} />
+                    <img src={logo} />
                     <div>
-                        <RoundedButton link="https://www.meetup.com/pro/openinfradev/" text={'find your local meetup'}
-                            className="meetup-banner-button" />
-                        <span>
-                            Interested in hosting a Meetup? <br />
-                            Contact us at <a href='mailto:events@openinfra.dev'>events@openinfra.dev</a>
-                        </span>
+                        <RoundedButton link={button.link} text={button.text} className="meetup-banner-button" />
+                        <span dangerouslySetInnerHTML={{ __html: text }} />
                     </div>
                 </div>
             </div>