forked from Kieran/snort
refactor: put gradients on css
This commit is contained in:
parent
5624e6560c
commit
8bffd3bd4c
@ -17,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain[data-domain="snort.social"] {
|
.nip05 .domain[data-domain="snort.social"] {
|
||||||
background: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success));
|
background: var(--snort-gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@ -25,7 +25,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain[data-domain="nostrplebs.com"] {
|
.nip05 .domain[data-domain="nostrplebs.com"] {
|
||||||
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
background: var(--nostrplebs-gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@ -33,7 +33,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain[data-domain="nostrpurple.com"] {
|
.nip05 .domain[data-domain="nostrpurple.com"] {
|
||||||
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
background: var(--nostrplebs-gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@ -41,7 +41,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain[data-domain="nostr.fan"] {
|
.nip05 .domain[data-domain="nostr.fan"] {
|
||||||
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
background: var(--nostrplebs-gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@ -49,7 +49,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain[data-domain="nostrich.zone"] {
|
.nip05 .domain[data-domain="nostrich.zone"] {
|
||||||
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
background: var(--nostrplebs-gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@ -57,7 +57,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain[data-domain="nostriches.net"] {
|
.nip05 .domain[data-domain="nostriches.net"] {
|
||||||
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
background: var(--nostrplebs-gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
@ -5,32 +5,41 @@ import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-sol
|
|||||||
|
|
||||||
import './Nip05.css'
|
import './Nip05.css'
|
||||||
|
|
||||||
const Nip05 = ({ nip05, pubkey }) => {
|
export function useIsVerified(nip05, pubkey) {
|
||||||
const [nip05pubkey, setNip05pubkey] = useState()
|
const [isVerified, setIsVerified] = useState(false)
|
||||||
const [couldNotVerify, setCouldNotVerify] = useState(false)
|
const [couldNotVerify, setCouldNotVerify] = useState(false)
|
||||||
const isVerified = nip05pubkey === pubkey
|
const [name, domain] = nip05 ? nip05.split('@') : []
|
||||||
const [name, domain] = nip05.split('@')
|
|
||||||
const isDefaultUser = name === '_'
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCouldNotVerify(false)
|
if (!nip05 || !pubkey) {
|
||||||
fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)
|
return
|
||||||
.then((res) => res.json())
|
}
|
||||||
.then(({ names }) => {
|
setCouldNotVerify(false)
|
||||||
if (names && names[name]) {
|
setIsVerified(false)
|
||||||
setNip05pubkey(names[name])
|
|
||||||
}
|
fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)
|
||||||
})
|
.then((res) => res.json())
|
||||||
.catch((err) => {
|
.then(({ names }) => {
|
||||||
setCouldNotVerify(true)
|
if (names && names[name]) {
|
||||||
console.error("Couldn't verifiy nip05")
|
setIsVerified(names[name] === pubkey)
|
||||||
})
|
}
|
||||||
}, [nip05, name, domain])
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setCouldNotVerify(true)
|
||||||
|
console.error("Couldn't verifiy nip05")
|
||||||
|
})
|
||||||
|
}, [nip05, pubkey])
|
||||||
|
|
||||||
|
return { name, domain, isVerified, couldNotVerify }
|
||||||
|
}
|
||||||
|
|
||||||
|
const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => {
|
||||||
|
const isDefaultUser = name === '_'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
|
<div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
|
||||||
{!isDefaultUser && <div className="nick">{name}</div>}
|
{!isDefaultUser && <div className="nick">{name}</div>}
|
||||||
<div className="domain" data-domain={domain}>
|
<div className="domain" data-domain={isVerified ? domain : ''}>
|
||||||
{domain}
|
{domain}
|
||||||
</div>
|
</div>
|
||||||
<span className="badge">
|
<span className="badge">
|
||||||
|
@ -12,8 +12,12 @@
|
|||||||
--gray-tertiary: #444;
|
--gray-tertiary: #444;
|
||||||
--highlight-light: #E8FF52;
|
--highlight-light: #E8FF52;
|
||||||
--highlight: #CCFF00;
|
--highlight: #CCFF00;
|
||||||
|
--highlight-dark: #709900;
|
||||||
--error: #FF6053;
|
--error: #FF6053;
|
||||||
--success: #2AD544;
|
--success: #2AD544;
|
||||||
|
--gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
|
||||||
|
--snort-gradient: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--highlight-dark));
|
||||||
|
--nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
@ -22,6 +26,7 @@
|
|||||||
--bg-color: #FFF;
|
--bg-color: #FFF;
|
||||||
--highlight-light: #FFC852;
|
--highlight-light: #FFC852;
|
||||||
--highlight: #FF9B00;
|
--highlight: #FF9B00;
|
||||||
|
--highlight-dark: #944F05;
|
||||||
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
||||||
--gray: #CCC;
|
--gray: #CCC;
|
||||||
--gray-secondary: #DDD;
|
--gray-secondary: #DDD;
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
width: 256px;
|
width: 256px;
|
||||||
|
background-image: var(--img-url), var(--gray-gradient);
|
||||||
border: 4px solid transparent;
|
border: 4px solid transparent;
|
||||||
background-origin: border-box;
|
background-origin: border-box;
|
||||||
background-clip: content-box, border-box;
|
background-clip: content-box, border-box;
|
||||||
@ -33,6 +34,14 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile .avatar[data-domain="snort.social"] {
|
||||||
|
background-image: var(--img-url), var(--snort-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .avatar[data-domain="nostrplebs.com"] {
|
||||||
|
background-image: var(--img-url), var(--nostrplebs-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
.profile .details {
|
.profile .details {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
|
@ -13,7 +13,7 @@ import { extractLnAddress, parseId } from "../Util";
|
|||||||
import Timeline from "../element/Timeline";
|
import Timeline from "../element/Timeline";
|
||||||
import { extractLinks, extractHashtags } from '../Text'
|
import { extractLinks, extractHashtags } from '../Text'
|
||||||
import LNURLTip from "../element/LNURLTip";
|
import LNURLTip from "../element/LNURLTip";
|
||||||
import Nip05 from "../element/Nip05";
|
import Nip05, { useIsVerified } from "../element/Nip05";
|
||||||
import Copy from "../element/Copy";
|
import Copy from "../element/Copy";
|
||||||
import ProfilePreview from "../element/ProfilePreview";
|
import ProfilePreview from "../element/ProfilePreview";
|
||||||
import FollowersList from "../element/FollowersList";
|
import FollowersList from "../element/FollowersList";
|
||||||
@ -26,15 +26,6 @@ const ProfileTab = {
|
|||||||
Follows: 3
|
Follows: 3
|
||||||
};
|
};
|
||||||
|
|
||||||
const gradients = {
|
|
||||||
"snort.social": "linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success))",
|
|
||||||
"nostrplebs.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
|
|
||||||
"nostrpurple.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
|
|
||||||
"nostr.fan": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
|
|
||||||
"nostrich.zone": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
|
|
||||||
"nostriches.net": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -46,10 +37,9 @@ export default function ProfilePage() {
|
|||||||
const [showLnQr, setShowLnQr] = useState(false);
|
const [showLnQr, setShowLnQr] = useState(false);
|
||||||
const [tab, setTab] = useState(ProfileTab.Notes);
|
const [tab, setTab] = useState(ProfileTab.Notes);
|
||||||
const about = extractHashtags(extractLinks([user?.about]))
|
const about = extractHashtags(extractLinks([user?.about]))
|
||||||
const nip05domain = user?.nip05 && user?.nip05.split('@').slice(-1)
|
const { name, domain, isVerified, couldNotVerify } = useIsVerified(user?.nip05, user?.pubkey)
|
||||||
const gradient = nip05domain && gradients[nip05domain]
|
const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
|
||||||
const avatarUrl = `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})`
|
const backgroundImage = `url(${avatarUrl})`
|
||||||
const backgroundImage = gradient ? `${avatarUrl}, ${gradient}` : avatarUrl
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTab(ProfileTab.Notes);
|
setTab(ProfileTab.Notes);
|
||||||
@ -63,7 +53,7 @@ export default function ProfilePage() {
|
|||||||
<div className="f-grow">
|
<div className="f-grow">
|
||||||
<h2>{user?.display_name || user?.name}</h2>
|
<h2>{user?.display_name || user?.name}</h2>
|
||||||
<Copy text={params.id} />
|
<Copy text={params.id} />
|
||||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
{user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{isMe ? (
|
{isMe ? (
|
||||||
@ -119,7 +109,7 @@ export default function ProfilePage() {
|
|||||||
<>
|
<>
|
||||||
<div className="profile flex">
|
<div className="profile flex">
|
||||||
<div className="avatar-wrapper">
|
<div className="avatar-wrapper">
|
||||||
<div style={{ backgroundImage }} className="avatar" data-domain={nip05domain}>
|
<div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="f-grow details">
|
<div className="f-grow details">
|
||||||
|
Loading…
Reference in New Issue
Block a user