Skip to content

Commit b8a178b

Browse files
pettinarippettinarip
authored
Merge pull request #16090 from ethereum/setupAppsTranslation
Setup apps translation
2 parents b00ec38 + 6a54d06 commit b8a178b

File tree

9 files changed

+194
-102
lines changed

9 files changed

+194
-102
lines changed

‎app/[locale]/apps/[application]/page.tsx

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { pick } from "lodash"
22
import { notFound } from "next/navigation"
3-
import { getMessages, setRequestLocale } from "next-intl/server"
3+
import {
4+
getMessages,
5+
getTranslations,
6+
setRequestLocale,
7+
} from "next-intl/server"
48

59
import { ChainName } from "@/lib/types"
610

@@ -58,6 +62,9 @@ const Page = async ({
5862
const { locale, application } = await params
5963
setRequestLocale(locale)
6064

65+
// Get translations
66+
const t = await getTranslations({ locale, namespace: "page-apps" })
67+
6168
// Get i18n messages
6269
const allMessages = await getMessages({ locale })
6370
const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -115,9 +122,9 @@ const Page = async ({
115122
const diffInMs = now.getTime() - date.getTime()
116123
const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24))
117124

118-
if (diffInDays === 0) return "Today"
119-
if (diffInDays === 1) return "1 day ago"
120-
return `${diffInDays} days ago`
125+
if (diffInDays === 0) return t("page-apps-today")
126+
if (diffInDays === 1) return t("page-apps-one-day-ago")
127+
return t("page-apps-days-ago", { days: diffInDays })
121128
}
122129

123130
return (
@@ -194,7 +201,7 @@ const Page = async ({
194201
eventName: "visit",
195202
}}
196203
>
197-
Visit {app.name}
204+
{t("page-apps-visit-app", { appName: app.name })}
198205
</ButtonLink>
199206
<div className="flex flex-row justify-between gap-4">
200207
<div className="flex h-fit flex-row flex-wrap gap-4">
@@ -250,7 +257,9 @@ const Page = async ({
250257
{nextApp && (
251258
<LinkBox className="group flex flex-row items-center rounded-lg hover:bg-background-highlight sm:hidden">
252259
<div className="mr-2 flex flex-col text-right">
253-
<p className="text-sm text-gray-500">See next</p>
260+
<p className="text-sm text-gray-500">
261+
{t("page-apps-see-next")}
262+
</p>
254263
<p className="text-primary group-hover:text-primary-hover">
255264
{nextApp.name}
256265
</p>
@@ -275,7 +284,9 @@ const Page = async ({
275284
{nextApp && (
276285
<LinkBox className="group hidden flex-row items-center rounded-lg p-3 hover:bg-background-highlight sm:flex">
277286
<div className="mr-2 flex flex-col text-right">
278-
<p className="text-nowrap text-sm text-gray-500">See next</p>
287+
<p className="text-nowrap text-sm text-gray-500">
288+
{t("page-apps-see-next")}
289+
</p>
279290
<p className="text-primary group-hover:text-primary-hover">
280291
{nextApp.name}
281292
</p>
@@ -299,25 +310,31 @@ const Page = async ({
299310
<div className="grid grid-cols-1 grid-rows-[auto_1fr] gap-10 bg-background-highlight px-4 py-10 md:grid-cols-[minmax(0,1fr)_auto] md:px-8">
300311
<p className="max-w-3xl">{app.description}</p>
301312
<div className="flex h-fit w-full flex-col gap-4 rounded-2xl border bg-background p-8 md:row-span-2 md:w-44">
302-
<h3 className="text-lg">Info</h3>
313+
<h3 className="text-lg">{t("page-apps-info-title")}</h3>
303314
<div>
304-
<p className="text-sm text-body-medium">Founded</p>
315+
<p className="text-sm text-body-medium">
316+
{t("page-apps-info-founded")}
317+
</p>
305318
<p className="text-sm">
306319
{new Date(app.dateOfLaunch).getFullYear()}
307320
</p>
308321
</div>
309322
<div>
310-
<p className="text-sm text-body-medium">Creator</p>
323+
<p className="text-sm text-body-medium">
324+
{t("page-apps-info-creator")}
325+
</p>
311326
<p className="text-sm">{app.parentCompany}</p>
312327
</div>
313328
<div>
314-
<p className="text-sm text-body-medium">Last updated</p>
329+
<p className="text-sm text-body-medium">
330+
{t("page-apps-info-last-updated")}
331+
</p>
315332
<p className="text-sm">{getTimeAgo(app.lastUpdated)}</p>
316333
</div>
317334
</div>
318335
{app.screenshots.length > 0 && (
319336
<div className="flex flex-col gap-4">
320-
<h3 className="text-2xl">Gallery</h3>
337+
<h3 className="text-2xl">{t("page-apps-gallery-title")}</h3>
321338
<ScreenshotSwiper
322339
screenshots={app.screenshots}
323340
appName={app.name}
@@ -329,7 +346,7 @@ const Page = async ({
329346
{relatedApps.length > 0 && (
330347
<div className="flex flex-col px-4 py-10 md:px-8">
331348
<div className="flex w-full flex-col items-center gap-8 rounded-2xl bg-gradient-to-t from-blue-500/20 from-10% to-blue-500/5 to-90% p-12 px-4 md:px-8">
332-
<h2>More apps like this</h2>
349+
<h2>{t("page-apps-more-apps-like-this")}</h2>
333350
<div className="flex w-full flex-col gap-4 lg:flex-row">
334351
{relatedApps.map((relatedApp) => (
335352
<div

‎app/[locale]/apps/_components/AppsTable.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
1616

1717
import AppCard from "./AppCard"
1818

19+
import useTranslation from "@/hooks/useTranslation"
20+
1921
const AppsTable = ({ apps }: { apps: AppData[] }) => {
22+
const { t } = useTranslation("page-apps")
2023
const [filterBy, setFilterBy] = useState("All")
2124

2225
const subCategories = useMemo(
@@ -41,7 +44,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
4144
<div className="flex flex-col gap-7">
4245
<div className="flex flex-row items-end justify-between border-b pb-2 sm:items-center">
4346
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
44-
<p className="whitespace-nowrap">Filter by</p>
47+
<p className="whitespace-nowrap">{t("page-apps-filter-by")}</p>
4548
<Select
4649
value={filterBy}
4750
onValueChange={(value) => {
@@ -61,7 +64,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
6164
value="All"
6265
className="cursor-pointer hover:bg-primary-low-contrast"
6366
>
64-
All
67+
{t("page-apps-filter-all")}
6568
</SelectItem>
6669
{subCategories.map((subCategory) => (
6770
<SelectItem
@@ -77,7 +80,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
7780
</div>
7881
<div>
7982
<p className="text-body-medium">
80-
Showing{" "}
83+
{t("page-apps-showing")}{" "}
8184
<span className="text-body">
8285
(
8386
{filteredApps.length === apps.length

‎app/[locale]/apps/_components/CategoriesNav.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1+
import { getTranslations } from "next-intl/server"
2+
13
import TabNav from "@/components/ui/TabNav"
24

5+
import { slugify } from "@/lib/utils/url"
6+
37
import { appsCategories } from "@/data/apps/categories"
48

5-
const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
9+
const CategoriesNav = async ({
10+
activeCategory = "",
11+
}: {
12+
activeCategory: string
13+
}) => {
14+
const t = await getTranslations("page-apps")
15+
616
const items = Object.values(appsCategories).map(
717
({ name, icon: Icon, slug }) => ({
8-
key: name,
9-
label: name,
18+
key: slug,
19+
label: t(name),
1020
href: `/apps/categories/${slug}`,
1121
icon: <Icon className="h-4 w-4" />,
1222
})
@@ -15,7 +25,7 @@ const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
1525
return (
1626
<TabNav
1727
items={items}
18-
activeKey={activeCategory}
28+
activeKey={slugify(activeCategory)}
1929
customEventOptions={{
2030
eventCategory: "categories_page",
2131
eventAction: "navigation",

‎app/[locale]/apps/_components/SuggestAnApp.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1+
import { getTranslations } from "next-intl/server"
2+
13
import { ButtonLink } from "@/components/ui/buttons/Button"
24

3-
const SuggestAnApp = () => {
5+
const SuggestAnApp = async () => {
6+
const t = await getTranslations("page-apps")
47
return (
58
<div className="flex flex-col items-center gap-4 rounded-2xl bg-radial-a p-12">
6-
<h2>Suggest an app</h2>
7-
<p>
8-
We&apos;re always looking for new apps to add to our list. If you know
9-
of an app that you think should be on the list, please let us know.
10-
</p>
9+
<h2>{t("page-apps-suggest-an-app-title")}</h2>
10+
<p>{t("page-apps-suggest-an-app-description")}</p>
1111
<ButtonLink
1212
href="https://submitapp.paperform.co/"
1313
variant="outline"
1414
className="w-fit"
1515
hideArrow
1616
>
17-
Suggest an app
17+
{t("page-apps-suggest-an-app-button")}
1818
</ButtonLink>
1919
</div>
2020
)

‎app/[locale]/apps/_components/TopApps.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,14 @@ import AppCard from "./AppCard"
2323

2424
import { useBreakpointValue } from "@/hooks/useBreakpointValue"
2525
import { useIsClient } from "@/hooks/useIsClient"
26+
import useTranslation from "@/hooks/useTranslation"
27+
2628
interface TopAppsProps {
2729
appsData: Record<AppCategory, AppData[]>
2830
}
2931

3032
const TopApps = ({ appsData }: TopAppsProps) => {
33+
const { t } = useTranslation("page-apps")
3134
const isClient = useIsClient()
3235
const cardStyling = useBreakpointValue({
3336
base: {
@@ -119,7 +122,7 @@ const TopApps = ({ appsData }: TopAppsProps) => {
119122
})()}
120123
</div>
121124
<p className="text-lg font-bold text-body no-underline group-hover:text-primary">
122-
{category}
125+
{t(appsCategories[category].name)}
123126
</p>
124127
</div>
125128
<div>
@@ -129,7 +132,7 @@ const TopApps = ({ appsData }: TopAppsProps) => {
129132
size="sm"
130133
className="w-fit"
131134
>
132-
<p className="text-sm">See all</p>
135+
<p className="text-sm">{t("page-apps-see-all")}</p>
133136
</Button>
134137
</div>
135138
</div>

‎app/[locale]/apps/categories/[catetgoryName]/page.tsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { pick } from "lodash"
22
import { notFound } from "next/navigation"
3-
import { getMessages, setRequestLocale } from "next-intl/server"
3+
import {
4+
getMessages,
5+
getTranslations,
6+
setRequestLocale,
7+
} from "next-intl/server"
48

59
import { AppCategoryEnum } from "@/lib/types"
610

@@ -52,6 +56,8 @@ const Page = async ({
5256

5357
const [appsData] = await loadData()
5458

59+
const t = await getTranslations({ locale, namespace: "page-apps" })
60+
5561
// Get i18n messages
5662
const allMessages = await getMessages({ locale })
5763
const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -96,13 +102,15 @@ const Page = async ({
96102
/
97103
</BreadcrumbSeparator>
98104
<BreadcrumbItem>
99-
<BreadcrumbPage>{category.name.toUpperCase()}</BreadcrumbPage>
105+
<BreadcrumbPage>
106+
{t(category.name).toUpperCase()}
107+
</BreadcrumbPage>
100108
</BreadcrumbItem>
101109
</BreadcrumbList>
102110
</Breadcrumb>
103111
}
104-
title={category.name}
105-
subtitle={category.description}
112+
title={t(category.name)}
113+
subtitle={t(category.description)}
106114
/>
107115

108116
<div className="flex flex-col gap-4 px-4 md:px-8">
@@ -111,15 +119,15 @@ const Page = async ({
111119

112120
<MainArticle className="flex flex-col gap-32 py-10">
113121
<div className="flex flex-col px-4 md:px-8">
114-
<h2>Highlights</h2>
122+
<h2>{t("page-apps-highlights-title")}</h2>
115123
<AppsHighlight
116124
apps={highlightedApps}
117125
matomoCategory={`category_page`}
118126
/>
119127
</div>
120128

121129
<div className="flex flex-col px-4 md:px-8">
122-
<AppsTable apps={appsData[category.name]} />
130+
<AppsTable apps={appsData[categoryEnum]} />
123131
</div>
124132

125133
<div className="flex flex-col px-4 md:px-8">
@@ -137,6 +145,7 @@ export async function generateMetadata({
137145
params: Promise<{ locale: string; catetgoryName: string }>
138146
}) {
139147
const { locale, catetgoryName } = await params
148+
const t = await getTranslations({ locale, namespace: "page-apps" })
140149

141150
// Normalize slug to lowercase
142151
const normalizedSlug = catetgoryName.toLowerCase()
@@ -156,8 +165,8 @@ export async function generateMetadata({
156165
notFound()
157166
}
158167

159-
const title = category.metaTitle
160-
const description = category.metaDescription
168+
const title = t(category.metaTitle)
169+
const description = t(category.metaDescription)
161170

162171
return await getMetadata({
163172
locale,

0 commit comments

Comments
 (0)