Optimize image and metadata for username link

[sbddesign]

Username links (like this one https://twelve.cash/[email protected]) look pretty poor and default when shared to social.

Let's optimize this to have better. text in the title and description field, as well as a cool custom image that has the username in the image.

Requires design, and we can implement with the NextJS Dynamic Image technique: https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-image-generation

[sbddesign]

Examples of social share image:

• TwelveCash (not great): https://socialsharepreview.com/?url=https://twelve.cash/[email protected]
• GitHub (pretty good, informative) https://socialsharepreview.com/?url=https://github.com/atlantabitdevs/atlbit.dev/issues/82

I think our image needs the username ([email protected]). I don't think it's worth including other information on there. For example, validation should always occurs client-side. And if validation should occur client-side, you don't want any actual payment info in there. Not too mention it would look messy and the whole point is to abstract away the technical payment info into a username.

It could be nice to try some kind of graphic, visual, or color that is deterministically generated from the username. For Nostr users that have claimed these, we could pull the Nostr avatar. 🤔