feat: adding CLI tool on the website (449)

[boyney123]

Description

Here is a solution for #449, which adds the CLI within our tools, I believe it can help new users find the CLI and start using it.

[netlify]

✔️ Deploy Preview for asyncapi-website ready!
Built without sensitive environment variables

🔨 Explore the source changes: 5bd4284

🔍 Inspect the deploy log: https://app.netlify.com/sites/asyncapi-website/deploys/61a4a2fbca0b8e000711a12e

😎 Browse the preview: https://deploy-preview-450--asyncapi-website.netlify.app

[boyney123]

What do you think @fmvilas @derberg , I think the new page could help? Or maybe the CLI is already on the website that I'm missing?

@alequetzalli if this goes ahead, will need some help with the wording and stuff 🙏, I kinda put some stuff together, but no idea really if things make sense lol

[derberg]

I'm not sure how asyncapi new works, but maybe it could be added there into code snippet, as a usage example, as it is with the generator?

[derberg]

@boyney123 I think you did not provide a correct link in the description

[boyney123]

@boyney123 I think you did not provide a correct link in the description

ah, thanks fixed that

[boyney123]

I'm not sure how asyncapi new works, but maybe it could be added there into code snippet, as a usage example, as it is with the generator?

Hey @derberg do you mean here on the screenshot? Not 100% sure what you mean, you want to show an example of asyncapi new?

[derberg]

yes exactly, there where you pointed and yes, show example usage of asyncapi that anyone can copy and paste, like it is with Generator view in the website. I think only asyncapi new is feasible for such a use, as far as I remember from Fran's demo on its use case

[quetzalliwrites]

Just a few fixes to do, but I really liked what you wrote 😀👍🏽✨✨✨

[boyney123]

Thanks for the review @alequetzalli 👍

[boyney123]

@derberg thanks for the review and suggestion, I added some examples on the page, let me know what you think

[derberg]

@boyney123 looks awesome, the only remark comes from my old times when I was a tech writer 😄 I think it should be AsyncAPI Studio not AsyncAPI studio and that is it from my side, once you fix it I will approve

[boyney123]

Not sure if I'm missing something but GitHub telling me that there are changes requested, but I think I added your changes @fmvilas

Think this PR is ready for a new review 🙏 @fmvilas @magicmatatjahu

[magicmatatjahu]

Not sure if I'm missing something but GitHub telling me that there are changes requested, but I think I added your changes

If someone reject PR in the past, have to accept it after changes, reject isn't missed in this case :)

[derberg]

I don't think we should merge before asyncapi/cli#130 is fixed, otherwise we will promote command that is not really copy/paste. Other solution, just have asyncapi new and asyncapi help

[fmvilas]

Yeah, agree with @derberg. One thing you can folks do is to remove the start studio example and leave only asyncapi new as it already asks you if you want to open Studio 🤷‍♂️ Or just wait for the other issue to get fixed, as you prefer.

[boyney123]

Cool thanks @derberg @fmvilas yeah OK let's get asyncapi/cli#130 fixed first 👍

[derberg]

@boyney123 @fmvilas I know asyncapi/cli#130 is merged but to be honest it is not yet fully solved, I mean the impression that users will have when trying to run npm start studio. We fallback to local file, cool, but most users will not have it when running CLI basing on examples on the website, and they will get a not very nice error that is not yet solved, which is that context is missing instead of nice error with explanation of what options user have to provide asyncapi file.

I'm not sure it is worth blocking this PR before all these issues are solved, I suggest we just remove asyncapi start studio and only keep asyncapi new and asyncapi help and that is it. Thoughts?

[boyney123]

@derberg thinking about removing it from the list of examples, but maybe we keep it on the section (highlighted in image below)?.

Or you think we should remove that too, and replace it? If so any ideas?

[derberg]

@boyney123 perfect solution imho 🚀

[boyney123]

OK cool, I just pushed up the changes 👍

[magicmatatjahu]

Do we really need second link to Github repo (see screenshot)?

I also think that Features and description for it should be centered :)

Also, please update metadata for new page, because I see this, when I go to /tools/cli page :)

[derberg]

@magicmatatjahu

Do we really need second link to Github repo

it is consistent with Generator view and I think it is ok, kinda makes sense

I also think that Features and description for it should be centered

I like it is on the right as it is consistent with other tools view, even if on others it is caused by images on the right

Also, please update metadata for new page, because I see this, when I go to /tools/cli page :)

you sir have 🦅 👀

[magicmatatjahu]

it is consistent with Generator view and I think it is ok, kinda makes sense

We can always remove that button also in Generator view :)

I like it is on the right as it is consistent with other tools view, even if on others it is caused by images on the right

It can stay, but yeah, without any content on right it's not a "nice" to see.

you sir have 🦅 👀

I don't know if I should thank you, because I smell trolling 😅

[derberg]

@magicmatatjahu

I don't know if I should thank you, because I smell trolling 😅

Your nose is playing tricks on you on Monday 😄
I really do think you did greate there, nobody else spotted 🤷🏼‍♂️

[boyney123]

I also think that Features and descriptions for it should be centered :)

Now looking at it again, yeah agree mate, thanks! Changed think it looks better. @derberg thoughts? I know you prefer the other way, but after changing I think it looks slightly better 🤔 ?

Also, please update metadata for new page, because I see this, when I go to /tools/cli page :)

Ah, nice find! Updated!

Do we really need second link to the Github repo

Yeah, it does look quite odd 🤔 , but as @derberg I only did it to be consistent with other pages, happy to make the changes if we want to. Maybe another PR if we have issues with it?

---

Also found a few layout issues on mobile + tablet, they have also been fixed.

[magicmatatjahu]

LGMT! @derberg What do you think about this centered content? Do you accept that?

[derberg]

lgtm 🚀

[derberg]

I think we still need @fmvilas to accept as his previous reject is blocking merge

[fmvilas]

👏