diff options
Diffstat (limited to 'src/components/blog/webmentions')
| -rw-r--r-- | src/components/blog/webmentions/Comments.astro | 87 | ||||
| -rw-r--r-- | src/components/blog/webmentions/Likes.astro | 52 | ||||
| -rw-r--r-- | src/components/blog/webmentions/index.astro | 23 |
3 files changed, 162 insertions, 0 deletions
diff --git a/src/components/blog/webmentions/Comments.astro b/src/components/blog/webmentions/Comments.astro new file mode 100644 index 0000000..5177d57 --- /dev/null +++ b/src/components/blog/webmentions/Comments.astro @@ -0,0 +1,87 @@ +--- +import { Image } from "astro:assets"; +import type { WebmentionsChildren } from "@/types"; +import { Icon } from "astro-icon/components"; + +interface Props { + mentions: WebmentionsChildren[]; +} + +const { mentions } = 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> Mention{comments.length > 1 ? "s" : ""} + </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"> + Visit the source of this webmention + </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> + ) +} diff --git a/src/components/blog/webmentions/Likes.astro b/src/components/blog/webmentions/Likes.astro new file mode 100644 index 0000000..7862c43 --- /dev/null +++ b/src/components/blog/webmentions/Likes.astro @@ -0,0 +1,52 @@ +--- +import { Image } from "astro:assets"; +import type { WebmentionsChildren } from "@/types"; + +interface Props { + mentions: WebmentionsChildren[]; +} + +const { mentions } = 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 ? " People" : " Person"} liked this + </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> + ) +} diff --git a/src/components/blog/webmentions/index.astro b/src/components/blog/webmentions/index.astro new file mode 100644 index 0000000..232b4f3 --- /dev/null +++ b/src/components/blog/webmentions/index.astro @@ -0,0 +1,23 @@ +--- +import { getWebmentionsForUrl } from "@/utils/webmentions"; +import Comments from "./Comments.astro"; +import Likes from "./Likes.astro"; + +const url = new URL(Astro.url.pathname, Astro.site); + +const webMentions = await getWebmentionsForUrl(`${url}`); + +// Return if no webmentions +if (!webMentions.length) return; +--- + +<hr class="border-solid" /> +<h2 class="mb-8 before:hidden">Webmentions for this post</h2> +<div class="space-y-10"> + <Likes mentions={webMentions} /> + <Comments mentions={webMentions} /> +</div> +<p class="mt-8"> + Responses powered by{" "} + <a href="https://webmention.io" rel="noreferrer" target="_blank">Webmentions</a> +</p> |