Add campaigns timeline to homepage

gatsby-config.js

@@ -44,6 +44,7 @@ module.exports = {
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-image`,
+    `gatsby-plugin-less`,
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

gatsby-node.js

@@ -295,14 +295,18 @@ exports.createPages = async ({ graphql, actions }) => {
 }
 
 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  if (stage === "build-html") {
+  if (stage === "build-html" || stage === "develop-html") {
     actions.setWebpackConfig({
       module: {
         rules: [
           {
             test: /mapbox-gl/,
             use: loaders.null(),
           },
+          {
+            test: /timelinejs/,
+            use: loaders.null(),
+          },
         ],
       },
     })

package.json

@@ -14,6 +14,7 @@
     "@fontsource/titillium-web": "^4.5.2",
     "@gatsbyjs/reach-router": "^1.3.4",
     "@juggle/resize-observer": "^3.3.1",
+    "@knight-lab/timelinejs": "^3.9.3",
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@reach/accordion": "^0.17.0",
@@ -34,6 +35,7 @@
     "gatsby-plugin-csp": "^1.1.3",
     "gatsby-plugin-google-gtag": "4.24.0",
     "gatsby-plugin-image": "^2.8.1",
+    "gatsby-plugin-less": "6.25.0-next.0",
     "gatsby-plugin-manifest": "^4.8.1",
     "gatsby-plugin-offline": "^5.8.1",
     "gatsby-plugin-postcss": "5.10.0",

playwright/e2e/home.spec.ts

@@ -84,29 +84,6 @@ test.describe("Homepage", () => {
     })
   })
 
-  test.describe("Explore section", () => {
-    test("there is an explore section", async ({ page }) => {
-      await page.goto(baseUrl)
-
-      // Check if the explore section exists and contains the expected header
-      const exploreHeader = await page.textContent(
-        "[data-cy=explore-section] >> h2"
-      )
-      expect(exploreHeader).toBe("CASEI")
-
-      // Check if the explore link list exists and contains the expected number of items
-      const exploreItems = await page.$$("[data-cy=explore-link-list] >> li")
-      expect(exploreItems).toHaveLength(3)
-
-      // Check if the explore items have the expected text content
-      expect(await exploreItems[0].textContent()).toContain("Explore campaigns")
-      expect(await exploreItems[1].textContent()).toContain("Explore platforms")
-      expect(await exploreItems[2].textContent()).toContain(
-        "Explore instruments"
-      )
-    })
-  })
-
   test.describe("Region Type section", () => {
     test("region types can be selected", async ({ page }) => {
       await page.goto(baseUrl)
@@ -166,79 +143,4 @@ test.describe("Homepage", () => {
       expect(page.url()).toContain("/explore/campaigns")
     })
   })
-
-  test.describe("Geophysical Concepts section", () => {
-    test("geophysical concepts can be selected", async ({ page }) => {
-      await page.goto(baseUrl)
-
-      // Check if the geophysical concepts section exists and contains the expected header
-      const geophysicalConceptsHeader = await page.textContent(
-        "[data-cy=geophysical-concepts-section] >> h2"
-      )
-      expect(geophysicalConceptsHeader).toBe("Geophysical Concepts")
-
-      // Retrieve geophysical concept elements and their text content
-      const geophysicalConcepts = await page.$$(
-        "[data-cy=geophysical-concepts-section] >> [data-cy=geophysical-concept]"
-      )
-      const geophysicalConceptsTexts = await Promise.all(
-        geophysicalConcepts.map(concept => concept.textContent())
-      )
-
-      // Check if the div elements inside the geophysical concepts have the expected text content
-      for (const conceptText of geophysicalConceptsTexts) {
-        expect(
-          await page.isVisible(
-            `[data-cy=geophysical-concepts-section] >> [data-cy=geophysical-concept] >> text=${conceptText}`
-          )
-        ).toBeTruthy()
-      }
-
-      // Click on the "Biodiversity" geophysical concept
-      await page.click(
-        "[data-cy=geophysical-concepts-section] >> [data-cy=geophysical-concept] >> text=Biodiversity"
-      )
-
-      // wait for page load
-      await page.waitForNavigation()
-
-      // Check if the URL includes "/explore/campaigns" and the header has the expected text
-      expect(page.url()).toContain("/explore/campaigns")
-      const filterChip = await page.textContent('[data-cy="filter-chip"]')
-      expect(filterChip).toBe("geophysical: Biodiversity")
-    })
-  })
-
-  test.describe("Instruments section", () => {
-    test("an instrument can be selected", async ({ page }) => {
-      await page.goto(baseUrl)
-
-      // Check if the instruments section exists and contains the expected header
-      const instrumentsHeader = await page.textContent(
-        "[data-cy=instruments-section] >> h2"
-      )
-      expect(instrumentsHeader).toBe("Measurement Type")
-
-      // Check if the "Spectrometer/Radiometer" instrument type is visible
-      expect(
-        await page.isVisible(
-          "[data-cy=instruments-section] >> [data-cy=instrument-type] >> text=Spectrometer/Radiometer"
-        )
-      ).toBeTruthy()
-
-      // Click on the "Spectrometer/Radiometer" instrument type
-      await page.click(
-        "[data-cy=instruments-section] >> [data-cy=instrument-type] >> text=Spectrometer/Radiometer"
-      )
-
-      // wait for page load
-      await page.waitForNavigation()
-
-      // Check if the URL includes "/explore/instruments" and the header has the expected text
-      expect(page.url()).toContain("/explore/instruments")
-
-      const filterChip = await page.textContent('[data-cy="filter-chip"]')
-      expect(filterChip).toBe("type: Spectrometer/Radiometer")
-    })
-  })
 })

src/components/home/campaigns-timeline.js

@@ -0,0 +1,92 @@
+import React, { useRef, useEffect } from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import { Timeline } from "@knight-lab/timelinejs"
+import "@knight-lab/timelinejs/dist/css/timeline.css"
+import "./timeline-styles.css"
+
+export const CampaignsTimeline = ({}) => {
+  const data = useStaticQuery(graphql`
+    query {
+      allCampaign {
+        nodes {
+          logo {
+            gatsbyImg {
+              childImageSharp {
+                gatsbyImageData(height: 350, transformOptions: { fit: CONTAIN })
+              }
+            }
+          }
+          shortname: short_name
+          longname: long_name
+          startdate: start_date
+          enddate: end_date
+          description: description_short
+        }
+      }
+    }
+  `)
+
+  const timelineData = {
+    events: data.allCampaign.nodes.map(campaign => ({
+      media: {
+        url: campaign.logo
+          ? campaign.logo?.gatsbyImg.childImageSharp.gatsbyImageData.images
+              .fallback.src
+          : "",
+        link: `/campaign/${campaign.shortname}`,
+        thumbnail: campaign.logo
+          ? campaign.logo?.gatsbyImg.childImageSharp.gatsbyImageData.images
+              .fallback.src
+          : "",
+        link_target: "_self",
+      },
+      start_date: {
+        month: campaign.startdate.split("-")[1],
+        day: campaign.startdate.split("-")[2],
+        year: campaign.startdate.split("-")[0],
+      },
+      end_date: {
+        month: campaign.enddate.split("-")[1],
+        day: campaign.enddate.split("-")[2],
+        year: campaign.enddate.split("-")[0],
+      },
+      text: {
+        headline: campaign.shortname,
+        text:
+          `<p class="tl-subheading"
+            >
+              ${campaign.longname}
+            </p>` +
+          `<p>${
+            // if campaign logo exists, truncate campaign description text after 550 characters to avoid container overflow
+            !campaign.logo
+              ? campaign.description
+              : campaign.description.substring(0, 650) +
+                (campaign.description.length > 650 ? "..." : "")
+          }
+          </p>` +
+          `<a class="tl-button button-clickable" href="/campaign/${campaign.shortname}" target="_self">View campaign</a>`,
+      },
+    })),
+  }
+
+  const timelineEl = useRef(null)
+  useEffect(() => {
+    const additionalOptions = {
+      font: null,
+      default_bg_color: "#303641",
+      debug: true,
+    }
+    if (timelineEl.current != null) {
+      new Timeline(timelineEl.current, timelineData, additionalOptions)
+    }
+  }, [])
+  return (
+    <div
+      css={`
+        height: 650px;
+      `}
+      ref={timelineEl}
+    />
+  )
+}