Improve the Showcase page UI design

[slorber]

🚀 Feature

We have a new showcase page with tags and filtering here: https://docusaurus.io/showcase (PR #4515)

In terms of functionality, it is working, but the design is not very polished.

I'm not a designer and have mostly bad tastes, so I'd like to ask the community to propose some design ideas to improve the current state of this page.

We can probably have:

• Better checkboxes
• Better select
• Better layout
• Better icons
• Better tooltips
• Better accessibility

If you have some design skills and can make some design proposals, that would be helpful.

Otherwise, code PRs are welcome.

Keep in mind however that we don't want to add a ton of very heavy React libraries just for this page:

• don't add something like react-select just for styling the AND/OR select
• prefer vanilla React or very lightweight libs if there is a good reason to actually use a lib
• try to re-use Infima styling and classes for consistency

[duanwilliam]

made a quick mock, open to comments/feedback.

• filters and filter mode select restyled. filter select is taken from theme/Toggle and slightly modified
• website button removed, link is instead on the card title and preview image
• button is disabled rather than not being shown if no link was provided

code: https://github.com/duanwilliam/docusaurus/tree/website-showcase-mock
screenshots: https://gist.github.com/duanwilliam/8f8645244bf1a993064c07773a72b1fc

side note, it might be useful would be a clear all filters button, and being able to show/hide the filters in a drawer or something similar.

[slorber]

Thanks @duanwilliam , I think we can do better but it's already an improvement from the current design, so we add this temporarily until we have a better design proposition (or maybe it will stay, don't know 🤪 )

I think my initial design can be completely refactored, more deeply, with nothing particular to keep apart the behavior (tags filtering logic).
In the end, I think this showcase page can be quite polished, and highlight better the favorite sites.
Probably including some kind of carousel at the top of the page with the best sites, and only displaying the exhaustive list of sites with filtering at the bottom.

What do you think @yangshun @JoelMarcey ?

[anurag8546]

@duanwilliam kindly let me know the path of the source code of this Web-page. I couldn't find anything relevant in.github->workflows.
Kindly help me out!

[Josh-Cena]

@slorber What's the status for this issue? Is @duanwilliam 's design going to be adopted or are we waiting for more solid design ideas?

[slorber]

Still open for proposals.
Also worth linking to other tools having a good showcase page and get some inspiration from them.

I know for example that React-Native plans to have a brand new showcase page soon to replace this one: https://reactnative.dev/showcase
Unfortunately, it's a private WIP and I can't share any design I've seen with you.

[chimailo]

@slorber, @lex111 here is what I put together for the showcase page of the docusaurus website.

Let me know what you think and where it needs alteration.
https://gist.github.com/chimailo/b7279dd42555a649a2ee2c3d47fb3b4b

[slorber]

@chimailo yes I like it thanks! do you want to implement it in a PR?

[chimailo]

@chimailo yes I like it thanks! do you want to implement it in a PR?

Yeah, sure

[lex111]

@chimailo I like it too your design, but maybe it would be better to make filter as toggle?

[Josh-Cena]

Another thing worth discussing is what tags we should have (not exactly UI, but part of the design). cf #5641 (comment)

The showcase is used as a source of inspiration, so we should categorize the tags into two groups: features and usage. Things like "Product", "Large", "Facebook", and "Personal" are all usage cases, while "Design", "i18n", "version", etc. are more feature-like. For people looking for inspiration of how to implement a certain feature, the feature tags can be more useful. We are also missing a non-style customization tag, including custom remark plugins or custom Docusaurus plugins.

[chimailo]

@chimailo I like it too your design, but maybe it would be better to make filter as toggle?

Yeah, would do

[slorber]

+1 for separating features and usage tags, and we could have a more exhaustive list of tags: portal, mdx, remark, swizzle...

Being able to find a decent icon/emoji for each tag can be difficult, a redesign should probably account for the fact that not each tag has an icon, but still looks good.

Technically, we should try to implement all this in a quite lightweight way, and avoid adding heavy/unnecessary UI libs unless they bring real value and treeshake well.

[Josh-Cena]

avoid adding heavy/unnecessary UI libs

Feels kinda funny because Infima should already be a general-purpose UI lib🤪 Are there, by any chance, plans to implement form elements?

[slorber]

Feels kinda funny because Infima should already be a general-purpose UI lib🤪 Are there, by any chance, plans to implement form elements?

It's more for content-centric websites than generic SPAs. I don't think the plan is really clear about it, but IMHO it should stay small and keep the focus on content styling, not form elements. Most Docusaurus sites don't need any form.