Add X alternatives to Social Links (#10810)

* refact: DRY social link resources * feat: add BluesSky and Threads link type * chore: update schemas * refact: replace old Twitter icon with X icon
opencollective · Nov 19, 2024 · 007d52a · 007d52a
1 parent 82d6407
commit 007d52a
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 216 deletions.
diff --git a/components/collective-page/hero/HeroSocialLinks.tsx b/components/collective-page/hero/HeroSocialLinks.tsx
@@ -1,56 +1,11 @@
 import React from 'react';
-import { Discord } from '@styled-icons/fa-brands/Discord';
-import { Discourse } from '@styled-icons/fa-brands/Discourse';
-import { Mastodon } from '@styled-icons/fa-brands/Mastodon';
-import { Meetup } from '@styled-icons/fa-brands/Meetup';
-import { Tiktok } from '@styled-icons/fa-brands/Tiktok';
-import { Tumblr } from '@styled-icons/fa-brands/Tumblr';
-import { Facebook } from '@styled-icons/feather/Facebook';
-import { Github } from '@styled-icons/feather/Github';
-import { Gitlab } from '@styled-icons/feather/Gitlab';
-import { Globe } from '@styled-icons/feather/Globe';
-import { Instagram } from '@styled-icons/feather/Instagram';
-import { Linkedin } from '@styled-icons/feather/Linkedin';
-import { Slack } from '@styled-icons/feather/Slack';
-import { Twitch } from '@styled-icons/feather/Twitch';
-import { Twitter } from '@styled-icons/feather/Twitter';
-import { Youtube } from '@styled-icons/feather/Youtube';
-import { Pixelfed } from '@styled-icons/remix-line/Pixelfed';
 
 import type { SocialLink } from '../../../lib/graphql/types/v2/graphql';
-import { SocialLinkType } from '../../../lib/graphql/types/v2/graphql';
+import { iconForSocialLinkType } from '../../../lib/social-links';
 
 import StyledLink from '../../StyledLink';
 import StyledRoundButton from '../../StyledRoundButton';
 
-const SocialLinkIcon = {
-  [SocialLinkType.DISCORD]: Discord,
-  [SocialLinkType.FACEBOOK]: Facebook,
-  [SocialLinkType.GITHUB]: Github,
-  [SocialLinkType.GITLAB]: Gitlab,
-  [SocialLinkType.INSTAGRAM]: Instagram,
-  [SocialLinkType.MASTODON]: Mastodon,
-  [SocialLinkType.MATTERMOST]: Globe,
-  [SocialLinkType.TWITTER]: Twitter,
-  [SocialLinkType.YOUTUBE]: Youtube,
-  [SocialLinkType.TUMBLR]: Tumblr,
-  [SocialLinkType.MEETUP]: Meetup,
-  [SocialLinkType.SLACK]: Slack,
-  [SocialLinkType.LINKEDIN]: Linkedin,
-  [SocialLinkType.GIT]: Globe,
-  [SocialLinkType.WEBSITE]: Globe,
-  [SocialLinkType.DISCOURSE]: Discourse,
-  [SocialLinkType.PIXELFED]: Pixelfed,
-  [SocialLinkType.GHOST]: Globe,
-  [SocialLinkType.PEERTUBE]: Globe,
-  [SocialLinkType.TIKTOK]: Tiktok,
-  [SocialLinkType.TWITCH]: Twitch,
-};
-
-function iconForSocialLinkType(type: SocialLinkType) {
-  return SocialLinkIcon[type] || Globe;
-}
-
 type HeroSocialLinksProps = {
   socialLinks: SocialLink[];
   relMe?: boolean;

diff --git a/components/crowdfunding-redesign/SocialLinks.tsx b/components/crowdfunding-redesign/SocialLinks.tsx
@@ -1,55 +1,10 @@
 import React from 'react';
-import { Discord } from '@styled-icons/fa-brands/Discord';
-import { Discourse } from '@styled-icons/fa-brands/Discourse';
-import { Mastodon } from '@styled-icons/fa-brands/Mastodon';
-import { Meetup } from '@styled-icons/fa-brands/Meetup';
-import { Tiktok } from '@styled-icons/fa-brands/Tiktok';
-import { Tumblr } from '@styled-icons/fa-brands/Tumblr';
-import { Facebook } from '@styled-icons/feather/Facebook';
-import { Github } from '@styled-icons/feather/Github';
-import { Gitlab } from '@styled-icons/feather/Gitlab';
-import { Globe } from '@styled-icons/feather/Globe';
-import { Instagram } from '@styled-icons/feather/Instagram';
-import { Linkedin } from '@styled-icons/feather/Linkedin';
-import { Slack } from '@styled-icons/feather/Slack';
-import { Twitch } from '@styled-icons/feather/Twitch';
-import { Twitter } from '@styled-icons/feather/Twitter';
-import { Youtube } from '@styled-icons/feather/Youtube';
-import { Pixelfed } from '@styled-icons/remix-line/Pixelfed';
 
 import type { SocialLink } from '../../lib/graphql/types/v2/graphql';
-import { SocialLinkType } from '../../lib/graphql/types/v2/graphql';
+import { iconForSocialLinkType } from '../../lib/social-links';
 
 import Link from '../Link';
 
-const SocialLinkIcon = {
-  [SocialLinkType.DISCORD]: Discord,
-  [SocialLinkType.FACEBOOK]: Facebook,
-  [SocialLinkType.GITHUB]: Github,
-  [SocialLinkType.GITLAB]: Gitlab,
-  [SocialLinkType.INSTAGRAM]: Instagram,
-  [SocialLinkType.MASTODON]: Mastodon,
-  [SocialLinkType.MATTERMOST]: Globe,
-  [SocialLinkType.TWITTER]: Twitter,
-  [SocialLinkType.YOUTUBE]: Youtube,
-  [SocialLinkType.TUMBLR]: Tumblr,
-  [SocialLinkType.MEETUP]: Meetup,
-  [SocialLinkType.SLACK]: Slack,
-  [SocialLinkType.LINKEDIN]: Linkedin,
-  [SocialLinkType.GIT]: Globe,
-  [SocialLinkType.WEBSITE]: Globe,
-  [SocialLinkType.DISCOURSE]: Discourse,
-  [SocialLinkType.PIXELFED]: Pixelfed,
-  [SocialLinkType.GHOST]: Globe,
-  [SocialLinkType.PEERTUBE]: Globe,
-  [SocialLinkType.TIKTOK]: Tiktok,
-  [SocialLinkType.TWITCH]: Twitch,
-};
-
-function iconForSocialLinkType(type: SocialLinkType) {
-  return SocialLinkIcon[type] || Globe;
-}
-
 type HeroSocialLinksProps = {
   socialLinks: SocialLink[];
 };

diff --git a/components/edit-collective/SocialLinksFormField.tsx b/components/edit-collective/SocialLinksFormField.tsx
@@ -10,6 +10,7 @@ import { FormattedMessage } from 'react-intl';
 
 import type { SocialLink, SocialLinkInput } from '../../lib/graphql/types/v2/graphql';
 import { SocialLinkType } from '../../lib/graphql/types/v2/graphql';
+import { SocialLinkLabel } from '../../lib/social-links';
 import { isValidUrl } from '../../lib/utils';
 
 import { Box, Flex } from '../Grid';
@@ -110,94 +111,9 @@ type SocialLinkTypePickerProps = {
   onChange: (value: SocialLinkType) => void;
 } & any;
 
-function SocialLinkTypePicker({ value, onChange, ...pickerProps }: SocialLinkTypePickerProps) {
-  const options = [
-    {
-      value: SocialLinkType.WEBSITE.toString(),
-      label: 'Website',
-    },
-    {
-      value: SocialLinkType.DISCORD.toString(),
-      label: 'Discord',
-    },
-    {
-      value: SocialLinkType.FACEBOOK.toString(),
-      label: 'Facebook',
-    },
-    {
-      value: SocialLinkType.GITHUB.toString(),
-      label: 'GitHub',
-    },
-    {
-      value: SocialLinkType.GITLAB.toString(),
-      label: 'GitLab',
-    },
-    {
-      value: SocialLinkType.GIT.toString(),
-      label: 'Git Repository',
-    },
-    {
-      value: SocialLinkType.INSTAGRAM.toString(),
-      label: 'Instagram',
-    },
-    {
-      value: SocialLinkType.MASTODON.toString(),
-      label: 'Mastodon',
-    },
-    {
-      value: SocialLinkType.MATTERMOST.toString(),
-      label: 'Mattermost',
-    },
-    {
-      value: SocialLinkType.TUMBLR.toString(),
-      label: 'Tumblr',
-    },
-    {
-      value: SocialLinkType.TWITTER.toString(),
-      label: 'Twitter',
-    },
-    {
-      value: SocialLinkType.YOUTUBE.toString(),
-      label: 'YouTube',
-    },
-    {
-      value: SocialLinkType.MEETUP.toString(),
-      label: 'Meetup',
-    },
-    {
-      value: SocialLinkType.LINKEDIN.toString(),
-      label: 'LinkedIn',
-    },
-    {
-      value: SocialLinkType.SLACK.toString(),
-      label: 'Slack',
-    },
-    {
-      value: SocialLinkType.DISCOURSE.toString(),
-      label: 'Discourse',
-    },
-    {
-      value: SocialLinkType.PIXELFED.toString(),
-      label: 'Pixelfed',
-    },
-    {
-      value: SocialLinkType.GHOST.toString(),
-      label: 'Ghost',
-    },
-    {
-      value: SocialLinkType.PEERTUBE.toString(),
-      label: 'PeerTube',
-    },
-    {
-      value: SocialLinkType.TIKTOK.toString(),
-      label: 'TikTok',
-    },
-    {
-      value: SocialLinkType.TWITCH.toString(),
-      label: 'Twitch',
-    },
-  ];
+const options = Object.keys(SocialLinkType).map(value => ({ value, label: SocialLinkLabel[value] }));
 
+function SocialLinkTypePicker({ value, onChange, ...pickerProps }: SocialLinkTypePickerProps) {
   return (
     <StyledSelect
       {...pickerProps}
@@ -309,6 +225,7 @@ function SocialLinkItem({ value, error, onChange, onRemoveItem }: SocialLinkItem
 }
 
 const knownSocialLinkDomains = [
+  { type: SocialLinkType.BLUESKY, regexp: /^(https:\/\/)?bsky.app/ },
   { type: SocialLinkType.DISCORD, regexp: /^(https:\/\/)?discord.com/ },
   { type: SocialLinkType.FACEBOOK, regexp: /^(https:\/\/)?(www\.)?facebook.com/ },
   { type: SocialLinkType.GITHUB, regexp: /^(https:\/\/)?github.com/ },
@@ -317,10 +234,11 @@ const knownSocialLinkDomains = [
   { type: SocialLinkType.LINKEDIN, regexp: /^(https:\/\/)?(www\.)?linkedin.com/ },
   { type: SocialLinkType.MEETUP, regexp: /^(https:\/\/)?meetup.com/ },
   { type: SocialLinkType.SLACK, regexp: /^(https:\/\/)?[^.]+.?slack.com/ },
+  { type: SocialLinkType.THREADS, regexp: /^(https:\/\/)?(www\.)?threads.net/ },
   { type: SocialLinkType.TIKTOK, regexp: /^(https:\/\/)?(www\.)?tiktok.com/ },
   { type: SocialLinkType.TUMBLR, regexp: /^(https:\/\/)?[^.]+\.?tumblr.com/ },
   { type: SocialLinkType.TWITCH, regexp: /^(https:\/\/)?(www\.)?twitch.tv/ },
-  { type: SocialLinkType.TWITTER, regexp: /^(https:\/\/)?twitter.com/ },
+  { type: SocialLinkType.TWITTER, regexp: /^(https:\/\/)?(twitter|x)\.com/ },
   { type: SocialLinkType.YOUTUBE, regexp: /^(https:\/\/)?(www\.)?youtube.com/ },
 ];
 

diff --git a/lib/graphql/schema.graphql b/lib/graphql/schema.graphql
@@ -967,27 +967,29 @@ type SocialLink {
 The type of social link
 """
 enum SocialLinkType {
-  TWITTER
-  TUMBLR
-  MASTODON
-  MATTERMOST
-  SLACK
-  LINKEDIN
-  MEETUP
-  FACEBOOK
-  INSTAGRAM
+  BLUESKY
   DISCORD
-  YOUTUBE
-  GITHUB
-  GITLAB
-  GIT
-  WEBSITE
   DISCOURSE
-  PIXELFED
+  FACEBOOK
   GHOST
+  GIT
+  GITHUB
+  GITLAB
+  INSTAGRAM
+  LINKEDIN
+  MASTODON
+  MATTERMOST
+  MEETUP
   PEERTUBE
+  PIXELFED
+  SLACK
+  THREADS
   TIKTOK
+  TUMBLR
   TWITCH
+  TWITTER
+  WEBSITE
+  YOUTUBE
 }
 
 """

diff --git a/lib/graphql/schemaV2.graphql b/lib/graphql/schemaV2.graphql
@@ -1030,27 +1030,29 @@ type SocialLink {
 The type of social link
 """
 enum SocialLinkType {
-  TWITTER
-  TUMBLR
-  MASTODON
-  MATTERMOST
-  SLACK
-  LINKEDIN
-  MEETUP
-  FACEBOOK
-  INSTAGRAM
+  BLUESKY
   DISCORD
-  YOUTUBE
-  GITHUB
-  GITLAB
-  GIT
-  WEBSITE
   DISCOURSE
-  PIXELFED
+  FACEBOOK
   GHOST
+  GIT
+  GITHUB
+  GITLAB
+  INSTAGRAM
+  LINKEDIN
+  MASTODON
+  MATTERMOST
+  MEETUP
   PEERTUBE
+  PIXELFED
+  SLACK
+  THREADS
   TIKTOK
+  TUMBLR
   TWITCH
+  TWITTER
+  WEBSITE
+  YOUTUBE
 }
 
 """
@@ -20867,7 +20869,7 @@ input OrganizationCreateInput {
   legalName: String
   slug: String!
   description: String!
-  website: String
+  website: String @deprecated(reason: "2024-11-12: Please use socialLinks")
   settings: JSON
 }
 
@@ -20877,6 +20879,16 @@ input ProjectCreateInput {
   description: String!
   tags: [String]
   settings: JSON
+
+  """
+  The social links in order of preference
+  """
+  socialLinks: [SocialLinkInput!]
+}
+
+input SocialLinkInput {
+  type: SocialLinkType!
+  url: URL!
 }
 
 """
@@ -22854,11 +22866,6 @@ input PersonalTokenReferenceInput {
   legacyId: Int
 }
 
-input SocialLinkInput {
-  type: SocialLinkType!
-  url: URL!
-}
-
 type TagResponse {
   order: Order
   expense: Expense