Skip to content

Commit

Permalink
Add a block for adoptium news on the main page (#2886)
Browse files Browse the repository at this point in the history
* [issue-2862] Add a block for Adoptium news on the main page

* Change for only 1 news

* Create Slice to avoid pb with tests (like the banner)

* Change color / Add test / Date is not mandatory

* issues-2877: promotion of Adoptium Summit CFP

* simplify test

* Fix link name and comments

* Rename file
  • Loading branch information
xavierfacq authored May 30, 2024
1 parent 7206b3c commit f01e08a
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 0 deletions.
5 changes: 5 additions & 0 deletions gatsby-node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
12 changes: 12 additions & 0 deletions src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
53 changes: 53 additions & 0 deletions src/components/AdoptiumNews/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions src/pages/__tests__/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
3 changes: 3 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit f01e08a

Please sign in to comment.