Add organizations, research groups and repo stats to projects

src/lib/components/projects/ProjectEntry.svelte

@@ -1,16 +1,28 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import type { Project, ProjectCategory } from '#lib/content';
+	import type { RepoStats } from '#lib/github/types';
 	import LinkButton from '#lib/components/ui/LinkButton.svelte';
 	import Tag from '#lib/components/ui/Tag.svelte';
 
-	let { project, category }: { project: Project; category: ProjectCategory } = $props();
+	let {
+		project,
+		category,
+		repoStats,
+		downloads
+	}: { project: Project; category: ProjectCategory; repoStats?: RepoStats; downloads?: number } = $props();
+
+	const downloadsLabel = $derived(
+		downloads === undefined ? '' : new Intl.NumberFormat('en-US', { notation: 'compact' }).format(downloads)
+	);
 
 	const linkButtons = $derived(
 		[
+			{ href: project.links.website, label: 'Website', icon: 'mdi:web' },
 			{ href: project.links.demo, label: 'View Demo', icon: 'mdi:open-in-new' },
 			{ href: project.links.package, label: 'View Package', icon: 'mdi:package-variant' },
 			{ href: project.links.code, label: 'View Code', icon: 'mdi:github' },
+			{ href: project.links.docs, label: 'Docs', icon: 'mdi:book-open-page-variant-outline' },
 			{ href: project.links.devpost, label: 'Devpost', icon: 'simple-icons:devpost' },
 			{ href: project.links.article, label: 'Article', icon: 'mdi:newspaper-variant-outline' }
 		].filter((button) => button.href)
@@ -33,6 +45,28 @@
 			{#if project.version}
 				<span class="badge version">v{project.version}</span>
 			{/if}
+			{#if repoStats && project.links.code}
+				<a class="repo-stat stars" href="{project.links.code}/stargazers" target="_blank" rel="noopener noreferrer" title="GitHub stars">
+					<Icon icon="mdi:star-outline" width="15" />
+					{repoStats.stars}
+				</a>
+				<a class="repo-stat forks" href="{project.links.code}/forks" target="_blank" rel="noopener noreferrer" title="GitHub forks">
+					<Icon icon="mdi:source-fork" width="15" />
+					{repoStats.forks}
+				</a>
+			{/if}
+			{#if downloads !== undefined && project.links.package}
+				<a
+					class="repo-stat downloads"
+					href={project.links.package}
+					target="_blank"
+					rel="noopener noreferrer"
+					title="{downloads.toLocaleString('en-US')} npm downloads"
+				>
+					<Icon icon="mdi:download" width="15" />
+					{downloadsLabel}
+				</a>
+			{/if}
 		</div>
 
 		{#if project.event}
@@ -78,10 +112,82 @@
 				{/each}
 			</div>
 		{/if}
+
+		{#if project.gallery?.length}
+			<div class="gallery" data-image-group>
+				{#each project.gallery as photo, index (photo)}
+					<a class="gallery-item" href={photo} target="_blank" rel="noopener noreferrer">
+						<img src={photo} alt="{project.name} photo {index + 1}" loading="lazy" />
+					</a>
+				{/each}
+			</div>
+		{/if}
+
+		{#if project.socials?.length}
+			<div class="socials">
+				{#each project.socials as social (social.url)}
+					<a class="social" href={social.url} target="_blank" rel="noopener noreferrer" title={social.name}>
+						<Icon icon={social.icon} width="16" />
+						<span>{social.name}</span>
+					</a>
+				{/each}
+			</div>
+		{/if}
 	</div>
 </article>
 
 <style>
+	.gallery {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+		gap: 0.5rem;
+		max-width: 640px;
+		margin-top: 0.4rem;
+	}
+
+	.gallery-item {
+		display: block;
+		aspect-ratio: 4 / 3;
+		overflow: hidden;
+		border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
+		transition: border-color 0.15s ease;
+	}
+
+	.gallery-item:hover {
+		border-color: var(--accent);
+	}
+
+	.gallery-item img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		transition: transform 0.3s ease;
+	}
+
+	.gallery-item:hover img {
+		transform: scale(1.05);
+	}
+
+	.socials {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem 0.9rem;
+		margin-top: 0.2rem;
+	}
+
+	.social {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		color: var(--muted);
+		font-size: 0.8rem;
+	}
+
+	.social:hover {
+		color: var(--accent);
+	}
+
 	.project-entry {
 		display: grid;
 		grid-template-columns: 1fr;
@@ -153,6 +259,31 @@
 		background: var(--blue);
 	}
 
+	.repo-stat {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0 0.45rem;
+		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+		font-size: 0.75rem;
+	}
+
+	.repo-stat.stars {
+		color: var(--yellow);
+	}
+
+	.repo-stat.forks {
+		color: var(--cyan);
+	}
+
+	.repo-stat.downloads {
+		color: var(--green);
+	}
+
+	.repo-stat:hover {
+		border-color: currentColor;
+	}
+
 	.event {
 		color: var(--blue);
 	}

src/lib/components/projects/ProjectNav.svelte

@@ -2,7 +2,7 @@
 	import { page } from '$app/state';
 	import { projectCategories } from '#lib/content';
 
-	const chipColors = ['magenta', 'orange', 'green', 'cyan'];
+	const chipColors = ['magenta', 'orange', 'green', 'cyan', 'yellow'];
 </script>
 
 <nav class="project-nav">

src/lib/components/research/ResearchGroup.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { ProjectCategory, ResearchGroup } from '#lib/content';
+	import LinkButton from '#lib/components/ui/LinkButton.svelte';
+	import Tag from '#lib/components/ui/Tag.svelte';
+	import ProjectEntry from '#lib/components/projects/ProjectEntry.svelte';
+
+	let { group, category }: { group: ResearchGroup; category: ProjectCategory } = $props();
+
+	const linkIcons: Record<string, string> = {
+		GitHub: 'mdi:github',
+		'My Profile': 'mdi:account-circle-outline'
+	};
+</script>
+
+<section class="research-group">
+	<h2 class="group-title">{group.name}</h2>
+
+	<div class="path">
+		<span class="muted">~/</span>{group.institution}<span class="muted">/</span><a
+			href={group.lab.url}
+			target="_blank"
+			rel="noopener noreferrer">{group.lab.name}</a
+		><span class="muted">/</span><span class="current">{group.shortName}</span>
+	</div>
+
+	<div class="group-body">
+		<div class="badges">
+			<span class="badge group"><Icon icon={category.icon} width="15" /> Research Group</span>
+			<span class="badge short-name">{group.shortName}</span>
+		</div>
+
+		<div class="role">{group.role}</div>
+		<div class="muted">{group.period}</div>
+
+		<p>{group.description}</p>
+
+		<div class="tags">
+			{#each group.focus as area, index (area)}
+				<Tag label={area} colorIndex={index} />
+			{/each}
+		</div>
+
+		<div class="buttons">
+			{#each group.links as link (link.url)}
+				<LinkButton href={link.url} icon={linkIcons[link.label] ?? 'mdi:open-in-new'}>{link.label}</LinkButton>
+			{/each}
+		</div>
+	</div>
+
+	<div class="tree-label">
+		<span class="muted">$</span> ls ~/research/{group.shortName.toLowerCase()}/projects
+	</div>
+
+	<div class="project-tree">
+		{#each group.projects as project, index (project.name)}
+			<div class="tree-item">
+				<span class="branch">{index === group.projects.length - 1 ? '└──' : '├──'}</span>
+				<div class="tree-entry">
+					<ProjectEntry {project} {category} />
+				</div>
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.research-group {
+		padding: 1rem 0 1.5rem;
+		border-top: 1px dashed color-mix(in srgb, var(--foreground) 25%, transparent);
+	}
+
+	.group-title {
+		margin: 0;
+		color: var(--accent);
+		font-size: 1.1rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.path {
+		margin: 0.25rem 0 0.75rem;
+		font-size: 0.85rem;
+	}
+
+	.path a {
+		color: var(--blue);
+	}
+
+	.path a:hover {
+		text-decoration: underline;
+	}
+
+	.current {
+		color: var(--green);
+	}
+
+	.group-body {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+
+	.badges,
+	.tags,
+	.buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+	}
+
+	.buttons {
+		margin-top: 0.4rem;
+	}
+
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0 0.45rem;
+		color: var(--background);
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.badge.group {
+		background: var(--green);
+	}
+
+	.badge.short-name {
+		background: var(--magenta);
+	}
+
+	.role {
+		color: var(--blue);
+	}
+
+	p {
+		margin: 0;
+	}
+
+	.tree-label {
+		margin: 1.5rem 0 0.25rem;
+		color: var(--foreground);
+	}
+
+	.tree-item {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.5rem;
+	}
+
+	.branch {
+		padding-top: 1rem;
+		color: var(--muted);
+		white-space: pre;
+	}
+
+	.tree-entry {
+		min-width: 0;
+	}
+</style>

src/lib/content/index.ts

@@ -4,20 +4,24 @@ import leadershipData from '#content/leadership.json';
 import aboutData from '#content/about.json';
 import desktopData from '#content/desktop.json';
 import blogData from '#content/blog.json';
+import musicData from '#content/music.json';
 import openSourceData from '#content/projects/opensource.json';
 import packagesData from '#content/projects/packages.json';
 import hackathonsData from '#content/projects/hackathons.json';
 import researchData from '#content/projects/research.json';
+import organizationsData from '#content/projects/organizations.json';
 import type {
 	AboutContent,
 	BlogSettings,
 	DesktopContent,
 	Experience,
 	Leadership,
+	Playlist,
 	Profile,
 	Project,
 	ProjectCategory,
-	ProjectCategoryId
+	ProjectCategoryId,
+	ResearchGroup
 } from './types';
 
 export type * from './types';
@@ -28,6 +32,8 @@ export const leadership: Leadership[] = leadershipData;
 export const about: AboutContent = aboutData;
 export const desktop: DesktopContent = desktopData;
 export const blogSettings: BlogSettings = blogData;
+export const playlist: Playlist = musicData;
+export const researchGroups: ResearchGroup[] = researchData;
 
 function featuredFirst(projects: Project[]): Project[] {
 	return [...projects].sort((first, second) => Number(!!second.featured) - Number(!!first.featured));
@@ -60,7 +66,18 @@ export const projectCategories: ProjectCategory[] = [
 		title: 'Research',
 		icon: 'ph:microscope-duotone',
 		summary: 'Research roles, projects, and publications.',
-		projects: featuredFirst(researchData)
+		projects: featuredFirst(
+			researchGroups.flatMap((group) =>
+				group.projects.map((project) => ({ ...project, organization: project.organization ?? group.shortName }))
+			)
+		)
+	},
+	{
+		id: 'organizations',
+		title: 'Organizations',
+		icon: 'ph:users-three-duotone',
+		summary: 'Clubs and teams I lead and help run.',
+		projects: featuredFirst(organizationsData)
 	}
 ];
 

src/lib/content/types.ts

@@ -18,6 +18,7 @@ export interface Profile {
 	title: string;
 	email: string;
 	avatar: string;
+	photo?: string;
 	bio: string;
 	tagline: string;
 	education: Education;
@@ -55,6 +56,8 @@ export interface ProjectLinks {
 	devpost?: string;
 	package?: string;
 	article?: string;
+	docs?: string;
+	website?: string;
 }
 
 export interface HackathonEvent {
@@ -82,9 +85,29 @@ export interface Project {
 	event?: HackathonEvent;
 	awards?: Award[];
 	demoMayBeOffline?: boolean;
+	socials?: Social[];
+	gallery?: string[];
 }
 
-export type ProjectCategoryId = 'opensource' | 'packages' | 'hackathons' | 'research';
+export interface ResearchLab {
+	name: string;
+	url: string;
+}
+
+export interface ResearchGroup {
+	name: string;
+	shortName: string;
+	lab: ResearchLab;
+	institution: string;
+	role: string;
+	period: string;
+	description: string;
+	focus: string[];
+	links: LabeledLink[];
+	projects: Project[];
+}
+
+export type ProjectCategoryId = 'opensource' | 'packages' | 'hackathons' | 'research' | 'organizations';
 
 export interface ProjectCategory {
 	id: ProjectCategoryId;
@@ -113,6 +136,7 @@ export interface RatedTitle {
 }
 
 export interface AboutContent {
+	anilistUsername?: string;
 	hobbies: Hobby[];
 	games: Game[];
 	shows: RatedTitle[];
@@ -145,6 +169,10 @@ export interface DesktopContent {
 	startupCommand: string;
 }
 
+export interface Playlist {
+	videos: string[];
+}
+
 export interface BlogSettings {
 	name: string;
 	tagline: string;

src/lib/github/types.ts

@@ -0,0 +1,4 @@
+export interface RepoStats {
+	stars: number;
+	forks: number;
+}

src/lib/server/github.ts

@@ -0,0 +1,41 @@
+import type { RepoStats } from '#lib/github/types';
+
+const cacheDuration = 60 * 60 * 1000;
+const githubRepoPattern = /^https:\/\/github\.com\/([^/]+\/[^/#?]+)/;
+
+const statsCache = new Map<string, { stats: RepoStats; fetchedAt: number }>();
+
+function githubRepoPath(url: string): string | null {
+	const match = url.match(githubRepoPattern);
+	return match ? match[1].replace(/\.git$/, '') : null;
+}
+
+async function fetchRepoStats(repoPath: string): Promise<RepoStats | null> {
+	const cached = statsCache.get(repoPath);
+	if (cached && Date.now() - cached.fetchedAt < cacheDuration) return cached.stats;
+
+	try {
+		const response = await fetch(`https://api.github.com/repos/${repoPath}`, {
+			headers: { Accept: 'application/vnd.github+json', 'User-Agent': 'portfolio-website' }
+		});
+		if (!response.ok) return cached?.stats ?? null;
+
+		const repo = await response.json();
+		const stats: RepoStats = { stars: repo.stargazers_count, forks: repo.forks_count };
+		statsCache.set(repoPath, { stats, fetchedAt: Date.now() });
+		return stats;
+	} catch {
+		return cached?.stats ?? null;
+	}
+}
+
+export async function getRepoStats(codeUrls: string[]): Promise<Record<string, RepoStats>> {
+	const results = await Promise.all(
+		codeUrls.map(async (codeUrl) => {
+			const repoPath = githubRepoPath(codeUrl);
+			const stats = repoPath ? await fetchRepoStats(repoPath) : null;
+			return [codeUrl, stats] as const;
+		})
+	);
+	return Object.fromEntries(results.filter((result): result is readonly [string, RepoStats] => result[1] !== null));
+}

src/lib/server/npm.ts

@@ -0,0 +1,62 @@
+const cacheDuration = 60 * 60 * 1000;
+const dayDuration = 24 * 60 * 60 * 1000;
+const maxRangeDays = 540;
+const npmPackagePattern = /^https:\/\/www\.npmjs\.com\/package\/((?:@[^/]+\/)?[^/#?]+)/;
+
+const downloadsCache = new Map<string, { downloads: number; fetchedAt: number }>();
+
+function npmPackageName(url: string): string | null {
+	return url.match(npmPackagePattern)?.[1] ?? null;
+}
+
+function formatDate(date: Date): string {
+	return date.toISOString().slice(0, 10);
+}
+
+async function fetchCreatedDate(packageName: string): Promise<Date> {
+	const response = await fetch(`https://registry.npmjs.org/${packageName.replace('/', '%2f')}`);
+	if (!response.ok) throw new Error(`npm registry returned ${response.status} for ${packageName}`);
+	const metadata = await response.json();
+	return new Date(metadata.time.created);
+}
+
+async function fetchDownloadsBetween(packageName: string, start: Date, end: Date): Promise<number> {
+	const range = `${formatDate(start)}:${formatDate(end)}`;
+	const response = await fetch(`https://api.npmjs.org/downloads/point/${range}/${packageName}`);
+	if (!response.ok) throw new Error(`npm downloads returned ${response.status} for ${packageName}`);
+	const result = await response.json();
+	return result.downloads ?? 0;
+}
+
+async function fetchTotalDownloads(packageName: string): Promise<number | null> {
+	const cached = downloadsCache.get(packageName);
+	if (cached && Date.now() - cached.fetchedAt < cacheDuration) return cached.downloads;
+
+	try {
+		const today = new Date();
+		const rangeRequests: Promise<number>[] = [];
+		for (let rangeStart = await fetchCreatedDate(packageName); rangeStart <= today; ) {
+			const rangeEnd = new Date(Math.min(rangeStart.getTime() + (maxRangeDays - 1) * dayDuration, today.getTime()));
+			rangeRequests.push(fetchDownloadsBetween(packageName, rangeStart, rangeEnd));
+			rangeStart = new Date(rangeEnd.getTime() + dayDuration);
+		}
+
+		const downloads = (await Promise.all(rangeRequests)).reduce((total, count) => total + count, 0);
+		downloadsCache.set(packageName, { downloads, fetchedAt: Date.now() });
+		return downloads;
+	} catch (error) {
+		console.error(`npm download count failed for ${packageName}:`, error);
+		return cached?.downloads ?? null;
+	}
+}
+
+export async function getPackageDownloads(packageUrls: string[]): Promise<Record<string, number>> {
+	const results = await Promise.all(
+		packageUrls.map(async (packageUrl) => {
+			const packageName = npmPackageName(packageUrl);
+			const downloads = packageName ? await fetchTotalDownloads(packageName) : null;
+			return [packageUrl, downloads] as const;
+		})
+	);
+	return Object.fromEntries(results.filter((result): result is readonly [string, number] => result[1] !== null));
+}

src/lib/site/pages.ts

@@ -10,13 +10,13 @@ export interface SitePage {
 }
 
 export const sitePages: SitePage[] = [
-	{ name: 'about', path: '/about', title: 'About', description: 'Background, hobbies, games, shows and movies.', icon: 'ph:user-circle-duotone' },
+	{ name: 'about', path: '/about', title: 'About', description: 'Background, hobbies, games, shows, movies and anime.', icon: 'ph:user-circle-duotone' },
 	{ name: 'portfolio', path: '/portfolio', title: 'Portfolio', description: 'Profile, experience, skills and contact info.', icon: 'ph:briefcase-duotone' },
 	{
 		name: 'projects',
 		path: '/projects',
 		title: 'Projects',
-		description: 'Open source, packages, hackathons and research.',
+		description: 'Open source, packages, hackathons, research and organizations.',
 		icon: 'ph:folder-open-duotone',
 		children: projectCategories.map((category) => ({
 			name: category.id,

src/lib/terminal/commands/info.ts

@@ -59,7 +59,7 @@ export const infoCommands: Command[] = [
 	{
 		name: 'projects',
 		description: 'List projects, optionally by category',
-		usage: 'projects [opensource|packages|hackathons|research]',
+		usage: 'projects [opensource|packages|hackathons|research|organizations]',
 		argumentOptions: () => projectCategories.map((category) => category.id),
 		run: (args, context) => {
 			const categories = args[0] ? [findProjectCategory(args[0])] : projectCategories;