Added Mastodon handling

.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

@@ -9,6 +9,9 @@ export default function Person({ person }) {
   const twitter = person.twitter
     ? `https://unavatar.io/${person.twitter.replace('@', '')}`
     : null;
+  const mastodonArr = person.mastodon
+    ? person.mastodon.replace('@', '').split('@')
+    : null;
   const website = `https://unavatar.io/${url.host}`;
   const unavatar = person.twitter
     ? `${twitter}?fallback=${website}&ttl=28d`
@@ -81,15 +84,23 @@ export default function Person({ person }) {
           </span>
         )}
 
-        {person.twitter && (
+        {person.twitter || person.mastodon && (
-          <div className="TwitterHandle">
+          <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 +124,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 Twitter username (beginning with `@`)
  * @property {string} [emoji] - some emoji corresponding to the contributor
  * @property {'apple' | 'windows' | 'linux' | 'bsd'} [computer]
  * @property {'iphone' | 'android' | 'windowsphone' | 'flipphone'} [phone]

src/styles.css

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