feature: openinfra days page data on CMS

src/cms/cms.js

@@ -26,6 +26,7 @@ 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');
@@ -56,4 +57,5 @@ CMS.registerPreviewTemplate('electionPage', ElectionPagePreview)
 CMS.registerPreviewTemplate('contributors-pages', ContributorsPagePreview)
 CMS.registerPreviewTemplate('annual-report-pages', AnnualReportPagePreview)
 CMS.registerPreviewTemplate('projects-contact', ProjectsContactPagePreview)
-CMS.registerPreviewTemplate('summit-landing-page', SummitLandingPagePreview);
+CMS.registerPreviewTemplate('summit-landing-page', SummitLandingPagePreview);
+CMS.registerPreviewTemplate('openinfra-days', OpenInfraDaysPagePreview)

src/cms/preview-templates/OpenInfraDaysPagePreview.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { OpenInfraDaysPageTemplate } from '../../templates/open-infra-days-page'
+
+const OpenInfraDaysPagePreview = ({ entry, widgetFor }) => {
+  const data = entry.getIn(['data']).toJS()
+
+  const entryUpcomingDaysEvents = entry.getIn(['data', 'upcomingDaysEvents', 'events'])
+  const upcomingDaysEvents = entryUpcomingDaysEvents ? entryUpcomingDaysEvents.toJS() : []
+
+  const entryUpcomingMeetups = entry.getIn(['data', 'upcomingMeetups'])
+  const upcomingMeetups = entryUpcomingMeetups ? entryUpcomingMeetups.toJS() : []
+
+  const entryPastMeetups = entry.getIn(['data', 'pastMeetups'])
+  const pastMeetups = entryPastMeetups ? entryPastMeetups.toJS() : []
+
+  const entryCommunityEvents = entry.getIn(['data', 'communityEvents', 'events'])
+  const communityEvents = entryCommunityEvents ? entryCommunityEvents.toJS() : []
+
+  const entryUpcomingSummits = entry.getIn(['data', 'upcomingSummits'])
+  const upcomingSummits = entryUpcomingSummits ? entryUpcomingSummits.toJS() : []
+
+  if (data) {
+    return (
+      <OpenInfraDaysPageTemplate
+        title={entry.getIn(['data', 'title'])}
+        subTitle={entry.getIn(['data', 'subTitle'])}
+        upcomingDaysEvents={{
+          title: entry.getIn(['data', 'upcomingDaysEvents', 'title']),
+          events: upcomingDaysEvents
+        }}
+        upcomingMeetups={upcomingMeetups}
+        pastMeetups={pastMeetups}
+        communityEvents={{
+          title: entry.getIn(['data', 'communityEvents', 'title']),
+          events: communityEvents
+        }}
+        upcomingSummits={upcomingSummits}
+        isLoggedUser={false}
+      />
+    )
+  } else {
+    return <div>Loading...</div>
+  }
+}
+
+OpenInfraDaysPagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  getAsset: PropTypes.func,
+  widgetFor: PropTypes.func,
+}
+
+export default OpenInfraDaysPagePreview

src/components/MoreEventsSection/index.jsx

@@ -9,39 +9,21 @@ const COLORS = [
   "#28a4db"
 ];
 
