Merge pull request #20 from gravatar/add/professional-fields

Add professional fields and adjust styles

playground/react.tsx

@@ -44,7 +44,7 @@ function App() {
 			</div>
 			<Hovercards style={ { display: 'flex', flexDirection: 'column', gap: '5rem' } } { ...props }>
 				<img
-					src="https://www.gravatar.com/avatar/f3023a1c05b9a37f8a0ac2bf132e68e0ee030610364e36611c08b391b9532e77?s=60&d=retro&r=g"
+					src="https://www.gravatar.com/avatar/a8fb08baaca16a8c0c87177d3d54499b"
 					width="60"
 					height="60"
 					alt="Gravatar"

src/core.ts

@@ -12,6 +12,8 @@ export interface ProfileData {
 	displayName: string;
 	currentLocation?: string;
 	aboutMe?: string;
+	jobTitle?: string;
+	company?: string;
 	accounts?: Account[];
 }
 
@@ -62,7 +64,6 @@ interface HovercardRef {
 
 const BASE_API_URL = 'https://secure.gravatar.com';
 
-const socialLinksOrder = [ 'wordpress', 'mastodon', 'tumblr', 'github', 'twitter' ];
 const dc = document;
 
 export default class Hovercards {
@@ -237,6 +238,8 @@ export default class Hovercards {
 			displayName,
 			currentLocation,
 			aboutMe,
+			jobTitle,
+			company,
 			accounts = [],
 		} = profileData;
 
@@ -247,31 +250,31 @@ export default class Hovercards {
 		const username = escHtml( displayName );
 		const isEditProfile = ! aboutMe && myHash === hash;
 		const renderSocialLinks = accounts
+			.slice( 0, 3 )
 			.reduce( ( links, { url, shortname, iconUrl, name } ) => {
-				const idx = socialLinksOrder.indexOf( shortname );
-
-				if ( idx !== -1 ) {
-					links[ idx ] = `
-						<a class="gravatar-hovercard__social-link" href="${ escUrl( url ) }" target="_blank" data-service-name="${ shortname }">
-							<img class="gravatar-hovercard__social-icon" src="${ escUrl( iconUrl ) }" width="32" height="32" alt="${ escHtml(
-						name
-					) }" />
-						</a>
-					`;
-				}
+				links.push( `
+					<a class="gravatar-hovercard__social-link" href="${ escUrl( url ) }" target="_blank" data-service-name="${ shortname }">
+						<img class="gravatar-hovercard__social-icon" src="${ escUrl( iconUrl ) }" width="32" height="32" alt="${ escHtml(
+					name
+				) }" />
+					</a>
+				` );
 
 				return links;
 			}, [] )
 			.join( '' );
 
+		const professionalInfo = [ jobTitle, company ].filter( Boolean ).join( ', ' );
+
 		hovercard.innerHTML = `
 			<div class="gravatar-hovercard__inner">
 				<div class="gravatar-hovercard__header">
 					<a class="gravatar-hovercard__avatar-link" href="${ profileUrl }" target="_blank">
-						<img class="gravatar-hovercard__avatar" src="${ escUrl( thumbnailUrl ) }" width="56" height="56" alt="${ username }" />
+						<img class="gravatar-hovercard__avatar" src="${ escUrl( thumbnailUrl ) }" width="72" height="72" alt="${ username }" />
 					</a>
 					<a class="gravatar-hovercard__name-location-link" href="${ profileUrl }" target="_blank">
 						<h4 class="gravatar-hovercard__name">${ username }</h4>
+						${ professionalInfo ? `<p class="gravatar-hovercard__location">${ escHtml( professionalInfo ) }</p>` : '' }
 						${ currentLocation ? `<p class="gravatar-hovercard__location">${ escHtml( currentLocation ) }</p>` : '' }
 					</a>
 				</div>
@@ -353,6 +356,8 @@ export default class Hovercards {
 							currentLocation,
 							aboutMe,
 							accounts,
+							job_title: jobTitle,
+							company,
 						} = data.entry[ 0 ];
 
 						this._cachedProfiles.set( hash, {
@@ -362,6 +367,8 @@ export default class Hovercards {
 							displayName,
 							currentLocation,
 							aboutMe,
+							jobTitle,
+							company,
 							accounts: accounts?.map( ( { url, shortname, iconUrl, name }: Account ) => ( {
 								url,
 								shortname,

src/style.scss

@@ -95,12 +95,12 @@ $color-blue: #1d4fc4;
 	}
 
 	.gravatar-hovercard__body {
-		min-height: 63px;
+		min-height: 42px;
 	}
 
 	.gravatar-hovercard__about {
 
-		@include ellipsis(3);
+		@include ellipsis(2);
 	}
 
 	.gravatar-hovercard__footer {
@@ -152,8 +152,8 @@ $color-blue: #1d4fc4;
 	}
 
 	.gravatar-hovercard__avatar-link {
-		width: 56px;
-		height: 56px;
+		width: 72px;
+		height: 72px;
 		border-radius: 50%;
 	}