feat(social-media): Add Bluesky and Mastodon

dataesr · Dec 6, 2024 · 2a4601c · 2a4601c
1 parent b6f7d18
commit 2a4601c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/svg-logo/bluesky.svg b/src/assets/svg-logo/bluesky.svg
diff --git a/src/assets/svg-logo/mastodon.svg b/src/assets/svg-logo/mastodon.svg
diff --git a/src/components/card/social-media-card.js b/src/components/card/social-media-card.js
@@ -7,9 +7,11 @@ import useEditMode from '../../hooks/useEditMode';
 
 // SVG Logo import //
 import academia from '../../assets/svg-logo/academia.svg';
+import bluesky from '../../assets/svg-logo/bluesky.svg';
 import dailymotion from '../../assets/svg-logo/dailymotion.svg';
 import flickr from '../../assets/svg-logo/flickr.svg';
 import franceCulture from '../../assets/svg-logo/france-culture.svg';
+import mastodon from '../../assets/svg-logo/mastodon.svg';
 import pinterest from '../../assets/svg-logo/pinterest.svg';
 import researchgate from '../../assets/svg-logo/researchgate.svg';
 import scoopit from '../../assets/svg-logo/scoop-it.svg';
@@ -39,6 +41,9 @@ export default function SocialMediaCard({
     case 'academia':
       svg = academia;
       break;
+    case 'Bluesky':
+      svg = bluesky;
+      break;
     case 'Dailymotion':
       svg = dailymotion;
       break;
@@ -68,6 +73,9 @@ export default function SocialMediaCard({
       iconColor = 'var(--linkedin-icon-color)';
       rxIcon = 'ri-linkedin-fill';
       break;
+    case 'Mastodon':
+      svg = mastodon;
+      break;
     case 'Pinterest':
       svg = pinterest;
       break;

diff --git a/src/components/forms/social-media/index.js b/src/components/forms/social-media/index.js
@@ -1,21 +1,23 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
 import {
-  Container,
   Col,
+  Container,
   Row,
   Select,
   TextInput,
 } from '@dataesr/react-dsfr';
-import FormFooter from '../form-footer';
-import useForm from '../../../hooks/useForm';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
 import useEnums from '../../../hooks/useEnums';
-import PaysageBlame from '../../paysage-blame';
+import useForm from '../../../hooks/useForm';
 import { capitalize } from '../../../utils/strings';
+import PaysageBlame from '../../paysage-blame';
+import FormFooter from '../form-footer';
 
 const regexpValidateSocialMedia = (type) => {
   const validator = {
     academia: [/academia/, 'avec "academia" dans l\'url.'],
+    Bluesky: [/^(https:\/\/)?(www.)?bsky.app\/profile\/[A-Za-z0-9/:%_+.,#?!@&=-]+$/, 'https://bsky.app/profile/<compte>'],
     Dailymotion: [/^(https:\/\/)?(www.)?dailymotion.com\/[A-Za-z0-9/:%_+.,#?!@&=-]+$/, 'https://www.dailymotion.com/<compte>'],
     Facebook: [/^(https:\/\/)?(www.)?facebook.com\/[A-Za-z0-9/:%_+.,#?!@&=-]+$/, 'https://www.facebook.com/<compte>'],
     Github: [/^(https:\/\/)?(www.)?github.com\/[A-Za-z0-9/:%_+.,#?!@&=-]+$/, 'https://github.com/<compte>?tab=repositories'],