blob: 9d274f94de3895198b163e83b1afc60e280aeef7 (
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
---
import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import { t } from "@/i18n/translations";
import type { WebmentionsChildren } from "@/types";
interface Props {
mentions: WebmentionsChildren[];
language?: string | undefined;
}
const { mentions, language } = Astro.props;
const validComments = ["mention-of", "in-reply-to"];
const comments = mentions.filter(
(mention) => validComments.includes(mention["wm-property"]) && mention.content?.text,
);
---
{
!!comments.length && (
<div>
<p class="text-accent-2 mb-0">
<strong>{comments.length}</strong>{" "}
{comments.length > 1 ? t(language, "mentions") : t(language, "mention")}
</p>
<ul class="divide-global-text/20 mt-0 divide-y ps-0" role="list">
{comments.map((mention) => (
<li class="p-comment h-cite my-0 flex items-start gap-x-5 py-5">
{mention.author?.photo && mention.author.photo !== "" ? (
mention.author.url && mention.author.url !== "" ? (
<a
class="u-author not-prose ring-global-text hover:ring-link focus-visible:ring-link shrink-0 overflow-hidden rounded-full ring-2 hover:ring-4 focus-visible:ring-4"
href={mention.author.url}
rel="noreferrer"
target="_blank"
title={mention.author.name}
>
<Image
alt={mention.author?.name}
class="u-photo my-0 h-12 w-12"
height={48}
src={mention.author?.photo}
width={48}
/>
</a>
) : (
<Image
alt={mention.author?.name}
class="u-photo my-0 h-12 w-12 rounded-full"
height={48}
src={mention.author?.photo}
width={48}
/>
)
) : null}
<div class="flex-auto">
<div class="p-author h-card flex items-center justify-between gap-x-2">
<p class="p-name text-accent-2 my-0 line-clamp-1 font-semibold">
{mention.author?.name}
</p>
<a
aria-labelledby="cmt-source"
class="u-url not-prose hover:text-link"
href={mention.url}
rel="noreferrer"
target="_blank"
>
<span class="hidden" id="cmt-source">
{t(language, "visitWebmentionSource")}
</span>
<Icon
aria-hidden="true"
class="h-5 w-5"
focusable="false"
name="mdi:open-in-new"
/>
</a>
</div>
<p class="comment-content mt-1 mb-0 break-words [word-break:break-word]">
{mention.content?.text}
</p>
</div>
</li>
))}
</ul>
</div>
)
}
|
