diff --git a/app/components/ExternalLinksBlock/components/ExternalLink/ExternalLink.jsx b/app/components/ExternalLinksBlock/components/ExternalLink/ExternalLink.jsx
index 5708e1e197..6f9d2ea439 100644
--- a/app/components/ExternalLinksBlock/components/ExternalLink/ExternalLink.jsx
+++ b/app/components/ExternalLinksBlock/components/ExternalLink/ExternalLink.jsx
@@ -27,6 +27,9 @@ export default function ExternalLink({ className, isExternalLink, isSocialLink,
if (isSocialLink && !!socialIcons[site]) {
const icon = socialIcons[site].icon;
+ const isMastodonLink = socialIcons[site].label === "Mastodon"
+ const isBlueSkyLink = socialIcons[site].label === "BlueSky"
+
iconClasses = `fa ${icon} fa-fw`;
linkLabel = path;
linkProps['aria-label'] = socialIcons[site].ariaLabel;
@@ -46,7 +49,11 @@ export default function ExternalLink({ className, isExternalLink, isSocialLink,
{socialLabel && {socialIcons[site].label}}
- {iconClasses && }
+ {/** Mastodon and BlueSky icons are not available in this repo's current versino of font-awesome libraries, so we manually add svgs here */}
+ {isMastodonLink ?
+ : isBlueSkyLink ?
+ : iconClasses ? : null
+ }
);
}
diff --git a/app/lib/nav-helpers/socialIcons.json b/app/lib/nav-helpers/socialIcons.json
index 98e66c45e4..d56104885b 100644
--- a/app/lib/nav-helpers/socialIcons.json
+++ b/app/lib/nav-helpers/socialIcons.json
@@ -70,5 +70,17 @@
"ariaLabel": "Link to Medium article",
"label": "Medium",
"pathBeforeSite": false
+ },
+ "bsky.app/": {
+ "icon": "fa-external-link",
+ "ariaLabel": "Link to BlueSky page",
+ "label": "BlueSky",
+ "pathBeforeSite": false
+ },
+ "mastodon.social/": {
+ "icon": "fa-external-link",
+ "ariaLabel": "Link to Mastodon page",
+ "label": "Mastodon",
+ "pathBeforeSite": false
}
}
diff --git a/app/lib/social-icons.js b/app/lib/social-icons.js
index a9ba1cc1db..e723bbd3f9 100644
--- a/app/lib/social-icons.js
+++ b/app/lib/social-icons.js
@@ -10,7 +10,9 @@ const SOCIAL_ICONS = {
'wordpress.com/': 'wordpress',
'youtube.com/': 'youtube',
'instagram.com/': 'instagram',
- 'medium.com/': 'medium'
+ 'medium.com/': 'medium',
+ 'bsky.app/': 'bluesky',
+ 'mastodon.social/': 'mastodon'
};
export default SOCIAL_ICONS;
diff --git a/app/pages/lab/social-links-editor.spec.js b/app/pages/lab/social-links-editor.spec.js
index a4cfc547e0..69515ed956 100644
--- a/app/pages/lab/social-links-editor.spec.js
+++ b/app/pages/lab/social-links-editor.spec.js
@@ -39,7 +39,7 @@ describe('SocialLinksEditor', function () {
it('should contain the correct number of rows', function () {
const rows = wrapper.find('tr');
- assert.equal(rows.length, 12);
+ assert.equal(rows.length, 14);
});
it('should rearrange the default social links on load', function () {