#183 render contributors

modules/desktop/src/libs/api/electron.ts

@@ -100,7 +100,6 @@ export async function getPackageBottles(packageName: string): Promise<Bottle[]>
 }
 
 export async function getPackage(packageName: string): Promise<Partial<Package>> {
-	console.log('getting package:', packageName);
 	const pkg: Partial<Package> = await apiGet<Partial<Package>>(
 		`packages/${packageName.replaceAll('/', ':')}`
 	);

modules/desktop/src/libs/github.ts

@@ -1,11 +1,10 @@
 import axios from 'axios';
+import type { Contributor } from '@tea/ui/types';
 const yaml = window.require('yaml');
 
 export async function getGithubOwnerRepo(
 	pkgYamlUrl: string
 ): Promise<{ owner: string; repo: string }> {
-	// https://github.com/teaxyz/pantry.core/blob/main/projects/sqlite.org/package.yml
-	// https://raw.githubusercontent.com/teaxyz/pantry.core/main/projects/sqlite.org/package.yml
 	let owner = '';
 	let repo = '';
 
@@ -33,3 +32,19 @@ export async function getReadme(owner: string, repo: string): Promise<string> {
 	}
 	return readme;
 }
+
+export async function getContributors(owner: string, repo: string): Promise<Contributor[]> {
+	// maintainer/repo
+	let contributors: Contributor[] = [];
+	const req = await axios.get(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+	if (req.data) {
+		contributors = req.data.map((c: Contributor & { id: number }) => ({
+			login: c.login,
+			avatar_url: c.avatar_url,
+			name: c.name || '',
+			github_id: c.id,
+			contributions: c.contributions
+		}));
+	}
+	return contributors;
+}

modules/desktop/src/libs/stores/pkgs.ts

@@ -4,7 +4,7 @@ import { getPackages } from '@api';
 import Fuse from 'fuse.js';
 import { getPackage } from '@api';
 
-import { getGithubOwnerRepo, getReadme } from '$libs/github';
+import { getReadme, getContributors } from '$libs/github';
 
 export default function initPackagesStore() {
 	let initialized = false;
@@ -37,13 +37,40 @@ export default function initPackagesStore() {
 		});
 	};
 
+	const syncPackageData = async (guiPkg: Partial<GUIPackage>) => {
+		if (guiPkg.synced) return;
+
+		const pkg = await getPackage(guiPkg.full_name!); // ATM: pkg only bottles and github:string
+		const readmeMd = `# ${guiPkg.full_name} #
+To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
+		`;
+
+		const updatedPackage: Partial<GUIPackage> = {
+			...pkg,
+			readme_md: readmeMd,
+			synced: true
+		};
+		if (pkg.github) {
+			const [owner, repo] = pkg.github.split('/');
+			const [readme, contributors] = await Promise.all([
+				getReadme(owner, repo),
+				getContributors(owner, repo)
+			]);
+			if (readme) {
+				updatedPackage.readme_md = readme;
+			}
+			updatedPackage.contributors = contributors;
+		}
+
+		updatePackageProp(guiPkg.full_name!, updatedPackage);
+	};
+
 	return {
 		packages,
 		subscribe,
 		search: async (term: string, limit = 5): Promise<GUIPackage[]> => {
 			if (!term || !packagesIndex) return [];
 			// TODO: if online, use algolia else use Fuse
-
 			const res = packagesIndex.search(term, { limit });
 			const matchingPackages: GUIPackage[] = res.map((v) => v.item);
 			return matchingPackages;
@@ -51,44 +78,11 @@ export default function initPackagesStore() {
 		subscribeToPackage: (slug: string, cb: (pkg: GUIPackage) => void) => {
 			subscribe((pkgs) => {
 				const foundPackage = pkgs.find((p) => p.slug === slug) as GUIPackage;
-				if (foundPackage) cb(foundPackage);
+				if (foundPackage) {
-				// get readme
+					cb(foundPackage);
-				// get contributors
+					syncPackageData(foundPackage);
-				// get github last modified
-				// subscribe((pkgs) => cb(pkgs[pkg]));
-
-				// console.log('f:', foundPackage);
-				// getReadmeRaw('');
-
-				if (!foundPackage.bottles) {
-					getPackage(foundPackage.full_name).then((pkg) => {
-						updatePackageProp(foundPackage.full_name, pkg);
-					});
-				}
-
-				if (!foundPackage.readme_md && foundPackage.package_yml_url) {
-					getGithubOwnerRepo(foundPackage.package_yml_url).then(async ({ owner, repo }) => {
-						const defaultReadme = `# ${foundPackage.full_name} #
-To read more about this package go to [${foundPackage.homepage}](${foundPackage.homepage}).
-						`;
-						if (owner && repo) {
-							const readme = await getReadme(owner, repo);
-							updatePackageProp(foundPackage.full_name, { readme_md: readme || defaultReadme });
-						} else {
-							updatePackageProp(foundPackage.full_name, { readme_md: defaultReadme });
-						}
-					});
 				}
 			});
 		}
 	};
 }
-
-async function getReadmeRaw(owner: string, repo: string): Promise<string> {
-	// const rep = await getRepo('oven-sh', 'bun');
-	// const repo = await octokit.request('GET /repos/{owner}/{repo}', {
-	// 	owner: '',
-	// 	repo: '',
-	// });
-	return '';
-}

modules/desktop/src/libs/types.ts

@@ -15,6 +15,7 @@ export enum PackageStates {
 export type GUIPackage = Package & {
 	state: PackageStates;
 	installed_version?: string;
+	synced?: boolean;
 };
 
 export type Course = {

modules/desktop/src/routes/packages/[slug]/+page.svelte

@@ -32,6 +32,7 @@
 
 	packagesStore.subscribeToPackage(data?.slug, (p) => {
 		pkg = p;
+
 		if (!bottles.length && pkg.bottles) {
 			const newVersion =  pkg.bottles.map((b) => b.version);
 			versions = [...new Set(newVersion)];
@@ -74,7 +75,7 @@
 			<Tabs class="bg-black" {tabs} />
 		</div>
 		<div class="w-1/3">
-			<PackageMetas />
+			<PackageMetas {pkg} />
 		</div>
 	</section>
 	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>

modules/ui/src/PackageMetas/PackageMetas.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import type { Package } from '../types';
+
+	export let pkg: Package;
 	const data = {
 		last_modified: new Date(), // convert this to time ago
 		license: 'MIT',
@@ -52,7 +55,7 @@
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">{data.homepage_url}</span>
+			<span class="ml-4">{pkg.homepage}</span>
 		</li>
 	</ul>
 	<h1 class="border border-t-0 border-gray p-4 text-primary">DOCUMENTATION</h1>
@@ -66,32 +69,22 @@
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">{data.repo_url}</span>
+			<span class="ml-4">{pkg.github}</span>
-		</li>
-	</ul>
-	<h1 class="border border-t-0 border-gray p-4 text-primary">CONTRIBUTORS</h1>
-	<ul class="border border-t-0 border-gray p-4">
-		<li class="flex items-center border border-gray p-4">
-			<figure class="h-5 w-5 bg-gray" />
-			<span class="ml-4">optimus_prime</span>
-		</li>
-		<li class="flex items-center border border-gray p-4">
-			<figure class="h-5 w-5 bg-gray" />
-			<span class="ml-4">batman_suparman</span>
-		</li>
-		<li class="flex items-center border border-gray p-4">
-			<figure class="h-5 w-5 bg-gray" />
-			<span class="ml-4">james_bond</span>
-		</li>
-		<li class="flex items-center border border-gray p-4">
-			<figure class="h-5 w-5 bg-gray" />
-			<span class="ml-4">pizza-rocks</span>
-		</li>
-		<li class="flex items-center border border-gray p-4">
-			<figure class="h-5 w-5 bg-gray" />
-			<span class="ml-4">cognito_inc</span>
 		</li>
 	</ul>
+	{#if pkg.contributors}
+		<h1 class="border border-t-0 border-gray p-4 text-primary">CONTRIBUTORS</h1>
+		<ul class="border border-t-0 border-gray p-4">
+			{#each pkg.contributors as contributor}
+				<li class="flex items-center border border-gray p-4">
+					<figure class="h-5 w-5 bg-gray">
+						<img src={contributor.avatar_url} alt={contributor.login} />
+					</figure>
+					<span class="ml-4">{contributor.login}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
 	<h1 class="border border-t-0 border-gray p-4 text-primary">CATEGORIES</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">

modules/ui/src/types.ts

@@ -26,7 +26,7 @@ export interface Package {
 	license?: string;
 	size_bytes?: number;
 	documentation_url?: string;
-	github_repository_url?: string;
+	github?: string;
 	categories?: string[];
 	contributors?: Contributor[];
 	readme_md?: string;