Generate social cards on the fly with NFT name, price and KodaDot branding

[AndreyGrin]

Here image preview should already work.
But to make it really nice, I will require some help, probably from @vikiival

1. How can I get nft.price in the same view as component returns but I need only value as string.
2. Is it possible to get width and height attributes for images? This will allow me to build previews based on image sizes and not with fixed dimensions.

[AndreyGrin]

I think build fails for same reason as I had in local. vue-social-sharing package is missing in package.json Should I push updates package.json as well?

[vikiival]

Should I push updates package.json as well?

Yes please.

How can I get nft.price in the same view as component returns but I need only value as string.

I'm not sure that I understand the question.

Is it possible to get width and height attributes for images?

Reading Image Sizes and Dimensions with Vue.js

Vue: get image width + height

[AndreyGrin]

1. I realised that you have main package.json inside dashboard folder so now build should work on my local without additional changes
2. I need price in this format 0.9800 KSM / 448.1442 USD (string), right now component will return some html as well so I can't use it.
3. thanks, will check

[yangwao]

1. I realised that you have main package.json inside dashboard folder so now build should work on my local without additional changes

Yes, we are thinking to rename dashboard to nft-gallery to be more clear as it's package pattern like you have in lerna.

2. I need price in this format 0.9800 KSM / 448.1442 USD (string), right now component will return some html as well so I can't use it.

Maybe @JKrupinski can chime on this

3. thanks, will check

[yangwao]

Just testing out
Telegram works perfect!

Twitter is probably using other format?
https://cards-dev.twitter.com/validator

Discord plays a well!

[AndreyGrin]

Tested in twitter. It doesn't work in their validator but works fine in twitter posts.

@yangwao Do you want to change anything or we are good to go? I would say it looks good with wide format even if it cropped, but this is really stands out and takes attention for my opinion.

[vikiival]

Wow nice ! 🚀

[yangwao]

Tested in twitter. It doesn't work in their validator but works fine in twitter posts.

@yangwao Do you want to change anything or we are good to go? I would say it looks good with wide format even if it cropped, but this is really stands out and takes attention for my opinion.

Wow, I could not add more positive emotions to this! I like it! As first iteration on this big chunk is lot of stuff :)
Also never realized that twitter has X on the left in preview mode.

But hey, what about the bottom text when it's posted, seems it's cropped? Maybe add some margin to it?

Just noted that Medium is doing some previews as well

[AndreyGrin]

Changed aspect ratio to be 2:1 as in twitter doc, but now it cuts on sides.
How could I test medium? I tried to use link in post and comment but it doesn't build preview

[yangwao]

Changed aspect ratio to be 2:1 as in twitter doc, but now it cuts on sides.

I mean perfect, let's put logo slightly far from edge and it would be perfect to fly! :)
Yet I see you need to handle undefined there :)

How could I test medium? I tried to use link in post and comment but it doesn't build preview

Log into medium
open https://medium.com/new-story
paste link
hit enter
take a while <- this seems really random

and boom
but sometimes, takes longer than.. while.

Medium seems really random

Anyway, seems medium doesn't have tool for themselves, but have links to other debugers
https://help.medium.com/hc/en-us/articles/215769058-Update-social-media-preview-cards

Preview from linkedin

Found some reading https://medium.com/blogging-guide/medium-article-image-focal-point-d0c4f2001986

[AndreyGrin]

Yay, twitter finally good. Pushed price and logo few pixel more from sides to avoid cutting at other resources.
For a note: while testing, use different images, since Vercel caches image forever, so it won't regenerate it with new size/styles. Fixed undefined price. The only thing what's left is a correct price display in KSM/USD format. Who can help with that?

[yangwao]

@vikiival can guide you through, there is a format balance component and we would like to show just KSM as USD may change since then when was it was first cached.

What's are options for vercel pricing or it's free tier I guess for now?
I mean, you can then probably transfer the repository to kodadot and we can deploy it? )
Love to have your long-term contributions :)

[vikiival]

@AndreyGrin we use this formatBalance function

so if you call {{ value | formatBalance }} it should be allright

[AndreyGrin]

Pushed correct price format. Thanks @vikiival for help.
So I can transfer repo to Kodadot, but might need some help with that as I never did it before :)

[AndreyGrin]

Got error: You don’t have the permission to create public repositories on kodadot so probably I need transfer it to user. Should I transfer to you @yangwao ?

[yangwao]

Yes, @AndreyGrin you can transfer it to me, I'll make deploy on vercel and we can let it merge into main and probably push to the production :)

[yangwao]

okay, we hope that vercel won't limit us but eventually we can afford migrate under organisation later, sometime :)