Merge pull request #1801 from niclake/mastodon

Added Mastodon handling for data.js

.github/pull_request_template.md

@@ -18,6 +18,7 @@ Include the hardware you use, such as your computer and other related equipment.
 * Ensure this PR has a title in the following format
     * ✅ Add Your Name
     * ✅ Add @twitterusername
+    * ✅ Add @mastodonusername@instance.url
     * ❌ Add myself
     * ❌ Adding myself!
     * ❌ Add Your Name @twitter @github

contribution-guide.md

@@ -30,6 +30,7 @@ Include the hardware you use, such as your computer and other related equipment.
 * Ensure this PR has a title in the following format
     * ✅ Add Your Name
     * ✅ Add @twitterusername
+    * ✅ Add @mastodonusername@instance.url
     * ❌ Add myself
     * ❌ Adding myself!
     * ❌ Add Your Name @twitter @github

scripts/utils.js

@@ -61,6 +61,7 @@ module.exports.Schema = Joi.object({
     .valid(...flags)
     .required(),
   twitter: Joi.string().pattern(new RegExp(/^@?(\w){1,15}$/)),
+  mastodon: Joi.string().pattern(new RegExp(/^@(\w){1,30}@(\w)+\.(\w)+$/)),
   emoji: Joi.string().allow(''),
   computer: Joi.string().valid('apple', 'windows', 'linux', 'bsd'),
   phone: Joi.string().valid('iphone', 'android', 'windowsphone', 'flipphone'),

src/components/Person.js

@@ -14,7 +14,22 @@ export default function Person({ person }) {
     ? `${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 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 { tag: currentTag } = useParams();
   return (
     <div
@@ -81,15 +96,23 @@ export default function Person({ person }) {
           </span>
         )}
 
-        {person.twitter && (
-          <div className="TwitterHandle">
+        {person.twitter || person.mastodon && (
+          <div className="SocialHandle">
             <a
-              href={`https://twitter.com/${person.twitter.replace('@', '')}`}
+              href={
+                person.twitter
+                ? `https://twitter.com/${person.twitter.replace('@', '')}`
+                : `https://${mastodonArr[1]}/@${mastodonArr[0]}`
+              }
               target="_blank"
               rel="noopener noreferrer"
             >
               <span className="at">@</span>
-              {person.twitter.replace('@', '')}
+              {
+                person.twitter
+                ? person.twitter.replace('@', '')
+                : `${mastodonArr[1]}/@${mastodonArr[0]}`
+              }
             </a>
           </div>
         )}
@@ -113,7 +136,15 @@ Person.propTypes = {
       if (!/^@?(\w){1,15}$/.test(props[propName])) {
         return new Error(
           `Invalid prop \`${propName}\` supplied to` +
-            ` \`${componentName}\`. This isn't a legit twitter handle.`
+            ` \`${componentName}\`. This isn't a legit Twitter handle.`
+        );
+      }
+    },
+    mastodon(props, propName, componentName) {
+      if (!/^@(\w){1,30}@(\w)+\.(\w)+$/.test(props[propName])) {
+        return new Error(
+          `Invalid prop \`${propName}\` supplied to` +
+            ` \`${componentName}\`. This isn't a legit Mastodon handle.`
         );
       }
     },

src/data.js

@@ -7,6 +7,7 @@
  * @property {string} url - link to contributor's /uses page
  * @property {string} country - flag emoji for contributor's country
  * @property {string} [twitter] - optional Twitter username (beginning with `@`)
+ * @property {string} [mastodon] - optional Mastodon username & server (beginning with `@`, ex: `@hello@mastodon.social`)
  * @property {string} [emoji] - some emoji corresponding to the contributor
  * @property {'apple' | 'windows' | 'linux' | 'bsd'} [computer]
  * @property {'iphone' | 'android' | 'windowsphone' | 'flipphone'} [phone]

src/styles.css

@@ -189,7 +189,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-.TwitterHandle {
+.SocialHandle {
   font-size: 1.24323423426928098420394802rem;
   & .at {
     color: var(--yellow);