Giveth-dapp: links should preview the dapp

[lorelei1]

When u paste a link to a milestone or campaign, it doesn't give you any visual preview of that page in the DApp!

[GriffGreen]

yeah we need a thumbnail for DACs, campaigns and milestones... i think this could be a github bounty

[GriffGreen]

or a great issue for a new dev :-D

[GriffGreen]

This takes lots of extra work... :( sadly being decentralized with IPFS and adding a preview for twitter is not easy... we might have to add some centralizing features to make that work

[GriffGreen]

prerender.io this would be a centralized solution... it will charge us, it hasn't been tested yet, but it could work and its only like $5 a month...

Webcrawlers don't render javascript, they just grab the metadata from clients that are running on the serverside... we run on the clientside so they can't do that....

[mroberts10]

Andre to create test template of prerender.io for a test on the DAPP repo.

[arbreton]

Working for campaigns, to be worked DACs and milestones

[arbreton]

Campaigns have been working, still to be worked for the pending items

[papermache]

@arbreton Any updates?

[GriffGreen]

@arbreton might have finished this...

[papermache]

@arbreton

[arbreton]

Missing previews for DACs and milestones still

[GriffGreen]

Would be amazing if we could get the links to show up on twitter... i would say thats the real end goal here :-D

https://beta.giveth.io/campaigns/5f504e7bfb3dbe37aee4e050

[aminlatifi]

@arbreton Develop branch has changed extensively, don't forget to merge it to your branch you are working on

[GriffGreen]

There is a prerender.io option and a few other centralized solutions.. We will probably need to deploy a server that hosts pictures just for this... or change the routing to feathers....

We can add a share button... there are a few options... every project, milestone and other options should

[geleeroyale]

These are different issues! The preview on twitter can be accomplished by adding twitter compatible metadata in the page template header. Possible solution

The preview for the DApp would need a different service/library but I see that was (at least partly) realized by Andre. Possible Solution

[mdehghani]

It's easy! I have used it in some other websites in a while.
To solve the problem we should:

1. Deploy prerender.io service on our servers (https://github.com/prerender/prerender)
2. Create an express server to play a proxy role and add a middleware to dispatch the requests from bots (e.g. twitter, whatsapp, facebook, ...) to our service (based on its User-Agent header)

I did these works and pushed it to a branch named f_771_link_preview branch. Please take a look at it and let me know if it is suitable for this situation.

To run the servers, use the following command instead of npm start:
npm run start-with-prerender

Then you can use the new version on port 8080 (instead of 3010)

@aminlatifi

[aminlatifi]

@mdehghani I tested your pull request but I didn't get expected result. I suggest connecting your local dapp to beta backend and testing it yourself.

[GriffGreen]

Push forward with Kay :-D Let's do it!