Skip to content

Commit

Permalink
feat(about): add dynamic contributor list and improve UI
Browse files Browse the repository at this point in the history 
Signed-off-by: Robert Goniszewski <[email protected]>
  • Loading branch information
@goniszewski
goniszewski committed Sep 3, 2024
1 parent 3da3e90 commit 5cad676
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 22 deletions.
38 changes: 38 additions & 0 deletions src/routes/about/+page.server.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import type { PageServerLoad } from '../$types';

type Contributor = {
login: string;
id: number;
node_id: string;
avatar_url: string;
gravatar_id: string;
url: string;
html_url: string;
followers_url: string;
following_url: string;
gists_url: string;
starred_url: string;
subscriptions_url: string;
organizations_url: string;
repos_url: string;
events_url: string;
received_events_url: string;
type: string;
site_admin: boolean;
contributions: number;
};

export const load: PageServerLoad = async () => {
const response = await fetch('https://api.github.com/repos/goniszewski/grimoire/contributors');
const contributors = await response
.json()
.then((data:Contributor[]) =>
data.filter(
(contributor) => contributor.type === 'User' && contributor.login !== 'goniszewski'
)
.sort((a, b) => b.contributions - a.contributions).splice(0, 10))

return {
contributors
};
};
74 changes: 52 additions & 22 deletions src/routes/about/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
</script>

<div class="w-full">
<h1 class="text-2xl font-bold">About</h1>
<div class="mb-14 flex w-full flex-wrap">
Expand All @@ -8,8 +12,7 @@
grimoire_logo_600.webp 600w,
grimoire_logo.webp 960w"
alt="Grimoire logo"
class="max-w-[20rem]"
/>
class="max-w-[20rem]" />
</div>
<p>
Glimpse into the magical book of <em>your</em> forbidden knowledge -
Expand All @@ -34,36 +37,63 @@
<div class="flex min-w-fit flex-1 flex-col">
<div class="flex flex-col items-center justify-center">
<h2 class="mb-4 mt-8 text-xl font-bold">Developers and contributors</h2>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-1">
<div class="flex max-w-[14rem] items-center">
<div class="indicator">
<span class="badge indicator-item badge-primary badge-sm indicator-top">author</span>
<a href="https://www.github.com/goniszewski" class="link p-1 text-center">
<span class="badge indicator-item badge-primary badge-sm indicator-middle"
>author</span>
<a href="https://www.github.com/goniszewski" class="px-4 text-center hover:underline">
Robert Goniszewski (@goniszewski)
</a>
</div>
</div>
{#if $page.data.contributors.length > 0}
{#each $page.data.contributors as contributor}
<div class="flex max-w-[14rem] items-center justify-center">
<div
class="tooltip"
data-tip={`Thank you for ${contributor.contributions} contribution${contributor.contributions > 1 ? 's' : ''}!`}>
<div class="indicator">
<span class="badge indicator-item badge-accent badge-sm indicator-middle"
>{contributor.contributions}</span>
<a href={contributor.html_url} class="px-4 text-center hover:underline">
{contributor.login}
</a>
</div>
</div>
</div>
{/each}
<!-- {#if $page.data.contributors.length ===10} -->
<div class="flex items-center justify-center">
<div class="tooltip" data-tip="Thank you for your contribution!">
<a
href="https://github.com/goniszewski/grimoire/graphs/contributors"
class="pl-4 text-center link">
And others...
</a>
</div>
</div>
<!-- {/if} -->
{/if}
</div>
</div>
<div class="mt-8 flex flex-col items-center">
<h2 class="mb-4 mt-8 text-xl font-bold">Special thanks to</h2>
<p class="flex flex-col items-center gap-2">
<a href="https://github.com/extractus/article-extractor" class="link">
@extractus/article-extractor</a
>
<a href="https://github.com/oven-sh/bun" class="link">Bun</a>
<a href="https://github.com/saadeghi/daisyui" class="link">DaisyUI</a>
<a href="https://github.com/drizzle-team/drizzle-orm" class="link">Drizzle</a>
<a href="https://github.com/krisk/fuse" class="link">Fuse.js</a>
<a href="https://github.com/microlinkhq/metascraper" class="link">MetaScraper</a>
<a href="https://github.com/pocketbase/pocketbase" class="link">PocketBase</a>
<a href="https://github.com/apostrophecms/sanitize-html" class="link">sanitize-html</a>
<a href="https://github.com/sveltejs/kit" class="link">SvelteKit</a>
<a href="https://github.com/kbrgl/svelte-french-toast" class="link">Svelte French Toast</a
>
<a href="https://github.com/rob-balfre/svelte-select" class="link">Svelte Select</a>
<a href="https://tailwindcss.com" class="link">Tailwind CSS</a>
<a href="https://github.com/laurengarcia/url-metadata" class="link">url-metadata</a>
<p class="flex flex-col items-center gap-1">
<a href="https://github.com/extractus/article-extractor" class="hover:underline">
@extractus/article-extractor</a>
<a href="https://github.com/oven-sh/bun" class="hover:underline">Bun</a>
<a href="https://github.com/saadeghi/daisyui" class="hover:underline">DaisyUI</a>
<a href="https://github.com/drizzle-team/drizzle-orm" class="hover:underline">Drizzle</a>
<a href="https://github.com/krisk/fuse" class="hover:underline">Fuse.js</a>
<a href="https://github.com/microlinkhq/metascraper" class="hover:underline">MetaScraper</a>
<a href="https://github.com/pocketbase/pocketbase" class="hover:underline">PocketBase</a>
<a href="https://github.com/apostrophecms/sanitize-html" class="hover:underline">sanitize-html</a>
<a href="https://github.com/sveltejs/kit" class="hover:underline">SvelteKit</a>
<a href="https://github.com/kbrgl/svelte-french-toast" class="hover:underline">Svelte French Toast</a>
<a href="https://github.com/rob-balfre/svelte-select" class="hover:underline">Svelte Select</a>
<a href="https://tailwindcss.com" class="hover:underline">Tailwind CSS</a>
<a href="https://github.com/laurengarcia/url-metadata" class="hover:underline">url-metadata</a>
</p>
</div>
</div>
Expand Down

0 comments on commit 5cad676

Please sign in to comment.