flo-bit.dev
your personal website on atproto - mirror
blento.app
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
56 groups: ['Social'],
57 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" /></svg>`
58
59} as CardDefinition & { type: 'bigsocial' };
60
61import {
62 siInstagram,
63 siFacebook,
64 siX,
65 siYoutube,
66 siTiktok,
67 siBluesky,
68 siThreads,
69 siSnapchat,
70 siPinterest,
71 siTwitch,
72 siDiscord,
73 siGithub,
74 siSpotify,
75 siReddit,
76 siWhatsapp,
77 siTelegram,
78 siMastodon,
79 siBehance,
80 siDribbble,
81 siMedium,
82 siDevdotto,
83 siHashnode,
84 siPatreon,
85 siKofi,
86 siBuymeacoffee,
87 siSubstack,
88 siSoundcloud,
89 siBandcamp,
90 siApplepodcasts,
91 siFigma,
92 siNotion,
93 siSignal,
94 siWechat,
95 siLine,
96 siArchiveofourown,
97 type SimpleIcon
98} from 'simple-icons';
99
100export const platformPatterns: Record<string, RegExp> = {
101 instagram: /(?:instagram\.com|instagr\.am)/i,
102 facebook: /(?:facebook\.com|fb\.com|fb\.me)/i,
103 twitter: /(?:twitter\.com)/i,
104 x: /(?:x\.com)/i,
105 youtube: /(?:youtube\.com|youtu\.be)/i,
106 tiktok: /(?:tiktok\.com)/i,
107 linkedin: /(?:linkedin\.com)/i,
108 bluesky: /(?:bsky\.app|bsky\.social)/i,
109 threads: /(?:threads\.net)/i,
110 snapchat: /(?:snapchat\.com)/i,
111 pinterest: /(?:pinterest\.com|pin\.it)/i,
112 twitch: /(?:twitch\.tv)/i,
113 discord: /(?:discord\.gg|discord\.com)/i,
114 github: /(?:github\.com)/i,
115 spotify: /(?:spotify\.com|open\.spotify\.com)/i,
116 reddit: /(?:reddit\.com)/i,
117 whatsapp: /(?:whatsapp\.com|wa\.me)/i,
118 telegram: /(?:t\.me|telegram\.org)/i,
119 mastodon: /(?:mastodon\.social|mastodon\.online|mstdn\.social)/i,
120
121 // professional / creator
122 behance: /(?:behance\.net)/i,
123 dribbble: /(?:dribbble\.com)/i,
124 medium: /(?:medium\.com)/i,
125 devto: /(?:dev\.to)/i,
126 hashnode: /(?:hashnode\.com)/i,
127
128 // support / monetization
129 patreon: /(?:patreon\.com)/i,
130 kofi: /(?:ko-fi\.com|kofi\.com)/i,
131 buymeacoffee: /(?:buymeacoffee\.com)/i,
132 substack: /(?:substack\.com)/i,
133
134 // audio / podcasts
135 soundcloud: /(?:soundcloud\.com)/i,
136 bandcamp: /(?:bandcamp\.com)/i,
137 applepodcasts: /(?:podcasts\.apple\.com)/i,
138 googlepodcasts: /(?:podcasts\.google\.com)/i,
139
140 // tools / misc
141 figma: /(?:figma\.com)/i,
142 notion: /(?:notion\.so)/i,
143
144 // chat / messaging
145 slack: /(?:slack\.com)/i,
146 signal: /(?:signal\.org|signal\.me)/i,
147 wechat: /(?:wechat\.com|weixin\.qq\.com)/i,
148 line: /(?:line\.me)/i,
149 skype: /(?:skype\.com)/i,
150
151 ao3: /(?:archiveofourown\.org)/i,
152
153 germ: /(?:ger\.mx)/i,
154
155 tangled: /(?:tangled\.org)/i,
156
157 mail: /(?:mailto:)/i
158};
159
160export const platformsData: Record<string, SimpleIcon> = {
161 instagram: siInstagram,
162 facebook: siFacebook,
163 twitter: siX,
164 x: siX,
165 youtube: siYoutube,
166 tiktok: siTiktok,
167 bluesky: siBluesky,
168 threads: siThreads,
169 snapchat: siSnapchat,
170 pinterest: siPinterest,
171 twitch: siTwitch,
172 discord: siDiscord,
173 github: siGithub,
174 spotify: siSpotify,
175 reddit: siReddit,
176 whatsapp: siWhatsapp,
177 telegram: siTelegram,
178 mastodon: siMastodon,
179
180 // professional / creator
181 behance: siBehance,
182 dribbble: siDribbble,
183 medium: siMedium,
184 devto: siDevdotto,
185 hashnode: siHashnode,
186 linkedin: {
187 slug: 'linkedin',
188 path: '',
189 title: 'LinkedIn',
190 hex: '0A66C2',
191 source: 'https://brand.linkedin.com',
192 guidelines: 'https://brand.linkedin.com/policies',
193 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>`
194 },
195
196 germ: {
197 slug: 'germ',
198 path: '',
199 title: 'Germ Network',
200 hex: '7EE35A',
201 source: '',
202 svg: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
203<g clip-path="url(#clip0_2_3)">
204<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"/>
205<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"/>
206<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"/>
207<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"/>
208<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"/>
209<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"/>
210</g>
211<defs>
212<clipPath id="clip0_2_3">
213<rect width="24" height="24" fill="white"/>
214</clipPath>
215</defs>
216</svg>`
217 },
218
219 mail: {
220 slug: 'mail',
221 path: '',
222 title: 'Mail',
223 hex: '0a0a0a',
224 source: '',
225 svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
226 <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" />
227 <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" />
228</svg>`
229 },
230
231 // support / monetization
232 patreon: siPatreon,
233 kofi: siKofi,
234 buymeacoffee: siBuymeacoffee,
235 substack: siSubstack,
236
237 // audio / podcasts
238 soundcloud: siSoundcloud,
239 bandcamp: siBandcamp,
240 applepodcasts: siApplepodcasts,
241
242 // tools / misc
243 figma: siFigma,
244 notion: siNotion,
245
246 // chat / messaging
247 signal: siSignal,
248 wechat: siWechat,
249 line: siLine,
250
251 ao3: siArchiveofourown,
252
253 tangled: {
254 slug: 'tangled',
255 path: '',
256 title: 'Tangled',
257 source: '',
258 hex: 'F9FAFB',
259 svg: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
260<g clip-path="url(#clip0_0_3)">
261<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"/>
262</g>
263<defs>
264<clipPath id="clip0_0_3">
265<rect width="24" height="24" fill="white"/>
266</clipPath>
267</defs>
268</svg>`
269 }
270};
271
272export function detectPlatform(url: string): string | null {
273 for (const [platform, pattern] of Object.entries(platformPatterns)) {
274 if (pattern.test(url) && platformsData[platform]) {
275 return platform;
276 }
277 }
278 return null;
279}