Merge pull request #1696 from aaerhart/mastodon-and-bluesky-to-user-profiles

Mastodon and bluesky to user profiles

Author: mertbagt

components/EditProfilePage/PersonalInfoTab.tsx

@@ -17,6 +17,8 @@ type UpdateProfileData = {
   linkedIn: string
   instagram: string
   fb: string
+  blueSky: string
+  mastodon: string
   publicEmail: string
   publicPhone: number
   website: string
@@ -54,6 +56,8 @@ async function updateProfile(
   await updateSocial("linkedIn", data.linkedIn)
   await updateSocial("twitter", data.twitter)
   await updateSocial("instagram", data.instagram)
+  await updateSocial("blueSky", data.blueSky)
+  await updateSocial("mastodon", data.mastodon)
   await updateSocial("fb", data.fb)
   await updateAbout(data.aboutYou)
   await updateFullName(data.fullName)
@@ -171,6 +175,20 @@ export function PersonalInfoTab({
                 iconSrc="./linkedin.svg"
                 {...register("linkedIn")}
               />
+              <SocialInput
+                label={t("socialLinks.blueSky")}
+                defaultValue={social?.blueSky}
+                className="col-sm-12 col-md-6 mb-1"
+                iconSrc="./bluesky.svg"
+                {...register("blueSky")}
+              />
+              <SocialInput
+                label={t("socialLinks.mastodon")}
+                defaultValue={social?.mastodon}
+                className="col-sm-12 col-md-6 mb-1"
+                iconSrc="./mastodon.svg"
+                {...register("mastodon")}
+              />
               {isOrg && (
                 <>
                   <SocialInput
@@ -187,6 +205,20 @@ export function PersonalInfoTab({
                     iconSrc="./facebook.svg"
                     {...register("fb")}
                   />
+                  <SocialInput
+                    label={t("socialLinks.bluesky")}
+                    defaultValue={social?.blueSky}
+                    className="col-sm-12 col-md-6 mb-1"
+                    iconSrc="./bluesky.svg"
+                    {...register("blueSky")}
+                  />
+                  <SocialInput
+                    label={t("socialLinks.mastodon")}
+                    defaultValue={social?.mastodon}
+                    className="col-sm-12 col-md-6 mb-1"
+                    iconSrc="./mastodon.svg"
+                    {...register("mastodon")}
+                  />
                 </>
               )}
             </div>

components/ProfilePage/ProfileAboutSection.tsx

@@ -16,9 +16,17 @@ export const ProfileAboutSection = ({
     twitter,
     linkedIn,
     instagram,
-    fb
-  }: { twitter?: string; linkedIn?: string; instagram?: string; fb?: string } =
-    profile?.social ?? {}
+    fb,
+    blueSky,
+    mastodon
+  }: {
+    twitter?: string
+    linkedIn?: string
+    instagram?: string
+    fb?: string
+    blueSky?: string
+    mastodon?: string
+  } = profile?.social ?? {}
   const { t } = useTranslation("profile")
   const title = isOrg
     ? t("aboutUs")
@@ -37,6 +45,8 @@ export const ProfileAboutSection = ({
             linkedIn={linkedIn}
             instagram={instagram}
             fb={fb}
+            blueSky={blueSky}
+            mastodon={mastodon}
           />
         ) : (
           <></>

components/ProfilePage/SocialMediaIcons.tsx

@@ -6,12 +6,16 @@ export const SocialMediaIcons = ({
   twitter,
   linkedIn,
   instagram,
-  fb
+  fb,
+  blueSky,
+  mastodon
 }: {
   twitter?: string
   instagram?: string
   fb?: string
   linkedIn?: string
+  blueSky?: string
+  mastodon?: string
 }) => {
   const { t } = useTranslation("common")
 
@@ -49,6 +53,22 @@ export const SocialMediaIcons = ({
             </External>
           </Col>
         )}
+
+        {blueSky && (
+          <Col>
+            <External plain href={`https://bsky.app.profile/${blueSky}`}>
+              <Image alt={t("socials.bluesky")} src="/bluesky.svg" />
+            </External>
+          </Col>
+        )}
+
+        {mastodon && (
+          <Col>
+            <External plain href={`https://mastodon.social/@${mastodon}`}>
+              <Image alt={t("socials.mastodon")} src="/mastodon.svg" />
+            </External>
+          </Col>
+        )}
       </Row>
     </div>
   )

components/db/profile/profile.ts

@@ -65,7 +65,9 @@ export function useProfile() {
           linkedIn: false,
           twitter: false,
           instagram: false,
-          fb: false
+          fb: false,
+          blueSky: false,
+          mastodon: false
         },
         updatingBillsFollowing: false,
         profile

components/db/profile/types.ts

@@ -17,7 +17,9 @@ export const SOCIAL_NETWORKS = [
   "linkedIn",
   "twitter",
   "instagram",
-  "fb"
+  "fb",
+  "blueSky",
+  "mastodon"
 ] as const
 
 export type SocialLinks = Partial<

components/db/profile/urlCleanup.ts

@@ -7,6 +7,9 @@ export function cleanSocialLinks(network: keyof SocialLinks, link: string) {
       const index: number = path.indexOf(".com/") + 5
       path = path.substring(index)
     }
+    if (network === "mastodon" && path.startsWith("@")) {
+      path = path.substring(1)
+    }
   }
 
   return path

public/bluesky.svg

@@ -119,7 +119,9 @@
     "instagram": "Instagram",
     "linkedin": "LinkedIn",
     "twitter": "Twitter",
-    "facebook": "Facebook"
+    "facebook": "Facebook",
+    "bluesky": "BlueSky",
+    "mastodon": "Mastodon"
   },
   "table": {
     "page": "Page {{currentPage}}"

public/locales/en/common.json

@@ -71,7 +71,9 @@
     "twitter": "Twitter Username",
     "linkedIn": "LinkedIn Url",
     "instagram": "Instagram Username",
-    "facebook": "Facebook Link"
+    "facebook": "Facebook Link",
+    "blueSky": "BlueSky Link",
+    "mastodon": "Mastodon Link"
   },
   "contact": {
     "contactInfo": "Contact Information",