docs: add component list grid view to /guide

[andretchen0]

closes #380

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

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[andretchen0]

@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]

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]

@JaimeTorrealba Can you see it if you scroll down?

[JaimeTorrealba]

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]

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?

[JaimeTorrealba]

Yes, sound good

[andretchen0]

@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

[JaimeTorrealba]

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

[andretchen0]

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]

This is incredible useful guys, I really like it