-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve the Showcase page UI design #4669
Comments
made a quick mock, open to comments/feedback.
code: https://github.com/duanwilliam/docusaurus/tree/website-showcase-mock 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. |
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). What do you think @yangshun @JoelMarcey ? |
@duanwilliam kindly let me know the path of the source code of this Web-page. I couldn't find anything relevant in |
@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? |
Still open for proposals. I know for example that React-Native plans to have a brand new showcase page soon to replace this one: https://reactnative.dev/showcase |
@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. |
@chimailo yes I like it thanks! do you want to implement it in a PR? |
Yeah, sure |
@chimailo I like it too your design, but maybe it would be better to make filter as toggle? |
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. |
Yeah, would do |
+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. |
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. |
🚀 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:
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:
The text was updated successfully, but these errors were encountered: