update profile pictures (#53)

Also refactors to make future PRs easier

src/content/profiles.json

@@ -0,0 +1,227 @@
+[
+	{
+		"image": "https://cdn.discordapp.com/avatars/372809091208445953/a_33fd25e26c0ba17c05566bc3179c6476.gif",
+		"class": "outline-red-500",
+		"coordinates": [187, 296],
+		"size": 172
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/444952344308744203/9ee39cd422568dad9e70319df27b2560.webp",
+		"class": "outline-yellow-500",
+		"coordinates": [735, 441],
+		"size": 164
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/419880181101232129/2f57c8e5e681c5d8608d07c83053815f.webp",
+		"class": "outline-orange-500",
+		"coordinates": [391, 615],
+		"size": 149
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/378704069726044170/415dcb2ef8d1ef635e35e1d04d523cba.webp",
+		"class": "outline-amber-500",
+		"coordinates": [568, 594],
+		"size": 120
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/623781003382751243/95435efc86709ac7e347ca205bda665e.webp",
+		"class": "outline-orange-500",
+		"coordinates": [525, 764],
+		"size": 80
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/862314649307054080/2dd9cbd31f5c53811ece2f5abdeab2bf.webp",
+		"class": "outline-cyan-400",
+		"coordinates": [648, 709],
+		"size": 128
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/967764496527532083/5dc06d112653a529ecbae3b6f4225a93.webp",
+		"class": "outline-sky-500",
+		"coordinates": [53, 399],
+		"size": 75
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/163678036401586177/0930f3f6f0839b4f9c59846e185aa8ad.webp",
+		"class": "outline-yellow-500",
+		"coordinates": [24, 341],
+		"size": 49
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/223160360461402122/c6552a1c768613bffb83bf88e4ce2632.webp",
+		"class": "outline-red-500",
+		"coordinates": [47, 86],
+		"size": 48
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/979473046404476998/c9a4af31050a785d896f7880f9d268e3.webp",
+		"class": "outline-amber-500",
+		"coordinates": [1038, 446],
+		"size": 52
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/486802226577276929/4c1cd003e9c7b7c19a858b38cca7104a.webp",
+		"class": "outline-cyan-500",
+		"coordinates": [273, 760],
+		"size": 52,
+		"quote": "\"meds\""
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/837425748435796060/248cd938377647404e3d8d1c53b639cf.webp",
+		"class": "outline-orange-500",
+		"coordinates": [648, 364],
+		"size": 80
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/480024733535174668/5453c57e69ff16f495d8dcbd597070e9.webp",
+		"class": "outline-purple-500",
+		"coordinates": [772, 651],
+		"size": 62
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/544368824842190861/1fbf29ea7ca9c2109b97af2ede3806fa.webp",
+		"class": "outline-lime-500",
+		"coordinates": [736, 277],
+		"size": 101
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/344854021166727180/5c5daa4bc6b540eab0832da1ee5c2385.webp",
+		"class": "outline-yellow-500",
+		"coordinates": [898, 364],
+		"size": 68
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/579120037034721281/c7b4341806d515f5d92bb53e322a4728.webp",
+		"class": "outline-rose-500",
+		"coordinates": [887, 159],
+		"size": 39
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/246125351464337418/10c8bb5456d1ca1cebf2edff62b7001f.webp",
+		"class": "outline-amber-500",
+		"coordinates": [1023, 552],
+		"size": 48
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/143031299152674816/4a143f00b0e014e9c3da37cd8599b106.webp",
+		"class": "outline-pink-500",
+		"coordinates": [147, 553],
+		"size": 87
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/194157962498015232/ab11cc35bd9d057769254d1d3e29e468.webp",
+		"class": "outline-amber-500 ",
+		"coordinates": [65, 643],
+		"size": 74
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/482139697796349953/ce63690cf5adb8e096b4472bc0c175e8.webp",
+		"class": "outline-stone-500 ",
+		"coordinates": [263, 653],
+		"size": 65
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/273110996938260481/5d2ea7a0ad5a29e0de5b3918bfa82ab2.webp",
+		"class": "outline-yellow-500 bg-black ",
+		"coordinates": [893, 622],
+		"size": 80,
+		"quote": "\"piss blob\""
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/231040215085481984/7f378337240110b76e6e9baa31f83670.webp",
+		"class": "outline-amber-500",
+		"coordinates": [354, 798],
+		"size": 80
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/784153590595321876/04cbb92b7fe3fea8a6cdb4e2fd8562c5.webp",
+		"class": "outline-white",
+		"coordinates": [583, 824],
+		"size": 69,
+		"quote": "Perfect being"
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/408513270916579338/bac966d3bae8ad01546ee32584917be9.webp",
+		"class": "outline-rose-300",
+		"coordinates": [275, 844],
+		"size": 40
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/860670651026767942/7122b752fa6097472f8c76cc4458e33b.webp",
+		"class": "outline-orange-500",
+		"coordinates": [939, 552],
+		"size": 48
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/520860407720837131/3e73c777553fcd67f2f17bc119b79f15.webp",
+		"class": "outline-orange-500  ",
+		"coordinates": [458, 913],
+		"size": 35
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/390226958241366016/513b77487a9fa01b1256c4dc8e1b0c55.webp",
+		"class": "outline-blue-500  ",
+		"coordinates": [858, 707],
+		"size": 45
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/594256188422488069/1e532709dbd756c172c54add8536e558.webp",
+		"class": "outline-blue-500 bg-black ",
+		"coordinates": [8, 477],
+		"size": 54
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/531392146767347712/0b5e5671e7e8eb0e4f6ec547c686667b.webp",
+		"class": "outline-orange-500 bg-stone-800",
+		"coordinates": [950, 277],
+		"size": 47
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/194584980922433536/6e4d6f981d56356b9c913d2a4e0df126.webp",
+		"class": "outline-blue-500 bg-black ",
+		"coordinates": [69, 561],
+		"size": 54
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/561863734264594452/e9d1b128f8a32849ae4e2a0d86d16fdb.webp",
+		"class": "outline-orange-500 bg-black ",
+		"coordinates": [908, 463],
+		"size": 54
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/426690378830184448/09181b1b476f221b7850702158778c1a.webp",
+		"class": "outline-blue-500 bg-black ",
+		"coordinates": [823, 184],
+		"size": 44
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/219573494713810945/5202607a6cf5e34ed705308459d0115c.webp",
+		"class": "outline-stone-900 bg-black ",
+		"coordinates": [133, 493],
+		"size": 49
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/317785409763541002/3b62b9f9fd403e8d9f8a5175b90eae8f.webp",
+		"class": "outline-blue-500 bg-black ",
+		"coordinates": [119, 202],
+		"size": 49
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/465960044094160908/db149a0d49fd80cf7caf7cc2a637e084.webp",
+		"class": "outline-yellow-500 bg-black ",
+		"coordinates": [179, 671],
+		"size": 69
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/706672850907430942/9330c50f778f6d3776da15335dfb5b3f.webp",
+		"class": "outline-stone-500 bg-black ",
+		"coordinates": [771, 818],
+		"size": 49
+	},
+	{
+		"image": "https://cdn.discordapp.com/avatars/708440359587414067/2bcdf703f69ee35c4cf39b2a89c429e8.webp",
+		"class": "outline-lime-500 bg-black ",
+		"coordinates": [1018, 123],
+		"size": 28
+	}
+]

src/routes/home-slices/CommunitySlice.svelte

@@ -6,342 +6,23 @@
 	import Button from '$lib/components/Button.svelte'
 	import DiscordIcon from '~icons/prime/discord'
 	import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
-	import { setContext } from 'svelte'
+	import { onMount, setContext } from 'svelte'
 	import Title from '$lib/components/Title.svelte'
 	import background from '$lib/images/community-bg.webp'
 	import amongUsGreenImage from '$lib/images/amongus/green.webp'
 	import { discordLink } from '$lib/constants.mjs'
+	import profiles from '../../content/profiles.json'
 
 	let sectionElement
 	let isDraggingChan = false
 
-	// Okay everything multiplied by 24
 	const validSizes = [16, 20, 24, 32, 40, 48, 64, 80, 96, 100, 128, 160, 240, 320, 640]
 
-	/** @type {{image: string coordinates: [number, number] containerClass: string}[], size: number, quote?: string } */
+	/** @type {Promise<import('./Types').CommunityProfile[]>}*/
-	const profiles = [
+	let allProfilesPromise = new Promise(() => {})
-		{
-			// vaxry
-			image:
-				'https://cdn.discordapp.com/avatars/372809091208445953/a_33fd25e26c0ba17c05566bc3179c6476.gif?size=48',
-			coordinates: [187, 296],
-			size: 172,
-			class: 'outline-red-500'
-		},
-		{
-			// fufexan
-			image:
-				'https://cdn.discordapp.com/avatars/444952344308744203/9ee39cd422568dad9e70319df27b2560.webp',
-			coordinates: [735, 441],
-			size: 164,
-			class: 'outline-yellow-500'
-		},
-		{
-			// notashelf
-			image:
-				'https://cdn.discordapp.com/avatars/419880181101232129/2f57c8e5e681c5d8608d07c83053815f.webp',
-			coordinates: [391, 615],
-			size: 149,
-			class: 'outline-orange-500'
-		},
-		{
-			// Mathisbuilder
-			image:
-				'https://cdn.discordapp.com/avatars/378704069726044170/415dcb2ef8d1ef635e35e1d04d523cba.webp',
-			coordinates: [568, 594],
-			size: 120,
-			class: 'outline-amber-500'
-		},
-		{
-			// dani_2048
-			image:
-				'https://cdn.discordapp.com/avatars/623781003382751243/abea149ded923e8f4cd6f56bff016368.webp',
-			coordinates: [525, 764],
-			size: 80,
-			class: 'outline-orange-500'
-		},
-		{
-			// end_4
-			image:
-				'https://cdn.discordapp.com/avatars/862314649307054080/2dd9cbd31f5c53811ece2f5abdeab2bf.webp',
-			coordinates: [648, 709],
-			size: 128,
-			class: 'outline-cyan-400'
-		},
-		{
-			// liquidovski
-			image:
-				'https://cdn.discordapp.com/avatars/283259320802476042/7aa4969a2ce25638da49b54dcd862a35.webp',
-			coordinates: [65, 208],
-			size: 100,
-			class: 'outline-lime-500'
-		},
-		{
-			// roasted.cheese
-			image:
-				'https://cdn.discordapp.com/avatars/967764496527532083/5dc06d112653a529ecbae3b6f4225a93.webp',
-			coordinates: [53, 399],
-			size: 75,
-			class: 'outline-sky-500'
-		},
-		{
-			// donnan
-			image:
-				'https://cdn.discordapp.com/avatars/163678036401586177/0930f3f6f0839b4f9c59846e185aa8ad.webp?size=128',
-			coordinates: [24, 341],
-			size: 49,
-			class: 'outline-yellow-500'
-		},
-		{
-			// captainiveau
-			image:
-				'https://cdn.discordapp.com/avatars/223160360461402122/c6552a1c768613bffb83bf88e4ce2632.webp?size=128',
-			coordinates: [47, 86],
-			size: 48,
-			class: 'outline-red-500'
-		},
-		{
-			// sioodmy
-			image:
-				'https://cdn.discordapp.com/avatars/979473046404476998/c9a4af31050a785d896f7880f9d268e3.webp',
-			coordinates: [1038, 446],
-			size: 52,
-			class: 'outline-amber-500'
-		},
-		{
-			image: '/imgs/profile_pictures/_anon.webp',
-			coordinates: [-85, 566],
-			size: 40,
-			class: 'outline-sky-500'
-		},
-		{
-			// Angry snow man
-			// psidotdiamparenthesis4pt5tol4poi
-			image:
-				'https://cdn.discordapp.com/avatars/486802226577276929/4c1cd003e9c7b7c19a858b38cca7104a.webp',
-			coordinates: [273, 760],
-			size: 52,
-			quote: '"meds"',
-			class: 'outline-cyan-500'
-		},
-		{
-			// outfoxxed
-			image:
-				'https://cdn.discordapp.com/avatars/837425748435796060/248cd938377647404e3d8d1c53b639cf.webp',
-			coordinates: [648, 364],
-			size: 80,
-			class: 'outline-orange-500'
-		},
-		{
-			// kirottum
-			image:
-				'https://cdn.discordapp.com/avatars/480024733535174668/5453c57e69ff16f495d8dcbd597070e9.webp',
-			coordinates: [772, 651],
-			size: 62,
-			class: 'outline-purple-500'
-		},
-		{
-			// beardwarrior
-			image:
-				'https://cdn.discordapp.com/avatars/544368824842190861/1fbf29ea7ca9c2109b97af2ede3806fa.webp',
-			coordinates: [736, 277],
-			size: 101,
-			class: 'outline-lime-500'
-		},
-		{
-			// heisfer
-			image:
-				'https://cdn.discordapp.com/avatars/344854021166727180/0c8dd04188df26093164406cc1367f58.webp',
-			coordinates: [898, 364],
-			size: 68,
-			class: 'outline-yellow-500'
-		},
-		{
-			image: amongUsGreenImage,
-			coordinates: [873, 224],
-			size: 79,
-			class: 'outline-green-500'
-		},
-		{
-			// SimplyKyle!
-			image:
-				'https://cdn.discordapp.com/avatars/579120037034721281/c7b4341806d515f5d92bb53e322a4728.webp',
-			coordinates: [887, 159],
-			size: 39,
-			class: 'outline-rose-500'
-		},
-		{
-			// thesuncat
-			image:
-				'https://cdn.discordapp.com/avatars/246125351464337418/10c8bb5456d1ca1cebf2edff62b7001f.webp',
-			coordinates: [1023, 552],
-			size: 48,
-			class: 'outline-amber-500'
-		},
-		{
-			// flafy
-			image:
-				'https://cdn.discordapp.com/avatars/143031299152674816/4a143f00b0e014e9c3da37cd8599b106.webp',
-			coordinates: [147, 553],
-			size: 87,
-			class: 'outline-pink-500'
-		},
-		{
-			// vagahbond
-			image:
-				'https://cdn.discordapp.com/avatars/194157962498015232/ab11cc35bd9d057769254d1d3e29e468.webp',
-			coordinates: [65, 643],
-			size: 74,
-			class: 'outline-amber-500 '
-		},
-		{
-			// flick0
-			image:
-				'https://cdn.discordapp.com/avatars/482139697796349953/ce63690cf5adb8e096b4472bc0c175e8.webp',
-			coordinates: [263, 653],
-			size: 65,
-			class: 'outline-stone-500 '
-		},
-		{
-			// jacekpoz
-			image: '/imgs/profile_pictures/jacekpoz.svg',
-			coordinates: [893, 622],
-			size: 80,
-			class: 'outline-yellow-500 bg-black ',
-			quote: '"piss blob"'
-		},
-		{
-			// aylur
-			image:
-				'https://cdn.discordapp.com/avatars/231040215085481984/7f378337240110b76e6e9baa31f83670.webp',
-			coordinates: [354, 798],
-			size: 80,
-			class: 'outline-amber-500'
-		},
-		{
-			// aleph.nought
-			image:
-				'https://cdn.discordapp.com/avatars/784153590595321876/04cbb92b7fe3fea8a6cdb4e2fd8562c5.webp',
-			coordinates: [583, 824],
-			size: 69,
-			class: 'outline-white',
-			quote: 'Perfect being'
-		},
-		{
-			// jappie3
-			image:
-				'https://cdn.discordapp.com/avatars/408513270916579338/bac966d3bae8ad01546ee32584917be9.webp',
-			coordinates: [275, 844],
-			size: 40,
-			class: 'outline-rose-300'
-		},
-		{
-			// nwg.piotr
-			image:
-				'https://cdn.discordapp.com/avatars/860670651026767942/7122b752fa6097472f8c76cc4458e33b.webp',
-			coordinates: [939, 552],
-			size: 48,
-			class: 'outline-orange-500'
-		},
-		{
-			// xsty_
-			image:
-				'https://cdn.discordapp.com/avatars/520860407720837131/3e73c777553fcd67f2f17bc119b79f15.webp',
-			coordinates: [458, 913],
-			size: 35,
-			class: 'outline-orange-500  '
-		},
-		{
-			// petingoso
-			image:
-				'https://cdn.discordapp.com/avatars/390226958241366016/513b77487a9fa01b1256c4dc8e1b0c55.webp',
-			coordinates: [858, 707],
-			size: 45,
-			class: 'outline-blue-500  '
-		},
-		{
-			// eriedaberrie
-			image:
-				'https://cdn.discordapp.com/avatars/594256188422488069/1e532709dbd756c172c54add8536e558.webp',
-			coordinates: [8, 477],
-			size: 54,
-			class: 'outline-blue-500 bg-black '
-		},
-		{
-			// errornointernet
-			image:
-				'https://cdn.discordapp.com/avatars/531392146767347712/0b5e5671e7e8eb0e4f6ec547c686667b.webp',
-			coordinates: [950, 277],
-			size: 47,
-			class: 'outline-orange-500 bg-stone-800'
-		},
-		{
-			// kosslan
-			image:
-				'https://cdn.discordapp.com/avatars/194584980922433536/7bb58205667ad9a6bf2791b59b32c109.webp',
-			coordinates: [69, 561],
-			size: 54,
-			class: 'outline-blue-500 bg-black '
-		},
-		{
-			// lassebq
-			image:
-				'https://cdn.discordapp.com/avatars/561863734264594452/e9d1b128f8a32849ae4e2a0d86d16fdb.webp',
-			coordinates: [908, 463],
-			size: 54,
-			class: 'outline-orange-500 bg-black '
-		},
-		{
-			// poutineburgerman
-			image:
-				'https://cdn.discordapp.com/avatars/426690378830184448/09181b1b476f221b7850702158778c1a.webp',
-			coordinates: [823, 184],
-			size: 44,
-			class: 'outline-blue-500 bg-black '
-		},
-		{
-			// visualdawg
-			image:
-				'https://cdn.discordapp.com/avatars/219573494713810945/5202607a6cf5e34ed705308459d0115c.webp',
-			coordinates: [133, 493],
-			size: 49,
-			class: 'outline-stone-900 bg-black '
-		},
-		{
-			// wickedlyhost
-			image:
-				'https://cdn.discordapp.com/avatars/317785409763541002/279527807f4263888fa75b2d7e68daf7.webp',
-			coordinates: [119, 202],
-			size: 49,
-			class: 'outline-blue-500 bg-black '
-		},
-		{
-			// yavko
-			image:
-				'https://cdn.discordapp.com/guilds/961691461554950145/users/465960044094160908/avatars/11672d8e456e31a85a3d89b31fff913b.webp',
-			coordinates: [179, 671],
-			size: 69,
-			class: 'outline-yellow-500 bg-black '
-		},
-		{
-			// mcgoth
-			image:
-				'https://cdn.discordapp.com/avatars/706672850907430942/9330c50f778f6d3776da15335dfb5b3f.webp',
-			coordinates: [771, 818],
-			size: 49,
-			class: 'outline-stone-500 bg-black '
-		},
-		{
-			// brainless.bitch
-			image:
-				'https://cdn.discordapp.com/avatars/708440359587414067/2bcdf703f69ee35c4cf39b2a89c429e8.webp',
-			coordinates: [1018, 123],
-			size: 28,
-			class: 'outline-lime-500 bg-black '
-		},
 
-		//
+	/** @type {import('./Types').CommunityProfile[]} */
-		// Extras
+	const extraProfiles = [
 		{
 			image: 'imgs/chan/joy.svg',
 			coordinates: [284, 533],
@@ -358,6 +39,20 @@
 			onHover: ({ detail: { srcElement } }) =>
 				!isDraggingChan && (srcElement.src = 'imgs/chan/wink.svg')
 		},
+		{
+			// jacekpoz
+			image: '/imgs/profile_pictures/jacekpoz.svg',
+			coordinates: [893, 622],
+			size: 80,
+			class: 'outline-yellow-500 bg-black ',
+			quote: '"piss blob"'
+		},
+		{
+			image: amongUsGreenImage,
+			coordinates: [873, 224],
+			size: 79,
+			class: 'outline-green-500'
+		},
 		{
 			image: '/imgs/profile_pictures/chan_1.webp',
 			coordinates: [91, 799],
@@ -375,14 +70,14 @@
 			coordinates: [1000, 744],
 			size: 32,
 			class: 'outline-cyan-500'
+		},
+		{
+			image: '/imgs/profile_pictures/_anon.webp',
+			coordinates: [-85, 566],
+			size: 40,
+			class: 'outline-sky-500'
 		}
 	]
-		.map(({ image, size, ...profile }) => ({
-			...profile,
-			size,
-			image: image + '?size=' + validSizes.find((_, index) => size <= validSizes[index])
-		}))
-		.sort(({ size: a }, { size: b }) => b - a)
 
 	setContext(contextId, {
 		biggestSize: profiles.reduce(
@@ -395,6 +90,18 @@
 		),
 		getSectionElement: () => sectionElement
 	})
+
+	onMount(() => {
+		allProfilesPromise = import('../../content/profiles.json').then(({ default: profiles }) => {
+			return [...profiles, ...extraProfiles]
+				.map(({ image, size, ...profile }) => ({
+					...profile,
+					size,
+					image: image + '?size=' + validSizes.find((_, index) => size <= validSizes[index])
+				}))
+				.sort(({ size: a }, { size: b }) => b - a)
+		})
+	})
 </script>
 
 <section
@@ -425,18 +132,20 @@
 		</a>
 	</div>
 
-	<div class="absolute w-[1024px] select-none">
+	{#await allProfilesPromise then allProfiles}
-		<div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
+		<div class="absolute w-[1024px] select-none">
-			{#each profiles as { onDragEnd, onDragStart, onHover, ...props }}
+			<div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
-				<DiscordProfilePicture
+				{#each allProfiles as { onDragEnd, onDragStart, onHover, ...props }}
-					{...props}
+					<DiscordProfilePicture
-					on:dragStart={onDragStart}
+						{...props}
-					on:dragEnd={onDragEnd}
+						on:dragStart={onDragStart}
-					on:hover={onHover}
+						on:dragEnd={onDragEnd}
-				/>
+						on:hover={onHover}
-			{/each}
+					/>
+				{/each}
+			</div>
 		</div>
-	</div>
+	{/await}
 	<img
 		src={background}
 		class="absolute top-0 -z-10 min-w-[1400px] select-none"

src/routes/home-slices/Types.ts

@@ -0,0 +1,10 @@
+export interface CommunityProfile {
+	image: string
+	coordinates: [number, number]
+	containerClass: string[]
+	size: number
+	quote?: string
+	onDragStart?: (event: DragEvent) => void
+	onDragEnd?: (event: DragEvent) => void
+	onHover?: (event: MouseEvent) => void
+}

tailwind.config.js

@@ -3,7 +3,7 @@ const colors = require('tailwindcss/colors')
 
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/**/*.{html,js,svelte,ts}'],
+	content: ['./src/**/**/*.{html,js,svelte,ts}', './src/content/profiles.json'],
 	theme: {
 		extend: {
 			colors: { black: '#090b0c', primary: '#58E1FF', secondary: '#00A2F8' },