Vocabulary: Demonstration of Vocabulary Usage

[jahnvigupta]

Description

To make it easier for a user who is unfamiliar with vocabulary, a demonstration of using vocabulary components with a basic site created can be made.

Problems solved

Users will not have to spend time understanding vocabulary.

Alternatives

Additional context

Want to take up?

Yes

[dhruvkb]

@jahnvigupta if you can come up with a concrete plan first, with implementation details, that would be awesome. I'm inclined towards using a service like CodePen, but please comment if you have some alternative ideas.

[jahnvigupta]

@dhruvkb I am thinking of showing an example of an attractive site which can convince any user building any type of website to use vocabulary and make it easier to understand the process of building a website with components, I believe a site needs to be designed before the demonstration. Do you recommend looking for website designs?

[dhruvkb]

@jahnvigupta I would recommend consulting @panchovm for some basic designs and common use patterns. Also tagging @hugosolar for insights on the scope of the issue.

[jahnvigupta]

@panchovm Kindly recommend on how to start with the design of the basic website with vocabulary that can help Users understand the usage and can attract them to use vocabulary. @hugosolar Please give some insights on the issue.

[panchovm]

I am not sure about the approach. The first stage we face when (re)designing a web is what is the content about and the correct structure to provide fluid navigation. After that, Vocabulary and the Design Library allow different forms or placing and distributing components. In the case of color and font is even more open, allows multiple designs. Therefore, I am not sure about presenting a specific way of using our design system. It might restrict future designs.

[dhruvkb]

I had a different spin on the issue. @makkoncept faced some issues when incorporating Vocabulary elements into his extension and the primary way he resolved these problems with me was by sharing minimal working examples through CodePen. I think if we had a collection of such CodePens that documented particularly hard-to-navigate problems, it would be helpful.

[jahnvigupta]

@dhruvkb and @makkoncept Can you give more details on minimal working examples ?

[megha070]

@dhruvkb I would like to work on this.

[makkoncept]

Hey @dhruvkb, Sorry your tagging got buried in my notifications.

So, as far as the minimum working examples are concerned, I would suggest two things:

• Any component where SVG icons are used is taken because some javascript is also needed there.

• Also, each example can show few components together in a codepen instead of just focusing on one as the code of each component is very easy to understand but a beginner may face difficulties when trying to make these components work together in harmony.

[nimishbongale]

@dhruvkb If I understand the issue correctly, I think the unified landing site (once up and running) will automatically resolve this? We have quite a user-friendly component level documentation on our netlify site as of now. Maybe we could add a Demo page which demonstrates how to add a simple vocabulary component to a dummy site, and the various ways of doing the same?

[riyasingh1004]

Can I take this issue ? As I have understood from the earlier discussions we need a getting started guide for vocabulary, so I would suggest a "build your first app" kind of documentation for giving a head start to developers.

[nimishbongale]

I'd suggest you to have a look on our website where we were going to go ahead and add a "Getting Started" page. This would cover all the steps to using a simple vocabulary component in a web app.

Just to give you a head start, I think you would need to code & add gettingstarted.stories.mdx in packages/vocabulary/.storybook/meta.

[nimishbongale]

I'd suggest you to have a look on our website where we were going to go ahead and add a "Getting Started" page. This would cover all the steps to using a simple vocabulary component in a web app.

Just to give you a head start, I think you would need to code & add gettingstarted.stories.mdx in packages/vocabulary/.storybook/meta.

I'm going ahead with this approach as I believe it sort of makes sense to have the getting started pages as a part of the storybook (where other sections like installation, overview etc. exist)