Central platform for European atproto.<cc> country community websites
Something went wrong. Try again.
2.3 kB · 77 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778---import type { ActivityItem } from '../lib/atproto/activity';
interface Props { item: ActivityItem;}const { item } = Astro.props;const r = item.record;
interface Presented { title: string; subtitle?: string; snippet?: string; url?: string;}
function present(): Presented { switch (item.collection) { case 'github.pull_request': return { title: r.title ?? 'Pull request', subtitle: `${r.repoOwner}/${r.repoName} #${r.prNumber}`, url: r.url, }; case 'github.pull_request_group': { const repo = r.repos?.[0]; return { title: `${r.count} pull requests`, subtitle: repo ? `${repo.owner}/${repo.name}` : undefined, url: repo?.url, }; } case 'pub.leaflet.comment': return { title: r.parentTitle ? `Comment on “${r.parentTitle}”` : 'Comment', snippet: r.plaintext, url: r.parentSiteUrl ? `${r.parentSiteUrl}${r.parentPath ?? ''}` : undefined, }; default: { const uri = typeof r.uri === 'string' && r.uri.startsWith('http') ? r.uri : undefined; return { title: r.title ?? r.name ?? r.subject?.title ?? `${item.category} on ${item.appName}`, snippet: r.text ?? r.plaintext ?? r.description, url: r.url ?? r.link ?? r.permalink ?? uri, }; } }}
const p = present();const author = item.member;const name = author.displayName ?? author.handle;---
<article class="post-card activity-item"> <div class="post-head"> {author.avatar && <img class="post-avatar" src={author.avatar} alt="" width="32" height="32" loading="lazy" />} <span class="post-name">{name}</span> <span class="post-handle">@{author.handle}</span> <span class="activity-app">{item.appName}</span> </div>
{ p.url ? ( <a class="activity-body" href={p.url} rel="noopener"> <span class="activity-title">{p.title}</span> {p.subtitle && <span class="activity-sub">{p.subtitle}</span>} </a> ) : ( <span class="activity-body"> <span class="activity-title">{p.title}</span> {p.subtitle && <span class="activity-sub">{p.subtitle}</span>} </span> ) } {p.snippet && <p class="activity-snippet">{p.snippet}</p>}</article>