clean up mastodon

src/components/Person.js

@@ -13,46 +13,30 @@ export default function Person({ person }) {
   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 mastodonArr = person.mastodon
-    ? person.mastodon.replace('@', '').split('@')
-    : null;
-  const webfinger = 
-    person.mastodon
-    ? JSON.parse(`https://${mastodonArr[0]}/.well-known/webfinger?resource=https://${mastodonArr[0]}/@${mastodonArr[1]}`)
-    : null;
-  const wfIndex = 
-    person.mastodon && webfinger
-    ? webfinger.links.findIndex((link) => link.rel === 'http://webfinger.net/rel/avatar')
-    : null;
-  const wfAvatar = 
-    person.mastodon && wfIndex
-    ? webfinger.links[wfIndex].href
-    : website;
-  const img = person.twitter ? unavatar : (person.mastodon ? wfAvatar : website);
+  const [_, mastodonHandle, mastodonServer] = person.mastodon?.split('@') || [];
   const { tag: currentTag } = useParams();
   return (
     <div
       className="PersonWrapper"
-      style={{ contentVisibility: 'auto', containIntrinsicHeight: '560px' }}
+      style={{ contentVisibility: "auto", containIntrinsicHeight: "560px" }}
     >
       <div className="PersonInner">
         <header>
           <img
             width="50"
             height="50"
-            src={img}
+            src={unavatar}
             alt={person.name}
             onError={({ currentTarget }) => {
               currentTarget.onerror = null; // prevents looping
-              currentTarget.src = '/default.png';
+              currentTarget.src = "/default.png";
             }}
             loading="lazy"
           />
           <h3>
             <a href={person.url} target="_blank" rel="noopener noreferrer">
               {person.name}
-            </a>{' '}
+            </a>{" "}
             {person.emoji}
           </h3>
           <a
@@ -62,14 +46,14 @@ export default function Person({ person }) {
             href={person.url}
           >
             {url.host}
-            {url.pathname.replace(/\/$/, '')}
+            {url.pathname.replace(/\/$/, "")}
           </a>
         </header>
         <p>{person.description}</p>
         <ul className="Tags">
           {person.tags.map((tag) => (
             <li
-              className={`Tag small ${tag === currentTag ? 'currentTag' : ''}`}
+              className={`Tag small ${tag === currentTag ? "currentTag" : ""}`}
               key={tag}
             >
               {tag}
@@ -96,23 +80,29 @@ export default function Person({ person }) {
           </span>
         )}
 
-        {(person.twitter || person.mastodon) && (
+        {person.twitter && (
           <div className="SocialHandle">
             <a
-              href={
-                person.twitter
-                ? `https://twitter.com/${person.twitter.replace('@', '')}`
-                : `https://${mastodonArr[1]}/@${mastodonArr[0]}`
-              }
+              href={`https://twitter.com/${person.twitter.replace("@", "")}`}
               target="_blank"
               rel="noopener noreferrer"
             >
               <span className="at">@</span>
-              {
-                person.twitter
-                ? person.twitter.replace('@', '')
-                : `${mastodonArr[1]}/@${mastodonArr[0]}`
-              }
+              {person.twitter.replace("@", "")}
+            </a>
+          </div>
+        )}
+
+        {/* If they have a mastodon, and no twitter, show that */}
+        {person.mastodon && !person.twitter && (
+          <div className="SocialHandle">
+            <a
+              href={`https://${mastodonServer}/@${mastodonHandle}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="at">@</span>
+              {mastodonHandle}
             </a>
           </div>
         )}

src/routes/index.tsx

@@ -12,7 +12,7 @@ export async function loader({ params }: LoaderArgs) {
 }
 
 export default function Index() {
-  const { people } = useLoaderData();
+  const { people } = useLoaderData<ReturnType<typeof loader>>();
   return (
     <>
       <Topics />