i18n: Translate blog titles and read more links

Author: danielhjacobs

blog_posts/2023-03-12-progress-report.markdown

@@ -1,5 +1,5 @@
 ---
-title:  "First post, progress report!"
+title:  "blog.20230312.title"
 date:   2023-03-12 01:23:00 +0100
 author: nosamu
 icon: /undraw/undraw_welcoming_re_x0qo.svg

blog_posts/2023-04-23-mozilla-extension-postmortem.markdown

@@ -1,5 +1,5 @@
 ---
-title:  "A post-mortem of Ruffle's removal from addons.mozilla.org"
+title:  "blog.20230423.title"
 date:   2023-04-23 04:07:00 -0400
 author: kmeisthax
 icon: /undraw/undraw_feeling_blue_-4-b7q.svg

blog_posts/2023-05-29-progress-report.markdown

@@ -1,5 +1,5 @@
 ---
-title:  "Ruffle News - May 2023"
+title:  "blog.20230529.title"
 date:   2023-05-09 00:00:01 +00:00
 author: nosamu
 icon: /undraw/undraw_percentages_re_a1ao.svg

blog_posts/2024-01-14-2023-in-review.markdown

@@ -1,5 +1,5 @@
 ---
-title:  "2023 in review"
+title:  "blog.20240114.title"
 date:   2024-01-14 08:28:00 +0100
 author: Dinnerbone
 icon: /undraw/undraw_new_year_2023_pfnc.svg

blog_posts/2024-09-12-optimisations-text-more.markdown

@@ -1,5 +1,5 @@
 ---
-title:  "Optimisations, Text Input, Tab Focusing and More!"
+title:  "blog.20240912.title"
 date:   2024-09-12 21:02:00 +0100
 author: Dinnerbone
 icon: /undraw/undraw_setup_analytics_re_foim.svg

src/app/blog/post.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { PostMetadata } from "@/app/blog/utils";
 import { Group, Stack, Text, Title } from "@mantine/core";
 import classes from "@/app/blog/post.module.css";
@@ -6,6 +8,7 @@ import Markdown from "react-markdown";
 import Image from "next/image";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
+import { useTranslation } from "@/app/translate";
 
 export interface BlogPostProps {
   metadata: PostMetadata;
@@ -28,14 +31,15 @@ export function BlogPostAndIcon({ metadata, type }: BlogPostProps) {
 }
 
 export function BlogPost({ metadata, type }: BlogPostProps) {
+  const { t } = useTranslation();
   const url = `/blog/${metadata.year}/${metadata.month}/${metadata.day}/${metadata.slug}`;
   return (
     <Stack gap={0} className={classes.postInfo}>
       {type == "full" ? (
-        <Title className={classes.title}>{metadata.title}</Title>
+        <Title className={classes.title}>{t(metadata.title)}</Title>
       ) : (
         <Link href={url} className={classes.title}>
-          {metadata.title}
+          {t(metadata.title)}
         </Link>
       )}
       <Group wrap="nowrap" gap="xs" className={classes.info}>
@@ -68,7 +72,7 @@ export function BlogPost({ metadata, type }: BlogPostProps) {
       </div>
       {type == "excerpt" && (
         <Text className={classes.readMore}>
-          <Link href={url}>Read More...</Link>
+          <Link href={url}>{t("blog.read-more")}</Link>
         </Text>
       )}
     </Stack>

src/i18n/translations.en.json

@@ -142,5 +142,23 @@
     "spread-the-word-description": "Is your favourite Flash-based site shutting down? Let them know they can add one JavaScript file and keep it running! Feeling nostalgic for some old Flash games? Go play some on Newgrounds with Ruffle installed, and tell your friends about it! Maybe you're a streamer and looking for some silly content? There's literally decades worth, now unlocked and accessible once more.",
     "diamond": "Diamond Sponsors",
     "diamond-description": "We'd like to thank all of our sponsors, who help make this project possible. Below are our Diamond level sponsors, without whom we would not be here. Thank you."
+  },
+  "blog": {
+    "read-more": "Read more...",
+    "20230312": {
+      "title": "First post, progress report!"
+    },
+    "20230423": {
+      "title": "A post-mortem of Ruffle's removal from addons.mozilla.org"
+    },
+    "20230529": {
+      "title": "Ruffle News - May 2023"
+    },
+    "20240114": {
+      "title": "2023 in review"
+    },
+    "20240912": {
+      "title": "Optimisations, Text Input, Tab Focusing and More!"
+    }
   }
 }