hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-22 02:19:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

update profile pictures (#53)

Browse source 
Also refactors to make future PRs easier
This commit is contained in:
Visual-Dawg 2024-03-15 11:46:29 -07:00 committed by GitHub
parent 6e36c713b8
commit fe25efae96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 293 additions and 1364 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

227
src/content/profiles.json Normal file
View file

@ -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
}
]

393
src/routes/home-slices/CommunitySlice.svelte
View file

@ -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 } */
const profiles = [
{
// 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 {Promise<import('./Types').CommunityProfile[]>}*/
let allProfilesPromise = new Promise(() => {})
//
// Extras
/** @type {import('./Types').CommunityProfile[]} */
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">
<div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
{#each profiles as { onDragEnd, onDragStart, onHover, ...props }}
<DiscordProfilePicture
{...props}
on:dragStart={onDragStart}
on:dragEnd={onDragEnd}
on:hover={onHover}
/>
{/each}
{#await allProfilesPromise then allProfiles}
<div class="absolute w-[1024px] select-none">
<div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
{#each allProfiles as { onDragEnd, onDragStart, onHover, ...props }}
<DiscordProfilePicture
{...props}
on:dragStart={onDragStart}
on:dragEnd={onDragEnd}
on:hover={onHover}
/>
{/each}
</div>
</div>
</div>
{/await}
<img
src={background}
class="absolute top-0 -z-10 min-w-[1400px] select-none"

10
src/routes/home-slices/Types.ts Normal file
View file

@ -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
}

239
static/imgs/chan/joy.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 6 KiB

274
static/imgs/chan/surprise.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

259
static/imgs/chan/tongueout.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

253
static/imgs/chan/wink.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

2
tailwind.config.js
View file

@ -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' },