studio
studio copied to clipboard
asyncapi
"Open with Studio" button for Markdown files.
Reason/Context
I'm lately advocating for using Studio whenever I want to add a link to an AsyncAPI file in a Markdown file such as Readmes. Thanks to the ?url=<url-of-file> query param, Studio can load most of files (yes, not all of them, see https://github.com/asyncapi/studio/issues/127).
I think it would be awesome to create a new design for a button that says "Open with Studio", with the AsyncAPI logo on the left or similar.
Description
To design a button that says something like "Open with Studio", with the AsyncAPI logo somewhere that people can use for linking to AsyncAPI files in their Markdown/HML files.
Some examples:
cc @mcturco @alequetzalli @boyney123
I'd actually go beyond Markdown files and would provide an HTML widget (iframe).
I haven't really worried (yet 😈 ) about stuff outside of AsyncAPI's docs and community building, so I haven't been majorly affected by the absence of this.
That said, I can say that I imagine that if I started developing more with our spec, that I would appreciate having the option to open an AsyncAPI file in Studio if it empowers me in visualizing events better.
I think that is a long way to say yes? 😄
@smoya I think this is a great idea! I can definitely work on an image for the button that we can use in markdown files.
I'd actually go beyond Markdown files and would provide an HTML widget (iframe).
@fmvilas do you mean we would make an iframe to run the Studio on someone's website?
do you mean we would make an iframe to run the Studio on someone's website?
I think people can do that on their own, unless we have configured restrictions on the domain side, but I don't think so :) However, we can prepare a docs and a postmessages system so that users can react to changes in the Studio. What do you think?
However, we can prepare a dock and a postmessages system so that users can react to changes in the Studio
@magicmatatjahu I think this would be a great feature to add! And maybe if it gets too complicated in the iframe we can send them to the studio website to explore more features
@fmvilas do you mean we would make an iframe to run the Studio on someone's website?
No, I meant the button itself is an iframe so when it renders on someone's website we can track it's been used, where, etc.
No, I meant the button itself is an iframe so when it renders on someone's website we can track it's been used, where, etc.
@fmvilas oh!! yes that's also a great idea and we should do that 👍
If we went the iframe solution anybody got any ideas on how this could work?
I'm guessing
- Iframe with a button inside and image
- Button goes to function/URL somewhere that can track things (maybe in Google Analytics)?
- URL then directs to the studio...
Kind of a middleman/gateway pattern.....
OR
Also, we could use IMG-shields here is an example 👇
With logo (we can add ours here https://simpleicons.org/ to use it on the shield)
Without Logo
Using some query param ref or something, we could track who is coming from github etc? What kind of metrics are we after here @fmvilas?
If we went the iframe solution anybody got any ideas on how this could work?
Sorry, on Markdown you can't actually embed iframe as far as I know. I meant to have an iframe version for HTML but the one for Markdown would have to be an image 👍
I think the metrics I would be more interested in are:
- Which websites are using the button (feasible by inspecting the HTTP headers when the website is requesting the image)
- How many people are clicking on the buttons (hard to track in Markdown)
Anything else I'm missing? Maybe we should just give up tracking on Markdown? I don't know.
- How many people are clicking on the buttons (hard to track in Markdown)
What if we provide a "button generator" that can either generate HTML or rather Markdown code? We could control the final URL so the tracking might be possible. Of course people could still go in their own creating manually the button, but at least we cover it partially.
EDIT: we could use something (or exactly) like UTM query params for this. https://blog.hubspot.com/marketing/what-are-utm-tracking-codes-ht
@mcturco any ideas for a design for the button we could use?
@boyney123 yes! I think it could be something very simple. I know we have everything drafted for the new branding right now and it is not actually launched yet, but do you think we should use old brand or new brand?
cc: @fmvilas
Let's go with new brand IMHO. It shouldn't take us long to launch the new brand.
Hi 👋 Here are some options for the button. Let's vote on the options here with emojis:
Option 1: react with a ❤️ Option 2: react with a 🚀 Option 3: react with a 🎉
And of course if anyone has any feedback let me know 😄
@mcturco Love them all! 🙌 Let's make sure they work well on the dark background too.
Let's make sure they work well on the dark background too.
@fmvilas aha! Good call. Option 2 will not work the best on dark mode. We could always add a white border around the button to give it the separation it needs on dark mode, but still there might not be enough contrast there.
This issue has been automatically marked as stale because it has not had recent activity :sleeping:
It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.
There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.
Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.
Thank you for your patience :heart:
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I think this is still relevant as some work has been done around it. Can we remove the stale label, please? @mcturco @magicmatatjahu
Here are some new options that work on both light mode and dark mode! Looking for feedback 🙏
Here are some new options that work on both light mode and dark mode! Looking for feedback 🙏
I love them! Even though I have a suggestion, I'm gonna say they could stay like this and I will be happy anyway 😅
I would suggest to try the following: the logo outline (maybe all lines of it) to have the same color as the text. Maybe it won't look pretty nice, but right now I feel is a bit darker than I would expect. Maybe there is another solution for it, or it is just my perspective and no one else feels the same I do.
Yeah, I think the background could be lighter, even if it means we have to use another text color to increase contrast. Also, @mcturco don't you have the feeling that the button is beveled? I think the inner gradient (the background) is the culprit of that effect 😄
@nawed2611 Sure, but that issue is more related to design that coding, cc @mcturco
@mcturco Do you have figma/photoshop file that we can reuse with latest design? :)
Of course the tracking for use is important but maybe let's make this button available and add the rest later? cc @smoya @fmvilas
Yup, we have an AsyncAPI Figma account: https://www.figma.com/file/VC4E6Mn6yt5bEnMlzPA2FK/Open-in-Studio-Button?node-id=0%3A1&t=PiHl3pGKYkOxwgNC-1.
This issue has been automatically marked as stale because it has not had recent activity :sleeping:
It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.
There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.
Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.
Thank you for your patience :heart: