Use showcase on splash

[victorlin]

preview

Description of proposed changes

Moving cards from individual sections to a shared showcase defined by a single YAML file.

For later

• surface more info for each card (ref)

Related issue(s)

#849

Checklist

• Decide on contents: 6449676...9f72478
• Checks pass
• Check if changes affect the resource index JSON revision
• Post-merge: PR to fix styles: Splash page styling fixes #916
• Post-merge: issue for typography consistency: Standardize casing of pathogen titles #917

[jameshadfield]

This is really cool to see!

It makes me think that visual indicators to distinguish {core,groups,community} and {dataset,narrative} will be really useful¹. Similar in spirit to Nextclade's badges. (All of which are out of scope for this PR -- without one of us taking on the role of a UI designer these interfaces will have to develop naturally over time.)

¹ The card styles partially convey this, but not in an understandable way to users.

[victorlin]

Design thinking

With this PR, the Showcase component is used in 2 places:

1. Splash (/)
2. ListResources (/pathogens)

There are two features proposed for usage on Splash:

1. Surfacing an abstract (ref)
2. Visual indicators for core/groups/community and dataset/narrative (ref)

These are great ideas and I see them as in-scope of #849's completion.

From an implementation perspective, it's helpful to consider which of these features also apply to ListResources. (1) maybe, but most likely not (2).

Given the existing and upcoming divergence in features, I decided to make the entire individual card component customizable by the context, implemented as 25b545d + 7c2d301:

nextstrain.org/static-site/src/components/ListResources/index.tsx

Lines 78 to 80 in 66b395f

	<SetSelectedFilterOptions.Provider value={setSelectedFilterOptions}>
	<Showcase cards={showcaseCards} CardComponent={FilterShowcaseTile} />
	</SetSelectedFilterOptions.Provider>

nextstrain.org/static-site/src/components/splash/index.jsx

Line 69 in 66b395f

<Showcase cards={cards} CardComponent={UrlShowcaseTile} />

This is a larger refactor, but it should make those design ideas easier to implement.

significant new changes pushed

[trvrb]

I updated tiles further mainly to include more examples and to simplify text. I also did a small update to the styling to make text fit better. Here's before 4bc2acc:

And here's after:

[trvrb]

Nice work here @victorlin! With the small tweaks above, I'm happy for this to be merged into master. I like the staging here where revamp of the linkouts can be done in a subsequent PR ala #902.

[victorlin]

Thanks for pushing the tweaks @trvrb. I've replaced 4bc2acc with 9f72478...52e964e so that the styling adjustments don't affect the cards on /groups.

[victorlin]

I'll plan to merge this tomorrow, leaving another day for reviews.

In terms of implementation, I'm confident in most changes except 1414985 may prompt some feedback. After some thinking in #849 (comment) and some design drafting today, I've a sense that we'll eventually want enough deviation where it doesn't make sense to re-use the same Showcase component between splash and /pathogens. But this is still the easiest approach at the moment, and the preview looks good.