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 () {