diff options
Diffstat (limited to 'src/components/blog/webmentions')
| -rw-r--r-- | src/components/blog/webmentions/Comments.astro | 90 | ||||
| -rw-r--r-- | src/components/blog/webmentions/Likes.astro | 54 | ||||
| -rw-r--r-- | src/components/blog/webmentions/index.astro | 29 |
3 files changed, 0 insertions, 173 deletions
diff --git a/src/components/blog/webmentions/Comments.astro b/src/components/blog/webmentions/Comments.astro deleted file mode 100644 index 9d274f9..0000000 --- a/src/components/blog/webmentions/Comments.astro +++ /dev/null @@ -1,90 +0,0 @@ ---- -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> - ) -} diff --git a/src/components/blog/webmentions/Likes.astro b/src/components/blog/webmentions/Likes.astro deleted file mode 100644 index fce1a96..0000000 --- a/src/components/blog/webmentions/Likes.astro +++ /dev/null @@ -1,54 +0,0 @@ ---- -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> - ) -} diff --git a/src/components/blog/webmentions/index.astro b/src/components/blog/webmentions/index.astro deleted file mode 100644 index 80376f0..0000000 --- a/src/components/blog/webmentions/index.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import { t } from "@/i18n/translations"; -import { getWebmentionsForUrl } from "@/utils/webmentions"; -import Comments from "./Comments.astro"; -import Likes from "./Likes.astro"; - -interface Props { - language?: string | undefined; -} - -const { language } = Astro.props; -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">{t(language, "webmentionsTitle")}</h2> -<div class="space-y-10"> - <Likes mentions={webMentions} language={language} /> - <Comments mentions={webMentions} language={language} /> -</div> -<p class="mt-8"> - {t(language, "responsesPoweredBy")}{" "} - <a href="https://webmention.io" rel="noreferrer" target="_blank">Webmentions</a> -</p> |