Skip to content

Commit c3de842

Browse files
danielhjacobsdanielhjacobs
committed
i18n: Put content of entire home page in translation files
1 parent 6be2ab9 commit c3de842

File tree

6 files changed

+96
-43
lines changed

6 files changed

+96
-43
lines changed

‎i18n/translations.en.json‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
11
{
2-
"tagline": "An open source Flash Player emulator"
2+
"home": {
3+
"title": "An open source Flash Player emulator",
4+
"intro": "Made to run natively on all modern operating systems and browsers, Ruffle brings Flash content back to life with no extra fuss.",
5+
"safe": "Safe to use",
6+
"safe-description": "Using the guarantees of Rust and WASM, we avoid the security pitfalls Flash was known for.",
7+
"easy": "Easy to install",
8+
"easy-description": "Whether you're a user or a website owner, we've made it as easy as possible to get up and running.",
9+
"free": "Free and open source",
10+
"free-description": "Licensed MIT/Apache 2.0, you're free to use Ruffle how you please!"
11+
},
12+
"header": {
13+
"about": "About Ruffle",
14+
"downloads": "Downloads",
15+
"compatibility": "Compatibility",
16+
"contribute": "Get Involved",
17+
"blog": "Blog",
18+
"demo": "Demo",
19+
"discord": "Discord",
20+
"github": "GitHub"
21+
},
22+
"footer": {
23+
"github": "GitHub",
24+
"social-x": "X",
25+
"tiktok": "TikTok",
26+
"instagram": "Instagram",
27+
"mastodon": "Mastodon",
28+
"discord": "Discord",
29+
"tagline": "Putting Flash back on the web"
30+
}
331
}

‎i18n/translations.es.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{
2-
"tagline": "Un emulador de Flash Player de código abierto"
2+
"home": {
3+
"title": "Un emulador de Flash Player de código abierto"
4+
}
35
}

