feat: README badge generator

README.md

@@ -31,3 +31,9 @@ To begin rewarding your contributors or to start earning rewards for your contri
 Whether you're a maintainer looking to give back to your team, or a developer eager to contribute to open-source projects and step into the world of Web3, CommitKudos is your gateway to a more rewarding open-source ecosystem.
 
 Together, let's build a future where open-source thrives and contributors are rewarded as they should be.
+
+## Badge
+
+Add a badge on your repository README file to encourage users to give some Kudos !
+
+[![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fzaibon%2Fcommitkudos&query=%24.name&style=flat-square&label=Give%20some%20Kudos&cacheSeconds=3600)](https://commitkudos.com/?repository=zaibon%2Fcommitkudos&contributors=5&reward=5)

src/lib/components/BadgeCode.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { CodeBlock, Tab, TabGroup } from '@skeletonlabs/skeleton';
+
+	export let imageURL: string | undefined;
+	export let link: string | undefined;
+
+	let tabSet = 0;
+
+	$: html = `<a href="${link}" target="_blank"><img src="${imageURL}"</a>`;
+	$: markdown = `[![commitKudosBadge](${imageURL})](${link})`;
+</script>
+
+<TabGroup>
+	<Tab bind:group={tabSet} name="html" value={0}>HTML</Tab>
+	<Tab bind:group={tabSet} name="markdown" value={1}>Markdown</Tab>
+	<!-- Tab Panels --->
+	<svelte:fragment slot="panel">
+		{#if tabSet === 0}
+			<CodeBlock language="html" code={html} />
+		{:else if tabSet === 1}
+			<CodeBlock language="markdown" code={markdown} />
+		{/if}
+	</svelte:fragment>
+</TabGroup>

src/lib/components/BadgeForm.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	import type { Badge } from '$lib/types';
+
+	const dispatch = createEventDispatcher();
+
+	const badge: Badge = {
+		badgeContent: '',
+		style: 'flat',
+		logo: '',
+		logoColor: '',
+		label: '',
+		labelColor: '',
+		color: '',
+		cacheSeconds: 3600
+	};
+	$: if (badge) {
+		dispatch('input', badge);
+	}
+</script>
+
+<form>
+	<label class="label">
+		<span>Repository</span>
+		<input type="text" class="input" placeholder="owner/name" bind:value={badge.badgeContent} />
+	</label>
+	<label class="label">
+		<span>Background Color</span>
+		<input
+			type="text"
+			class="input"
+			placeholder="hex, rgb, rgba, hsl, hsla or css named color"
+			bind:value={badge.color}
+		/>
+	</label>
+	<label class="label">
+		<span>Style</span>
+		<select class="select" bind:value={badge.style}>
+			<option value="flat">flat</option>
+			<option value="flat-square">flat-square</option>
+			<option value="plastic">plastic</option>
+			<option value="for-the-badge">big</option>
+			<option value="social">social</option>
+		</select>
+	</label>
+	<label class="label">
+		<span>Logo from <a class="underline" href="https://simpleicons.org/">simpleicons</a></span>
+		<input type="text" class="input" placeholder="github" bind:value={badge.logo} />
+	</label>
+	<label class="label">
+		<span>Logo Color</span>
+		<input
+			type="text"
+			class="input"
+			placeholder="hex, rgb, rgba, hsl, hsla or css named color"
+			bind:value={badge.logoColor}
+		/>
+	</label>
+	<label class="label">
+		<span>Label</span>
+		<input type="text" class="input" placeholder="Give kudos" bind:value={badge.label} />
+	</label>
+	<label class="label">
+		<span>Label Color</span>
+		<input
+			type="text"
+			class="input"
+			placeholder="hex, rgb, rgba, hsl, hsla or css named color"
+			bind:value={badge.labelColor}
+		/>
+	</label>
+</form>

src/lib/components/BadgeGenerator.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Badge } from '$lib/types';
+
+	import BadgeCode from './BadgeCode.svelte';
+	import BadgeForm from './BadgeForm.svelte';
+
+	const baseURL = 'https://img.shields.io/badge';
+	let badge: Badge;
+	let imageURL: string | undefined = '';
+	let link: string;
+	let reward = 1.0;
+
+	function buildBadge(badge: Badge): string | undefined {
+		if (!badge || !badge.badgeContent || !badge.color) {
+			return undefined;
+		}
+		let u = new URL(`${baseURL}/${badge.badgeContent}-${badge.color}`);
+		Object.entries(badge).forEach(([key, value]) => {
+			if (key === 'badgeContent' || key === 'color') {
+				return;
+			}
+			if (value) {
+				u.searchParams.set(key, value);
+			}
+		});
+		return u.toString();
+	}
+
+	$: if (badge && badge.badgeContent) {
+		imageURL = buildBadge(badge);
+		link = `https://commitkudos.com?repository=${badge.badgeContent}&contributor=5&reward=${reward}`;
+	}
+</script>
+
+<div class="flex flex-row gap-2">
+	<div class="w-2/3">
+		<BadgeForm on:input={(e) => (badge = e.detail)} />
+	</div>
+	<div class="w-1/3">
+		<BadgeCode {imageURL} {link} />
+		{#if imageURL}
+			<a href={link} target="_blank">
+				<img class="m-auto mt-5" src={imageURL} alt="badge" />
+			</a>
+		{/if}
+	</div>
+</div>

src/lib/types.ts

@@ -122,3 +122,17 @@ export interface Explorer {
 	standard: string;
 	icon?: string;
 }
+
+export type BadgeStyle = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'social';
+
+export interface Badge {
+	badgeContent: string;
+	style?: BadgeStyle;
+	logo?: string;
+	logoColor?: string;
+	label?: string;
+	labelColor?: string;
+	color?: string;
+	cacheSeconds?: number;
+	link?: string;
+}

src/routes/+page.svelte

@@ -8,23 +8,34 @@
 	const { debounce } = pkg;
 	import { getToastStore } from '@skeletonlabs/skeleton';
 	import type { BalanceResult } from '@socket.tech/socket-v2-sdk';
+	import { onMount } from 'svelte';
 
+	import { page } from '$app/stores';
 	import Balance from '$lib/components/Balance.svelte';
 
 	const { isConnected, chainId, getSigner } = getAccountStores();
 	const toastStore = getToastStore();
 
-	let creatingLinks = false;
+	// export let data: PageData;
+	let repository: string | null = $page.url.searchParams.get('repository');
+	let contributorsNr: number | null = $page.url.searchParams.has('contributor')
+		? parseInt($page.url.searchParams.get('contributor') ?? '0')
+		: null;
+	let rewardAmount: number | null = $page.url.searchParams.has('reward')
+		? parseFloat($page.url.searchParams.get('reward') ?? '0')
+		: null;
 
-	let repository: string = '';
-	let contributorsNr: number | undefined;
-	let rewardAmount: number | undefined;
+	let creatingLinks = false;
 	let top: string[] = [];
 	let selectedContributors: Author[] = [];
 	let selectedToken: BalanceResult;
 	let links: { link: string; txHash: string }[] = [];
 	const byLogin: Map<string, { user: User; author: Author }> = new Map();
 
+	onMount(() => {
+		topContributors();
+	});
+
 	const topContributors = debounce(async () => {
 		selectedContributors = [];
 		top = [];
@@ -132,7 +143,7 @@
 		});
 		const promises = selectedContributors.map((contributor, i) => {
 			const link = links[i];
-			if (!contributor || !link) {
+			if (!repository || !contributor || !link) {
 				return;
 			}
 			const email: Email = {

src/routes/badges/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import BadgeGenerator from '$lib/components/BadgeGenerator.svelte';
+</script>
+
+<div class="w-3/4 mx-auto">
+	<h2 class="h2 mb-5">Generate your README badge</h2>
+	<BadgeGenerator />
+</div>