add link previews (#2251)

* add link previews

* add test data to link previews

* add description

* update image and descriptions

* revert some changes

* update test

* fix test

* add example image

* move metatags higher

* remove unused imports

* testing

* add static meta tags

* clean up and revert some code

* fix descriptions

public/index.html

@@ -4,6 +4,15 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#23395B">
+    <meta name="title" content="MapRoulette" />
+    <meta name="description" content="Be an instant contributor to the world’s maps." />
+    <meta property="og:image" content="https://openstreetmap.us/img/pages/maproulette/sign.png" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="MapRoulette" />
+    <meta property="og:description" content="Be an instant contributor to the world’s maps." />
+    <meta property="twitter:title" content="MapRoulette" />
+    <meta property="twitter:description" content="Be an instant contributor to the world’s maps." />
+    <meta property="twitter:image" content="https://openstreetmap.us/img/pages/maproulette/sign.png" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

src/App.js

@@ -169,7 +169,6 @@ export const CachedRoute = ({ component: Component, ...rest }) => {
             <HeadTitle />
             <Component {...props} />
           </>
-
         )
       }} />
   )

src/components/AdminPane/AdminPane.js

@@ -134,7 +134,6 @@ export const CustomRoute = ({ component: Component, ...rest }) => {
             <HeadTitle />
             <Component {...props} />
           </>
-
         )
       }} />
   )

src/components/Head/Head.js

@@ -60,7 +60,10 @@ export const formatTitle = (props) => {
         return capitalize(param)
       }
     })
-    const newTitle = _isEmpty(pathArr) ? REACT_APP_TITLE : REACT_APP_TITLE + ' - ' + pathArr.join(' - ')
+
+    pathArr.reverse();
+
+    const newTitle = _isEmpty(pathArr) ? REACT_APP_TITLE : pathArr.join(' - ') + ' - ' +  REACT_APP_TITLE
     return newTitle
   }
 }

src/components/Head/Head.test.js

@@ -34,6 +34,6 @@ describe("formatTitle", () => {
         }
       } 
     });
-    expect(title).toBe(REACT_APP_TITLE + ' - Foo - Bar - Project Name - 3 - User - 2 - 5');
+    expect(title).toBe('5 - 2 - User - 3 - Project Name - Bar - Foo - ' + REACT_APP_TITLE);
   });
 });