AsyncAPI: Dynamic Open Graph Link Preview for AsyncAPI Studio

[AceTheCreator]

This project envisions enhancing the social media sharing experience for AsyncAPI Studio by introducing a dynamic Open Graph link preview image generation mechanism. Currently, when users share a link to the Studio with or without query parameters like ?url=<url-of-file> or ?base64=<base64-encoded-doc>, the default preview image lacks context about the specific file being shared.

The goal is to implement a solution that dynamically generates a preview image based on the file being shared. This customized preview image will include essential information such as the title, description, and relevant statistics, offering a more informative representation of the document. This improvement is expected to enhance the user experience when sharing AsyncAPI docs on platforms like Twitter, Linkedin, Facebook, Slack, and others, providing a visually appealing and context-rich preview image.

Learn more here asyncapi/studio#224

Mentor/s:
@smoya

Project Repo:
https://github.com/asyncapi/studio

Expected Difficulty:
Easy-Medium

Expected Time Commitment:
175 Hour

[fmvilas]

I love this one 👍

[atharva-gadekar]

Hello @smoya,
I am interested in contributing to this idea. The idea is great. I read about the entire conversation regarding this issue. This issue will help me learn about SEO and the Open Graph Image, which will be interesting. I just wanted to point out that this seems a little difficult for me as I have never worked with SEO earlier, but I would definitely love to discuss this further.

[AdityaSingh-02]

Hello @AceTheCreator @smoya

I'm Aditya Singh, a Computer Science undergraduate from India with a passion for open-source contributions. Previously, I had the opportunity to participate in GSOC 23 at Rocket.chat, which was an enriching experience. This season, I'm eager to channel my skills and knowledge into contributing to AsyncAPI. The project's requirement matches my tech stack, and I'm excited about the potential impact I can make by contributing to JSON Schema. I'm looking forward to making some worthy contributions🚀

x - https://twitter.com/Go_D_Aditya

[AdityaSingh-02]

Async API Open Graph
This project envisions enhancing the social media sharing experience for AsyncAPI
To create a img preview -

• First we need to design open graph image.
• Secondly, we need few information to display on image
• The Data will be coming from the base64 copied url
• After getting data from base64 we can extract required data which needs to be displayed on the image ex - Title, Description, number of servers, channels and messages.

Hang in there, soon I will try to present a prototype 🚀

[GaganMeshram123]

@AceTheCreator @smoya Hello! I'm Gagan Meshram, a Computer Science undergraduate from India with a passion for open-source contributions. Previously, I had the opportunity to participate in Google Summer of Code at Rocket.chat, which was an enriching experience. This season, I'm eager to channel my skills and knowledge into contributing to AsyncAPI. This project has captured my interest and I would love to build this VS code extension, and I'm excited about the potential impact I can make by contributing to AsyncAPI. I'm looking forward to contributing and making some impact...

[smoya]

Just for the record, @helios2003 got selected as GSOC 2024 Mentee and it is working on this issue.