3 files changed, 21 insertions, 10 deletions
diff --git a/src/components/blog/webmentions/Comments.astro b/src/components/blog/webmentions/Comments.astro
index af14bd0..9d274f9 100644
--- a/src/components/blog/webmentions/Comments.astro
+++ b/src/components/blog/webmentions/Comments.astro
@@ -1,13 +1,15 @@
 ---
 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 } = Astro.props;
+const { mentions, language } = Astro.props;
 
 const validComments = ["mention-of", "in-reply-to"];
 
@@ -20,7 +22,8 @@ const comments = mentions.filter(
 	!!comments.length && (
 		<div>
 			<p class="text-accent-2 mb-0">
-				<strong>{comments.length}</strong> Mention{comments.length > 1 ? "s" : ""}
+				<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) => (
@@ -65,7 +68,7 @@ const comments = mentions.filter(
 									target="_blank"
 								>
 									<span class="hidden" id="cmt-source">
-										Visit the source of this webmention
+										{t(language, "visitWebmentionSource")}
 									</span>
 									<Icon
 										aria-hidden="true"
diff --git a/src/components/blog/webmentions/Likes.astro b/src/components/blog/webmentions/Likes.astro
index 7862c43..fce1a96 100644
--- a/src/components/blog/webmentions/Likes.astro
+++ b/src/components/blog/webmentions/Likes.astro
@@ -1,12 +1,14 @@
 ---
 import { Image } from "astro:assets";
+import { t } from "@/i18n/translations";
 import type { WebmentionsChildren } from "@/types";
 
 interface Props {
 	mentions: WebmentionsChildren[];
+	language?: string | undefined;
 }
 
-const { mentions } = Astro.props;
+const { mentions, language } = Astro.props;
 const MAX_LIKES = 10;
 
 const likes = mentions.filter((mention) => mention["wm-property"] === "like-of");
@@ -19,8 +21,8 @@ const likesToShow = likes
 	!!likes.length && (
 		<div>
 			<p class="text-accent-2 mb-0">
-				<strong>{likes.length}</strong>
-				{likes.length > 1 ? " People" : " Person"} liked this
+				<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">
diff --git a/src/components/blog/webmentions/index.astro b/src/components/blog/webmentions/index.astro
index 232b4f3..80376f0 100644
--- a/src/components/blog/webmentions/index.astro
+++ b/src/components/blog/webmentions/index.astro
@@ -1,8 +1,14 @@
 ---
+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}`);
@@ -12,12 +18,12 @@ if (!webMentions.length) return;
 ---
 
 <hr class="border-solid" />
-<h2 class="mb-8 before:hidden">Webmentions for this post</h2>
+<h2 class="mb-8 before:hidden">{t(language, "webmentionsTitle")}</h2>
 <div class="space-y-10">
-	<Likes mentions={webMentions} />
-	<Comments mentions={webMentions} />
+	<Likes mentions={webMentions} language={language} />
+	<Comments mentions={webMentions} language={language} />
 </div>
 <p class="mt-8">
-	Responses powered by{" "}
+	{t(language, "responsesPoweredBy")}{" "}
 	<a href="https://webmention.io" rel="noreferrer" target="_blank">Webmentions</a>
 </p>