blob: fce1a960020a71b8d4a2150ea2de857b8fdb16df (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
---
import { Image } from "astro:assets";
import { t } from "@/i18n/translations";
import type { WebmentionsChildren } from "@/types";
interface Props {
mentions: WebmentionsChildren[];
language?: string | undefined;
}
const { mentions, language } = Astro.props;
const MAX_LIKES = 10;
const likes = mentions.filter((mention) => mention["wm-property"] === "like-of");
const likesToShow = likes
.filter((like) => like.author?.photo && like.author.photo !== "")
.slice(0, MAX_LIKES);
---
{
!!likes.length && (
<div>
<p class="text-accent-2 mb-0">
<strong>{likes.length}</strong>{" "}
{likes.length > 1 ? t(language, "peopleLiked") : t(language, "personLiked")}
</p>
{!!likesToShow.length && (
<ul class="flex list-none flex-wrap overflow-hidden ps-2" role="list">
{likesToShow.map((like) => (
<li class="p-like h-cite -ms-2">
<a
class="u-url not-prose ring-global-text hover:ring-link focus-visible:ring-link relative inline-block overflow-hidden rounded-full ring-2 hover:z-10 hover:ring-4 focus-visible:z-10 focus-visible:ring-4"
href={like.author?.url}
rel="noreferrer"
target="_blank"
title={like.author?.name}
>
<span class="p-author h-card">
<Image
alt={like.author!.name}
class="u-photo my-0 inline-block h-12 w-12"
height={48}
src={like.author!.photo}
width={48}
/>
</span>
</a>
</li>
))}
</ul>
)}
</div>
)
}
|
