[FEATURE] Embed BioDrop Profile on external site

[usmangt]

Description

~~Can you please provide the link to the Documentation OR steps so that I can embed my BioDrop profile on a website?~~

Edit: To have an embeddable widget to be used on external sites (including GitHub Profiles)

• technically how do we implement this
  • we can convert the react components to SVG using https://github.com/vercel/satori
  • we can use NextJS OG library for rendering the SVG https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples

Screenshots

No response

Do you want to work on this issue?

No

Additional information

We can have various cards we can use, Tailwind components we paid for has many we can get started with (horizontal and vertical)...

https://tailwindui.com/components/marketing/sections/team-sections#component-4e063e98aa321fbeac0d9cae08a36a7c

[github-actions[bot]]

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/BioDrop/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[SaraJaoude]

@usmangt thank you for raising. We cannot sent you the Docs or steps as this currently is not a feature. It is however a great idea so I have amended the title and description to reflect a new feature request. We will need to give some thought to this so for the moment, I will add the label talk: discussion so that the community can discuss the following:

• technically how do we implement this
• what type widgets should we have

[usmangt]

Thank you v.much I really appreciate it as this will be a great feature.

[github-actions[bot]]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[dhruvilmehta]

Is this similar to embedding a YouTube video to the external website using the <iframe> tag? We would have to put a BioDrop URL in the <iframe> tag to do this right?

[SaraJaoude]

Is this similar to embedding a YouTube video to the external website using the <iframe> tag? We would have to put a BioDrop URL in the <iframe> tag to do this right?

@dhruvilmehta no it is not. This is similar to how people embed widgets in their GitHub Profile using the method explained in the description. Given that <iframe> can be a potential security risk, many external sites remove them, so this is not something we want to do.

[babblebey]

Hi @SaraJaoude

Kindly assign me this.

Thank you.

[eddiejaoude]

Awesome! I have assigned it to you @babblebey