‎src/app/layout.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,11 @@ export default function RootLayout({
4242
</head>
4343
<body>
4444
<MantineProvider theme={theme} cssVariablesResolver={cssResolver}>
45-
<Header />
46-
<Suspense>{children}</Suspense>
47-
<FooterSocial />
45+
<Suspense>
46+
<Header />
47+
{children}
48+
<FooterSocial />
49+
</Suspense>
4850
</MantineProvider>
4951
</body>
5052
</html>

‎src/app/page.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Home() {
4848

4949
<Container size="md">
5050
<Title className={classes.title} suppressHydrationWarning>
51-
{t("tagline")}
51+
{t("home.title")}
5252
</Title>
5353
<div className={classes.hero}>
5454
<Image
@@ -60,9 +60,8 @@ export default function Home() {
6060
priority
6161
/>
6262
<div className={classes.heroInner}>
63-
<Text mt="md">
64-
Made to run natively on all modern operating systems and browsers,
65-
Ruffle brings Flash content back to life with no extra fuss.
63+
<Text mt="md" suppressHydrationWarning>
64+
{t("home.intro")}
6665
</Text>
6766

6867
<List
@@ -80,18 +79,31 @@ export default function Home() {
8079
}
8180
>
8281
<ListItem>
83-
<b className={classes.key}>Safe to use</b> - Using the
84-
guarantees of Rust and WASM, we avoid the security pitfalls
85-
Flash was known for.
82+
<b className={classes.key} suppressHydrationWarning>
83+
{t("home.safe")}
84+
</b>{" "}
85+
-{" "}
86+
<span suppressHydrationWarning>
87+
{t("home.safe-description")}
88+
</span>
8689
</ListItem>
8790
<ListItem>
88-
<b className={classes.key}>Easy to install</b> - Whether
89-
you&apos;re a user or a website owner, we&apos;ve made it as
90-
easy as possible to get up and running.
91+
<b className={classes.key} suppressHydrationWarning>
92+
{t("home.easy")}
93+
</b>{" "}
94+
-{" "}
95+
<span suppressHydrationWarning>
96+
{t("home.easy-description")}
97+
</span>
9198
</ListItem>
9299
<ListItem>
93-
<b className={classes.key}>Free and open source</b> - Licensed
94-
MIT/Apache 2.0, you&apos;re free to use Ruffle how you please!
100+
<b className={classes.key} suppressHydrationWarning>
101+
{t("home.free")}
102+
</b>{" "}
103+
-{" "}
104+
<span suppressHydrationWarning>
105+
{t("home.free-description")}
106+
</span>
95107
</ListItem>
96108
</List>
97109

‎src/components/footer.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
"use client";
2+
13
import { Container, Group, ActionIcon, rem, Text } from "@mantine/core";
24
import Link from "next/link";
5+
import { useTranslation } from "next-export-i18n";
36

47
import {
58
IconBrandX,
@@ -16,46 +19,48 @@ const allSocials = [
1619
{
1720
type: IconBrandGithub,
1821
url: "https://github.com/ruffle-rs",
19-
title: "GitHub",
22+
titleKey: "footer.github",
2023
},
2124
{
2225
type: IconBrandX,
2326
url: "https://twitter.com/ruffle_rs",
24-
title: "X",
27+
titleKey: "footer.social-x",
2528
},
2629
{
2730
type: IconBrandTiktok,
2831
url: "https://www.tiktok.com/@ruffle.rs",
29-
title: "Tiktok",
32+
titleKey: "footer.tiktok",
3033
},
3134
{
3235
type: IconBrandInstagram,
3336
url: "https://www.instagram.com/ruffle.rs/",
34-
title: "Instagram",
37+
titleKey: "footer.instagram",
3538
},
3639
{
3740
type: IconBrandMastodon,
3841
url: "https://mastodon.gamedev.place/@ruffle",
39-
title: "Mastodon",
42+
titleKey: "footer.mastodon",
4043
},
4144
{
4245
type: IconBrandDiscord,
4346
url: "https://discord.gg/ruffle",
44-
title: "Discord",
47+
titleKey: "footer.discord",
4548
},
4649
];
4750

4851
export function FooterSocial() {
52+
const { t } = useTranslation();
4953
const socials = allSocials.map((social, i) => (
5054
<ActionIcon
55+
suppressHydrationWarning
5156
key={i}
5257
size="lg"
5358
color="gray"
5459
variant="subtle"
5560
component={Link}
5661
href={social.url}
5762
target="_blank"
58-
title={social.title}
63+
title={t(social.titleKey)}
5964
>
6065
<social.type style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
6166
</ActionIcon>
@@ -72,8 +77,8 @@ export function FooterSocial() {
7277
width={91}
7378
priority
7479
/>
75-
<Text size="lg" className={classes.tagline}>
76-
Putting Flash back on the web
80+
<Text size="lg" className={classes.tagline} suppressHydrationWarning>
81+
{t("footer.tagline")}
7782
</Text>
7883
</Container>
7984
<Group

‎src/components/header.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,24 @@ import classes from "./header.module.css";
66
import Image from "next/image";
77
import Link from "next/link";
88
import { usePathname } from "next/navigation";
9-
import { LanguageSwitcher } from "next-export-i18n";
10-
import React, { Suspense, useState, useEffect } from "react";
9+
import { LanguageSwitcher, useTranslation } from "next-export-i18n";
10+
import React, { useState, useEffect } from "react";
1111

1212
const links = [
13-
{ link: "/", label: "About Ruffle" },
14-
{ link: "/downloads", label: "Downloads" },
15-
{ link: "/compatibility", label: "Compatibility" },
16-
{ link: "/contribute", label: "Get Involved" },
17-
{ link: "/blog", label: "Blog" },
18-
{ link: "/demo", label: "Demo", target: "_blank" },
19-
{ link: "https://discord.gg/ruffle", label: "Discord", target: "_blank" },
13+
{ link: "/", labelKey: "header.about" },
14+
{ link: "/downloads", labelKey: "header.downloads" },
15+
{ link: "/compatibility", labelKey: "header.compatibility" },
16+
{ link: "/contribute", labelKey: "header.contribute" },
17+
{ link: "/blog", labelKey: "header.blog" },
18+
{ link: "/demo", labelKey: "header.demo", target: "_blank" },
19+
{
20+
link: "https://discord.gg/ruffle",
21+
labelKey: "header.discord",
22+
target: "_blank",
23+
},
2024
{
2125
link: "https://github.com/ruffle-rs/ruffle/",
22-
label: "GitHub",
26+
labelKey: "header.github",
2327
target: "_blank",
2428
},
2529
];
@@ -64,19 +68,21 @@ export function Header() {
6468

6569
const [opened, { toggle, close }] = useDisclosure(false);
6670
const pathname = usePathname();
71+
const { t } = useTranslation();
6772

6873
const items = links.map((link) => (
6974
<Link
70-
key={link.label}
75+
key={link.labelKey}
7176
href={link.link}
7277
target={link.target}
7378
className={classes.link}
7479
data-active={pathname === link.link || undefined}
7580
onClick={() => {
7681
close();
7782
}}
83+
suppressHydrationWarning
7884
>
79-
{link.label}
85+
{t(link.labelKey)}
8086
</Link>
8187
));
8288

@@ -103,11 +109,9 @@ export function Header() {
103109
</select>
104110
</Group>{" "}
105111
{Object.keys(languages).map((langCode) => (
106-
<Suspense key={langCode}>
107-
<LanguageSwitcher lang={langCode}>
108-
{languages[langCode]}
109-
</LanguageSwitcher>
110-
</Suspense>
112+
<LanguageSwitcher key={langCode} lang={langCode}>
113+
{languages[langCode]}
114+
</LanguageSwitcher>
111115
))}
112116
<Drawer
113117
opened={opened}

0 commit comments

Comments
 (0)