your personal website on atproto - mirror
blento.app
flo-bit.dev
1import type { CardDefinition } from '../types';
2import BigSocialCard from './BigSocialCard.svelte';
3import CreateBigSocialCardModal from './CreateBigSocialCardModal.svelte';
4
5export const BigSocialCardDefinition = {
6 type: 'bigsocial',
7 contentComponent: BigSocialCard,
8 creationModalComponent: CreateBigSocialCardModal,
9
10 createNew: (card) => {
11 card.cardType = 'bigsocial';
12 card.cardData = {
13 href: '',
14 platform: ''
15 };
16 card.w = 2;
17 card.h = 2;
18 card.mobileW = 4;
19 card.mobileH = 4;
20 },
21
22 canChange: (item) => {
23 const href = item.cardData?.href;
24 if (!href) return false;
25 return Boolean(detectPlatform(href));
26 },
27 change: (item) => {
28 const href = item.cardData?.href;
29 const platform = href ? detectPlatform(href) : null;
30 if (!href || !platform) return item;
31 item.cardData = {
32 ...item.cardData,
33 platform,
34 color: platformsData[platform].hex
35 };
36 return item;
37 },
38 name: 'Social Icon',
39 allowSetColor: false,
40 defaultColor: 'transparent',
41 minW: 2,
42 minH: 2,
43 onUrlHandler: (url, item) => {
44 const platform = detectPlatform(url);
45 if (!platform) return null;
46
47 item.cardData.platform = platform;
48 item.cardData.color = platformsData[platform].hex;
49 item.cardData.href = url;
50
51 return item;
52 },
53 urlHandlerPriority: 1,
54 canHaveLabel: true
55} as CardDefinition & { type: 'bigsocial' };
56
57import {
58 siInstagram,
59 siFacebook,
60 siX,
61 siYoutube,
62 siTiktok,
63 siBluesky,
64 siThreads,
65 siSnapchat,
66 siPinterest,
67 siTwitch,
68 siDiscord,
69 siGithub,
70 siSpotify,
71 siReddit,
72 siWhatsapp,
73 siTelegram,
74 siMastodon,
75 siBehance,
76 siDribbble,
77 siMedium,
78 siDevdotto,
79 siHashnode,
80 siPatreon,
81 siKofi,
82 siBuymeacoffee,
83 siSubstack,
84 siSoundcloud,
85 siBandcamp,
86 siApplepodcasts,
87 siFigma,
88 siNotion,
89 siSignal,
90 siWechat,
91 siLine,
92 siArchiveofourown,
93 type SimpleIcon
94} from 'simple-icons';
95
96export const platformPatterns: Record<string, RegExp> = {
97 instagram: /(?:instagram\.com|instagr\.am)/i,
98 facebook: /(?:facebook\.com|fb\.com|fb\.me)/i,
99 twitter: /(?:twitter\.com)/i,
100 x: /(?:x\.com)/i,
101 youtube: /(?:youtube\.com|youtu\.be)/i,
102 tiktok: /(?:tiktok\.com)/i,
103 linkedin: /(?:linkedin\.com)/i,
104 bluesky: /(?:bsky\.app|bsky\.social)/i,
105 threads: /(?:threads\.net)/i,
106 snapchat: /(?:snapchat\.com)/i,
107 pinterest: /(?:pinterest\.com|pin\.it)/i,
108 twitch: /(?:twitch\.tv)/i,
109 discord: /(?:discord\.gg|discord\.com)/i,
110 github: /(?:github\.com)/i,
111 spotify: /(?:spotify\.com|open\.spotify\.com)/i,
112 reddit: /(?:reddit\.com)/i,
113 whatsapp: /(?:whatsapp\.com|wa\.me)/i,
114 telegram: /(?:t\.me|telegram\.org)/i,
115 mastodon: /(?:mastodon\.social|mastodon\.online|mstdn\.social)/i,
116
117 // professional / creator
118 behance: /(?:behance\.net)/i,
119 dribbble: /(?:dribbble\.com)/i,
120 medium: /(?:medium\.com)/i,
121 devto: /(?:dev\.to)/i,
122 hashnode: /(?:hashnode\.com)/i,
123
124 // support / monetization
125 patreon: /(?:patreon\.com)/i,
126 kofi: /(?:ko-fi\.com|kofi\.com)/i,
127 buymeacoffee: /(?:buymeacoffee\.com)/i,
128 substack: /(?:substack\.com)/i,
129
130 // audio / podcasts
131 soundcloud: /(?:soundcloud\.com)/i,
132 bandcamp: /(?:bandcamp\.com)/i,
133 applepodcasts: /(?:podcasts\.apple\.com)/i,
134 googlepodcasts: /(?:podcasts\.google\.com)/i,
135
136 // tools / misc
137 figma: /(?:figma\.com)/i,
138 notion: /(?:notion\.so)/i,
139
140 // chat / messaging
141 slack: /(?:slack\.com)/i,
142 signal: /(?:signal\.org|signal\.me)/i,
143 wechat: /(?:wechat\.com|weixin\.qq\.com)/i,
144 line: /(?:line\.me)/i,
145 skype: /(?:skype\.com)/i,
146
147 ao3: /(?:archiveofourown\.org)/i,
148
149 germ: /(?:ger\.mx)/i,
150
151 tangled: /(?:tangled\.org)/i,
152
153 mail: /(?:mailto:)/i
154};
155
156export const platformsData: Record<string, SimpleIcon> = {
157 instagram: siInstagram,
158 facebook: siFacebook,
159 twitter: siX,
160 x: siX,
161 youtube: siYoutube,
162 tiktok: siTiktok,
163 bluesky: siBluesky,
164 threads: siThreads,
165 snapchat: siSnapchat,
166 pinterest: siPinterest,
167 twitch: siTwitch,
168 discord: siDiscord,
169 github: siGithub,
170 spotify: siSpotify,
171 reddit: siReddit,
172 whatsapp: siWhatsapp,
173 telegram: siTelegram,
174 mastodon: siMastodon,
175
176 // professional / creator
177 behance: siBehance,
178 dribbble: siDribbble,
179 medium: siMedium,
180 devto: siDevdotto,
181 hashnode: siHashnode,
182 linkedin: {
183 slug: 'linkedin',
184 path: '',
185 title: 'LinkedIn',
186 hex: '0A66C2',
187 source: 'https://brand.linkedin.com',
188 guidelines: 'https://brand.linkedin.com/policies',
189 svg: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>`
190 },
191
192 germ: {
193 slug: 'germ',
194 path: '',
195 title: 'Germ Network',
196 hex: '7EE35A',
197 source: '',
198 svg: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
199<g clip-path="url(#clip0_2_3)">
200<path d="M9.97852 2.31976C10.9816 4.81045 13.9828 5.28448 15.4834 3.19552C15.6921 2.89824 15.9489 2.6572 16.0371 2.6572C16.3501 2.6572 18.2841 4.7301 18.6933 5.50945C19.2791 6.62624 19.247 6.65838 18.1476 6.32093C15.018 5.34876 12.4742 6.21648 11.1742 8.69111C10.2112 10.539 11.1822 13.4475 13.0841 14.3956C14.1674 14.9339 14.7933 14.8054 16.2378 13.7207C18.0513 12.3629 19.0303 13.1342 17.626 14.8134C15.652 17.1836 12.3378 18.2039 9.32852 17.3764C8.21309 17.0711 8.11679 16.9506 8.20506 15.9623C8.35753 14.3956 7.77173 12.7405 6.63223 11.5112C5.68532 10.4908 5.75754 10.2739 7.2421 9.7838C10.797 8.59469 10.8933 4.15162 7.38655 3.17945C6.99334 3.06696 6.6884 2.92234 6.71247 2.85807C6.79272 2.62507 9.08778 1.50024 9.56926 1.46007C9.60136 1.46007 9.78592 1.84572 9.97852 2.31976Z" fill="#4183FF"/>
201<path d="M18.1316 7.74304C19.7445 8.54648 19.9773 9.14104 19.4958 11.1979L19.4935 11.2075C19.255 12.2183 19.2534 12.2252 18.7415 11.8728C17.8587 11.2782 17.0563 11.463 15.5316 12.6039C14.2637 13.56 13.8625 13.568 12.9797 12.6441C10.1791 9.71149 14.2637 5.83083 18.1316 7.74304Z" fill="#22F137"/>
202<path d="M6.50383 4.35248C8.08469 4.64976 8.71864 5.3809 8.55012 6.71462C8.42975 7.65466 8.03654 8.05638 6.6563 8.62683C4.30507 9.599 4.04026 10.5631 5.62914 12.3789C6.45568 13.327 6.82482 14.1706 6.89704 15.2714C6.96926 16.4122 6.88902 16.4122 5.66927 15.1589C3.20569 12.6521 2.61989 9.15711 4.13655 5.96741C4.96309 4.24 5.15569 4.10341 6.50383 4.35248Z" fill="#22F137"/>
203<path d="M13.7581 1.58862C14.7371 1.89393 14.681 1.83769 14.4483 2.28762C13.6618 3.80614 11.1341 3.15534 11.1341 1.43596C11.1341 1.10655 12.4341 1.18689 13.7581 1.58862Z" fill="#22F137"/>
204<path fill-rule="evenodd" clip-rule="evenodd" d="M9.40876 0.19865C2.66804 1.65289 -0.260969 9.79987 3.97606 15.3115C8.39765 21.0723 17.6983 19.7867 20.3143 13.0378C23.1069 5.83083 16.952 -1.41628 9.40876 0.19865ZM14.4483 2.28762C14.681 1.83769 14.7371 1.89393 13.7581 1.58862C12.4341 1.18689 11.1341 1.10655 11.1341 1.43596C11.1341 3.15534 13.6618 3.80614 14.4483 2.28762ZM15.4834 3.19552C13.9828 5.28448 10.9816 4.81045 9.97852 2.31976C9.78592 1.84572 9.60136 1.46007 9.56926 1.46007C9.08778 1.50024 6.79272 2.62507 6.71247 2.85807C6.6884 2.92234 6.99334 3.06696 7.38655 3.17945C10.8933 4.15162 10.797 8.59469 7.2421 9.7838C5.75754 10.2739 5.68532 10.4908 6.63223 11.5112C7.77173 12.7405 8.35753 14.3956 8.20506 15.9623C8.11679 16.9506 8.21309 17.0711 9.32852 17.3764C12.3378 18.2039 15.652 17.1836 17.626 14.8134C19.0303 13.1342 18.0513 12.3629 16.2378 13.7207C14.7933 14.8054 14.1674 14.9339 13.0841 14.3956C11.1822 13.4475 10.2112 10.539 11.1742 8.69111C12.4742 6.21648 15.018 5.34876 18.1476 6.32093C19.247 6.65838 19.2791 6.62624 18.6933 5.50945C18.2841 4.7301 16.3501 2.6572 16.0371 2.6572C15.9489 2.6572 15.6921 2.89824 15.4834 3.19552ZM8.55012 6.71462C8.71864 5.3809 8.08469 4.64976 6.50383 4.35248C5.15569 4.10341 4.96309 4.24 4.13655 5.96741C2.61989 9.15711 3.20569 12.6521 5.66927 15.1589C6.88902 16.4122 6.96926 16.4122 6.89704 15.2714C6.82482 14.1706 6.45568 13.327 5.62914 12.3789C4.04026 10.5631 4.30507 9.599 6.6563 8.62683C8.03654 8.05638 8.42975 7.65466 8.55012 6.71462ZM19.4958 11.1979C19.9773 9.14104 19.7445 8.54648 18.1316 7.74304C14.2637 5.83083 10.1791 9.71149 12.9797 12.6441C13.8625 13.568 14.2637 13.56 15.5316 12.6039C17.0563 11.463 17.8587 11.2782 18.7415 11.8728C19.2534 12.2252 19.255 12.2183 19.4935 11.2075L19.4958 11.1979Z" fill="black"/>
205<path d="M11.11 21.3936C11.0939 21.4097 10.5402 21.4579 9.89025 21.4981C7.15383 21.6668 5.5489 22.5586 6.71247 23.2657C8.25321 24.2057 14.7371 24.2057 16.2779 23.2657C17.3853 22.5988 15.9248 21.707 13.4211 21.5222C11.4711 21.3776 11.1501 21.3615 11.11 21.3936Z" fill="black"/>
206</g>
207<defs>
208<clipPath id="clip0_2_3">
209<rect width="24" height="24" fill="white"/>
210</clipPath>
211</defs>
212</svg>`
213 },
214
215 mail: {
216 slug: 'mail',
217 path: '',
218 title: 'Mail',
219 hex: '0a0a0a',
220 source: '',
221 svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
222 <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
223 <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
224</svg>`
225 },
226
227 // support / monetization
228 patreon: siPatreon,
229 kofi: siKofi,
230 buymeacoffee: siBuymeacoffee,
231 substack: siSubstack,
232
233 // audio / podcasts
234 soundcloud: siSoundcloud,
235 bandcamp: siBandcamp,
236 applepodcasts: siApplepodcasts,
237
238 // tools / misc
239 figma: siFigma,
240 notion: siNotion,
241
242 // chat / messaging
243 signal: siSignal,
244 wechat: siWechat,
245 line: siLine,
246
247 ao3: siArchiveofourown,
248
249 tangled: {
250 slug: 'tangled',
251 path: '',
252 title: 'Tangled',
253 source: '',
254 hex: 'F9FAFB',
255 svg: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
256<g clip-path="url(#clip0_0_3)">
257<path d="M15.6924 23.1449C14.9386 23.1388 14.3636 22.9197 13.7398 22.5389C12.8452 22.0683 12.162 21.2777 11.6738 20.4061C10.8981 21.3685 9.86127 21.9525 8.70053 22.2824C8.2063 22.4259 7.34067 22.5715 5.90581 22.0517C3.83792 21.357 2.33162 19.2053 2.5028 17.0129C2.47149 16.1041 2.80284 15.2122 3.27252 14.4454C2.01956 13.7729 0.997858 12.644 0.606603 11.2595C0.368836 10.5016 0.378835 9.68517 0.466513 8.90605C0.78051 7.06658 2.16033 5.46701 3.93669 4.89166C4.64572 3.27586 6.19298 2.07094 7.94595 1.82563C9.10987 1.66355 10.3147 1.90721 11.3329 2.49876C12.8165 0.853348 15.4012 0.367075 17.3748 1.37784C18.8803 2.09678 19.9568 3.59674 20.2182 5.23238C21.6507 5.80626 22.8572 6.9766 23.3307 8.4623C23.6473 9.38216 23.6578 10.3954 23.4528 11.3398C23.0864 12.8136 22.0461 14.0683 20.6995 14.754C20.7027 15.0163 21.5649 16.9074 21.4207 18.3345C21.3892 20.1187 20.2575 21.8096 18.6881 22.6309C17.7723 23.1655 16.687 23.1554 15.6924 23.1449ZM11.4011 18.0091C12.6705 17.8677 13.5026 16.761 14.1489 15.7642C14.4545 15.3102 14.6879 14.802 14.9198 14.3187C15.2206 14.5943 15.4754 15.1136 15.951 15.2373C16.452 15.3933 17.0394 15.2666 17.3461 14.8115C17.9331 13.7167 17.6438 12.3956 17.3019 11.2611C17.0915 10.6094 16.8153 9.94095 16.2898 9.47906C16.4019 8.68852 15.9334 7.88564 15.2675 7.47185C14.7 7.92437 13.8365 7.92165 13.289 7.43757C12.2397 8.50775 11.2781 8.47222 10.3492 7.62407C10.1405 7.43345 9.74216 8.78756 8.34428 8.02049C7.54117 8.6934 6.91846 9.34072 6.36668 10.2727C5.83051 11.2776 5.26901 12.1699 5.22063 13.2611C5.19736 13.8988 5.69569 14.567 6.37092 14.5152C7.0458 14.5754 7.50518 13.9112 8.01618 13.6353C8.09239 14.5254 8.17824 15.4816 8.47902 16.3506C8.82426 17.475 10.0402 18.1896 11.1912 18.026C11.2726 18.0196 11.4011 18.009 11.4011 18.0091ZM12.06 14.6515C11.4426 14.2731 11.7397 13.4519 11.715 12.8554C11.7764 12.1356 11.8257 11.3788 12.1493 10.7231C12.4917 10.2556 13.3269 10.4359 13.3638 11.0358C13.3393 11.6391 13.0623 12.2398 13.0954 12.8652C13.0235 13.3875 13.1474 13.9742 12.9163 14.4515C12.7268 14.7156 12.3407 14.7924 12.06 14.6515ZM9.3636 14.3077C8.78206 13.9922 8.96681 13.1982 8.8756 12.6463C8.95122 12.0072 8.88828 11.1966 9.42332 10.7485C9.94655 10.3836 10.6588 11.0084 10.4113 11.5821C10.1474 12.3071 10.3204 13.0992 10.3259 13.8344C10.2261 14.268 9.76228 14.4982 9.3636 14.3077Z" fill="black"/>
258</g>
259<defs>
260<clipPath id="clip0_0_3">
261<rect width="24" height="24" fill="white"/>
262</clipPath>
263</defs>
264</svg>`
265 }
266};
267
268export function detectPlatform(url: string): string | null {
269 for (const [platform, pattern] of Object.entries(platformPatterns)) {
270 if (pattern.test(url) && platformsData[platform]) {
271 return platform;
272 }
273 }
274 return null;
275}