saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-05 08:42:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

handle no avatar

Browse Source
This commit is contained in:
austinkelsay 2024-08-01 16:31:52 -05:00
parent 1a1f6a6fe4
commit 8d4c9aaa83
7 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/CourseDetails.js
View File

@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
import { useNostr } from '@/hooks/useNostr';
import { findKind0Fields } from '@/utils/nostr';
import { useImageProxy } from '@/hooks/useImageProxy';
import { Button } from 'primereact/button';
import ZapDisplay from '@/components/zaps/ZapDisplay';
import { Tag } from 'primereact/tag';
import { nip19 } from 'nostr-tools';
import { useLocalStorageWithEffect } from '@/hooks/useLocalStorage';
@ -31,6 +31,7 @@ export default function CourseDetails({processedEvent}) {
const [bitcoinConnect, setBitcoinConnect] = useState(false);
const [nAddress, setNAddress] = useState(null);
const [user] = useLocalStorageWithEffect('user', {});
const [zapAmount, setZapAmount] = useState(0);
const { returnImageProxy } = useImageProxy();
const { fetchKind0, zapEvent } = useNostr();
@ -98,7 +99,7 @@ export default function CourseDetails({processedEvent}) {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar thumbnail"
src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
src={returnImageProxy(author?.avatar, author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"
@ -126,21 +127,8 @@ export default function CourseDetails({processedEvent}) {
<BitcoinConnectPayButton onClick={handleZapEvent} />
</div>
) : (
<div>
<Button
icon="pi pi-bolt"
label="Zap"
severity="success"
outlined
onClick={handleZapEvent}
pt={{
button: {
icon: ({ context }) => ({
className: 'bg-yellow-500'
})
}
}}
/>
<div className='w-full flex justify-end'>
<ZapDisplay zapAmount={zapAmount} event={processedEvent} />
</div>
)}
</div>

2
src/components/navbar/user/UserAvatar.js
View File

@ -65,7 +65,7 @@ const UserAvatar = () => {
<div onClick={(event) => menu.current.toggle(event)} className='flex flex-row items-center justify-between cursor-pointer hover:opacity-75'>
<Image
alt="logo"
src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
src={returnImageProxy(user.avatar, user.pubkey)}
width={50}
height={50}
className={styles.logo}

30
src/hooks/useImageProxy.js
View File

@ -1,12 +1,30 @@
import React from "react"
export const useImageProxy = () => {
const returnImageProxy = (image) => {
const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
return proxyUrl;
// This function handles image URL generation for avatars
// It can process custom avatars, generate Gravatar URLs, or provide a default avatar
const returnImageProxy = (image, pubkey, size = 90) => {
// If a custom image URL is provided
if (image) {
// Use the proxy URL to avoid CORS issues and potentially optimize the image
const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
return proxyUrl;
}
// If no image is provided, but a pubkey is available
else if (pubkey) {
// Generate a Gravatar URL using the pubkey as the identifier
// 's' parameter sets the size of the image
// 'd=identicon' ensures a default identicon is generated if no Gravatar exists for this pubkey
return `https://secure.gravatar.com/avatar/${pubkey}?s=${size}&d=identicon`;
}
// If neither image nor pubkey is provided
else {
// Return a completely generic Gravatar URL
// This will always generate a random identicon
return `https://secure.gravatar.com/avatar/?s=${size}&d=identicon`;
}
}
return { returnImageProxy };
// Return the function so it can be used by components
return { returnImageProxy };
}

6
src/pages/course/[slug].js
View File

@ -109,9 +109,7 @@ const Course = () => {
return (
<>
<CourseDetails processedEvent={course} />
{
lessons.length > 0 && lessons.map((lesson, index) => (
{lessons.length > 0 && lessons.map((lesson, index) => (
<div key={index} className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
<div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
@ -129,7 +127,7 @@ const Course = () => {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar thumbnail"
src={returnImageProxy(lesson.author?.avatar)}
src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"

2
src/pages/details/[slug].js
View File

@ -124,7 +124,7 @@ export default function Details() {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar image"
src={returnImageProxy(author?.avatar)}
src={returnImageProxy(author?.avatar, author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"

2
src/pages/draft/[slug]/index.js
View File

@ -266,7 +266,7 @@ export default function Details() {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="resource thumbnail"
src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
src={returnImageProxy(draft.author?.avatar, draft.author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"

2
src/pages/profile.js
View File

@ -73,7 +73,7 @@ const Profile = () => {
<div className="relative flex w-full items-center justify-center">
<Image
alt="user's avatar"
src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
src={returnImageProxy(user.avatar, user.pubkey)}
width={100}
height={100}
className="rounded-full my-4"