-const EVENTS = [
-  {name: "OpenStack 15th Birthday Celebrations!", link: "https://www.openstack.org/blog/celebrating-15-years-of-openstack/", date: "All Year Long", location: "All Around the Globe"},
-  {name: "KubeCon + CloudNativeCon China", link: "https://events.linuxfoundation.org/kubecon-cloudnativecon-china/", date: "June 10-11, 2025", location: "Hong Kong"},
-  {name: "Open Telco Cloud Summit", link: "https://open.telcocloud-summit.com/event/585d8b6f-6494-4698-bb78-840206d3d3fa/summary?rt=svQDGBmL7k24CyoTCtWc2Q", date: "June 12, 2025", location: "Virtual"},
-  {name: "KubeCon + CloudNativeCon Japan", link: "https://events.linuxfoundation.org/kubecon-cloudnativecon-japan/", date: "June 16-17, 2025", location: "Tokyo, JP"},
-  {name: "Open Source Summit NA", link: "https://events.linuxfoundation.org/open-source-summit-north-america/ ", date: "June 23-25, 2025", location: "Denver, CO"},
-  {name: "OpenInfra Day Vietnam", link: "https://www.vietopeninfra.org/void2025  ", date: "June 28, 2025", location: "Ho Chi Minh, VN "},
-  {name: "OpenInfra Day Korea", link: "https://2025.openinfradays.kr/", date: "August 26, 2025", location: "Seoul, KR"},
-  {name: "Cloud Operator Days Tokyo", link: "https://cloudopsdays.com/", date: "July 3 - September 5, 2025", location: "Tokyo, JP"},
-  {name: "OpenInfra Days Indonesia", link: "https://www.linkedin.com/posts/openinfraid_openinfra-oid2025-openinfraid-ugcPost-7319909725951643648-UeNl/?utm_source=share&utm_medium=member_desktop&rcm=ACoAACkFmC4BAjY_ZaQQLbuPSV1vjFRU6hVE5Pk", date: "July 19, 2025", location: "Yogyakarta, ID"},
-  {name: "OpenInfra User Group Colombia at KCD", link: "https://www.meetup.com/colombia-openinfra-user-group/events/307096751/", date: "August 29, 2025", location: "Bogotá, CO"},
-  {name: "OpenInfra Summit Europe 2025", link: "https://summit2025.openinfra.org/", date: "October 17-19, 2025", location: "Paris-Saclay, FR"},
-  {name: "PyTorch Conference 2025", link: "https://events.linuxfoundation.org/pytorch-conference/?__hstc=132719121.0b101d54206edc20977df92c2e1046c4.1742517488370.1742517488370.1742517488370.1&__hssc=132719121.2.1742517488370&__hsfp=1219773955", date: "October 22-23, 2025", location: "San Francisco, CA"},
-  {name: "KubeCon EU + CloudNativeCon NA", link: "https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/", date: "November 10-13", location: "Atlanta, GA"},
-];
-
-const MoreEventsSection = () => {
+const MoreEventsSection = ({ title, events }) => {
   return (
     <section className="more-events-section-wrapper" id="community-events">
       <div className="container">
-        <h1 className="title">
-          More Open Source Community Events
-        </h1>
+        <h1 className="title" dangerouslySetInnerHTML={{ __html: title }} />
         <div className="more-agenda-list">
-          {EVENTS.map((event, idx) => (
-            <div className="agenda-row" style={{borderLeftColor: COLORS[idx % 4]}}>
+          {events.map((event, idx) => (
+            <div className="agenda-row" style={{ borderLeftColor: COLORS[idx % 4] }}>
               <div className="agenda-name">
                 {event.link ?
                   <>
                     <LinkComponent href={event.link}>{event.name}</LinkComponent>
                   </>
                   :
-                event.name}
+                  event.name}
               </div>
               <div className="agenda-date">
                 <img src="/img/openinfra-days/calendar.svg" alt="date" />

src/components/OpeninfraDays/OpeninfraDaysCard/index.jsx

@@ -12,7 +12,7 @@ const OpenInfraDaysCard = ({background, name, date, location, coming_soon, link
   return (
     <LinkComponent href={link}>
       <div className="openinfra-days-card-wrapper">
-        <div className="top" style={{backgroundImage: `url(${background})`}}>
+        <div className="top" style={{backgroundImage: `url(${background.publicURL || background})`}}>
           {name &&
             <>
               <img src={logo}/>

src/components/OpeninfraDaysAgenda/index.jsx

@@ -1,51 +1,49 @@
 import React from 'react'
-import {StaticImage} from "gatsby-plugin-image";
+import { StaticImage } from "gatsby-plugin-image";
 import './styles.scss';
 import RoundedButton from '../RoundedButton';
 
-const OpeninfraDaysAgenda = ({title = "", items, learnMoreLink}) => {
+const OpeninfraDaysAgenda = ({ title = "", items, learnMoreLink }) => {
   return (
     <section id="upcoming-events" className="special-edition-section-wrapper">
       <div className="container">
-        <h1 className="title">
-          {title}
-        </h1>
+        <h1 className="title" dangerouslySetInnerHTML={{ __html: title }} />
         <div className="agenda-wrapper">
           <div className="agenda-header">
             <StaticImage src="../../../static/img/openinfra-days/days-asia.png"
-                         alt="asia-days"/>
+              alt="asia-days" />
           </div>
           <div className="agenda-body">
             {items.map(day => (
               <div className="agenda-item">
-                <h4 className="agenda-title">{day.title}</h4>
+                <h4 className="agenda-title" dangerouslySetInnerHTML={{ __html: day.title }} />
                 {day.date &&
                   <p className="agenda-info">
-                    <img src="/img/openinfra-days/calendar.svg" alt="date"/>
+                    <img src="/img/openinfra-days/calendar.svg" alt="date" />
                     {day.date}
                   </p>
                 }
                 {day.location &&
                   <p className="agenda-info">
-                    <img src="/img/openinfra-days/location.svg" alt="location"/>
-                    <span dangerouslySetInnerHTML={{__html: day.location}}/>
+                    <img src="/img/openinfra-days/location.svg" alt="location" />
+                    <span dangerouslySetInnerHTML={{ __html: day.location }} />
                   </p>
                 }
                 {day.registration &&
                   <p className="agenda-info">
-                    <img src="/img/openinfra-days/arrow_forward.svg" alt="registration" width="24" height="24"/>
-                    <span dangerouslySetInnerHTML={{__html: day.registration}}/>
+                    <img src="/img/openinfra-days/arrow_forward.svg" alt="registration" width="24" height="24" />
+                    <span dangerouslySetInnerHTML={{ __html: day.registration }} />
                   </p>
                 }
                 {day.sponsor &&
                   <p className="agenda-info">
-                    <img src="/img/openinfra-days/arrow_forward.svg" alt="sponsor" width="24" height="24"/>
-                    <span dangerouslySetInnerHTML={{__html: day.sponsor}}/>
+                    <img src="/img/openinfra-days/arrow_forward.svg" alt="sponsor" width="24" height="24" />
+                    <span dangerouslySetInnerHTML={{ __html: day.sponsor }} />
                   </p>
                 }
                 {day.coming_soon &&
                   <p className="agenda-info">
-                    <img src="/img/openinfra-days/soon.svg" alt="soon"/>
+                    <img src="/img/openinfra-days/soon.svg" alt="soon" />
                     More info coming soon
                   </p>
                 }
@@ -54,7 +52,7 @@ const OpeninfraDaysAgenda = ({title = "", items, learnMoreLink}) => {
           </div>
         </div>
         {learnMoreLink &&
-          <RoundedButton link={learnMoreLink} text="learn more" className="button"/>
+          <RoundedButton link={learnMoreLink} text="learn more" className="button" />
         }
       </div>
     </section>

src/pages/days/index.md

@@ -4,10 +4,131 @@ seo:
   description: >-
     A special event close to your city
   image: /img/OpenInfra-icon-white.jpg
-  title: 'OpenInfra Days'
-  twitterUsername: '@OpenInfraDev'
-  url: 'https://openinfra.dev/days'
+  title: "OpenInfra Days"
+  twitterUsername: "@OpenInfraDev"
+  url: "https://openinfra.dev/days"
 title: OpenInfra Days
 subTitle: by the community, for the community
+upcomingDaysEvents:
+  title: |
+    <span class="red">Upcoming</span><br />Openinfra Days
+  events:
+    - title: |
+        <a href="https://www.vietopeninfra.org/void2025" target="_blank">OpenInfra Days Vietnam</a>
+      date: "July 26, 2025"
+      location: "Hanoi, VN"
+      registration: |
+        <a href="https://docs.google.com/forms/d/e/1FAIpQLSc99Cuh4U7JXYmUqkv74jjz_Fq984Q_YP-HKAv8hiad62AWrA/viewform" target="_blank">The CFP closes June 15</a>
+      sponsor: |
+        <a href="https://tinyurl.com/VOI2025" target="_blank">Sponsor this event</a>
+    - title: |
+        <a href="https://2025.openinfra.id/" target="_blank">OpenInfra Days Indonesia</a>
+      date: "July 19, 2025"
+      location: "Yogyakarta, ID"
+      registration: |
+        <a href="https://docs.google.com/forms/d/e/1FAIpQLSeeiUkMOQ1fEWhuTXIuqlEKudDjp7_pqcC3bGbRpxIU2-S2fg/viewform" target="_blank">The CFP closes June 27</a>
+      sponsor: |
+        <a href="https://2025.openinfra.id/files/OID25-Sponsorship_Prospectus_20250515.pdf" target="_blank">Sponsor this event</a>
+    - title: |
+        <a href="https://openinfradays.kr/" target="_blank">OpenInfra Days Korea</a>
+      date: "August 26th, 2025"
+      location: "Seoul, KR"
+      registration: |
+        <a href="https://forms.gle/mCNKfsM4vUfPna3B6" target="_blank">The CFP closes June 15</a>
+      sponsor: |
+        <a href="mailto:sponsor@openinfradays.kr" target="_blank">Sponsor this event</a>
+    - title: |
+        <a href="https://sessionize.com/kcd-hangzhou-and-oicd-2025/" target="_blank">OpenInfra Days China</a>
+      date: "November 15, 2025"
+      location: "Hangzhou, CN"
+      registration: |
+        '<a href="https://sessionize.com/kcd-hangzhou-and-oicd-2025/" target="_blank">The CFP closes September 21</a>'
+    - title: |
+        <a href="https://cloudopsdays.com/" target="_blank">Cloud Operator Days Tokyo</a>
+      date: "July 2025 (Online Sessions Available), Sept 5, 2025 (Closing Ceremony)"
+      location: "Tokyo, JP"
+      registration: |
+        <a href="https://docs.google.com/forms/d/e/1FAIpQLSejRuQZvcWa0QDIcz01yP1DscVOrtPYPYHP2T0os0wUDx-LCg/viewform" target="_blank">The CFP closes April 30</a>
+      sponsor: |
+        <a href="https://cloudopsdays.com/wp-content/uploads/2025/03/CODT2025_sponsorship_en.pdf" target="_blank">Sponsor this event</a>
+upcomingMeetups:
+  - background: /img/openinfra-days/openinfra-days-cards/kenya_3.svg
+    date: "September 6, 2025"
+    location: "Nairobi, Kenya"
+    link: "https://www.meetup.com/kenya-openinfra-user-group/"
+pastMeetups:
+  - background: /img/openinfra-days/openinfra-days-cards/sweden-meetup.svg
+    date: "May 22, 2025"
+    location: "Stockholm, Sweden"
+    link: "https://www.meetup.com/openinfra-user-group-sweden/events/306139678/"
+  - background: /img/openinfra-days/openinfra-days-cards/oid-pasadena.png
+    name: "North America"
+    date: "March 6 & 7, 2025"
+    location: "Pasadena, California"
+    link: "https://www.youtube.com/live/W9OmGdtJAAE?si=OO_WjYr7A6ktAv5A"
+communityEvents:
+  title: "More Open Source Community Events"
+  events:
+    - name: "OpenStack 15th Birthday Celebrations!"
+      link: "https://www.openstack.org/blog/celebrating-15-years-of-openstack/"
+      date: "All Year Long"
+      location: "All Around the Globe"
+    - name: "KubeCon + CloudNativeCon China"
+      link: "https://events.linuxfoundation.org/kubecon-cloudnativecon-china/"
+      date: "June 10-11, 2025"
+      location: "Hong Kong"
+    - name: "Open Telco Cloud Summit"
+      link: "https://open.telcocloud-summit.com/event/585d8b6f-6494-4698-bb78-840206d3d3fa/summary?rt=svQDGBmL7k24CyoTCtWc2Q"
+      date: "June 12, 2025"
+      location: "Virtual"
+    - name: "KubeCon + CloudNativeCon Japan"
+      link: "https://events.linuxfoundation.org/kubecon-cloudnativecon-japan/"
+      date: "June 16-17, 2025"
+      location: "Tokyo, JP"
+    - name: "Open Source Summit NA"
+      link: "https://events.linuxfoundation.org/open-source-summit-north-america/ "
+      date: "June 23-25, 2025"
+      location: "Denver, CO"
+    - name: "OpenInfra Day Vietnam"
+      link: "https://www.vietopeninfra.org/void2025  "
+      date: "June 28, 2025"
+      location: "Ho Chi Minh, VN "
+    - name: "OpenInfra Day Korea"
+      link: "https://2025.openinfradays.kr/"
+      date: "August 26, 2025"
+      location: "Seoul, KR"
+    - name: "Cloud Operator Days Tokyo"
+      link: "https://cloudopsdays.com/"
+      date: "July 3 - September 5, 2025"
+      location: "Tokyo, JP"
+    - name: "OpenInfra Days Indonesia"
+      link: "https://www.linkedin.com/posts/openinfraid_openinfra-oid2025-openinfraid-ugcPost-7319909725951643648-UeNl/?utm_source=share&utm_medium=member_desktop&rcm=ACoAACkFmC4BAjY_ZaQQLbuPSV1vjFRU6hVE5Pk"
+      date: "July 19, 2025"
+      location: "Yogyakarta, ID"
+    - name: "OpenInfra User Group Colombia at KCD"
+      link: "https://www.meetup.com/colombia-openinfra-user-group/events/307096751/"
+      date: "August 29, 2025"
+      location: "Bogotá, CO"
+    - name: "OpenInfra Summit Europe 2025"
+      link: "https://summit2025.openinfra.org/"
+      date: "October 17-19, 2025"
+      location: "Paris-Saclay, FR"
+    - name: "PyTorch Conference 2025"
+      link: "https://events.linuxfoundation.org/pytorch-conference/?__hstc=132719121.0b101d54206edc20977df92c2e1046c4.1742517488370.1742517488370.1742517488370.1&__hssc=132719121.2.1742517488370&__hsfp=1219773955"
+      date: "October 22-23, 2025"
+      location: "San Francisco, CA"
+    - name: "KubeCon EU + CloudNativeCon NA"
+      link: "https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/"
+      date: "November 10-13"
+      location: "Atlanta, GA"
+upcomingSummits:
+  - key: "europe-25"
+    background: /img/summit-landing/cards/summit-europe-25-2.png
+    date: "October 17-19, 2025"
+    location: "École Polytechnique, Paris-Saclay, France"
+    notification:
+      text: " "
+      button:
+        link: "https://summit2025.openinfra.org"
+        text: "Learn More"
 ---
-