docs: add component list grid view to /guide

Tresjs / cientos

Collection of useful helpers and fully functional, ready-made abstractions for TresJS

https://cientos.tresjs.org/

MIT License

281 stars 40 forks source link

docs: add component list grid view to /guide #399

Closed andretchen0 closed 4 months ago

andretchen0 commented 5 months ago

closes #380

This adds a grid view of the component list to /guide.

stackblitz[bot] commented 5 months ago

Run & review this pull request in StackBlitz Codeflow.

andretchen0 commented 5 months ago

@JaimeTorrealba

Since the data's not just used for the sidebar anymore, I thought it made sense to move the component list out of /docs/.vitepress/config.ts.

I put it into docs/guide/componentList.ts. The info about which component categories was factored out and left in /docs/.vitepress/config.ts. I think that makes sense, but let me know what you think.

We'll have to change that docs/guide/componentList.ts when we add a new component – like we changed docs/.vitepress/config.ts before.

JaimeTorrealba commented 5 months ago

Hi @andretchen0, I like the idea. But when I pull the changes, nothing happen. I need to do some action to be able to see the grid?

I checked, I have your changes in local but the view is the same

andretchen0 commented 5 months ago

@JaimeTorrealba Can you see it if you scroll down?

Screenshot 2024-05-03 at 15-17-24 Cientos

JaimeTorrealba commented 5 months ago

Ok, ok now I see, it just in the guide page.

Unmm what can we do to improve the UX here? Using the same structure already create.

It could be a link below the guide for all component (grid view) or in the navbar next to the search wdyt?

Could be a modal with a float button?.

andretchen0 commented 5 months ago

or in the navbar next to the search wdyt?

Sure. What if we create a separate page and put a link here, in order to group visually similar elements?

Screenshot 2024-05-03 at 15-17-24 Cientos copy

JaimeTorrealba commented 5 months ago

Yes, sound good

andretchen0 commented 5 months ago

@JaimeTorrealba

Added http://localhost:5173/component-list/
Moved the component list data to docs/component-list/components.ts – we'll have to edit this one when we add new components

andretchen0 commented 5 months ago

Is ok for now, later we can see how to create the links automatically

Just FYI, there's no repetition of data. Or at least no more than existed prior to this PR.

Previously: when we added a new component, to make it accessible in the docs, we had to add it to docs/.vitepress/config.ts in the config.sidebar
Now: when we add a new component, we add it to docs/component-list/components.ts. That information is read by both <CientosComponentListGridView /> and config.sidebar.

Is that ok?

alvarosabu commented 4 months ago

This is incredible useful guys, I really like it