setup /app/categories/{category} for translation

Author: corwintines

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

@@ -275,7 +275,7 @@ const Page = async ({
             {nextApp && (
               <LinkBox className="group hidden flex-row items-center rounded-lg p-3 hover:bg-background-highlight sm:flex">
                 <div className="mr-2 flex flex-col text-right">
-                  <p className="text-sm text-gray-500 text-nowrap">See next</p>
+                  <p className="text-nowrap text-sm text-gray-500">See next</p>
                   <p className="text-primary group-hover:text-primary-hover">
                     {nextApp.name}
                   </p>

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

@@ -16,7 +16,10 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import AppCard from "./AppCard"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const AppsTable = ({ apps }: { apps: AppData[] }) => {
+  const { t } = useTranslation("page-apps")
   const [filterBy, setFilterBy] = useState("All")
 
   const subCategories = useMemo(
@@ -41,7 +44,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
     <div className="flex flex-col gap-7">
       <div className="flex flex-row items-end justify-between border-b pb-2 sm:items-center">
         <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
-          <p className="whitespace-nowrap">Filter by</p>
+          <p className="whitespace-nowrap">{t("page-apps-filter-by")}</p>
           <Select
             value={filterBy}
             onValueChange={(value) => {
@@ -61,7 +64,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
                 value="All"
                 className="cursor-pointer hover:bg-primary-low-contrast"
               >
-                All
+                {t("page-apps-filter-all")}
               </SelectItem>
               {subCategories.map((subCategory) => (
                 <SelectItem
@@ -77,7 +80,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
         </div>
         <div>
           <p className="text-body-medium">
-            Showing{" "}
+            {t("page-apps-showing")}{" "}
             <span className="text-body">
               (
               {filteredApps.length === apps.length

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

@@ -1,12 +1,22 @@
+import { getTranslations } from "next-intl/server"
+
 import TabNav from "@/components/ui/TabNav"
 
+import { slugify } from "@/lib/utils/url"
+
 import { appsCategories } from "@/data/apps/categories"
 
-const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
+const CategoriesNav = async ({
+  activeCategory = "",
+}: {
+  activeCategory: string
+}) => {
+  const t = await getTranslations("page-apps")
+
   const items = Object.values(appsCategories).map(
     ({ name, icon: Icon, slug }) => ({
-      key: name,
-      label: name,
+      key: slug,
+      label: t(name),
       href: `/apps/categories/${slug}`,
       icon: <Icon className="h-4 w-4" />,
     })
@@ -15,7 +25,7 @@ const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
   return (
     <TabNav
       items={items}
-      activeKey={activeCategory}
+      activeKey={slugify(activeCategory)}
       customEventOptions={{
         eventCategory: "categories_page",
         eventAction: "navigation",

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

@@ -1,6 +1,10 @@
 import { pick } from "lodash"
 import { notFound } from "next/navigation"
-import { getMessages, setRequestLocale } from "next-intl/server"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
 
 import { AppCategoryEnum } from "@/lib/types"
 
@@ -52,6 +56,8 @@ const Page = async ({
 
   const [appsData] = await loadData()
 
+  const t = await getTranslations({ locale, namespace: "page-apps" })
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -96,13 +102,15 @@ const Page = async ({
                   /
                 </BreadcrumbSeparator>
                 <BreadcrumbItem>
-                  <BreadcrumbPage>{category.name.toUpperCase()}</BreadcrumbPage>
+                  <BreadcrumbPage>
+                    {t(category.name).toUpperCase()}
+                  </BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>
           }
-          title={category.name}
-          subtitle={category.description}
+          title={t(category.name)}
+          subtitle={t(category.description)}
         />
 
         <div className="flex flex-col gap-4 px-4 md:px-8">
@@ -111,15 +119,15 @@ const Page = async ({
 
         <MainArticle className="flex flex-col gap-32 py-10">
           <div className="flex flex-col px-4 md:px-8">
-            <h2>Highlights</h2>
+            <h2>{t("page-apps-highlights-title")}</h2>
             <AppsHighlight
               apps={highlightedApps}
               matomoCategory={`category_page`}
             />
           </div>
 
           <div className="flex flex-col px-4 md:px-8">
-            <AppsTable apps={appsData[category.name]} />
+            <AppsTable apps={appsData[categoryEnum]} />
           </div>
 
           <div className="flex flex-col px-4 md:px-8">
@@ -137,6 +145,7 @@ export async function generateMetadata({
   params: Promise<{ locale: string; catetgoryName: string }>
 }) {
   const { locale, catetgoryName } = await params
+  const t = await getTranslations({ locale, namespace: "page-apps" })
 
   // Normalize slug to lowercase
   const normalizedSlug = catetgoryName.toLowerCase()
@@ -156,8 +165,8 @@ export async function generateMetadata({
     notFound()
   }
 
-  const title = category.metaTitle
-  const description = category.metaDescription
+  const title = t(category.metaTitle)
+  const description = t(category.metaDescription)
 
   return await getMetadata({
     locale,

src/intl/en/page-apps.json

@@ -53,5 +53,8 @@
   "page-apps-see-all": "See all",
   "page-apps-suggest-an-app-title": "Suggest an app",
   "page-apps-suggest-an-app-description": "We're always looking for new apps to add to our list. If you know of an app that you think should be on the list, please let us know.",
-  "page-apps-suggest-an-app-button": "Suggest an app"
+  "page-apps-suggest-an-app-button": "Suggest an app",
+  "page-apps-filter-by": "Filter by",
+  "page-apps-filter-all": "All",
+  "page-apps-showing": "Showing"
 }