From da4b494a9b3bacc33eecb1f521f6044d625c0044 Mon Sep 17 00:00:00 2001 From: George Adams Date: Wed, 29 Mar 2023 14:09:35 +0100 Subject: [PATCH 01/13] add adopters page and brand carousel to homepage --- .../__tests__/BrandCarousel.test.tsx | 14 ++ .../__snapshots__/BrandCarousel.test.tsx.snap | 167 +++++++++++++++++ src/components/BrandCarousel/index.tsx | 79 ++++++++ src/components/NavBar/index.tsx | 1 + .../__snapshots__/adopters.test.tsx.snap | 51 ++++++ .../__snapshots__/index.test.tsx.snap | 171 ++++++++++++++++++ src/pages/__tests__/adopters.test.tsx | 45 +++++ src/pages/__tests__/members.test.tsx | 2 +- src/pages/__tests__/sponsors.test.tsx | 2 +- src/pages/adopters.tsx | 60 ++++++ src/pages/index.tsx | 6 + src/pages/members.tsx | 4 +- 12 files changed, 598 insertions(+), 4 deletions(-) create mode 100644 src/components/BrandCarousel/__tests__/BrandCarousel.test.tsx create mode 100644 src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap create mode 100644 src/components/BrandCarousel/index.tsx create mode 100644 src/pages/__tests__/__snapshots__/adopters.test.tsx.snap create mode 100644 src/pages/__tests__/adopters.test.tsx create mode 100644 src/pages/adopters.tsx diff --git a/src/components/BrandCarousel/__tests__/BrandCarousel.test.tsx b/src/components/BrandCarousel/__tests__/BrandCarousel.test.tsx new file mode 100644 index 000000000..ea786a844 --- /dev/null +++ b/src/components/BrandCarousel/__tests__/BrandCarousel.test.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest' +import BrandCarousel from '../index'; + +describe('BrandCarousel component', () => { + it('should render correctly', () => { + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap b/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap new file mode 100644 index 000000000..35f91c240 --- /dev/null +++ b/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap @@ -0,0 +1,167 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`BrandCarousel component > should render correctly 1`] = ` +
+
+
+
+
+
+
+
+ Brand logo 1 +
+
+ Brand logo 2 +
+
+ Brand logo 3 +
+
+ Brand logo 4 +
+
+ Brand logo 5 +
+
+ Brand logo 6 +
+
+
+
+
+
+ Brand logo 7 +
+
+ Brand logo 8 +
+
+ Brand logo 9 +
+
+ Brand logo 10 +
+
+ Brand logo 11 +
+
+ Brand logo 12 +
+
+
+
+
+
+`; diff --git a/src/components/BrandCarousel/index.tsx b/src/components/BrandCarousel/index.tsx new file mode 100644 index 000000000..2c21cf547 --- /dev/null +++ b/src/components/BrandCarousel/index.tsx @@ -0,0 +1,79 @@ +import React, { useState, useEffect } from "react"; +import Carousel from "react-bootstrap/Carousel"; +import Col from "react-bootstrap/Col"; +import Row from "react-bootstrap/Row"; + +const BrandCarousel = () => { + const logos = [ + "microsoft.svg", // Replace with your logo image file names + "ibm-logo.png", + "bloomberg.svg", + "huawei.svg", + "macstadium.png", + "redhat.svg", + "google.svg", + ]; + + const [slidesToShow, setSlidesToShow] = useState(1); + + const getSlidesToShow = () => { + // if window is defined, get the width of the screen else return 1200 for CI testing + const screenWidth = + typeof window !== "undefined" ? window.innerWidth : 1200; + if (screenWidth >= 992) { + return 6; + } else { + return 2; + } + }; + + useEffect(() => { + setSlidesToShow(getSlidesToShow()); + }, []); + + const interval = slidesToShow === 1 ? 2000 : 5000; // Set interval based on slidesToShow value + const logosToAdd = + (slidesToShow - (logos.length % slidesToShow)) % slidesToShow; // Calculate number of logos to add for complete row + const logosToDisplay = [...logos, ...logos.slice(0, logosToAdd)]; // Create new array with logos to display + + return ( + + {logosToDisplay.map((logo, index) => { + if (index % slidesToShow === 0) { + return ( + + + {logosToDisplay + .slice(index, index + slidesToShow) + .map((logo, subIndex) => ( + + {`Brand + + ))} + + + ); + } else { + return null; + } + })} + + ); +}; + +export default BrandCarousel; diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index a1b9ffbee..8b105f74b 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -80,6 +80,7 @@ const NavBar = (): JSX.Element => {
  • About
  • Members
  • Sponsors
    • +
  • Temurin Adopters
  • Promote
  • API
  • Blog
    • diff --git a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap new file mode 100644 index 000000000..71b87e946 --- /dev/null +++ b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap @@ -0,0 +1,51 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Adopters page > renders correctly 1`] = ` +
    +
    +
    +
    +

    + Eclipse Temurin™ Adopters Page +

    +

    + Companies that use Eclipse Temurin in production. +

    +
    +
    +
    + + mock_member logo + +
    +
    +
    +
    +
    +
    +
    +`; diff --git a/src/pages/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/__tests__/__snapshots__/index.test.tsx.snap index 5c5c2cdf5..f2b6ed394 100644 --- a/src/pages/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/index.test.tsx.snap @@ -106,6 +106,177 @@ exports[`Index page > renders correctly 1`] = ` + +

    + The largest companies in the world trust Eclipse Temurin for their Java workloads +

    +
    +
    +
    +
    +
    +
    +
    + Brand logo 1 +
    +
    + Brand logo 2 +
    +
    + Brand logo 3 +
    +
    + Brand logo 4 +
    +
    + Brand logo 5 +
    +
    + Brand logo 6 +
    +
    +
    +
    +
    +
    + Brand logo 7 +
    +
    + Brand logo 8 +
    +
    + Brand logo 9 +
    +
    + Brand logo 10 +
    +
    + Brand logo 11 +
    +
    + Brand logo 12 +
    +
    +
    +
    +
    +
    diff --git a/src/pages/__tests__/adopters.test.tsx b/src/pages/__tests__/adopters.test.tsx new file mode 100644 index 000000000..78db42a45 --- /dev/null +++ b/src/pages/__tests__/adopters.test.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest' +import { axe } from 'vitest-axe'; +import Adopters, { Head } from '../adopters'; + +vi.mock('../../util/shuffle', () => { + return { + shuffle: (array) => { + array = [ + { + name: 'mock_member', + logo: 'mock_logo.png', + url: 'https://mock.com', + tier: 'mock_tier', + } + ] + return array + } + }; +}); + +describe('Adopters page', () => { + it('renders correctly', () => { + const { container } = render(); + + // eslint-disable-next-line + const pageContent = container.querySelector('main'); + + expect(pageContent).toMatchSnapshot(); + }); + + it('head renders correctly', () => { + const { container } = render(); + // eslint-disable-next-line + const title = container.querySelector('title'); + expect(title?.textContent).toEqual('Eclipse Temurin Adopters Page | Adoptium'); + }); + + it('has no accessibility violations', async () => { + const { container } = render(); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/src/pages/__tests__/members.test.tsx b/src/pages/__tests__/members.test.tsx index ee68e020a..61784ed54 100644 --- a/src/pages/__tests__/members.test.tsx +++ b/src/pages/__tests__/members.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest' import { axe } from 'vitest-axe'; import Members, { Head } from '../members'; diff --git a/src/pages/__tests__/sponsors.test.tsx b/src/pages/__tests__/sponsors.test.tsx index 274cad823..7f424646c 100644 --- a/src/pages/__tests__/sponsors.test.tsx +++ b/src/pages/__tests__/sponsors.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest' import { axe } from 'vitest-axe'; import Sponsors, { Head } from '../sponsors'; diff --git a/src/pages/adopters.tsx b/src/pages/adopters.tsx new file mode 100644 index 000000000..9af559c2d --- /dev/null +++ b/src/pages/adopters.tsx @@ -0,0 +1,60 @@ +import * as React from 'react' +import { graphql } from 'gatsby' + +import { MembersProps } from './members' +import Layout from '../components/Layout' +import Seo from '../components/Seo' +import MembersGrid from '../components/MembersGrid' +import { shuffle } from '../util/shuffle' + +let adopters: MembersProps[] = [ + { + "name": "Red Hat", + "logo": "redhat.svg", + "tier": "adopter" + }, + { + "name": "Microsoft", + "logo": "microsoft.svg", + "tier": "adopter" + }, +] + +// Randomly mix up adopters logos +adopters = shuffle(adopters) + +const AdoptersPage = () => ( + +
    +
    +
    +

    Eclipse Temurin™ Adopters Page

    +

    Companies that use Eclipse Temurin in production.

    + +
    +
    +
    +     +) + +export default AdoptersPage + +export const Head = () => ( + +) + +export const query = graphql` + query ($language: String!) { + locales: allLocale(filter: {language: {eq: $language}}) { + edges { + node { + ns + data + language + } + } + } + } +` diff --git a/src/pages/index.tsx b/src/pages/index.tsx index bd9f6366d..da71e86d2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,6 +3,7 @@ import { graphql } from 'gatsby' import { Link, Trans } from 'gatsby-plugin-react-i18next' import { StaticImage } from 'gatsby-plugin-image' +import BrandCarousel from '../components/BrandCarousel' import Layout from '../components/Layout' import Seo from '../components/Seo' import LatestTemurin from '../components/LatestTemurin' @@ -42,6 +43,11 @@ const IndexPage = () => {
    +
    + {/* align the below text in the center */} +

    The largest companies in the world trust Eclipse Temurin for their Java workloads

    + +

    The Adoptium® Working Group

    diff --git a/src/pages/members.tsx b/src/pages/members.tsx index 0a3cbbfb1..02ae40d0b 100644 --- a/src/pages/members.tsx +++ b/src/pages/members.tsx @@ -80,9 +80,9 @@ export const query = graphql` } } ` -interface MembersProps { +export interface MembersProps { name: string; logo: string; - url: string; + url?: string; tier: string; } From 281fab0f24efd8aa162a63f1f35b9ccde41c787c Mon Sep 17 00:00:00 2001 From: George Adams Date: Wed, 29 Mar 2023 15:31:20 +0100 Subject: [PATCH 02/13] swtich to using JSON file and write automated bot --- .github/workflows/check-adopters.yml | 36 +++++++++++++++++++ .github/workflows/fetch-adopters.py | 52 ++++++++++++++++++++++++++++ src/json/adopters.json | 12 +++++++ src/pages/adopters.tsx | 15 ++------ 4 files changed, 103 insertions(+), 12 deletions(-) create mode 100644 .github/workflows/check-adopters.yml create mode 100755 .github/workflows/fetch-adopters.py create mode 100644 src/json/adopters.json diff --git a/.github/workflows/check-adopters.yml b/.github/workflows/check-adopters.yml new file mode 100644 index 000000000..27ae043dd --- /dev/null +++ b/.github/workflows/check-adopters.yml @@ -0,0 +1,36 @@ +name: Adopters Updater + +# // Run on cron every 12 hours +on: + schedule: + - cron: '0 */12 * * *' + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +permissions: + contents: write + +jobs: + check_adopters: + if: github.repository_owner == 'adoptium' + name: Temurin Adopters + runs-on: ubuntu-latest + steps: + + - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0 + + - run: python3 .github/workflows/fetch-adopters.py + + - uses: gr2m/create-or-update-pull-request-action@dc1726cbf4dd3ce766af4ec29cfb660e0125e8ee # v1 + env: + GITHUB_TOKEN: ${{ secrets.ADOPTIUM_BOT_TOKEN }} + with: + title: "Update Project Adopters" + body: "This is an automatically generated pull request, it will be automatically merged if all the CI tests pass." + path: "/" + branch: "adopters_bot" + commit-message: "adopters: update temurin adopters" + labels: automerge + author: "adoptium-bot " diff --git a/.github/workflows/fetch-adopters.py b/.github/workflows/fetch-adopters.py new file mode 100755 index 000000000..227c71cd7 --- /dev/null +++ b/.github/workflows/fetch-adopters.py @@ -0,0 +1,52 @@ +#!/usr/bin/env python3 + +import json +import os +import requests + +def check_value(data, val): + return any(adopter['name']==val for adopter in data) + +# Load the local Adopters JSON file in src/json/adopters.json +with open('src/json/adopters.json') as f: + data = list(json.load(f)) + current_adopters = data + +page = requests.get( + "https://api.eclipse.org/adopters/projects?working_group=adoptium".format( + **locals() + ) +) + +# Find project with project_id for temurin +temurin_project = next( + (project for project in page.json() if project["project_id"] == "adoptium.temurin"), + None, +) + +# check if temurin_project is not None (it will be until the API is added) +if temurin_project is not None: + # Loop through Adopters and print their names + for adopter in temurin_project['adopters']: + # check if adopter['name'] is already in src/json/adopters.json + if not check_value(current_adopters, adopter['name']): + adopter_logo = "https://api.eclipse.org/adopters/assets/images/adopters/" + adopter['logo'] + # add adopter to src/json/adopters.json + new_adopter = { + "name": adopter['name'], + "logo": "adopters/" + adopter['logo'], + "tier": "adopter" + } + current_adopters.append(new_adopter) + + # Download the logo and save it to static/images/adopters/ + logo = requests.get(adopter_logo) + # check if static/images/adopters/ exists + if not os.path.exists('static/images/adopters/'): + os.makedirs('static/images/adopters/') + open('static/images/adopters/' + adopter['logo'], 'wb').write(logo.content) + + # Write the updated list of adopters to src/json/adopters.json + with open('src/json/adopters.json', 'w') as f: + # format JSON to be human readable + json.dump(current_adopters, f, indent=4) diff --git a/src/json/adopters.json b/src/json/adopters.json new file mode 100644 index 000000000..66a56f1d6 --- /dev/null +++ b/src/json/adopters.json @@ -0,0 +1,12 @@ +[ + { + "name": "Microsoft", + "logo": "microsoft.svg", + "tier": "adopter" + }, + { + "name": "Red Hat", + "logo": "redhat.svg", + "tier": "adopter" + } +] \ No newline at end of file diff --git a/src/pages/adopters.tsx b/src/pages/adopters.tsx index 9af559c2d..05074c048 100644 --- a/src/pages/adopters.tsx +++ b/src/pages/adopters.tsx @@ -7,18 +7,9 @@ import Seo from '../components/Seo' import MembersGrid from '../components/MembersGrid' import { shuffle } from '../util/shuffle' -let adopters: MembersProps[] = [ - { - "name": "Red Hat", - "logo": "redhat.svg", - "tier": "adopter" - }, - { - "name": "Microsoft", - "logo": "microsoft.svg", - "tier": "adopter" - }, -] +import Adopters from '../json/adopters.json' + +let adopters: MembersProps[] = Adopters // Randomly mix up adopters logos adopters = shuffle(adopters) From 80305168a01be5402f3766f4df5da11f94d66b92 Mon Sep 17 00:00:00 2001 From: George Adams Date: Wed, 29 Mar 2023 16:10:47 +0100 Subject: [PATCH 03/13] add how to get listed instructions --- .github/workflows/fetch-adopters.py | 32 ++++--- .../__snapshots__/adopters.test.tsx.snap | 92 +++++++++++++++++++ src/pages/adopters.tsx | 85 +++++++++++++++-- 3 files changed, 187 insertions(+), 22 deletions(-) diff --git a/.github/workflows/fetch-adopters.py b/.github/workflows/fetch-adopters.py index 227c71cd7..d70a15c24 100755 --- a/.github/workflows/fetch-adopters.py +++ b/.github/workflows/fetch-adopters.py @@ -2,13 +2,16 @@ import json import os + import requests + def check_value(data, val): - return any(adopter['name']==val for adopter in data) + return any(adopter["name"] == val for adopter in data) + # Load the local Adopters JSON file in src/json/adopters.json -with open('src/json/adopters.json') as f: +with open("src/json/adopters.json") as f: data = list(json.load(f)) current_adopters = data @@ -27,26 +30,29 @@ def check_value(data, val): # check if temurin_project is not None (it will be until the API is added) if temurin_project is not None: # Loop through Adopters and print their names - for adopter in temurin_project['adopters']: + for adopter in temurin_project["adopters"]: # check if adopter['name'] is already in src/json/adopters.json - if not check_value(current_adopters, adopter['name']): - adopter_logo = "https://api.eclipse.org/adopters/assets/images/adopters/" + adopter['logo'] + if not check_value(current_adopters, adopter["name"]): + adopter_logo = ( + "https://api.eclipse.org/adopters/assets/images/adopters/" + + adopter["logo"] + ) # add adopter to src/json/adopters.json new_adopter = { - "name": adopter['name'], - "logo": "adopters/" + adopter['logo'], - "tier": "adopter" + "name": adopter["name"], + "logo": "adopters/" + adopter["logo"], + "tier": "adopter", } current_adopters.append(new_adopter) # Download the logo and save it to static/images/adopters/ logo = requests.get(adopter_logo) # check if static/images/adopters/ exists - if not os.path.exists('static/images/adopters/'): - os.makedirs('static/images/adopters/') - open('static/images/adopters/' + adopter['logo'], 'wb').write(logo.content) - + if not os.path.exists("static/images/adopters/"): + os.makedirs("static/images/adopters/") + open("static/images/adopters/" + adopter["logo"], "wb").write(logo.content) + # Write the updated list of adopters to src/json/adopters.json - with open('src/json/adopters.json', 'w') as f: + with open("src/json/adopters.json", "w") as f: # format JSON to be human readable json.dump(current_adopters, f, indent=4) diff --git a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap index 71b87e946..7f8ca21c0 100644 --- a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap @@ -44,8 +44,100 @@ exports[`Adopters page > renders correctly 1`] = `
    + +
    +
    +

    + You can easily add your organization’s logo to our list of adopters by creating an issue or by submitting a pull request. +

    +

    + Option 1 - Open an Issue +

    +
      +
    1. + Go to + + + https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters/-/issues/ + + . +
      2. +
    2. + Select the ‘New Issue’ button. +
      3. +
    +

    + When submitting a pull request, please make the following changes to the eclipsefdn-project-adopters' + + + codebase + + : +

    +
      +
    1. + Attach logo files to an issue by dragging and dropping them in the text editor of the form. +
      2. +
    +

    + Option 2 - Submit a Pull Request +

    +
      +
    1. + Go to + + + https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters + + . +
      2. +
    2. + Fork the repository. +
      3. +
    3. + Update the adopter data file config/adopters.json. If your organization supports multiple projects, another project can be added to the projects list within the organization’s node. The values in this list should be the ID of the project. +
      4. +
    4. + Add a colored and a white organization logo to + + + static/assets/images/adopters + + . +
      5. +
    5. + Submit the pull request. +
      6. +
    +
    +
    + ; `; diff --git a/src/pages/adopters.tsx b/src/pages/adopters.tsx index 05074c048..36aaed6b6 100644 --- a/src/pages/adopters.tsx +++ b/src/pages/adopters.tsx @@ -16,17 +16,84 @@ adopters = shuffle(adopters) const AdoptersPage = () => ( -
    -
    -
    -

    Eclipse Temurin™ Adopters Page

    -

    Companies that use Eclipse Temurin in production.

    - +
    +
    +
    +

    Eclipse Temurin™ Adopters Page

    +

    + Companies that use Eclipse Temurin in production. +

    + + + +
    +
    +

    + You can easily add your organization’s logo to our list of adopters + by creating an issue or by submitting a pull request. +

    +

    Option 1 - Open an Issue

    +
      +
    1. + Go to{" "} + + https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters/-/issues/ + + . +
      2. +
    2. Select the ‘New Issue’ button.
      3. +
    +

    + When submitting a pull request, please make the following changes to + the eclipsefdn-project-adopters'{" "} + + codebase + + : +

    +
      +
    1. + Attach logo files to an issue by dragging and dropping them in the + text editor of the form. +
      2. +
    +

    Option 2 - Submit a Pull Request

    +
      +
    1. + Go to{" "} + + https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters + + . +
      2. +
    2. Fork the repository.
      3. +
    3. + Update the adopter data file config/adopters.json. If your + organization supports multiple projects, another project can be + added to the projects list within the organization’s node. The + values in this list should be the ID of the project. +
      4. +
    4. + Add a colored and a white organization logo to{" "} + static/assets/images/adopters. +
      5. +
    5. Submit the pull request.
      6. +
    -
    +
    +
    +
    ; +     ) From a4bf7f06696b15e885534120df08d96c8257d9d0 Mon Sep 17 00:00:00 2001 From: George Adams Date: Mon, 5 Jun 2023 21:38:15 +0100 Subject: [PATCH 04/13] fixup --- .../NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap b/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap index 43bcf5c1d..a4f182820 100644 --- a/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap +++ b/src/components/NavBar/__tests__/__snapshots__/NavBar.test.tsx.snap @@ -175,6 +175,14 @@ exports[`NavBar component > navbar renders correctly 1`] = ` Sponsors +
  • + + Temurin Adopters + +
  • Date: Mon, 5 Jun 2023 21:54:08 +0100 Subject: [PATCH 05/13] updates from review --- .../__snapshots__/adopters.test.tsx.snap | 20 +++++++++---------- src/pages/__tests__/adopters.test.tsx | 2 +- src/pages/adopters.tsx | 19 ++++++++---------- 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap index 7f8ca21c0..ddc11cf41 100644 --- a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap @@ -14,7 +14,7 @@ exports[`Adopters page > renders correctly 1`] = `

    - Eclipse Temurin™ Adopters Page + Eclipse Temurin™ Adopters

    renders correctly 1`] = `

  • Select the ‘New Issue’ button.
    • +
  • + Attach logo files to an issue by dragging and dropping them in the text editor of the form. +
    • +

    + Option 2 - Submit a Pull Request +

    When submitting a pull request, please make the following changes to the eclipsefdn-project-adopters' @@ -94,16 +102,6 @@ exports[`Adopters page > renders correctly 1`] = ` :

    -
      -
    1. - Attach logo files to an issue by dragging and dropping them in the text editor of the form. -
      2. -
    -

    - Option 2 - Submit a Pull Request -

    1. Go to diff --git a/src/pages/__tests__/adopters.test.tsx b/src/pages/__tests__/adopters.test.tsx index 78db42a45..3826ff2ff 100644 --- a/src/pages/__tests__/adopters.test.tsx +++ b/src/pages/__tests__/adopters.test.tsx @@ -34,7 +34,7 @@ describe('Adopters page', () => { const { container } = render(); // eslint-disable-next-line const title = container.querySelector('title'); - expect(title?.textContent).toEqual('Eclipse Temurin Adopters Page | Adoptium'); + expect(title?.textContent).toEqual('Eclipse Temurin Adopters | Adoptium'); }); it('has no accessibility violations', async () => { diff --git a/src/pages/adopters.tsx b/src/pages/adopters.tsx index 36aaed6b6..12bad0aa2 100644 --- a/src/pages/adopters.tsx +++ b/src/pages/adopters.tsx @@ -19,7 +19,7 @@ const AdoptersPage = () => (
      -

      Eclipse Temurin™ Adopters Page

      +

      Eclipse Temurin™ Adopters

      Companies that use Eclipse Temurin in production.

      @@ -51,22 +51,19 @@ const AdoptersPage = () => ( .
    2. Select the ‘New Issue’ button.
      3. +
    3. + Attach logo files to an issue by dragging and dropping them in the + text editor of the form. +
    -

    - When submitting a pull request, please make the following changes to +

    Option 2 - Submit a Pull Request

    +

    When submitting a pull request, please make the following changes to the eclipsefdn-project-adopters'{" "} codebase :

    -
      -
    1. - Attach logo files to an issue by dragging and dropping them in the - text editor of the form. -
      2. -
    -

    Option 2 - Submit a Pull Request

    1. Go to{" "} @@ -100,7 +97,7 @@ const AdoptersPage = () => ( export default AdoptersPage export const Head = () => ( - + ) export const query = graphql` From a789be303f086f9975fcb84d624b7f6cbb97add3 Mon Sep 17 00:00:00 2001 From: George Adams Date: Wed, 2 Aug 2023 11:45:04 +0100 Subject: [PATCH 06/13] updates --- .../__snapshots__/adopters.test.tsx.snap | 20 ++++++++++---- src/pages/adopters.tsx | 26 ++++++++++++++----- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap index ddc11cf41..832a94ce8 100644 --- a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap @@ -71,17 +71,19 @@ exports[`Adopters page > renders correctly 1`] = `

      1. - Go to + Go to our - https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters/-/issues/ + Temurin Adopters Form .
      2. - Select the ‘New Issue’ button. + Fill out the relevant fields (it takes less than 5 minutes)
      3. Attach logo files to an issue by dragging and dropping them in the text editor of the form. @@ -97,6 +99,8 @@ exports[`Adopters page > renders correctly 1`] = ` codebase @@ -108,6 +112,8 @@ exports[`Adopters page > renders correctly 1`] = ` https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters @@ -117,7 +123,11 @@ exports[`Adopters page > renders correctly 1`] = ` Fork the repository.
      4. - Update the adopter data file config/adopters.json. If your organization supports multiple projects, another project can be added to the projects list within the organization’s node. The values in this list should be the ID of the project. + Update the adopter data file + + config/adopters.json + + . If your organization supports multiple projects, another project can be added to the projects list within the organization’s node. The values in this list should be the ID of the project.
      5. Add a colored and a white organization logo to diff --git a/src/pages/adopters.tsx b/src/pages/adopters.tsx index 12bad0aa2..2067a1934 100644 --- a/src/pages/adopters.tsx +++ b/src/pages/adopters.tsx @@ -44,13 +44,17 @@ const AdoptersPage = () => (

        Option 1 - Open an Issue

        1. - Go to{" "} - - https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters/-/issues/ + Go to our{" "} + + Temurin Adopters Form .
          2. -
        2. Select the ‘New Issue’ button.
          3. +
        3. Fill out the relevant fields (it takes less than 5 minutes)
        4. Attach logo files to an issue by dragging and dropping them in the text editor of the form. @@ -59,7 +63,11 @@ const AdoptersPage = () => (

          Option 2 - Submit a Pull Request

          When submitting a pull request, please make the following changes to the eclipsefdn-project-adopters'{" "} - + codebase : @@ -67,14 +75,18 @@ const AdoptersPage = () => (

          1. Go to{" "} - + https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters .
          2. Fork the repository.
          3. - Update the adopter data file config/adopters.json. If your + Update the adopter data file config/adopters.json. If your organization supports multiple projects, another project can be added to the projects list within the organization’s node. The values in this list should be the ID of the project. From df01888c07e6fdb99f6ded10c06ef84fb7f6224b Mon Sep 17 00:00:00 2001 From: George Adams Date: Mon, 7 Aug 2023 10:25:15 +0100 Subject: [PATCH 07/13] add padding to go logo --- src/json/adopters.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/json/adopters.json b/src/json/adopters.json index cde6bcc2c..b2941844e 100644 --- a/src/json/adopters.json +++ b/src/json/adopters.json @@ -22,6 +22,7 @@ { "name": "GoCD", "logo": "adopters/logo-gocd.svg", + "logoPadding": "1em", "tier": "adopter" }, { From a015b9884ef6748f343237643d580df651b95dd1 Mon Sep 17 00:00:00 2001 From: George Adams Date: Mon, 7 Aug 2023 10:31:33 +0100 Subject: [PATCH 08/13] update schema --- src/json/adopters.schema.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/json/adopters.schema.json b/src/json/adopters.schema.json index afd1fb84e..412cc805e 100644 --- a/src/json/adopters.schema.json +++ b/src/json/adopters.schema.json @@ -10,6 +10,9 @@ "logo": { "type": "string" }, + "logoPadding": { + "type": "string" + }, "tier": { "type": "string", "enum": ["adopter"] From 7aec42728b401ca85697826e47d46a1942a752ec Mon Sep 17 00:00:00 2001 From: George Adams Date: Tue, 8 Aug 2023 10:03:17 +0100 Subject: [PATCH 09/13] schema fixup --- src/json/__tests__/adopters.test.tsx | 2 +- src/json/adopters.schema.json | 28 ---------------------------- src/json/members.schema.json | 2 +- 3 files changed, 2 insertions(+), 30 deletions(-) delete mode 100644 src/json/adopters.schema.json diff --git a/src/json/__tests__/adopters.test.tsx b/src/json/__tests__/adopters.test.tsx index 048354ded..5388e685e 100644 --- a/src/json/__tests__/adopters.test.tsx +++ b/src/json/__tests__/adopters.test.tsx @@ -1,6 +1,6 @@ import Ajv from 'ajv'; import adopters from '../adopters.json'; -import adoptersSchema from '../adopters.schema.json'; +import adoptersSchema from '../members.schema.json'; const ajv = new Ajv(); const validate = ajv.compile(adoptersSchema); diff --git a/src/json/adopters.schema.json b/src/json/adopters.schema.json deleted file mode 100644 index a1bcb09bb..000000000 --- a/src/json/adopters.schema.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "array", - "items": { - "type": "object", - "properties": { - "name": { - "type": "string" - }, - "logo": { - "type": "string" - }, - "logoPadding": { - "type": "string" - }, - "url": { - "type": "string", - "pattern": "^https://[^\\s/$.?#].[^\\s]*$" - }, - "tier": { - "type": "string", - "enum": ["adopter"] - } - }, - "required": ["name", "logo", "url", "tier"], - "additionalProperties": false - } - } diff --git a/src/json/members.schema.json b/src/json/members.schema.json index 9e44db5b8..01336af4a 100644 --- a/src/json/members.schema.json +++ b/src/json/members.schema.json @@ -19,7 +19,7 @@ }, "tier": { "type": "string", - "enum": ["strategic", "enterprise", "participant", "sponsor", "infra"] + "enum": ["adopter", "strategic", "enterprise", "participant", "sponsor", "infra"] } }, "required": ["name", "logo", "url", "tier"], From 6c04e06713609c3cb7196347d1854cd4fe2fd32c Mon Sep 17 00:00:00 2001 From: George Adams Date: Tue, 8 Aug 2023 14:16:36 +0100 Subject: [PATCH 10/13] add more logos --- src/json/adopters.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/json/adopters.json b/src/json/adopters.json index 0b0c7963a..86f37ec3b 100644 --- a/src/json/adopters.json +++ b/src/json/adopters.json @@ -69,6 +69,7 @@ { "name": "R3m Score", "logo": "adopters/logo-r3m-score.png", + "logoPadding": "1em", "url": "https://r3mscore.com/", "tier": "adopter" } From b5c0be934d4a60ecc534090b8e7f11b41151d983 Mon Sep 17 00:00:00 2001 From: George Adams Date: Tue, 8 Aug 2023 14:33:26 +0100 Subject: [PATCH 11/13] make adopters grid 4 columns --- src/components/MembersGrid/index.tsx | 9 +- .../__snapshots__/adopters.test.tsx.snap | 4 +- src/pages/adopters.tsx | 167 +++++++++--------- 3 files changed, 89 insertions(+), 91 deletions(-) diff --git a/src/components/MembersGrid/index.tsx b/src/components/MembersGrid/index.tsx index 1566863a6..50c11429c 100644 --- a/src/components/MembersGrid/index.tsx +++ b/src/components/MembersGrid/index.tsx @@ -1,16 +1,15 @@ import * as React from 'react' -const MembersGrid = (members) => { - -const array = members.members +const MembersGrid = ({members, columns}) => { return (
            - {array.map( + {members.map( (member, i): string | JSX.Element => member && ( -
            + // dynamically set the width of the column based on the number of columns +
            {`${member.name} diff --git a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap index 832a94ce8..9f8ce4b04 100644 --- a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap @@ -4,6 +4,7 @@ exports[`Adopters page > renders correctly 1`] = `
            renders correctly 1`] = ` class="row justify-content-center align-items-center" >
            renders correctly 1`] = `
            - ;
            `; diff --git a/src/pages/adopters.tsx b/src/pages/adopters.tsx index 2067a1934..5ac3a1d5b 100644 --- a/src/pages/adopters.tsx +++ b/src/pages/adopters.tsx @@ -16,93 +16,92 @@ adopters = shuffle(adopters) const AdoptersPage = () => ( -
            -
            -
            -

            Eclipse Temurin™ Adopters

            -

            - Companies that use Eclipse Temurin in production. -

            - -             - -
            -
            -

            - You can easily add your organization’s logo to our list of adopters - by creating an issue or by submitting a pull request. -

            -

            Option 1 - Open an Issue

            -
              -
            1. - Go to our{" "} - - Temurin Adopters Form - - . -
              2. -
            2. Fill out the relevant fields (it takes less than 5 minutes)
              3. -
            3. - Attach logo files to an issue by dragging and dropping them in the - text editor of the form. -
              4. -
            -

            Option 2 - Submit a Pull Request

            -

            When submitting a pull request, please make the following changes to - the eclipsefdn-project-adopters'{" "} - - codebase - - : +

            +
            +
            +

            Eclipse Temurin™ Adopters

            +

            + Companies that use Eclipse Temurin in production.

            -
              -
            1. - Go to{" "} - - https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters - - . -
              2. -
            2. Fork the repository.
              3. -
            3. - Update the adopter data file config/adopters.json. If your - organization supports multiple projects, another project can be - added to the projects list within the organization’s node. The - values in this list should be the ID of the project. -
              4. -
            4. - Add a colored and a white organization logo to{" "} - static/assets/images/adopters. -
              5. -
            5. Submit the pull request.
              6. -
            + + + +
            +
            +

            + You can easily add your organization’s logo to our list of adopters + by creating an issue or by submitting a pull request. +

            +

            Option 1 - Open an Issue

            +
              +
            1. + Go to our{" "} + + Temurin Adopters Form + + . +
              2. +
            2. Fill out the relevant fields (it takes less than 5 minutes)
              3. +
            3. + Attach logo files to an issue by dragging and dropping them in the + text editor of the form. +
              4. +
            +

            Option 2 - Submit a Pull Request

            +

            When submitting a pull request, please make the following changes to + the eclipsefdn-project-adopters'{" "} + + codebase + + : +

            +
              +
            1. + Go to{" "} + + https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters + + . +
              2. +
            2. Fork the repository.
              3. +
            3. + Update the adopter data file config/adopters.json. If your + organization supports multiple projects, another project can be + added to the projects list within the organization’s node. The + values in this list should be the ID of the project. +
              4. +
            4. + Add a colored and a white organization logo to{" "} + static/assets/images/adopters. +
              5. +
            5. Submit the pull request.
              6. +
            +
            +
            -
            -
            -
            ; - + ) From a4389235d1d52a5e3c5befa9dee8c4e5ea5fbfe1 Mon Sep 17 00:00:00 2001 From: George Adams Date: Wed, 9 Aug 2023 11:51:54 +0100 Subject: [PATCH 12/13] refactor brand carousel --- gatsby-browser.js | 2 + package-lock.json | 102 +++ package.json | 2 + .../BrandCarousel/BrandCarousel.scss | 4 + .../__snapshots__/BrandCarousel.test.tsx.snap | 581 +++++++++++++----- src/components/BrandCarousel/index.tsx | 110 ++-- .../__snapshots__/useMediaQuery.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 559 +++++++++++++---- src/pages/index.tsx | 2 +- vitest-setup.ts | 11 + 10 files changed, 1030 insertions(+), 345 deletions(-) create mode 100644 src/components/BrandCarousel/BrandCarousel.scss diff --git a/gatsby-browser.js b/gatsby-browser.js index 88a374f49..d9c24b151 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,3 +1,5 @@ import 'bootstrap/dist/js/bootstrap.min.js' import '@popperjs/core/dist/umd/popper.min.js' import 'prismjs/themes/prism.css' +import 'slick-carousel/slick/slick.css' +import 'slick-carousel/slick/slick-theme.css' diff --git a/package-lock.json b/package-lock.json index 8f173cc13..239c33de2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,12 +63,14 @@ "react-i18next": "^13.0.3", "react-icons": "^4.10.1", "react-share": "^4.4.1", + "react-slick": "^0.29.0", "react-switch": "^7.0.0", "react-tabs": "^6.0.2", "react-use-flexsearch": "^0.1.1", "react-world-flags": "^1.5.1", "remark-gfm": "^1.0.0", "sass": "1.64.2", + "slick-carousel": "^1.8.1", "typescript-plugin-css-modules": "^5.0.1" }, "devDependencies": { @@ -10136,6 +10138,11 @@ "node": ">=6" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/enquirer": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", @@ -16444,6 +16451,12 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -16611,6 +16624,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -21909,6 +21930,22 @@ "react": "^16.3.0 || ^17 || ^18" } }, + "node_modules/react-slick": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz", + "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-switch": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz", @@ -22798,6 +22835,11 @@ "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz", "integrity": "sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -23850,6 +23892,14 @@ "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/slugify": { "version": "1.6.6", "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz", @@ -24213,6 +24263,11 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/string-hash": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", @@ -34349,6 +34404,11 @@ } } }, + "enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "enquirer": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", @@ -38920,6 +38980,12 @@ } } }, + "jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "peer": true + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -39048,6 +39114,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=" }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "requires": { + "string-convert": "^0.2.0" + } + }, "json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -42785,6 +42859,18 @@ "jsonp": "^0.2.1" } }, + "react-slick": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz", + "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==", + "requires": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + } + }, "react-switch": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz", @@ -43458,6 +43544,11 @@ "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz", "integrity": "sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -44244,6 +44335,12 @@ "is-fullwidth-code-point": "^3.0.0" } }, + "slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "requires": {} + }, "slugify": { "version": "1.6.6", "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz", @@ -44535,6 +44632,11 @@ "safe-buffer": "~5.1.0" } }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "string-hash": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", diff --git a/package.json b/package.json index d65540d80..4af1aa346 100644 --- a/package.json +++ b/package.json @@ -59,12 +59,14 @@ "react-i18next": "^13.0.3", "react-icons": "^4.10.1", "react-share": "^4.4.1", + "react-slick": "^0.29.0", "react-switch": "^7.0.0", "react-tabs": "^6.0.2", "react-use-flexsearch": "^0.1.1", "react-world-flags": "^1.5.1", "remark-gfm": "^1.0.0", "sass": "1.64.2", + "slick-carousel": "^1.8.1", "typescript-plugin-css-modules": "^5.0.1" }, "devDependencies": { diff --git a/src/components/BrandCarousel/BrandCarousel.scss b/src/components/BrandCarousel/BrandCarousel.scss new file mode 100644 index 000000000..c6d8c9b30 --- /dev/null +++ b/src/components/BrandCarousel/BrandCarousel.scss @@ -0,0 +1,4 @@ +.slick-initialized .slick-track { + display: flex; + align-items: center; +} \ No newline at end of file diff --git a/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap b/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap index 35f91c240..cb9c8f44c 100644 --- a/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap +++ b/src/components/BrandCarousel/__tests__/__snapshots__/BrandCarousel.test.tsx.snap @@ -3,165 +3,456 @@ exports[`BrandCarousel component > should render correctly 1`] = `
            -
            -
            + + Previous +
            -
            - Brand logo 1 -
            -
            - Brand logo 2 -
            -
            - Brand logo 3 -
            -
            - Brand logo 4 -
            -
            - Brand logo 5 -
            -
            - Brand logo 6 + aria-hidden="true" + class="slick-slide slick-cloned" + data-index="-6" + style="width: 0px;" + tabindex="-1" + > +
            +
            + ibm-logo.png logo +
            +
            +
            + + + + + +
            +
            +
            + microsoft.svg logo +
            +
            +
            +
            +
            +
            + ibm-logo.png logo +
            +
            +
            +
            +
            +
            + adopters/logo-societe-generale.svg logo +
            +
            +
            +
            +
            +
            + redhat.svg logo +
            +
            +
            +
            +
            +
            + google.svg logo +
            +
            +
            +
            +
            +
            + adopters/logo-dynatrace.png logo +
            +
            +
            + + + + + -
            -
            -
            - Brand logo 7 -
            -
            - Brand logo 8 -
            -
            - Brand logo 9 -
            -
            - Brand logo 10 -
            -
            - Brand logo 11 -
            -
            - Brand logo 12 + aria-hidden="true" + class="slick-slide slick-cloned" + data-index="11" + style="width: 0px;" + tabindex="-1" + > +
            +
            + google.svg logo +
            +
            +
            + +
            +
            `; diff --git a/src/components/BrandCarousel/index.tsx b/src/components/BrandCarousel/index.tsx index 2c21cf547..312d2bd7a 100644 --- a/src/components/BrandCarousel/index.tsx +++ b/src/components/BrandCarousel/index.tsx @@ -1,79 +1,61 @@ -import React, { useState, useEffect } from "react"; -import Carousel from "react-bootstrap/Carousel"; -import Col from "react-bootstrap/Col"; -import Row from "react-bootstrap/Row"; +import React from "react"; +import Slider from "react-slick"; + +import "./BrandCarousel.scss" const BrandCarousel = () => { const logos = [ "microsoft.svg", // Replace with your logo image file names "ibm-logo.png", - "bloomberg.svg", - "huawei.svg", - "macstadium.png", + "adopters/logo-societe-generale.svg", "redhat.svg", "google.svg", + "adopters/logo-dynatrace.png", + "redhat.svg", ]; - const [slidesToShow, setSlidesToShow] = useState(1); - - const getSlidesToShow = () => { - // if window is defined, get the width of the screen else return 1200 for CI testing - const screenWidth = - typeof window !== "undefined" ? window.innerWidth : 1200; - if (screenWidth >= 992) { - return 6; - } else { - return 2; - } + const settings = { + infinite: true, + speed: 500, + slidesToShow: 6, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 2000, + pauseOnHover: true, + responsive: [{ + breakpoint: 768, + settings: { + slidesToShow: 4 + } + }, { + breakpoint: 520, + settings: { + slidesToShow: 2 + } + }] }; - useEffect(() => { - setSlidesToShow(getSlidesToShow()); - }, []); - - const interval = slidesToShow === 1 ? 2000 : 5000; // Set interval based on slidesToShow value - const logosToAdd = - (slidesToShow - (logos.length % slidesToShow)) % slidesToShow; // Calculate number of logos to add for complete row - const logosToDisplay = [...logos, ...logos.slice(0, logosToAdd)]; // Create new array with logos to display - return ( - - {logosToDisplay.map((logo, index) => { - if (index % slidesToShow === 0) { - return ( - - - {logosToDisplay - .slice(index, index + slidesToShow) - .map((logo, subIndex) => ( - - {`Brand - - ))} - - - ); - } else { - return null; - } - })} - - ); + + {logos.map((logo, logoIndex) => ( +
            + e.currentTarget.style.filter = "grayscale(0%)"} + onMouseLeave={e => e.currentTarget.style.filter = "grayscale(100%)"} + alt={`${logo} logo`} + /> +
            + ))} +             + ) }; export default BrandCarousel; diff --git a/src/hooks/__tests__/__snapshots__/useMediaQuery.test.tsx.snap b/src/hooks/__tests__/__snapshots__/useMediaQuery.test.tsx.snap index eabe34c71..4c604d361 100644 --- a/src/hooks/__tests__/__snapshots__/useMediaQuery.test.tsx.snap +++ b/src/hooks/__tests__/__snapshots__/useMediaQuery.test.tsx.snap @@ -2,7 +2,7 @@ exports[`useMediaQuery > should check for matchMedia support 1`] = `
            - undefined + false
            `; diff --git a/src/pages/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/__tests__/__snapshots__/index.test.tsx.snap index f2b6ed394..f54a8d6cf 100644 --- a/src/pages/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/index.test.tsx.snap @@ -108,170 +108,461 @@ exports[`Index page > renders correctly 1`] = `

            The largest companies in the world trust Eclipse Temurin for their Java workloads

            -
            -
            + + Previous +