feat: add caption to user links

[goksu]

Created a shared component Showcase and updated the usages around the site. Effects index and users.

Motivation

Fixes #1040.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Clean linter, and visited pages affected.

Related PRs

There was already an open PR #1043 by @mptap, but I've taken a significantly different approach and trying to remove some repetition of code.

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit a23407b

https://deploy-preview-1075--docusaurus-preview.netlify.com

[endiliey]

LGTM

[yangshun]

Unfortunately, all existing users site using our showcase component will break because we're removing some classes from lib/static/main.css. We cannot rename the classes, and can only add new ones. This is a downside of v1 that will be addressed in v2.

See yangshun's review

[goksu]

@yangshun — Can you give some details about why that's the case? Is that something related to caching? Also, please let me know if I need to update other parts of the PR that are affected by this other than the main.css.

[yangshun]

@gtoprak I just realized we met at React Conf! Thanks for your contribution!

Hmm it's because lib/static/main.css is part of the docusaurus library. This showcase thing is generated for all projects when someone does docusaurus init and we won't have control over those code after that. If we remove the productShowcaseSection, existing users' HTML will still have the class but there's no longer any styling associated with the class. I recommend not changing any CSS classes. We can only add more classes, but even that is not ideal because ALL users will get the new CSS even though they're using it. Ideally we just add HTML and the custom HTML we add to v1/website/static/css/custom.css.

[goksu]

@yangshun — Yes, thank you for the sticker! I am hoping to have many more contributions in the future too.

I've made the updates to custom.css and reverted my changes to main.css. As far as I can tell from the netlify deploy, it seems to be working as it does on my local. But, please do not hesitate to let me know if this work still is not complete, as you have the expertise on how Docusaurus functions for the users, and I'll lean on you on that.

[yangshun]

This looks better! However we want the logos to be of the same width and height and the captions are just right underneath. In this current implementation the captions are not aligned at all.

[goksu]

I've made the suggested updates, and I did have an off alignment on certain user images. Following two screenshots are how it's looking for me, please let me know if that doesn't reflect what the team is envisioning.

@yangshun — Thank you for the ongoing code review as I appreciate it a lot since I am not familiar with the code base, it's really helpful!

[yangshun]

Very awesome. Thank you!

[goksu]

Thank you @yangshun!