filter contributers & display 100 contributers

skeletonlabs · Nov 1, 2023 · ca8d9dc · ca8d9dc
1 parent bc47b65
commit ca8d9dc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/sites/skeleton.dev/src/routes/+page.ts b/sites/skeleton.dev/src/routes/+page.ts
@@ -4,10 +4,10 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ fetch }) => {
 	const getContributors = async () => {
 		if (!browser) return []; // only fetch on the browser
-		const res = await fetch('https://api.github.com/repos/skeletonlabs/skeleton/contributors');
+		const res = await fetch('https://api.github.com/repos/skeletonlabs/skeleton/contributors?per_page=102');
 		if (!res.ok) return []; // return an empty list
 		const body = (await res.json()) as Contributor[];
-		return body;
+		return body.filter((c) => c.login !== 'github-actions[bot]' && c.login !== 'LukeHagar');
 	};
 	return { contributors: getContributors() };
 };

diff --git a/sites/skeleton.dev/src/routes/home-partials/HomeContributors.svelte b/sites/skeleton.dev/src/routes/home-partials/HomeContributors.svelte
@@ -3,6 +3,9 @@
 	import { Avatar } from '@skeletonlabs/skeleton';
 	import type { Contributor } from '../+page';
 	export let contributors: Contributor[];
+
+	$: firstPartContributors = contributors.slice(0, 32);
+	$: secondPartContributors = contributors.slice(32, 100);
 </script>
 
 <div class="space-y-10">
@@ -11,7 +14,7 @@
 		<h2 class="h2">Built by Awesome People.</h2>
 		<p>Here are a few of the people responsible for creating and maintaining Skeleton.</p>
 	</div>
-	<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-4 items-center">
+	<div class="flex justify-center">
 		<!-- Skeleton Labs -->
 		<div class="card variant-soft-secondary overflow-hidden">
 			<header class="variant-filled-secondary grid grid-cols-[1fr_auto_auto] gap-4 items-center p-4 md:p-8 md:py-8">
@@ -36,15 +39,25 @@
 				</div>
 			</section>
 		</div>
-		<!-- Contributors -->
-		<div class="space-y-4 text-center lg:text-left">
-			<div class="grid grid-cols-6 gap-4 max-w-[480px] mx-auto">
-				{#each contributors as c}
-					<a href={c.html_url} target="_blank" rel="noreferrer" title={c.login}>
-						<Avatar src={c.avatar_url} width="w-full" background="bg-black" />
-					</a>
-				{/each}
-			</div>
+	</div>
+	<!-- first 30 Contributors -->
+	<div class="space-y-4 text-center lg:text-left">
+		<div class="grid grid-cols-8 gap-4 max-w-2xl mx-auto">
+			{#each firstPartContributors as c}
+				<a href={c.html_url} target="_blank" rel="noreferrer" title={c.login}>
+					<Avatar loading="lazy" src={c.avatar_url} width="w-full" background="bg-black" />
+				</a>
+			{/each}
+		</div>
+	</div>
+	<!-- rest of contribtors -->
+	<div class="space-y-4 text-center lg:text-left">
+		<div class="grid grid-cols-12 gap-4 max-w-2xl mx-auto">
+			{#each secondPartContributors as c}
+				<a href={c.html_url} target="_blank" rel="noreferrer" title={c.login}>
+					<Avatar loading="lazy" src={c.avatar_url} width="w-full" background="bg-black" />
+				</a>
+			{/each}
 		</div>
 	</div>
 </div>