i18n: Translate header/footer/logo components

Author: danielhjacobs

src/components/footer.tsx

@@ -2,6 +2,7 @@
 
 import { Container, Group, ActionIcon, rem, Text } from "@mantine/core";
 import Link from "next/link";
+import { useTranslation } from "next-export-i18n";
 
 import {
   IconBrandX,
@@ -18,36 +19,37 @@ const allSocials = [
   {
     type: IconBrandGithub,
     url: "https://github.com/ruffle-rs",
-    title: "GitHub",
+    title: "footer.github",
   },
   {
     type: IconBrandX,
     url: "https://twitter.com/ruffle_rs",
-    title: "X",
+    title: "footer.social-x",
   },
   {
     type: IconBrandTiktok,
     url: "https://www.tiktok.com/@ruffle.rs",
-    title: "Tiktok",
+    title: "footer.tiktok",
   },
   {
     type: IconBrandInstagram,
     url: "https://www.instagram.com/ruffle.rs/",
-    title: "Instagram",
+    title: "footer.instagram",
   },
   {
     type: IconBrandMastodon,
     url: "https://mastodon.gamedev.place/@ruffle",
-    title: "Mastodon",
+    title: "footer.mastodon",
   },
   {
     type: IconBrandDiscord,
     url: "https://discord.gg/ruffle",
-    title: "Discord",
+    title: "footer.discord",
   },
 ];
 
 export function FooterSocial() {
+  const { t } = useTranslation();
   const socials = allSocials.map((social, i) => (
     <ActionIcon
       key={i}
@@ -57,7 +59,8 @@ export function FooterSocial() {
       component={Link}
       href={social.url}
       target="_blank"
-      title={social.title}
+      title={t(social.title)}
+      suppressHydrationWarning
     >
       <social.type style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
     </ActionIcon>
@@ -74,8 +77,8 @@ export function FooterSocial() {
             width={91}
             priority
           />
-          <Text size="lg" className={classes.tagline}>
-            Putting Flash back on the web
+          <Text size="lg" className={classes.tagline} suppressHydrationWarning>
+            {t("footer.tagline")}
           </Text>
         </Container>
         <Group

src/components/header.tsx

@@ -7,28 +7,35 @@ import { LanguagePicker } from "./language-picker";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTranslation } from "next-export-i18n";
 
 const links = [
-  { link: "/", label: "About Ruffle" },
-  { link: "/downloads", label: "Downloads" },
-  { link: "/compatibility", label: "Compatibility" },
-  { link: "/contribute", label: "Get Involved" },
-  { link: "/blog", label: "Blog" },
-  { link: "/demo", label: "Demo", target: "_blank" },
-  { link: "https://discord.gg/ruffle", label: "Discord", target: "_blank" },
+  { link: "/", label: "header.about" },
+  { link: "/downloads", label: "header.downloads" },
+  { link: "/compatibility", label: "header.compatibility" },
+  { link: "/contribute", label: "header.contribute" },
+  { link: "/blog", label: "header.blog" },
+  { link: "/demo", label: "header.demo", target: "_blank" },
+  {
+    link: "https://discord.gg/ruffle",
+    label: "header.discord",
+    target: "_blank",
+  },
   {
     link: "https://github.com/ruffle-rs/ruffle/",
-    label: "GitHub",
+    label: "header.github",
     target: "_blank",
   },
 ];
 
 export function Header() {
+  const { t } = useTranslation();
   const [opened, { toggle, close }] = useDisclosure(false);
   const pathname = usePathname();
 
   const items = links.map((link) => (
     <Link
+      suppressHydrationWarning
       key={link.label}
       href={link.link}
       target={link.target}
@@ -38,7 +45,7 @@ export function Header() {
         close();
       }}
     >
-      {link.label}
+      {t(link.label)}
     </Link>
   ));
 
@@ -47,8 +54,9 @@ export function Header() {
       <Container size="lg" className={classes.inner}>
         <Link href="/">
           <Image
+            suppressHydrationWarning
             src="/logo.svg"
-            alt="Ruffle Logo"
+            alt={t("logo.alt-tag")}
             height={30}
             width={91}
             priority

src/components/logo.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Script from "next/script";
 import classes from "../app/index.module.css";
+import { useTranslation } from "next-export-i18n";
 
 declare global {
   interface Window {
@@ -28,6 +29,7 @@ interface LogoProps {
 }
 
 export default function InteractiveLogo({ className }: LogoProps) {
+  const { t } = useTranslation();
   const container = useRef<HTMLDivElement>(null);
   const [player, setPlayer] = useState<RufflePlayer | null>(null);
 
@@ -80,8 +82,9 @@ export default function InteractiveLogo({ className }: LogoProps) {
       />
       <div ref={container} className={className}>
         <Image
+          suppressHydrationWarning
           src="/logo.svg"
-          alt="Ruffle Logo"
+          alt={t("logo.alt-tag")}
           className={player ? classes.hidden : classes.staticLogo}
           width="340"
           height="110"