feat: gravatar (#170)

feat: gravatar

Author: okisdev

components/dashboard/nav.tsx

@@ -15,6 +15,8 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
 import { DashboardSideItems } from '@/components/dashboard/side';
 import { Separator } from '@/components/ui/separator';
 
+import generateMD5Hash from '@/utils/app/generateMD5Hash';
+
 const DashboardNav = ({ user }: { user: any }) => {
     const pathname = usePathname();
 
@@ -29,6 +31,8 @@ const DashboardNav = ({ user }: { user: any }) => {
 
     const description = DashboardSideItems.find((item) => item.base === breadcrumbs?.[0])?.children.find((child) => child.href === breadcrumbs?.[1])?.description;
 
+    const gravatarImage = 'https://www.gravatar.com/avatar/' + generateMD5Hash(user?.email);
+
     return (
         <div>
             <div className='flex items-center justify-between'>
@@ -47,7 +51,7 @@ const DashboardNav = ({ user }: { user: any }) => {
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Avatar className='inline-flex items-center justify-center space-x-1 rounded-lg p-1 px-1 transition duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-stone-700'>
-                            {user.image ? <AvatarImage src={user?.image} /> : <RxAvatar className='text-2xl' />}
+                            <AvatarImage src={user.image || gravatarImage} />
                         </Avatar>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>

components/landing/side/side.tsx

@@ -44,6 +44,8 @@ import SideAppSettings from '@/components/landing/side/side-app-settings';
 import SideUserSettings from '@/components/landing/side/side-user-settings';
 import SideInfo from '@/components/landing/side/side-info';
 
+import generateMD5Hash from '@/utils/app/generateMD5Hash';
+
 const LandingSide = ({ className, user }: { className?: string; user: User | null }) => {
     const router = useRouter();
 
@@ -61,6 +63,8 @@ const LandingSide = ({ className, user }: { className?: string; user: User | nul
 
     if (isHiddenSide) return null;
 
+    const gravatarImage = 'https://www.gravatar.com/avatar/' + generateMD5Hash(user?.email as string);
+
     return (
         <aside className={'bottom-1 left-0 top-1 z-10 h-full flex-col justify-between rounded-lg backdrop-blur md:fixed md:w-80 ' + className}>
             <div className='space-y-2 md:p-1'>
@@ -86,7 +90,9 @@ const LandingSide = ({ className, user }: { className?: string; user: User | nul
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <div className='m-1 flex flex-grow flex-row items-center justify-start space-x-2 rounded-lg bg-white/90 py-1 shadow backdrop-blur transition-transform duration-500 dark:bg-[#202327]'>
-                                <Avatar className='inline-flex items-center justify-center'>{user?.image ? <AvatarImage src={user.image} /> : <RxAvatar className='text-2xl' />}</Avatar>
+                                <Avatar className='inline-flex items-center justify-center'>
+                                    <AvatarImage src={user.image || gravatarImage} />
+                                </Avatar>
                                 <p>{user.name}</p>
                             </div>
                         </DropdownMenuTrigger>

package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tippyjs/react": "^4.2.6",
+    "@types/md5": "^2.3.2",
     "@vercel/analytics": "^1.0.1",
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
@@ -43,6 +44,7 @@
     "formidable": "^3.5.0",
     "jotai": "^2.2.3",
     "lucide-react": "^0.263.1",
+    "md5": "^2.3.0",
     "next": "13.4.9",
     "next-auth": "^4.22.3",
     "next-intl": "^2.19.1",
@@ -82,4 +84,4 @@
     "prisma": "^5.1.1",
     "webpack": "^5.88.2"
   }
-}
+}

utils/app/generateMD5Hash.ts

@@ -0,0 +1,7 @@
+import md5 from 'md5';
+
+const generateMD5Hash = (str: string) => {
+    return md5(str);
+};
+
+export default generateMD5Hash;

yarn.lock

@@ -2002,6 +2002,11 @@
   resolved "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz"
   integrity sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==
 
+"@types/md5@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@types/md5/-/md5-2.3.2.tgz#529bb3f8a7e9e9f621094eb76a443f585d882528"
+  integrity sha512-v+JFDu96+UYJ3/UWzB0mEglIS//MZXgRaJ4ubUPwOM0gvLc/kcQ3TWNYwENEK7/EcXGQVrW8h/XqednSjBd/Og==
+
 "@types/mdast@^3.0.0":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz"
@@ -2706,6 +2711,11 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
+[email protected]:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
 cheerio-select@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
@@ -2885,6 +2895,11 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+[email protected]:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
 crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
@@ -4138,6 +4153,11 @@ is-buffer@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
+is-buffer@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
@@ -4614,6 +4634,15 @@ markdown-table@^3.0.0:
   resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz"
   integrity sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==
 
+md5@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
+  dependencies:
+    charenc "0.0.2"
+    crypt "0.0.2"
+    is-buffer "~1.1.6"
+
 mdast-util-definitions@^5.0.0:
   version "5.1.2"
   resolved "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz"