i18n: Translate installers, downloads, and 404 page

Author: danielhjacobs

src/app/downloads/config.tsx

@@ -115,41 +115,41 @@ export interface DownloadLink {
 export const desktopLinks: DownloadLink[] = [
   {
     key: "windows_64",
-    shortName: "Windows (64-bit)",
-    longName: "Windows Executable",
+    shortName: "installers.windows-64-short-name",
+    longName: "installers.windows-long-name",
     icon: IconBrandWindows,
     isRecommended: true,
     isDeviceRelevant: (device) => device.desktop && device.windows,
   },
   {
     key: "windows_32",
-    shortName: "Windows (32-bit)",
-    longName: "Windows Executable",
+    shortName: "installers.windows-32-short-name",
+    longName: "installers.windows-long-name",
     icon: IconBrandWindows,
     isRecommended: false,
     isDeviceRelevant: () => false,
   },
   {
     key: "macos",
-    shortName: "macOS",
-    longName: "Mac Application",
+    shortName: "installers.macos-short-name",
+    longName: "installers.macos-long-name",
     icon: IconBrandApple,
     isRecommended: true,
     isDeviceRelevant: (device) => device.desktop && device.mac,
   },
   {
     key: "flatpak",
-    shortName: "Flatpak",
-    longName: "Flatpak App",
+    shortName: "installers.flatpak-short-name",
+    longName: "installers.flatpak-long-name",
     icon: IconBox,
     isRecommended: true,
     recommendedUrl: flathubUrl,
     isDeviceRelevant: (device) => device.linux,
   },
   {
     key: "linux",
-    shortName: "Linux",
-    longName: "Linux Executable",
+    shortName: "installers.linux-short-name",
+    longName: "installers.linux-long-name",
     icon: IconBrandLinux,
     isRecommended: true,
     isDeviceRelevant: (device) => device.desktop && device.linux,
@@ -159,8 +159,8 @@ export const desktopLinks: DownloadLink[] = [
 export const extensionLinks: DownloadLink[] = [
   {
     key: "chromium",
-    shortName: "Chrome",
-    longName: "Chrome Extension",
+    shortName: "installers.chrome-short-name",
+    longName: "installers.chrome-long-name",
     icon: IconBrandChrome,
     isDeviceRelevant: (device) => device.desktop && device.chrome,
     isRecommended: true,
@@ -169,8 +169,8 @@ export const extensionLinks: DownloadLink[] = [
   },
   {
     key: "chromium",
-    shortName: "Edge",
-    longName: "Edge Extension",
+    shortName: "installers.edge-short-name",
+    longName: "installers.edge-long-name",
     icon: IconBrandEdge,
     isDeviceRelevant: (device) => device.desktop && device.edge,
     isRecommended: true,
@@ -179,8 +179,8 @@ export const extensionLinks: DownloadLink[] = [
   },
   {
     key: "firefox",
-    shortName: "Firefox",
-    longName: "Firefox Extension",
+    shortName: "installers.firefox-short-name",
+    longName: "installers.firefox-long-name",
     icon: IconBrandFirefox,
     isDeviceRelevant: (device) =>
       (device.desktop || device.android) && device.firefox,
@@ -189,8 +189,8 @@ export const extensionLinks: DownloadLink[] = [
   },
   {
     key: "macos",
-    shortName: "Safari",
-    longName: "Safari Extension",
+    shortName: "installers.safari-short-name",
+    longName: "installers.safari-long-name",
     icon: IconBrandSafari,
     isRecommended: true,
     isDeviceRelevant: () => false,
@@ -200,8 +200,8 @@ export const extensionLinks: DownloadLink[] = [
 export const webLinks: DownloadLink[] = [
   {
     key: "web",
-    shortName: "Self Hosted",
-    longName: "Website Package",
+    shortName: "installers.selfhosted-short-name",
+    longName: "installers.selfhosted-long-name",
     icon: IconBrandJavascript,
     isRecommended: true,
     isDeviceRelevant: () => false,

src/app/downloads/extensions.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { Group, Stack, Text, Title } from "@mantine/core";
 import classes from "./extensions.module.css";
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslation } from "@/app/translate";
 
 interface Extension {
   image: string;
@@ -14,26 +17,27 @@ const extensions: Extension[] = [
   {
     image: "/extension_badges/chrome.svg",
     url: "https://chromewebstore.google.com/detail/ruffle-flash-emulator/donbcfbmhbcapadipfkeojnmajbakjdc",
-    alt: "Available in the Chrome Web Store",
+    alt: "downloads.chrome-extension-alt",
   },
   {
     image: "/extension_badges/firefox.svg",
     url: "https://addons.mozilla.org/firefox/addon/ruffle_rs",
-    alt: "Get the Add-On for Firefox",
+    alt: "downloads.firefox-extension-alt",
   },
   {
     image: "/extension_badges/edge.svg",
     url: "https://microsoftedge.microsoft.com/addons/detail/ruffle/pipjjbgofgieknlpefmcckdmgaaegban",
-    alt: "Get it from Microsoft for Edge",
+    alt: "downloads.edge-extension-alt",
   },
 ];
 
 function ExtensionBadge(info: Extension) {
+  const { t } = useTranslation();
   return (
     <Link href={info.url} target="_blank">
       <Image
         src={info.image}
-        alt={info.alt}
+        alt={t(info.alt)}
         width={0} // set by css to 100% width
         height={66}
         priority
@@ -44,17 +48,13 @@ function ExtensionBadge(info: Extension) {
 }
 
 export function ExtensionList() {
+  const { t } = useTranslation();
   return (
     <Stack>
       <Title id="extension" className={classes.title}>
-        Browser Extension
+        {t("downloads.browser-extension")}
       </Title>
-      <Text>
-        If you visit websites that have Flash content but aren't using Ruffle,
-        or you want to ensure you're using the latest and greatest version of
-        Ruffle on every website, then our browser extension is the perfect thing
-        for you!
-      </Text>
+      <Text>{t("downloads.browser-extension-description")}</Text>
       <Group>
         {extensions.map((extension, i) => (
           <ExtensionBadge key={i} {...extension} />

src/app/downloads/nightlies.tsx

@@ -24,6 +24,7 @@ import {
   githubReleasesUrl,
   webLinks,
 } from "@/app/downloads/config";
+import { useTranslation } from "@/app/translate";
 
 function DownloadLink({
   link,
@@ -32,6 +33,7 @@ function DownloadLink({
   link: DownloadLink;
   release: GithubRelease;
 }) {
+  const { t } = useTranslation();
   const url = release.downloads[link.key];
   if (!url) {
     return <></>;
@@ -49,7 +51,7 @@ function DownloadLink({
       title={url ? "" : "Unavailable"}
     >
       <link.icon />
-      {link.shortName}
+      {t(link.shortName)}
     </Button>
   );
 }
@@ -90,24 +92,25 @@ function NightlyRow(release: GithubRelease) {
 }
 
 function NightlyCompactBox(release: GithubRelease) {
+  const { t } = useTranslation();
   return (
     <>
       <Link href={release.url} className={classes.nameAsHeader} target="_blank">
         {release.name}
       </Link>
-      <Title order={5}>Desktop Application</Title>
+      <Title order={5}>{t("downloads.desktop-app")}</Title>
       <Group>
         {desktopLinks.map((link, index) => (
           <DownloadLink key={index} link={link} release={release} />
         ))}
       </Group>
-      <Title order={5}>Browser Extension</Title>
+      <Title order={5}>{t("downloads.browser-extension")}</Title>
       <Group>
         {extensionLinks.map((link, index) => (
           <DownloadLink key={index} link={link} release={release} />
         ))}
       </Group>
-      <Title order={5}>Web Package</Title>
+      <Title order={5}>{t("downloads.web-package")}</Title>
       <Group>
         {webLinks.map((link, index) => (
           <DownloadLink key={index} link={link} release={release} />
@@ -117,23 +120,25 @@ function NightlyCompactBox(release: GithubRelease) {
   );
 }
 
-export function NightlyList({ nightlies }: { nightlies: GithubRelease[] }) {
+export function NightlyList({
+  nightlies,
+}: {
+  nightlies: GithubRelease[] | null;
+}) {
+  const { t } = useTranslation();
   return (
     <Stack>
-      <Title id="nightly-releases">Nightly Releases</Title>
+      <Title id="nightly-releases">{t("downloads.nightly-releases")}</Title>
       <Text>
-        If none of the above are suitable for you, you can manually download the
-        latest Nightly release. These are automatically built every day
-        (approximately midnight UTC), unless there are no changes on that day.{" "}
-        Older nightly releases are available on{" "}
+        {t("downloads.nightly-releases-description")}{" "}
         <Link
           href={githubReleasesUrl}
           className={classes.moreNightlies}
           target="_blank"
         >
-          GitHub
+          {t("footer.github")}
         </Link>
-        .
+        {t("common.line-ender")}
       </Text>
       <Table
         horizontalSpacing="md"
@@ -144,22 +149,22 @@ export function NightlyList({ nightlies }: { nightlies: GithubRelease[] }) {
       >
         <TableThead className={classes.header}>
           <TableTr>
-            <TableTh>Version</TableTh>
-            <TableTh>Desktop Application</TableTh>
-            <TableTh>Browser Extension</TableTh>
-            <TableTh>Web Package</TableTh>
+            <TableTh>{t("downloads.version")}</TableTh>
+            <TableTh>{t("downloads.desktop-app")}</TableTh>
+            <TableTh>{t("downloads.browser-extension")}</TableTh>
+            <TableTh>{t("downloads.web-package")}</TableTh>
           </TableTr>
         </TableThead>
         <TableTbody className={classes.body}>
-          {nightlies.map((nightly) => (
+          {nightlies?.map((nightly) => (
             <NightlyRow key={nightly.id} {...nightly} />
           ))}
         </TableTbody>
       </Table>
 
       <Stack hiddenFrom="sm">
         {/*Compact mobile view, because a table is far too wide*/}
-        {nightlies.map((nightly) => (
+        {nightlies?.map((nightly) => (
           <NightlyCompactBox key={nightly.id} {...nightly} />
         ))}
       </Stack>