Add campaigns timeline to homepage

[LanesGood]

Implements the homepage campaigns timeline.

This PR:

• Adds campaigns timeline to the homepage
• Updates the Gatsby plugin CSR to permit requests to the KnightLab google sheets proxy and stye
• Deletes the homepage Geophysical Concepts & Measurement Type filter boxes

Remaining todos:

• Ensure we can display Images - need to further adjust Content Security Policy plugin to permit URLs for images.
• Continue to update styling
• Explore linking to campaign page - may need additional column in spreadsheet, and/or explore links in Text column

References:

• Following the recommendation in How to use timeline in REACT? NUKnightLab/TimelineJS3#633 (comment) to add timeline js in react
• Following umd-mith/airwaves@325bd0d for using the LESS-dependent Timeline JS library in gatsby

[LanesGood]

Allowing TimelineJS to Render Images:

Images in the timeline are currently blocked, as the CASEI site uses a content security policy (CSP) plugin for gatsby to follow the environment web security rules. To allow images in the timeline to render, we canL

• Either we allow all CSP for the campaign logo images

• Or we get directly from the casei S3 bucket. The URL is very long and requires an access key, for example:

  this URL

  https://admg-prod-assets.s3.amazonaws.com/e2896583-f5ba-43ef-9fd8-ac501b1e13a2..jpg?AWSAccessKeyId=ASIA4N6EKRYHTNPTBOHV&Signature=viDS5apJoXavLRWJvh02csyN2Ek%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJT%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIC50GoTOfhWwq8K5bkiAycH%2FTTCRJkK4hWlomwQj5o0oAiEA7hUotiGYrGSdUp0KIOI0lkWSFOMnfeleT4yUxMWiTOcq%2BQMIXRAAGgw4NTQ1NzMzNTQ1MTEiDJqqKg1PnoYnzkNHsCrWA4ZVh2P%2BfeisdCcxbTLCjpYRoKZCIqQedp103XsQGFt%2FIUxITKVm3WTDcWWXm8ZsJBJVdwONL7rX3veL5Y8cuP1iEnJk3aiIofIcsw0m3y%2FkFxf31cZZsAx7Bvqa6UilohRXJnCDenllTDvHj43maPiDLD6Jbdmzek4nkyRO1QWnHGwtSy1o%2Bd9HlkQSGcSplOdwB%2BcI78vHjJaM%2BNbKJp81oZwToFqWda87zLOmvxxz%2Bzvg%2FpmAW0SKuVfg0k26BRff2oQ1ztQUCePEh9rfFu0eYNt9%2Bk2zhoTUBktbTtsRcsWpqjRM%2BhWD4Gy5zN1atHZ9gmFSMjn1%2FcXErqhvicIVP2CcBx%2BchNUybqfj3Qgh4v%2FQk%2Bo4cUL%2Bv5jEwlqiQqI%2Bvv6PZD%2Fr0kcw8SdY5F9bT4mAe7YZwYevlrDzSp3EqDSR81JBHnDZDxDLEDZC8e8S54%2F7g%2Bjt0QYGfqUEjdLVMYL6TOnybhs57UNSnQ8ldPGCB%2Bf8i5e3gsXBfB8ji1JDscb%2B84HZwyojtnEJQPLfR73z6RbaRgWJ28mn0Ub6QOO0YquDIinK88s94%2B%2Fr8J8pSIL8rDLWm%2BeeTuyiz%2BzU5Wdryxvwv5%2FFIZg9HDRPjJcgoE%2BDMIeXv7QGOqUBEz53FuzBNk1XtThcazgnfJ8ZFSxC5nQhAINGV1QC1Z04ac%2Br7YuBupzO0a%2BkWfsFUPi6tk1kbZquWZlkUJhii%2FVuujlaEDCDa0pkbNuEM6oA9gChT6bLc3RH0xRxGcVocDYxZVqiF72z5zTNBeciZ3t%2Fe5uGxF2gYuiXOEomozQIPASQDxYeje7oagFoDPregPRuhYCwQsybpd6Bzye3XvvXmjkE&Expires=1720718162

• It does seem like the logo image was specifically taken from the source_url instead of the S3 location in the timeline preparation script. If the wildcard * CSP policy for image sources is forbidden, we can try to update the timeline preparation script to use the image property from the CASEI API instead of source_url. cc @EJwalker13

Fixing e2e tests

• Try to pin gatsby-less to "6.25.0-next.0", the last version before peerdepedencies update to gatsby-v5

Linking to campaign page

• Campaign URLs are composed with campaign/{shortname}. This is also the headline in the timeline. Explore using additional js insertion to add a link in the image or slide

[LanesGood]

This is ready for review. The implementation relies on building out the timeline data internally, so the spreadsheet in the demo is not required for production. This solves the issue with images as well, as they are queried in the static site build just like the images for the campaign cards/pages.

@smwingo and ADMG team, this is also ready for a design review. Please let me know your thoughts or edits in this PR. I've captured a quick video recording of moving through the timeline. Some additions from the top screenshot include:

• Correct application font for all text
• Using the campaign logo in the bottom timeline "timenav slider," in addition to the slide
• Inclusion of campaign longname
• Addition of "View campaign" button linking to campaign page. (The campaign logo image in the slide is also linked to campaign page)

Screen.Recording.2024-07-15.at.10.50.35.AM.mov

[willemarcel]

@LanesGood It's working great! I've added a couple of comments to the gatsby-config.js file.

[LanesGood]

Remaining Todos:

• Truncate text after x number of characters
• Make timeline first, then regions, then icons