Use custom meta tag info for project page.

Note this _will not_ work until the page uses a template that does not include these meta tags. That is because react-helmet does not override any existing info in the head.

Thus, this was tested by removing that info from the template and seeing it work, then putting the template back.

package.json

@@ -32,6 +32,7 @@
     "lodash.defaults": "4.0.1",
     "newrelic": "1.25.4",
     "raven": "0.10.0",
+    "react-helmet": "5.2.0",
     "scratch-docker": "^1.0.2",
     "scratch-parser": "^4.2.0",
     "scratch-storage": "^0.5.1"

src/views/preview/meta.jsx

+const React = require('react');
+const Helmet = require('react-helmet').default;
+
+const projectShape = require('./projectshape.jsx').projectShape;
+
+const Meta = props => {
+    const {title, instructions, author} = props.projectInfo;
+
+    // Do not want to render any meta tags unless all the info is loaded
+    // Check only author (object) because it is ok to have empty string instructions
+    if (!author) return null;
+
+    const truncatedInstructions = instructions.split(' ')
+        .slice(0, 50)
+        .join(' ');
+
+    return (
+        <Helmet>
+            <title>{`${title} on Scratch`}</title>
+            <meta
+                content={`${title} on Scratch by ${author.username}`}
+                name="description"
+            />
+            <meta
+                content={`Scratch - ${title}`}
+                property="og:title"
+            />
+            <meta
+                content={truncatedInstructions}
+                property="og:description"
+            />
+        </Helmet>
+    );
+};
+
+Meta.propTypes = {
+    projectInfo: projectShape
+};
+
+module.exports = Meta;