Refactor contributors

Dlurak · Jul 2, 2024 · 5416c2e · 5416c2e
1 parent 6e0da87
commit 5416c2e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 48 deletions.
diff --git a/src/lib/components/contributors/Card.svelte b/src/lib/components/contributors/Card.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { i } from '$lib/i18n/store';
+	import type { Contributor } from '$lib/schemes/contributor';
+	import { fmtNum } from '$lib/utils/intl';
+	import Store from '../utils/Store.svelte';
+
+	export let contributor: Contributor;
+</script>
+
+<div
+	class="
+		flex flex-col gap-2 rounded px-2 py-1 outline outline-2 outline-zinc-300
+		dark:outline-zinc-700
+	"
+>
+	<img src={contributor.avatar_url} alt="" class="h-36 w-36 rounded" loading="lazy" />
+	<span class="flex flex-col text-center">
+		<a class="text-lg" href={contributor.html_url}>
+			{contributor.login}
+		</a>
+		<span class="text-sm">
+			<Store
+				store={i(
+					'contributions.count',
+					{ contributions: fmtNum(contributor.contributions) },
+					{ count: contributor.contributions }
+				)}
+			/>
+		</span>
+	</span>
+</div>
diff --git a/src/lib/schemes/contributor.ts b/src/lib/schemes/contributor.ts
@@ -0,0 +1,25 @@
+import { z } from 'zod';
+
+export const contributorScheme = z.object({
+	login: z.string(),
+	id: z.number(),
+	node_id: z.string(),
+	avatar_url: z.string(),
+	gravatar_id: z.string(),
+	url: z.string(),
+	html_url: z.string(),
+	followers_url: z.string(),
+	following_url: z.string(),
+	gists_url: z.string(),
+	starred_url: z.string(),
+	subscriptions_url: z.string(),
+	organizations_url: z.string(),
+	repos_url: z.string(),
+	events_url: z.string(),
+	received_events_url: z.string(),
+	type: z.string(),
+	site_admin: z.boolean(),
+	contributions: z.number()
+});
+
+export type Contributor = z.infer<typeof contributorScheme>;
diff --git a/src/routes/contributions/+page.server.ts b/src/routes/contributions/+page.server.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod';
 import type { PageServerLoad } from './$types';
 import { fromEntries, objectEntries } from '$lib/utils/objects/entries';
+import { contributorScheme } from '$lib/schemes/contributor';
 
 export const prerender = true;
 
@@ -9,29 +10,7 @@ const REPOS = {
 	backend: 'Dlurak/dlool_backend_v2'
 } as const satisfies Record<'frontend' | 'backend', string>;
 
-const scheme = z.array(
-	z.object({
-		login: z.string(),
-		id: z.number(),
-		node_id: z.string(),
-		avatar_url: z.string(),
-		gravatar_id: z.string(),
-		url: z.string(),
-		html_url: z.string(),
-		followers_url: z.string(),
-		following_url: z.string(),
-		gists_url: z.string(),
-		starred_url: z.string(),
-		subscriptions_url: z.string(),
-		organizations_url: z.string(),
-		repos_url: z.string(),
-		events_url: z.string(),
-		received_events_url: z.string(),
-		type: z.string(),
-		site_admin: z.boolean(),
-		contributions: z.number()
-	})
-);
+const scheme = z.array(contributorScheme);
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	const data = objectEntries(REPOS).map(([key, value]) => {

diff --git a/src/routes/contributions/+page.svelte b/src/routes/contributions/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
+	import Card from '$lib/components/contributors/Card.svelte';
 	import MetaData from '$lib/components/utils/MetaData.svelte';
-	import Store from '$lib/components/utils/Store.svelte';
 	import { i } from '$lib/i18n/store';
-	import { fmtNum } from '$lib/utils/intl';
 	import { objectEntries } from '$lib/utils/objects/entries';
 	import type { PageServerData } from './$types';
 
@@ -16,29 +15,8 @@
 		<section>
 			<h2 class="mb-2 border-b border-b-zinc-300 dark:border-b-zinc-800">{category}</h2>
 			<div class="flex gap-2 py-2">
-				{#each contris as con}
-					<div
-						class="
-							flex flex-col gap-2 rounded px-2 py-1 outline outline-2 outline-zinc-300
-							dark:outline-zinc-700
-						"
-					>
-						<img src={con.avatar_url} alt="" class="h-36 w-36 rounded" loading="lazy" />
-						<span class="flex flex-col text-center">
-							<a class="text-lg" href={con.html_url}>
-								{con.login}
-							</a>
-							<span class="text-sm">
-								<Store
-									store={i(
-										'contributions.count',
-										{ contributions: fmtNum(con.contributions) },
-										{ count: con.contributions }
-									)}
-								/>
-							</span>
-						</span>
-					</div>
+				{#each contris as contributor}
+					<Card {contributor} />
 				{/each}
 			</div>
 		</section>