Merge pull request #2448 from paulkaplan/metatags

Use custom meta tag info for project page.

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;