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