Created rich_link_controller and functionalities

[MatheusBuss]

What issue does this PR close

Closes #182

Changes Proposed (a list of new changes introduced by this PR)

Add rich link/preview when Cambiatus andand associated links are shared in different social medias

How to test ( a list of instructions on how to test this PR)

1. Run mix phx.server
2. Send HTTP request for differente funcionalities
   2.1. For User sharing send GET request to /api/rich_link/profile/#{user_name}
   2.2. For Product sharing send GET request to /api/rich_link/shop?id=#{product_id}
   2.3. For Community sharing send GET request to /api/rich_link (Use the host header in the HTTP request for the appropriate community)
3. Check html info sent by the server

Example of sharing html generated by these changes through Whatsapp:

[MatheusBuss]

The Elixir part should be working now. Sharing the HTML generated by the phoenix server worked on WhatsApp, Slack and Facebook. Twitter was not yet tested.

Some of the next steps that I have discussed with @NeoVier:
1 - Use NGINX to redirect the GET request from social media web crawlers based on their user agents (we can look into this list https://developers.whatismybrowser.com/useragents/explore/software_name/)
2 - Check if all the fields are beign filled correctly according to the Open Graph Protocol (https://ogp.me/)

[lucca65]

bro, when the bio has markdown we don't render it properly, like you can see on https://api.staging.cambiatus.io/api/rich_link/profile/lucca (I've published it to staging).

[MatheusBuss]

bro, when the bio has markdown we don't render it properly, like you can see on https://api.staging.cambiatus.io/api/rich_link/profile/lucca (I've published it to staging).

Using pandex I was able to convert markdown to plain text, so it shouldn't be a problem then. But this alternative requires the installation of pandex itself and Pandoc.

I've tried approaching it using Earmark (which is already on mix.exs), but it only converts into HTML os AST as far as I can tell. Therefore we would need to convert that result into plain text afterwards.

So I believe we should try to use pandex going forward

[lucca65]

Ok @MatheusBuss! Np for pandoc

[lucca65]

Also tests? 😬 🔧

[MatheusBuss]

Still to do:

• Use Phoenix's views to render the template
• Implement NGINX redirect
• Rewrite some template fields to properly comply to the Open Graph Protocol

[lucca65]

Its getting better and better bro! Keep it up!

[lucca65]

a URL precisa ser pra tela do perfil, ao invés do email

[lucca65]

Sorry for the long time to work on the review @MatheusBuss

[lucca65]

I liked the instructions. Just followed it now and tested on telegram.

here is the result for this URL: https://api.staging.cambiatus.io/api/rich_link/profile/lucca

I'm missing the photo and we also have a tag that was not rendered correctly.

Also its rendering some sort of lorem ipsum, even if my profile don't have it:

[MatheusBuss]

Also its rendering some sort of lorem ipsum, even if my profile don't have it

That's odd. I tested on Telegram and had the same result, but on WhatsApp it renders correctly (other than the underline tag and the image)

Even checking the html on the page it doesn't have any lorem ipsum in it. Don't know why it shows on Telegram, maybe it's cached from previous tests?

I liked the instructions. Just followed it now and tested on telegram.

We should try to use an URL withouth the /api/rich_link to test if nginx is redirecting correctly the crawlers (something like https://buss.staging.cambiatus.io/profile/mattheusbuss). I even tried with this link, but it didn't work.

[MatheusBuss]

Don't know why it shows on Telegram, maybe it's cached from previous tests?

Exactly this. I found @webpagebot on this thread . It clears the cache on telegram. Now the description is updated!

[lucca65]

Great bro this is awesome! Can we also preview the profile image when sharing profile links?

[MatheusBuss]

I was looking into it, and the html does include the image link, but it isn't loading. I tried downloading based on the link and noticed that the file doesn't have the extension (.jpeg or .png) so it could be that.
Another reason might be the image size. Facebook limits the image size to 8MB (per the developer page) but I remember reading some recommendations to limit the size to 30 kB, but I will have to double check on that.

[lucca65]

I see bro, in this case can you open a new issue for us to transform images on this link? This way we can tackle this in a part two

[MatheusBuss]

I see bro, in this case can you open a new issue for us to transform images on this link? This way we can tackle this in a part two

Created cambiatus/lambda-functions#2

[lucca65]

Looks good to me! congrats bro!

[henriquecbuss]

💰 🔗

🎉