323 lines
7.3 KiB
Svelte
323 lines
7.3 KiB
Svelte
<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,
|
|
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)
|
|
);
|
|
</script>
|
|
|
|
<article class="project-entry" class:has-image={!!project.image}>
|
|
<h2 class="project-title">{project.name}</h2>
|
|
|
|
{#if project.image}
|
|
<img class="project-image" src={project.image} alt={project.name} loading="lazy" />
|
|
{/if}
|
|
|
|
<div class="project-body">
|
|
<div class="badges">
|
|
<span class="badge category"><Icon icon={category.icon} width="15" /> {category.title}</span>
|
|
{#if project.featured}
|
|
<span class="badge featured">Featured</span>
|
|
{/if}
|
|
{#if project.deprecated}
|
|
<span class="badge deprecated">Deprecated</span>
|
|
{/if}
|
|
{#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}
|
|
<div class="event">
|
|
{project.event.name}{#if project.event.year}<span class="muted"> ({project.event.year})</span>{/if}
|
|
</div>
|
|
{#if project.event.university}
|
|
<div class="muted">{project.event.university}{project.event.location ? `, ${project.event.location}` : ''}</div>
|
|
{/if}
|
|
{/if}
|
|
|
|
{#if project.organization}
|
|
<div class="event">{project.organization}</div>
|
|
{/if}
|
|
{#if project.period}
|
|
<div class="muted">{project.period}</div>
|
|
{/if}
|
|
|
|
{#if project.description}
|
|
<p>{project.description}</p>
|
|
{/if}
|
|
|
|
{#each project.awards ?? [] as award (award.track)}
|
|
<div class="award"><Icon icon="mdi:trophy" width="16" /> {award.place} - {award.track}</div>
|
|
{/each}
|
|
|
|
{#if project.tags.length}
|
|
<div class="tags">
|
|
{#each project.tags as tag, index (tag)}
|
|
<Tag label={tag} colorIndex={index} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if project.demoMayBeOffline}
|
|
<div class="warning"><Icon icon="mdi:alert" width="16" /> Demo may be unavailable</div>
|
|
{/if}
|
|
|
|
{#if linkButtons.length}
|
|
<div class="buttons">
|
|
{#each linkButtons as button (button.label)}
|
|
<LinkButton href={button.href!} icon={button.icon}>{button.label}</LinkButton>
|
|
{/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;
|
|
gap: 0.5rem 1.25rem;
|
|
padding: 1rem 0 1.5rem;
|
|
border-top: 1px dashed color-mix(in srgb, var(--foreground) 25%, transparent);
|
|
}
|
|
|
|
.project-entry.has-image {
|
|
grid-template-columns: minmax(180px, 320px) 1fr;
|
|
}
|
|
|
|
.project-title {
|
|
grid-column: 1 / -1;
|
|
margin: 0;
|
|
color: var(--accent);
|
|
font-size: 1.1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.project-image {
|
|
width: 100%;
|
|
max-height: 220px;
|
|
object-fit: contain;
|
|
background: var(--dark-background);
|
|
border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
|
|
}
|
|
|
|
.project-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.category {
|
|
background: var(--green);
|
|
}
|
|
|
|
.featured {
|
|
background: var(--orange);
|
|
}
|
|
|
|
.deprecated {
|
|
background: var(--red);
|
|
}
|
|
|
|
.version {
|
|
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);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.award {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
color: var(--yellow);
|
|
}
|
|
|
|
.warning {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
color: var(--orange);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
@container (max-width: 700px) {
|
|
.project-entry.has-image {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|