[issue-2862] add a block for adoptium news on the main page

gatsby-node.ts

@@ -345,6 +345,11 @@ export const createPages: GatsbyNode["createPages"] = async ({
     component: path.resolve("src", "components", "Footer", "index.tsx"),
   })
 
+  createSlice({
+    id: 'adoptiumNews',
+    component: path.resolve('src', 'components', 'AdoptiumNews', 'index.tsx'),
+  })
+
   createSlice({
     id: "banner",
     component: path.resolve("src", "components", "Banner", "index.tsx"),

src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AdoptiumNews component > renders correctly with provided news 1`] = `
+<div>
+  <div
+    class="p-3 mt-4 mb-4 bg-light rounded-3 text-start"
+  >
+    <div
+      class="container py-5"
+    >
+      <h2
+        class="text-pink"
+      >
+        Mocked News 1
+      </h2>
+      <div>
+        <p
+          class="m-0 fw-bold"
+        >
+          September 10, 2024
+        </p>
+        <p
+          class="text-muted lh-sm"
+        >
+          Text
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="p-3 mt-4 mb-4 bg-light rounded-3 text-start"
+  >
+    <div
+      class="container py-5"
+    >
+      <h2
+        class="text-pink"
+      >
+        Mocked News 2
+      </h2>
+      <div>
+        <p
+          class="m-0 fw-bold"
+        >
+          September 10, 2024
+        </p>
+        <p
+          class="text-muted lh-sm"
+        >
+          Text
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import AdoptiumNews from '..'
+
+const mockedItems = [
+  {
+      title: "Mocked News 1", 
+      body: "Be a part of the Adoptium", 
+      date: new Date('2024-09-10'),
+      startDisplayAt: new Date('2024-01-01'),
+      stopDisplayAfter: new Date('2050-12-31'),
+  },
+  {
+      title: "Mocked News 2", 
+      body: "I love Adoptium.<br/><callToActionLink>Go here</callToActionLink>", 
+      callToActionLink: 'https://adoptium.net/', 
+      date: new Date('2024-09-10'),
+      startDisplayAt: new Date('2024-01-01'),
+      stopDisplayAfter: new Date('2050-12-31'),
+  }
+]
+
+describe('AdoptiumNews component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<AdoptiumNews />)
+    // expect container to either be null or contain a div with the class of alert
+    expect(container).toBeNull || expect(container.querySelector('div.text-pink')).toBeTruthy()
+  })
+
+  it('renders correctly with provided news', () => {
+    const { container } = render(<AdoptiumNews adoptiumNewsList={mockedItems} />)
+
+    expect(container).toMatchSnapshot()
+  })
+})

src/components/AdoptiumNews/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Trans, useI18next } from 'gatsby-plugin-react-i18next'
+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 predefinedAdoptiumNewsList = [
+    {
+        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-10-12'),
+    }
+]
+
+const eventDateOptions = { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric', 
+    timeZone: "UTC"
+}
+
+interface Props {
+    adoptiumNewsList?: AdoptiumNewsItem[]
+  }
+
+function compareNewsByStartDisplayAt(a: AdoptiumNewsItem, b: AdoptiumNewsItem) {
+    return a.startDisplayAt.getTime() - b.startDisplayAt.getTime()
+}
+
+const AdoptiumNews = ({ adoptiumNewsList }: Props) => {
+
+    const adoptiumNewsListToDisplay = adoptiumNewsList ? adoptiumNewsList : predefinedAdoptiumNewsList
+
+    const { language } = useI18next()
+
+    const now = Date.now()
+
+    return (
+        adoptiumNewsListToDisplay
+            .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>)
+            })
+    );
+};
+
+export default AdoptiumNews
+
+export interface AdoptiumNewsItem {
+    title: string
+    body: string
+    date?: Date
+    callToActionLink?: string
+    startDisplayAt: Date
+    stopDisplayAfter: Date
+}

src/pages/__tests__/__snapshots__/index.test.tsx.snap

@@ -1455,6 +1455,9 @@ exports[`Index page > renders correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="slice--adoptiumNews"
+  />
   <div
     class="bg-blue py-24 sm:py-28"
   >

src/pages/index.tsx

@@ -14,6 +14,7 @@ import Testimonials from "../components/Testimonials"
 import LatestNews from "../components/LatestNews"
 import FAQ from "../components/FAQ"
 import Contributors from "../components/Contributors/home"
+import { Slice } from 'gatsby'
 
 const Index = ({ data }) => {
   return (
@@ -40,6 +41,7 @@ const Index = ({ data }) => {
       <PowerOfTemurin />
       <DownloadCounter />
       <TemurinFeatures />
+      <Slice alias='adoptiumNews' />
       <WGProjects />
       <Testimonials />
       <LatestNews />