BradNut/awesome-uses
1
0
Fork 0
mirror of https://github.com/BradNut/awesome-uses synced 2025-09-08 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

move to use unavatar

Browse source
This commit is contained in:
Wes Bos 2023-04-14 09:51:15 -04:00
parent 750da2d479
commit ffe7f986ae
1 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/Person.js
View file

@ -1,18 +1,26 @@
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { name } from 'country-emoji';
import * as icons from '../util/icons';
import { useParams } from '@remix-run/react';
import * as icons from '../util/icons';
export default function Person({ person }) {
const url = new URL(person.url);
const twitter = person.twitter ? `https://unavatar.io/${person.twitter.replace('@', '')}` : null;
const twitter = person.twitter
? `https://unavatar.io/${person.twitter.replace('@', '')}`
: null;
const website = `https://unavatar.io/${url.host}`;
const unavatar = person.twitter ? `${twitter}?fallback=${website}` : website;
const img = `https://images.weserv.nl/?url=${unavatar}&w=100&l=9&af&il&n=-1`;
const unavatar = person.twitter
? `${twitter}?fallback=${website}&ttl=28d`
: website;
// const img = `https://images.weserv.nl/?url=${unavatar}&w=100&l=9&af&il&n=-1`;
const img = unavatar;
const { tag: currentTag } = useParams();
return (
<div className="PersonWrapper" style={{ contentVisibility: "auto", containIntrinsicHeight: '560px' }}>
<div
className="PersonWrapper"
style={{ contentVisibility: 'auto', containIntrinsicHeight: '560px' }}
>
<div className="PersonInner">
<header>
<img
@ -22,7 +30,7 @@ export default function Person({ person }) {
alt={person.name}
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src = "/default.png";
currentTarget.src = '/default.png';
}}
loading="lazy"
/>
@ -44,8 +52,11 @@ export default function Person({ person }) {
</header>
<p>{person.description}</p>
<ul className="Tags">
{person.tags.map(tag => (
<li className={`Tag small ${tag === currentTag ? 'currentTag' : ''}`} key={tag}>
{person.tags.map((tag) => (
<li
className={`Tag small ${tag === currentTag ? 'currentTag' : ''}`}
key={tag}
>
{tag}
</li>
))}