import type { CardDefinition } from '../../types';
import BigSocialCard from './BigSocialCard.svelte';
import CreateBigSocialCardModal from './CreateBigSocialCardModal.svelte';
export const BigSocialCardDefinition = {
type: 'bigsocial',
contentComponent: BigSocialCard,
creationModalComponent: CreateBigSocialCardModal,
createNew: (card) => {
card.cardType = 'bigsocial';
card.cardData = {
href: '',
platform: ''
};
card.w = 2;
card.h = 2;
card.mobileW = 4;
card.mobileH = 4;
},
canChange: (item) => {
const href = item.cardData?.href;
if (!href) return false;
return Boolean(detectPlatform(href));
},
change: (item) => {
const href = item.cardData?.href;
const platform = href ? detectPlatform(href) : null;
if (!href || !platform) return item;
item.cardData = {
...item.cardData,
platform,
color: platformsData[platform].hex
};
return item;
},
name: 'Social Icon',
allowSetColor: true,
defaultColor: 'base',
minW: 2,
minH: 2,
onUrlHandler: (url, item) => {
const platform = detectPlatform(url);
if (!platform) return null;
item.cardData.platform = platform;
item.cardData.color = platformsData[platform].hex;
item.cardData.href = url;
return item;
},
urlHandlerPriority: 1,
canHaveLabel: true,
keywords: [
'twitter',
'instagram',
'tiktok',
'youtube',
'github',
'discord',
'linkedin',
'mastodon',
'kickstarter'
],
groups: ['Social'],
icon: ``
} as CardDefinition & { type: 'bigsocial' };
import {
siInstagram,
siFacebook,
siX,
siYoutube,
siTiktok,
siBluesky,
siThreads,
siSnapchat,
siPinterest,
siTwitch,
siDiscord,
siGithub,
siSpotify,
siReddit,
siWhatsapp,
siTelegram,
siMastodon,
siBehance,
siDribbble,
siMedium,
siDevdotto,
siHashnode,
siPatreon,
siKofi,
siBuymeacoffee,
siSubstack,
siSoundcloud,
siBandcamp,
siApplepodcasts,
siFigma,
siNotion,
siSignal,
siWechat,
siLine,
siArchiveofourown,
siKickstarter,
type SimpleIcon
} from 'simple-icons';
export const platformPatterns: Record = {
instagram: /(?:instagram\.com|instagr\.am)/i,
facebook: /(?:facebook\.com|fb\.com|fb\.me)/i,
twitter: /(?:twitter\.com)/i,
x: /(?:x\.com)/i,
youtube: /(?:youtube\.com|youtu\.be)/i,
tiktok: /(?:tiktok\.com)/i,
linkedin: /(?:linkedin\.com)/i,
bluesky: /(?:bsky\.app|bsky\.social)/i,
threads: /(?:threads\.net)/i,
snapchat: /(?:snapchat\.com)/i,
pinterest: /(?:pinterest\.com|pin\.it)/i,
twitch: /(?:twitch\.tv)/i,
discord: /(?:discord\.gg|discord\.com)/i,
github: /(?:github\.com)/i,
spotify: /(?:spotify\.com|open\.spotify\.com)/i,
reddit: /(?:reddit\.com)/i,
whatsapp: /(?:whatsapp\.com|wa\.me)/i,
telegram: /(?:t\.me|telegram\.org)/i,
mastodon: /(?:mastodon\.social|mastodon\.online|mstdn\.social)/i,
// professional / creator
behance: /(?:behance\.net)/i,
dribbble: /(?:dribbble\.com)/i,
medium: /(?:medium\.com)/i,
devto: /(?:dev\.to)/i,
hashnode: /(?:hashnode\.com)/i,
// support / monetization
patreon: /(?:patreon\.com)/i,
kofi: /(?:ko-fi\.com|kofi\.com)/i,
buymeacoffee: /(?:buymeacoffee\.com)/i,
substack: /(?:substack\.com)/i,
// audio / podcasts
soundcloud: /(?:soundcloud\.com)/i,
bandcamp: /(?:bandcamp\.com)/i,
applepodcasts: /(?:podcasts\.apple\.com)/i,
googlepodcasts: /(?:podcasts\.google\.com)/i,
// tools / misc
figma: /(?:figma\.com)/i,
notion: /(?:notion\.so)/i,
// chat / messaging
slack: /(?:slack\.com)/i,
signal: /(?:signal\.org|signal\.me)/i,
wechat: /(?:wechat\.com|weixin\.qq\.com)/i,
line: /(?:line\.me)/i,
skype: /(?:skype\.com)/i,
ao3: /(?:archiveofourown\.org)/i,
kickstarter: /(?:kickstarter\.com)/i,
germ: /(?:ger\.mx)/i,
tangled: /(?:tangled\.org)/i,
mail: /(?:mailto:)/i,
npmx: /(?:npmx\.dev)/i,
roomy: /(?:roomy\.space)/i,
blacksky: /(?:blacksky\.community)/i
};
export const platformsData: Record = {
instagram: siInstagram,
facebook: siFacebook,
twitter: siX,
x: siX,
youtube: siYoutube,
tiktok: siTiktok,
bluesky: siBluesky,
threads: siThreads,
snapchat: siSnapchat,
pinterest: siPinterest,
twitch: siTwitch,
discord: siDiscord,
github: siGithub,
spotify: siSpotify,
reddit: siReddit,
whatsapp: siWhatsapp,
telegram: siTelegram,
mastodon: siMastodon,
// professional / creator
behance: siBehance,
dribbble: siDribbble,
medium: siMedium,
devto: siDevdotto,
hashnode: siHashnode,
linkedin: {
slug: 'linkedin',
path: '',
title: 'LinkedIn',
hex: '0A66C2',
source: 'https://brand.linkedin.com',
guidelines: 'https://brand.linkedin.com/policies',
svg: ``
},
germ: {
slug: 'germ',
path: '',
title: 'Germ Network',
hex: '7EE35A',
source: '',
svg: ``
},
mail: {
slug: 'mail',
path: '',
title: 'Mail',
hex: '0a0a0a',
source: '',
svg: ``
},
// support / monetization
patreon: siPatreon,
kofi: siKofi,
buymeacoffee: siBuymeacoffee,
substack: siSubstack,
// audio / podcasts
soundcloud: siSoundcloud,
bandcamp: siBandcamp,
applepodcasts: siApplepodcasts,
// tools / misc
figma: siFigma,
notion: siNotion,
// chat / messaging
signal: siSignal,
wechat: siWechat,
line: siLine,
ao3: siArchiveofourown,
kickstarter: siKickstarter,
tangled: {
slug: 'tangled',
path: '',
title: 'Tangled',
source: '',
hex: 'F9FAFB',
svg: ``
},
npmx: {
slug: 'npmx',
path: '',
title: 'npmx',
source: '',
hex: '0A0A0A',
svg: ``
},
blacksky: {
slug: 'blacksy',
path: '',
title: 'blacksy',
source: '',
svg: ``,
hex: '080B0B'
},
roomy: {
slug: 'roomy',
path: '',
title: 'roomy',
source: '',
hex: 'FFFFFF',
svg: `
`
}
};
export function detectPlatform(url: string): string | null {
for (const [platform, pattern] of Object.entries(platformPatterns)) {
if (pattern.test(url) && platformsData[platform]) {
return platform;
}
}
return null;
}