mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-14 01:31:05 -05:00
ef217b96a1
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.
40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
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;
|