i18n: Add translations for contribute page and remove Spanish

danielhjacobs · danielhjacobs · commit fd60fb54dbd6 · 2024-11-15T16:26:26.000-05:00
diff --git a/src/app/contribute/page.tsx b/src/app/contribute/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Container,
   Group,
@@ -13,142 +15,168 @@ import Image from "next/image";
 import { IconBrandRust, IconBrandTypescript } from "@tabler/icons-react";
 import Link from "next/link";
 import { SponsorList } from "@/app/contribute/sponsors";
+import { useTranslation, Trans } from "@/app/translate";
 
 function ContributeCode() {
+  const { t } = useTranslation();
   return (
     <Stack className={classes.contributeSection}>
-      <Title className={classes.title}>🖥️ Contribute code</Title>
-      <Text>
-        There's a few different codebases in couple of different languages, and
-        we'd welcome any help to try and maintain and improve them.
-      </Text>
+      <Title className={classes.title}>🖥️ {t("contribute.code")}</Title>
+      <Text>{t("contribute.code-description")}</Text>
       <List>
         <ListItem icon={<IconBrandRust />}>
-          The actual{" "}
-          <Link target="_blank" href="https://github.com/ruffle-rs/ruffle/">
-            emulator
-          </Link>{" "}
-          itself, and all of the{" "}
-          <Link
-            target="_blank"
-            href="https://github.com/ruffle-rs/ruffle/tree/master/desktop"
-          >
-            desktop player
-          </Link>
-          , is written in Rust.
+          <Trans
+            i18nKey="contribute.rust"
+            components={[
+              <Link
+                key="emulator"
+                target="_blank"
+                href="https://github.com/ruffle-rs/ruffle/"
+              >
+                {t("contribute.emulator")}
+              </Link>,
+              <Link
+                key="desktop-player"
+                target="_blank"
+                href="https://github.com/ruffle-rs/ruffle/tree/master/desktop"
+              >
+                {t("contribute.desktop-player")}
+              </Link>,
+            ]}
+          />
         </ListItem>
         <ListItem icon={<IconBrandTypescript />}>
-          The{" "}
-          <Link
-            target="_blank"
-            href="https://github.com/ruffle-rs/ruffle/tree/master/web"
-          >
-            web player
-          </Link>
-          , the{" "}
-          <Link
-            target="_blank"
-            href="https://github.com/ruffle-rs/ruffle/tree/master/web/packages/extension"
-          >
-            extension
-          </Link>{" "}
-          and our{" "}
-          <Link
-            target="_blank"
-            href="https://github.com/ruffle-rs/ruffle-rs.github.io"
-          >
-            website
-          </Link>{" "}
-          is written in TypeScript.
+          <Trans
+            i18nKey="contribute.typescript"
+            components={[
+              <Link
+                key="web-player"
+                target="_blank"
+                href="https://github.com/ruffle-rs/ruffle/tree/master/web"
+              >
+                {t("contribute.web-player")}
+              </Link>,
+              <Link
+                key="extension"
+                target="_blank"
+                href="https://github.com/ruffle-rs/ruffle/tree/master/web/packages/extension"
+              >
+                {t("contribute.extension")}
+              </Link>,
+              <Link
+                key="website"
+                target="_blank"
+                href="https://github.com/ruffle-rs/ruffle-rs.github.io"
+              >
+                {t("contribute.website")}
+              </Link>,
+            ]}
+          />
         </ListItem>
       </List>
       <Text>
-        Check out our{" "}
-        <Link
-          target="_blank"
-          href="https://github.com/ruffle-rs/ruffle/blob/master/CONTRIBUTING.md"
-        >
-          Contributing Guidelines
-        </Link>{" "}
-        for information on how to start, and come join our{" "}
-        <Link target="_blank" href="https://discord.gg/ruffle">
-          Discord
-        </Link>{" "}
-        if you need help!
+        <Trans
+          i18nKey="contribute.getting-started"
+          components={[
+            <Link
+              key="guidelines"
+              target="_blank"
+              href="https://github.com/ruffle-rs/ruffle/blob/master/CONTRIBUTING.md"
+            >
+              {t("contribute.guidelines")}
+            </Link>,
+            <Link
+              key="discord"
+              target="_blank"
+              href="https://discord.gg/ruffle"
+            >
+              {t("footer.discord")}
+            </Link>,
+          ]}
+        />
       </Text>
     </Stack>
   );
 }
 
 function TestContent() {
+  const { t } = useTranslation();
   return (
     <Stack className={classes.contributeSection}>
-      <Title className={classes.title}>🕹️ Test content</Title>
+      <Title className={classes.title}>🕹️ {t("contribute.test")}</Title>
+      <Text>{t("contribute.test-description")}</Text>
       <Text>
-        Arguably more important than contributing code is testing Ruffle out. Go
-        install Ruffle and try out your favourite games and animations. Look for
-        any difference from the official Flash Player, and report your findings
-        to us.
-      </Text>
-      <Text>
-        If you find any bugs, changes of behaviour, performance issues or any
-        visual differences then please report those to{" "}
-        <Link target="_blank" href="https://github.com/ruffle-rs/ruffle/issues">
-          our bug tracker
-        </Link>
-        .
+        <Trans
+          i18nKey="contribute.report-bugs"
+          components={[
+            <Link
+              key="bug-tracker"
+              target="_blank"
+              href="https://github.com/ruffle-rs/ruffle/issues"
+            >
+              {t("contribute.bug-tracker")}
+            </Link>,
+          ]}
+        />
       </Text>
       <Text>
-        If it runs flawlessly, come share the good news on{" "}
-        <Link target="_blank" href="https://discord.gg/ruffle">
-          our Discord
-        </Link>
-        !
+        <Trans
+          i18nKey="contribute.working"
+          components={[
+            <Link
+              key="our-discord"
+              target="_blank"
+              href="https://discord.gg/ruffle"
+            >
+              {t("contribute.our-discord")}
+            </Link>,
+          ]}
+        />
       </Text>
     </Stack>
   );
 }
 
 function Sponsorship() {
+  const { t } = useTranslation();
   return (
     <Stack className={classes.contributeSection}>
-      <Title className={classes.title}>💲 Sponsor the project</Title>
+      <Title className={classes.title}>💲 {t("contribute.sponsor")}</Title>
       <Text>
-        If you are able and willing to, we welcome any and all financial support
-        to help us fund the project going forward. With your help, we can afford
-        to spend more time dedicated to Ruffle, as well as pay for expenses such
-        as build servers &amp; hosting. We accept donations and sponsorships of
-        any kind, big or small, through Open Source Collective 501(c)(6).
+        {t("contribute.sponsor-description")}
       </Text>
       <Text>
-        For more information, or to view the options available for sponsoring
-        the project, please visit{" "}
-        <Link target="_blank" href="https://opencollective.com/ruffle">
-          our Open Collective page
-        </Link>
-        .
+        <Trans
+          i18nKey="contribute.sponsor-info"
+          components={[
+            <Link
+              key="opencollective"
+              target="_blank"
+              href="https://opencollective.com/ruffle"
+            >
+              {t("contribute.opencollective")}
+            </Link>,
+          ]}
+        />
       </Text>
     </Stack>
   );
 }
 
 function SpreadTheWord() {
+  const { t } = useTranslation();
   return (
     <Stack className={classes.contributeSection}>
-      <Title className={classes.title}>💬 Spread the word!</Title>
+      <Title className={classes.title}>💬 {t("contribute.spread-the-word")}</Title>
       <Text>
-        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.
+        {t("contribute.spread-the-word-description")}
       </Text>
     </Stack>
   );
 }
 
 export default function Page() {
+  const { t } = useTranslation();
   return (
     <Container size="xl" className={classes.container}>
       <Group align="top" wrap="nowrap">
@@ -161,15 +189,9 @@ export default function Page() {
           className={classes.image}
         />
         <Stack className={classes.actionscriptInfo}>
-          <Title className={classes.title}>Get Involved</Title>
+          <Title className={classes.title}>{t("contribute.involved")}</Title>
           <Text>
-            Ruffle is an entirely open source project, maintained by volunteers
-            like you who just want to help preserve a slice of history. We rely
-            on contributions of any kind to keep this project going, and
-            absolutely would not have come as far as we have without the amazing
-            support of our community who came together to make Ruffle happen. If
-            you'd like to join them, there are many ways to help make Ruffle
-            better than ever!
+            {t("contribute.involved-description")}
           </Text>
         </Stack>
       </Group>
diff --git a/src/app/contribute/sponsors.tsx b/src/app/contribute/sponsors.tsx
@@ -1,8 +1,11 @@
+"use client";
+
 import { Card, Group, Stack, Text, Title } from "@mantine/core";
 import classes from "./sponsors.module.css";
 import React from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { useTranslation } from "@/app/translate";
 
 interface Sponsor {
   name: string;
@@ -115,13 +118,12 @@ function Sponsor(sponsor: Sponsor) {
 }
 
 export function SponsorList() {
+  const { t } = useTranslation();
   return (
     <Stack className={classes.list}>
-      <Title id="sponsors">💎 Diamond Sponsors</Title>
+      <Title id="sponsors">💎 {t("contribute.diamond")}</Title>
       <Text>
-        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.
+        {t("contribute.diamond-description")}
       </Text>
       <Group justify="center" gap="sm">
         {sponsors.map((sponsor, index) => (
diff --git a/src/i18n/translations.en.json b/src/i18n/translations.en.json
@@ -113,5 +113,34 @@
       "missing-members": "Missing Members",
       "done": "Done"
     }
+  },
+  "contribute": {
+    "involved": "Get Involved",
+    "involved-description": "Ruffle is an entirely open source project, maintained by volunteers like you who just want to help preserve a slice of history. We rely on contributions of any kind to keep this project going, and absolutely would not have come as far as we have without the amazing support of our community who came together to make Ruffle happen. If you'd like to join them, there are many ways to help make Ruffle better than ever!",
+    "code": "Contribute code",
+    "code-description": "There's a few different codebases in couple of different languages, and we'd welcome any help to try and maintain and improve them.",
+    "rust": "The actual {{emulator}} itself, and all of the {{desktop-player}}, is written in Rust.",
+    "emulator": "emulator",
+    "desktop-player": "desktop player",
+    "typescript": "The {{web-player}}, the {{extension}} and our {{website}} is written in TypeScript.",
+    "web-player": "web player",
+    "extension": "extension",
+    "website": "website",
+    "getting-started": "Check out our {{guidelines}} for information on how to start, and come join our {{discord}} if you need help!",
+    "guidelines": "Contributing Guidelines",
+    "test": "Test content",
+    "test-description": "Arguably more important than contributing code is testing Ruffle out. Go install Ruffle and try out your favourite games and animations. Look for any difference from the official Flash Player, and report your findings to us.",
+    "report-bugs": "If you find any bugs, changes of behaviour, performance issues or any visual differences then please report those to our {{bug-tracker}}.",
+    "bug-tracker": "our bug tracker",
+    "working": "If it runs flawlessly, come share the good news on {{our-discord}}!",
+    "our-discord": "our Discord",
+    "sponsor": "Sponsor the project",
+    "sponsor-description": "If you are able and willing to, we welcome any and all financial support to help us fund the project going forward. With your help, we can afford to spend more time dedicated to Ruffle, as well as pay for expenses such as build servers & hosting. We accept donations and sponsorships of any kind, big or small, through Open Source Collective 501(c)(6).",
+    "sponsor-info": "For more information, or to view the options available for sponsoring the project, please visit {{opencollective}}.",
+    "opencollective": "our Open Collective page",
+    "spread-the-word": "Spread the word!",
+    "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."
   }
 }
diff --git a/src/i18n/translations.es.json b/src/i18n/translations.es.json
