feature: implement mention link

src/atoms/avatar/elements.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from "styled-components/macro";
 
 /**
  * The avatar container "masks" the underlying image and makes it circular.

src/atoms/highlight/highlight.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import decorator from './decorator';
-import { HighlightContainer } from './elements';
+import React from "react";
+import PropTypes from "prop-types";
+import decorator from "./decorator";
+import { HighlightContainer } from "./elements";
 
 export default function HighlightAtom(props) {
 	return (
@@ -15,5 +15,5 @@ HighlightAtom.propTypes = {
 	/** The text to highlight with the decorators. */
 	children: PropTypes.string.isRequired,
 	/** All decorators with their starting character. */
-	decorators: PropTypes.object.isRequired,
+	decorators: PropTypes.object.isRequired
 };

src/molecules/user/elements.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from "styled-components/macro";
 
 /**
  * The user container creates a vertical-directed flexbox.
@@ -58,7 +58,8 @@ export const UserDescription = styled.div`
 /**
  * The user description highlight styles a single word within this description.
  */
-export const UserDescriptionHighlight = styled.strong`
+export const UserDescriptionHighlight = styled.a`
 	color: #24292e;
-	font-weight: 600;
+	font-weight: 700;
+	text-decoration: none;
 `;

src/molecules/user/user.js

@@ -1,19 +1,31 @@
-import React from 'react';
-import Avatar from 'src/atoms/avatar';
-import Highlight from 'src/atoms/highlight';
-import { propTypes, defaultProps } from './prop-type';
-import UserMeta from './user-meta';
+import React from "react";
+import UserMeta from "./user-meta";
+import Avatar from "src/atoms/avatar";
+import Highlight from "src/atoms/highlight";
+import { propTypes, defaultProps } from "./prop-type";
+import { mentionLink } from "./util";
 import {
 	UserContainer,
 	UserAvatar,
 	UserName,
 	UserDescription,
-	UserDescriptionHighlight,
-} from './elements';
+	UserDescriptionHighlight
+} from "./elements";
 
 const decorators = {
-	'@': (segment, match, key) => <UserDescriptionHighlight key={key}>{segment}</UserDescriptionHighlight>,
-	'#': (segment, match, key) => <UserDescriptionHighlight key={key}>{match}</UserDescriptionHighlight>,
+	"@": (segment, match, key) => (
+		<UserDescriptionHighlight
+			key={key}
+			href={mentionLink(segment)}
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			{segment}
+		</UserDescriptionHighlight>
+	),
+	"#": (segment, match, key) => (
+		<UserDescriptionHighlight key={key}>{match}</UserDescriptionHighlight>
+	)
 };
 
 export default function UserMolecule(props) {
@@ -23,19 +35,11 @@ export default function UserMolecule(props) {
 		<UserContainer>
 			<UserMeta {...props} />
 			<UserAvatar>
-				<Avatar
-					url={props.avatarUrl}
-					name={identifier}
-					title={identifier}
-				/>
+				<Avatar url={props.avatarUrl} name={identifier} title={identifier} />
 			</UserAvatar>
-			<UserName title={identifier}>
-				{props.name}
-			</UserName>
+			<UserName title={identifier}>{props.name}</UserName>
 			<UserDescription>
-				<Highlight decorators={decorators}>
-					{props.description}
-				</Highlight>
+				<Highlight decorators={decorators}>{props.description}</Highlight>
 			</UserDescription>
 		</UserContainer>
 	);

src/molecules/user/util.js

@@ -0,0 +1,11 @@
+export function mentionLink(name) {
+	let mention = name.split("");
+
+	mention.splice(0, 1);
+
+	let username = mention.join("");
+
+	const url = `https://github.com/${username}`;
+
+	return url;
+}