Improve card (splash) image attribution text

[jameshadfield]

We need to display attribution for the pathogen images we use, such as those on the main landing (splash) page. We currently display attribution text (including links) in the footer for the splash page but not for any other page. We use images on multiple pages - for instance https://nextstrain.org/pathogens, https://nextstrain.org/influenza and these do not have attribution.

Moreover, the attribution text is hardcoded and cannot easily be restricted to a specific set of images which a page uses. Our current splash page uses 7 different images but the attribution lists 16 images.

Current implementation.

The attributions for 16 images are hardcoded in the <Footer> component. The attributions may be toggled on/off by the parent component via a boolean prop passed to the Footer component. The splash page toggles this on. For most other pages in the static site, the footer is defined within the <GenericPage> component and this component does not expose a way to display image attribution

Suggested implementation

Components which display images are likely to be deeply nested children of <GenericPage> (or similar). One potential way to achieve this is to wrap the <GenericPage> with a addImageAttribution react context provider so that child components can add images as needed. The <Footer> could then subscribe to this and display the appropriate attributions.

The most maintainable way to keep a list of attributions may well be a YAML file co-located with the images themselves.