Make link previews dynamic to each page
This is ticket is building off of https://github.com/maproulette/maproulette3/issues/2248 & https://github.com/maproulette/maproulette3/issues/1755, Link previews have already been implemented already in this PR: https://github.com/maproulette/maproulette3/pull/2251, be we need to make these link previews dynamic to each page of the app.
We need different previews, (Including images, descriptions, and titles) for each of these pages:
- Not found
- Home
- Dashboard
- Browse
- Task focused
- (Possibly add manage and edit versions)
- Challenge focused
- (Possibly add manage and edit versions)
- Project focused
- (Possibly add manage and edit versions)
- Leaderboard focused
Additional context Adding custom meta tags wouldn't be that big of an issue, react-helmet is a great library are using and can use to create those meta tags. However, there is a problem with how we need to pass props and the order of which the components of a page are rendered. The helmet has to have the props in order to set up dynamic meta tags, but also needs to run at the start of page rendering as link preview creation in other apps only read the initial render.