Add a block for adoptium news on the main page

gatsby-node.ts

@@ -292,6 +292,11 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions
     component: path.resolve('src', 'components', 'Banner', 'index.tsx'),
   })
 
+  createSlice({
+    id: 'adoptiumNews',
+    component: path.resolve('src', 'components', 'AdoptiumNews', 'index.tsx'),
+  })
+
   // create slice for AuthorBio
   for (const author of Object.keys(authors)) {
     createSlice({

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest'
+import AdoptiumNews from '..';
+
+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();
+  });
+});

src/components/AdoptiumNews/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import moment from 'moment';
+import { Trans } from 'gatsby-plugin-react-i18next';
+import LinkText from '../LinkText'
+
+const AdoptiumNews = () => {
+
+    // 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-05-15'),
+        stopDisplayAfter: new Date('2024-06-30'),
+    }
+
+    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>
+                    {adoptiumNews.date && <p className='m-0 fw-bold'>{moment(adoptiumNews.date).format('D MMMM YYYY')}</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

@@ -126,6 +126,9 @@ exports[`Index page > renders correctly 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="slice--adoptiumNews"
+    />
     <div
       class="p-3 mt-4 mb-4 bg-light rounded-3 text-start"
     >

src/pages/index.tsx

@@ -6,6 +6,8 @@ import { StaticImage } from 'gatsby-plugin-image'
 import Layout from '../components/Layout'
 import Seo from '../components/Seo'
 import LatestTemurin from '../components/LatestTemurin'
+import AdoptiumNews from '../components/AdoptiumNews'
+import { Slice } from 'gatsby'
 
 const IndexPage = ({data}) => {
   const latestLTS = data.mostRecentLts.version
@@ -43,6 +45,7 @@ const IndexPage = ({data}) => {
             </div>
           </div>
         </div>
+        <Slice alias='adoptiumNews' />
         <div className='p-3 mt-4 mb-4 bg-light rounded-3 text-start'>
           <div className='container py-5'>
             <h2 className='text-pink'><Trans>The Adoptium&reg; Working Group</Trans></h2>