feature: integrate open graph tags with helmet (#52)

Also, some of the tags can be rendered immediately. All others are updated or enriched with Helmet.
byCedric · Oct 17, 2018 · 7b1a392 · 7b1a392
1 parent 39311d0
commit 7b1a392
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 39 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" prefix="og: http://ogp.me/ns# profile: http://ogp.me/ns/profile#">
 	<head>
 		<meta charset="utf-8">
 		<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<meta name="theme-color" content="#000000">
+
+		<meta property="og:type" content="profile" />
+		<meta property="og:url" content="%PUBLIC_URL%" />
+		<meta property="og:title" content="%REACT_APP_GITHUB_USERNAME%" />
+		<meta property="og:image" content="https://github.com/%REACT_APP_GITHUB_USERNAME%.png" />
+		<meta property="profile:username" content="%REACT_APP_GITHUB_USERNAME%" />
+
 		<!--
 			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/

diff --git a/src/molecules/user/prop-type.js b/src/molecules/user/prop-type.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+
+export const propTypes = {
+	/** The full name of the person who is displayed. */
+	name: PropTypes.string.isRequired,
+	/** The username of the person who is displayed. */
+	username: PropTypes.string.isRequired,
+	/** The absolute URL of the person's avatar.  */
+	avatarUrl: PropTypes.string.isRequired,
+	/** An optional description of this person. */
+	description: PropTypes.string,
+};
+
+export const defaultProps = {
+	description: '',
+};
diff --git a/src/molecules/user/user-meta.js b/src/molecules/user/user-meta.js
@@ -1,36 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { findMentions } from 'src/providers/github';
+import { propTypes, defaultProps } from './prop-type';
 
 export default function UserMoleculeMeta(props) {
 	const title = props.description
-		? `${props.title} – ${props.description}`
-		: props.title;
+		? `${props.name} (${props.username}) – ${props.description}`
+		: `${props.name} (${props.username})`;
 
 	const keywords = props.description
-		? props.keywords.concat(findMentions(props.description))
-		: props.keywords;
+		? [props.name, props.username].concat(findMentions(props.description))
+		: [props.name, props.username];
+
+	const nameSegments = props.name.split(' ');
+	const nameFirst = nameSegments.shift();
+	const nameLast = nameSegments.join(' ');
 
 	return (
 		<Helmet>
 			<title>{title}</title>
 			<meta name="description" content={props.description} />
 			<meta name="keywords" content={keywords.join(', ')} />
+			<meta property="og:title" content={title} />
+			<meta property="og:description" content={props.description} />
+			<meta property="og:image" content={props.avatarUrl} />
+			<meta property="profile:username" content={props.username} />
+			<meta property="profile:first_name" content={nameFirst} />
+			<meta property="profile:last_name" content={nameLast} />
 		</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: '',
-};
+UserMoleculeMeta.propTypes = propTypes;
+UserMoleculeMeta.defaultProps = defaultProps;
diff --git a/src/molecules/user/user.js b/src/molecules/user/user.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Avatar from 'src/atoms/avatar';
+import { propTypes, defaultProps } from './prop-type';
 import UserMeta from './user-meta';
 import {
 	UserContainer,
@@ -14,11 +14,7 @@ export default function UserMolecule(props) {
 
 	return (
 		<UserContainer>
-			<UserMeta
-				title={identifier}
-				description={props.description}
-				keywords={[props.name, props.username]}
-			/>
+			<UserMeta {...props} />
 			<UserAvatar>
 				<Avatar
 					url={props.avatarUrl}
@@ -36,17 +32,5 @@ export default function UserMolecule(props) {
 	);
 }
 
-UserMolecule.propTypes = {
-	/** The full name of the person who is displayed. */
-	name: PropTypes.string.isRequired,
-	/** The username of the person who is displayed. */
-	username: PropTypes.string.isRequired,
-	/** The absolute URL of the person's avatar.  */
-	avatarUrl: PropTypes.string.isRequired,
-	/** An optional description of this person. */
-	description: PropTypes.string,
-};
-
-UserMolecule.defaultProps = {
-	description: '',
-};
+UserMolecule.propTypes = propTypes;
+UserMolecule.defaultProps = defaultProps;