feature: add helmet for proper meta tags (#37)

* feature: add github mention finder

This can help extracting relevant keywords from user bio and add them to keywords meta.

* chore: add helmet as project dependency

* feature: add user molecule meta component

package.json

@@ -18,6 +18,7 @@
 		"react": "^16.5.2",
 		"react-async": "^3.8.1",
 		"react-dom": "^16.5.2",
+		"react-helmet": "^5.2.0",
 		"styled-components": "^3.4.10"
 	},
 	"devDependencies": {

src/molecules/user/user-meta.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { findMentions } from 'src/providers/github';
+
+export default function UserMoleculeMeta(props) {
+	const title = props.description
+		? `${props.title} – ${props.description}`
+		: props.title;
+
+	const keywords = props.description
+		? props.keywords.concat(findMentions(props.description))
+		: props.keywords;
+
+	return (
+		<Helmet>
+			<title>{title}</title>
+			<meta name="description" content={props.description} />
+			<meta name="keywords" content={keywords.join(', ')} />
+		</Helmet>
+	);
+}
+
+UserMoleculeMeta.propTypes = {
+	/** The full page title to use. */
+	title: PropTypes.string.isRequired,
+	/** A list of all keywords of this person, in relevant order. */
+	keywords: PropTypes.arrayOf(PropTypes.string),
+	/** An optional description of this person. */
+	description: PropTypes.string,
+};
+
+UserMoleculeMeta.defaultProps = {
+	keywords: [],
+	description: '',
+};

src/molecules/user/user.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Avatar from 'src/atoms/avatar';
+import UserMeta from './user-meta';
 import {
 	UserContainer,
 	UserAvatar,
@@ -13,6 +14,11 @@ export default function UserMolecule(props) {
 
 	return (
 		<UserContainer>
+			<UserMeta
+				title={identifier}
+				description={props.description}
+				keywords={[props.name, props.username]}
+			/>
 			<UserAvatar>
 				<Avatar
 					url={props.avatarUrl}

src/providers/github.js

@@ -24,3 +24,14 @@ export const fetchUser = () => (
  * @return {React.Component}
  */
 export const AsyncUser = createInstance({ promiseFn: fetchUser });
+
+/**
+ * Get all GitHub mentions from a text.
+ * This will try and find all words starting with `@` and return them as array, without extra character.
+ *
+ * @param  {string?} text
+ * @return {string[]}
+ */
+export const findMentions = (text) => (
+	(text || '').match(/@([a-z0-9]+)/gi).map(value => value.substr(1))
+);