Migrate to Gravatar profile REST API

gravatar · May 29, 2024 · dafdad9 · dafdad9
1 parent 32b4744
commit dafdad9
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -224,19 +224,30 @@ The `profileData` parameter is an object that contains the following properties:
 ```ts
 interface ProfileData {
     hash: string;
-    preferredUsername: string;
-    thumbnailUrl: string;
-    displayName: string;
-    currentLocation?: string;
-    aboutMe?: string;
-    accounts?: Record< 'url' | 'shortname' | 'iconUrl' | 'name', string >[];
+	avatarUrl: string;
+	profileUrl: string;
+	displayName: string;
+	location?: string;
+	description?: string;
+	jobTitle?: string;
+	company?: string;
+	verifiedAccounts?: Record< 'label' | 'icon' | 'url' | 'type', string >[];
 }
 ```
 
-##### `onFetchProfileFailure: ( hash: string, error: Error ) => void`
+##### `onFetchProfileFailure: ( hash: string, error: FetchProfileError ) => void`
 
 This callback function is triggered when the library fails to fetch a Gravatar profile. It takes the Gravatar hash and the error as parameters. Note this function is executed only once per Gravatar hash due to the caching mechanism.
 
+The `error` parameter is an object that contains the following properties:
+
+```ts
+interface FetchProfileError {
+    code: number;
+    message: string;
+}
+```
+
 ##### `onHovercardShown: ( hash: string, hovercard: HTMLDivElement ) => void`
 
 This callback function is triggered when the hovercard is shown. It takes the Gravatar hash and the hovercard element as parameters.
@@ -258,16 +269,18 @@ import { Hovercards } from '@gravatar-com/hovercards';
 
 const hovercard = Hovercards.createHovercard( {
     hash: '...',
-    preferredUsername: '...',
-    thumbnailUrl: '...',
+    avatarUrl: '...',
+    profileUrl: '...',
     displayName: '...',
-    currentLocation: '...',
-    aboutMe: '...',
-    accounts: [ {
+    description: '...',
+    location: '...',
+    jobTitle: '...',
+    company: '...',
+    verifiedAccounts = [ {
+        label: '...',
+        icon: '...',
         url: '...',
-        shortname: '...',
-        iconUrl: '...',
-        name: '...',
+        type: '...',
     } ],
 } );
 

diff --git a/playground/core.ts b/playground/core.ts
@@ -24,12 +24,12 @@ addEventListener( 'DOMContentLoaded', () => {
 	// To test sanitization
 	document.getElementById( 'inline-hovercard' )?.appendChild(
 		Hovercards.createHovercard( {
-			hash: 'd538859cbc5da94681f81bd1380cac96',
-			thumbnailUrl: 'https://www.gravatar.com/avatar/d538859cbc5da94681f81bd1380cac96?s=60&d=retro&r=g&esc=^^',
-			preferredUsername: 'wellycybertech',
+			hash: '99c3338797c95c418d9996bd39931506',
+			avatarUrl: 'https://www.gravatar.com/avatar/99c3338797c95c418d9996bd39931506?s=60&d=retro&r=g&esc=^^',
+			profileUrl: 'https://gravatar.com/wellyshen',
 			displayName: '<i>gyp</i>',
-			currentLocation: '<i>Earth</i>',
-			aboutMe: '<i>Test</i>, &amp;, &lt;, &gt;, &quot;, &#39;, &#x60;',
+			location: '<i>Earth</i>',
+			description: '<i>Test</i>, &amp;, &lt;, &gt;, &quot;, &#39;, &#x60;',
 		} )
 	);
 } );
diff --git a/playground/index.html b/playground/index.html
@@ -28,27 +28,16 @@
 		<main id="main">
 			<div id="vanilla">
 				<img
-					src="https://www.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=60&d=retro&r=g"
+					src="https://www.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5?s=60&d=retro&r=g"
 					width="60"
 					height="60"
 				/>
 				<img
-					src="https://www.gravatar.com/avatar/99c3338797c95c418d9996bd39931506"
+					src="https://www.gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270"
 					width="60"
 					height="60"
 				/>
-				<img
-					src="https://www.gravatar.com/avatar/f3023a1c05b9a37f8a0ac2bf132e68e0ee030610364e36611c08b391b9532e77?s=60&d=retro&r=g"
-					width="60"
-					height="60"
-				/>
-				<img
-					id="img"
-					src="https://www.gravatar.com/avatar/d538859cbc5da94681f81bd1380cac96?s=60&d=retro&r=g"
-					width="60"
-					height="60"
-				/>
-				<div id="attr" data-gravatar-hash="d538859cbc5da94681f81bd1380cac96?s=60&d=retro&r=g">@WellyTest</div>
+				<div id="attr" data-gravatar-hash="c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?s=60&d=retro&r=g">@WellyTest</div>
 				<div id="inline-hovercard"></div>
 			</div>
 			<div id="react-app"></div>

diff --git a/playground/react.tsx b/playground/react.tsx
@@ -29,13 +29,13 @@ function App() {
 			<div>
 				<div ref={ containerRef } style={ { display: 'flex', flexDirection: 'column', gap: '5rem' } }>
 					<img
-						src="https://www.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=60&d=retro&r=g"
+						src="https://www.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5?s=60&d=retro&r=g"
 						width="60"
 						height="60"
 						alt="Gravatar"
 					/>
 					<img
-						src="https://www.gravatar.com/avatar/99c3338797c95c418d9996bd39931506"
+						src="https://www.gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270"
 						width="60"
 						height="60"
 						alt="Gravatar"
@@ -44,19 +44,21 @@ function App() {
 			</div>
 			<Hovercards style={ { display: 'flex', flexDirection: 'column', gap: '5rem' } } { ...props }>
 				<img
-					src="https://www.gravatar.com/avatar/a8fb08baaca16a8c0c87177d3d54499b"
+					src="https://www.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5?s=60&d=retro&r=g"
 					width="60"
 					height="60"
 					alt="Gravatar"
 				/>
 				<img
-					id="img"
-					src="https://www.gravatar.com/avatar/d538859cbc5da94681f81bd1380cac96?s=60&d=retro&r=g"
+					src="https://www.gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270"
 					width="60"
 					height="60"
 					alt="Gravatar"
 				/>
-				<div id="attr" data-gravatar-hash="d538859cbc5da94681f81bd1380cac96?s=60&d=retro&r=g">
+				<div
+					id="attr"
+					data-gravatar-hash="c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?s=60&d=retro&r=g"
+				>
 					@WellyTest
 				</div>
 			</Hovercards>