3006 Add a news block with the day of the event / News support a List…

… of programmed events

src/components/AdoptiumNews/index.tsx

@@ -5,14 +5,24 @@ import LinkText from '../LinkText'
 // NOTES: 
 // - You can add a <callToActionLink /> tag to create a link in the body
 // - Dates must be with the format: "YYYY-MM-dd"
-const adoptiumNews = {
- title: "Adoptium Summit 2024", 
- body: "Be a part of the first-ever Adoptium Summit on September, 10.<br/>Connect with peers to exchange knowledge on Temurin, AQAvit and other Adoptium's projects.<br/><callToActionLink>Register here</callToActionLink>", 
- callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', 
- date: new Date('2024-09-10'),
- startDisplayAt: new Date('2024-08-01'),
- stopDisplayAfter: new Date('2024-09-09'),
-}
+const adoptiumNewsList = [
+ {
+ title: "Adoptium Summit 2024", 
+ body: "Be a part of the first-ever Adoptium Summit on September, 10.<br/>Connect with peers to exchange knowledge on Temurin, AQAvit and other Adoptium's projects.<br/><callToActionLink>Register here</callToActionLink>", 
+ callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', 
+ date: new Date('2024-09-10'),
+ startDisplayAt: new Date('2024-08-01'),
+ stopDisplayAfter: new Date('2024-09-10'),
+ },
+ {
+ title: "Adoptium Summit 2024", 
+ body: "Join us Today for the first-ever Adoptium Summit.<br/>An opportunity to connect with other Adoptium community members.<br/><callToActionLink>Register here</callToActionLink>", 
+ callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', 
+ date: new Date('2024-09-10'),
+ startDisplayAt: new Date('2024-09-10'),
+ stopDisplayAfter: new Date('2024-09-11'),
+ }
+]
 
 const eventDateOptions = { 
  year: 'numeric', 
@@ -21,42 +31,50 @@ const eventDateOptions = {
  timeZone: "UTC"
 }
 
+function compareNewsByStartDisplayAt(a: AdoptiumNewsItem, b: AdoptiumNewsItem) {
+ return a.startDisplayAt.getTime() - b.startDisplayAt.getTime();
+}
+
 const AdoptiumNews = () => {
 
  const { language } = useI18next();
 
- var eventDateUTC:Date|null = null;
- if(adoptiumNews.date) {
- eventDateUTC = new Date(Date.UTC(
- adoptiumNews.date.getUTCFullYear(), 
- adoptiumNews.date.getUTCMonth(),
- adoptiumNews.date.getUTCDate(), 
- adoptiumNews.date.getUTCHours(),
- adoptiumNews.date.getUTCMinutes(), 
- adoptiumNews.date.getUTCSeconds()));
-
- }
-
  const now = Date.now();
- if(!adoptiumNews || now < adoptiumNews.startDisplayAt.getTime() || now > adoptiumNews.stopDisplayAfter.getTime()) return;
 
  return (
- <div className='p-3 mt-4 mb-4 bg-light rounded-3 text-start'>
- <div className='container py-5'>
- <h2 className='text-pink'>{adoptiumNews.title}</h2>
- <div>
- {eventDateUTC && <p className='m-0 fw-bold'>{(eventDateUTC.toLocaleDateString(language, eventDateOptions))}</p>}
- <p className='text-muted lh-sm'>
- <Trans 
- defaults={adoptiumNews.body} 
- components={{
- callToActionLink: <LinkText href={adoptiumNews.callToActionLink||''} />
- }}
- />
- </p>
- </div>
- </div>
- </div>
+ adoptiumNewsList
+ .filter(adoptiumNews => adoptiumNews.startDisplayAt.getTime() <= now && adoptiumNews.stopDisplayAfter.getTime() > now)
+ .sort(compareNewsByStartDisplayAt)
+ .map((adoptiumNews, index) => {
+ var eventDateUTC:Date|null = null;
+ if(adoptiumNews.date) {
+ eventDateUTC = new Date(Date.UTC(
+ adoptiumNews.date.getUTCFullYear(), 
+ adoptiumNews.date.getUTCMonth(),
+ adoptiumNews.date.getUTCDate(), 
+ adoptiumNews.date.getUTCHours(),
+ adoptiumNews.date.getUTCMinutes(), 
+ adoptiumNews.date.getUTCSeconds()));
+ }
+
+ return (
+ <div key={index} className='p-3 mt-4 mb-4 bg-light rounded-3 text-start'>
+ <div className='container py-5'>
+ <h2 className='text-pink'>{adoptiumNews.title}</h2>
+ <div>
+ {eventDateUTC && <p className='m-0 fw-bold'>{(eventDateUTC.toLocaleDateString(language, eventDateOptions))}</p>}
+ <p className='text-muted lh-sm'>
+ <Trans 
+ defaults={adoptiumNews.body} 
+ components={{
+ callToActionLink: <LinkText href={adoptiumNews.callToActionLink||''} />
+ }}
+ />
+ </p>
+ </div>
+ </div>
+ </div>)
+ })
  );
 };