feat: contributors section (#66)

Author: huntabyte

.changeset/solid-groups-cheat.md

@@ -0,0 +1,5 @@
+---
+"@svecodocs/kit": minor
+---
+
+feat: Contributors section

.changeset/tricky-moles-visit.md

@@ -0,0 +1,5 @@
+---
+"@svecodocs/kit": patch
+---
+
+feat: forward component props to docpage component

packages/kit/src/lib/components/contributors-section.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Contributor } from "$lib/types.js";
+	import { Avatar } from "bits-ui";
+	import H2 from "./markdown/h2.svelte";
+
+	let { contributors }: { contributors: Contributor[] } = $props();
+</script>
+
+{#if contributors.length > 0}
+	<H2 id="contributors">Contributors</H2>
+	<p></p>
+	<div class="mt-6 flex select-none flex-wrap gap-1.5">
+		{#each contributors as contributor (contributor.login)}
+			<a
+				href="https://github.com/{contributor.login}"
+				target="_blank"
+				class="group flex items-center gap-2 rounded-lg px-2 py-1.5"
+			>
+				<Avatar.Root
+					class="border-foreground/50 group-hover:border-foreground size-8 rounded-full border"
+				>
+					<Avatar.Image
+						class="rounded-full"
+						src={contributor.avatar_url}
+						alt={contributor.name}
+					/>
+					<Avatar.Fallback>
+						{contributor.name?.charAt(0)}
+					</Avatar.Fallback>
+				</Avatar.Root>
+				<span class="underline-offset-2 group-hover:underline"
+					>{contributor.name ?? contributor.login}</span
+				>
+			</a>
+		{/each}
+	</div>
+{/if}

packages/kit/src/lib/components/layout/doc-page.svelte

@@ -2,38 +2,47 @@
 	import PageHeader from "$lib/components/layout/page-header/page-header.svelte";
 	import Toc from "$lib/components/toc/toc.svelte";
 	import type { Component, ComponentProps } from "svelte";
-	import type { TOCEntry } from "$lib/types.js";
+	import type { Contributor, TOCEntry } from "$lib/types.js";
 	import Metadata from "../metadata.svelte";
+	import ContributorSection from "../contributors-section.svelte";
 
 	let {
 		component,
+		componentProps = {},
 		title,
 		description,
 		toc,
 		metadata = {},
+		contributors = [],
 	}: {
 		component: Component;
+		componentProps?: Record<string, unknown>;
 		title: string;
 		description?: string;
 		toc: TOCEntry[];
 		metadata?: ComponentProps<typeof Metadata>;
+		contributors?: Contributor[];
 	} = $props();
 
 	const PageComponent = $derived(component);
+	const tocItems = $derived(
+		contributors.length ? [...toc, { title: "Contributors", url: "#contributors" }] : toc
+	);
 </script>
 
 <Metadata {...metadata} {title} {description} />
 <aside class="sticky">
 	<div class="sticky top-24 hidden pl-16 xl:block">
-		<Toc toc={{ items: toc }} />
+		<Toc toc={{ items: tocItems }} />
 	</div>
 </aside>
 <div class="mx-auto">
 	<aside>
-		<Toc toc={{ items: toc }} type="mobile" />
+		<Toc toc={{ items: tocItems }} type="mobile" />
 	</aside>
 	<main class="mx-auto w-full min-w-0 max-w-[640px] pb-12 2xl:max-w-[760px]" id="main-content">
 		<PageHeader {title} {description} />
-		<PageComponent />
+		<PageComponent {...componentProps} />
+		<ContributorSection {contributors} />
 	</main>
 </div>

packages/kit/src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as DemoContainer } from "./components/demo-container.svelte";
 export { default as ScrollArea } from "./components/ui/scroll-area/scroll-area.svelte";
 export { default as Card } from "./components/card.svelte";
 export { default as CardGrid } from "./components/card-grid.svelte";
+export { default as ContributorsSection } from "./components/contributors-section.svelte";
 export { default as Button } from "./components/ui/button/button.svelte";
 export { default as Tabs } from "./components/tabs/tabs.svelte";
 export { default as TabItem } from "./components/tabs/tab-item.svelte";

packages/kit/src/lib/types.ts

@@ -54,3 +54,10 @@ export type TOCEntry = {
 	url: string;
 	items?: TOCEntry[];
 };
+
+export type Contributor = {
+	login: string;
+	name?: string;
+	avatar_url: string;
+	contributions: number;
+};