Something went wrong. Try again.
Website hub for the atmosphere community, aggregating posts, events, regional, and more
Something went wrong. Try again.
4.1 kB · 158 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159---import Avatar, { type AvatarSource } from "../Avatar.astro";import type { DiscourseActivityTopic } from "../../lib/discourse-activity";import { createAvatarFallback } from "../../lib/avatar-fallback";
type Props = DiscourseActivityTopic;
const { title, url, lastActiveAt, replyCount, author, tags } = Astro.props;const authorLabel = author.displayName || author.username;
const avatar: AvatarSource = author.avatarUrl ? { url: author.avatarUrl } : createAvatarFallback({ label: authorLabel, colorKey: author.username, emptyInitials: "?", });const primaryTag = tags[0];const replyLabel = `${replyCount} ${replyCount === 1 ? "reply" : "replies"}`;---
<li class="forum-activity-item"> <a class="forum-activity-item__link" href={url} rel="noopener noreferrer" target="_blank" data-external-icon="hidden" > <Avatar avatar={avatar} size={40} imgClass="forum-activity-item__avatar-img" fallbackClass="forum-activity-item__avatar" /> <span class="forum-activity-item__body"> <span class="forum-activity-item__title">{title}</span> <span class="forum-activity-item__meta"> <span>{authorLabel}</span> <span aria-hidden="true">·</span> <time datetime={lastActiveAt.toISOString()}> Active {lastActiveAt.toLocaleDateString("en-US", { month: "short", day: "numeric", })} </time> <span aria-hidden="true">·</span> <span>{replyLabel}</span> {primaryTag && ( <> <span aria-hidden="true">·</span> <span class="forum-activity-item__tag">#{primaryTag}</span> </> )} </span> </span> <span class="forum-activity-item__arrow" aria-hidden="true">↗</span> </a></li>
<style> .forum-activity-item { min-width: 0; border-top: 1px solid var(--border); }
.forum-activity-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); min-height: 72px; padding-block: var(--space-md); color: inherit; text-decoration: none; }
.forum-activity-item a:hover .forum-activity-item__title, .forum-activity-item a:hover .forum-activity-item__arrow { color: var(--link-hover); }
.forum-activity-item a:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-sm); }
.forum-activity-item :global(.forum-activity-item__avatar-img), .forum-activity-item :global(.forum-activity-item__avatar) { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.forum-activity-item :global(.forum-activity-item__avatar-img) { object-fit: cover; }
.forum-activity-item :global(.forum-activity-item__avatar) { display: flex; align-items: center; justify-content: center; color: oklch(98% 0 0); font-size: var(--text-xs); font-weight: 700; }
.forum-activity-item__body { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xs); }
.forum-activity-item__title { overflow: hidden; color: var(--foreground); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); text-overflow: ellipsis; white-space: nowrap; }
.forum-activity-item__meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-xs); color: var(--foreground-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.forum-activity-item__tag, .forum-activity-item__arrow { color: var(--link); }
.forum-activity-item__arrow { font-size: var(--text-sm); transition: color 0.15s ease; }
@media (max-width: 420px) { .forum-activity-item a { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); }
.forum-activity-item__arrow { display: none; } }</style>