Add campaigns timeline to homepage

LanesGood commented 3 months ago

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:

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

References:

Following the recommendation in https://github.com/NUKnightLab/TimelineJS3/issues/633#issuecomment-815307681 to add timeline js in react
Following https://github.com/umd-mith/airwaves/commit/325bd0d317b910315c5de0be884547c4fe8d14a9 for using the LESS-dependent Timeline JS library in gatsby

LanesGood commented 3 months ago

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 commented 3 months ago

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)

https://github.com/user-attachments/assets/5d8cc6ce-ac19-4168-97a6-43e55e4124c5

LanesGood commented 3 months ago

Remaining Todos:

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

NASA-IMPACT / admg-casei