Something went wrong. Try again.
2025 refresh of the landing page in Astro
Something went wrong. Try again.
1.8 kB · 65 lines
Astro
at redesign
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566---import { Icon } from "astro-icon/components";
interface Handle { /** Title attribute, e.g. "Signal" */ service: string; /** Iconify icon name, e.g. "simple-icons:signal" */ icon: string; /** Display handle, e.g. "april.99" */ handle: string;}
interface Props { name: string; /** Short handle shown next to the name, e.g. "@aprl.moe" */ handle?: string; /** Path to avatar image. When omitted, renders an empty bordered circle. */ avatar?: string; avatarAlt?: string; handles?: Handle[];}
const { name, handle, avatar, avatarAlt = name, handles = [] } = Astro.props;---
<div class="grid grid-cols-[48px_1fr] items-center gap-[14px]"> {avatar ? ( <img src={avatar} alt={avatarAlt} class="w-12 h-12 rounded-full bg-night-2 border border-rule-2 block object-cover object-top shrink-0" /> ) : ( <div class="w-12 h-12 rounded-full bg-night-2 border border-rule-2 shrink-0" aria-hidden="true" /> )}
<div class="min-w-0"> <div class="font-display text-[20px] leading-[1.1] text-ink mb-[2px]"> {name} {handle && ( <span class="mono text-[12px] font-normal text-ink-dim ml-2"> {handle} </span> )} </div> {handles.length > 0 && ( <div class="flex flex-wrap items-center gap-x-[10px] gap-y-1 mono text-[12.5px] text-ink-soft" > {handles.map((h, i) => ( <> {i > 0 && <span class="text-ink-faint" aria-hidden="true">·</span>} <span class="inline-flex items-center gap-[6px]" title={h.service}> <Icon name={h.icon} class="w-[14px] h-[14px] text-ink-dim shrink-0" /> {h.handle} </span> </> ))} </div> )} </div></div>