fix missing i18n

.vscode/settings.json

@@ -307,7 +307,7 @@
     "name"
   ],
   "i18n-ally.keystyle": "nested",
-  "i18n-ally.localesPaths": ["messages/default"],
+  "i18n-ally.localesPaths": ["messages"],
   "i18n-ally.sourceLanguage": "en-US",
   "javascript.format.semicolons": "insert",
   "javascript.inlayHints.enumMemberValues.enabled": true,

eslint.config.js

@@ -50,6 +50,7 @@ export default tseslint.config(
       "@typescript-eslint/no-empty-object-type": "off",
       "@typescript-eslint/no-misused-promises": "off",
       "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-base-to-string": "off",
       "@typescript-eslint/no-empty-function": "off",
       "@typescript-eslint/only-throw-error": "off",
       "@typescript-eslint/no-unsafe-return": "off",

messages/de-DE.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Zurückweisen"
-  }
+  },
+  "featuredProductsDescription": "Entdecken Sie Produkte aus der ganzen Welt",
+  "featuredProductsTitle": "Ausgewählte Produkte",
+  "featuredStoresDescription": "Entdecken Sie Geschäfte aus der ganzen Welt",
+  "featuredStoresTitle": "Ausgewählte Geschäfte",
+  "viewAllProducts": "Alle Produkte ansehen",
+  "viewAllStores": "Alle Geschäfte anzeigen"
 }

messages/en-US.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Dismiss"
-  }
+  },
+  "featuredProductsDescription": "Explore products from around the world",
+  "featuredProductsTitle": "Featured products",
+  "featuredStoresDescription": "Explore stores from around the world",
+  "featuredStoresTitle": "Featured stores",
+  "viewAllProducts": "View all products",
+  "viewAllStores": "View all stores"
 }

messages/es-ES.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Despedir"
-  }
+  },
+  "featuredProductsDescription": "Explora productos de todo el mundo.",
+  "featuredProductsTitle": "Productos destacados",
+  "featuredStoresDescription": "Explora tiendas de todo el mundo.",
+  "featuredStoresTitle": "Tiendas destacadas",
+  "viewAllProducts": "Ver todos los productos",
+  "viewAllStores": "Ver todas las tiendas"
 }

messages/fa-IR.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "رد کردن"
-  }
+  },
+  "featuredProductsDescription": "محصولات از سراسر جهان را کاوش کنید",
+  "featuredProductsTitle": "محصولات ویژه",
+  "featuredStoresDescription": "فروشگاه های سراسر جهان را کاوش کنید",
+  "featuredStoresTitle": "فروشگاه های ویژه",
+  "viewAllProducts": "مشاهده تمامی محصولات",
+  "viewAllStores": "مشاهده تمام فروشگاه ها"
 }

messages/fr-FR.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Rejeter"
-  }
+  },
+  "featuredProductsDescription": "Découvrez des produits du monde entier",
+  "featuredProductsTitle": "Produits phares",
+  "featuredStoresDescription": "Explorez les magasins du monde entier",
+  "featuredStoresTitle": "Magasins en vedette",
+  "viewAllProducts": "Voir tous les produits",
+  "viewAllStores": "Voir tous les magasins"
 }

messages/hi-IN.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "नकार देना"
-  }
+  },
+  "featuredProductsDescription": "दुनिया भर के उत्पादों का अन्वेषण करें",
+  "featuredProductsTitle": "विशेष रुप से प्रदर्शित प्रोडक्टस",
+  "featuredStoresDescription": "दुनिया भर के स्टोर खोजें",
+  "featuredStoresTitle": "विशेष स्टोर",
+  "viewAllProducts": "सभी उत्पाद देखें",
+  "viewAllStores": "सभी स्टोर देखें"
 }

messages/it-IT.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Congedare"
-  }
+  },
+  "featuredProductsDescription": "Esplora prodotti da tutto il mondo",
+  "featuredProductsTitle": "Prodotti in evidenza",
+  "featuredStoresDescription": "Esplora negozi da tutto il mondo",
+  "featuredStoresTitle": "Negozi in evidenza",
+  "viewAllProducts": "Visualizza tutti i prodotti",
+  "viewAllStores": "Visualizza tutti i negozi"
 }

messages/ms-MY.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Tutup"
-  }
+  },
+  "featuredProductsDescription": "Terokai produk dari seluruh dunia",
+  "featuredProductsTitle": "Produk yang diketengahkan",
+  "featuredStoresDescription": "Terokai kedai dari seluruh dunia",
+  "featuredStoresTitle": "Kedai pilihan",
+  "viewAllProducts": "Lihat semua produk",
+  "viewAllStores": "Lihat semua kedai"
 }

messages/pl-PL.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Odrzucać"
-  }
+  },
+  "featuredProductsDescription": "Poznaj produkty z całego świata",
+  "featuredProductsTitle": "Polecane produkty",
+  "featuredStoresDescription": "Przeglądaj sklepy z całego świata",
+  "featuredStoresTitle": "Polecane sklepy",
+  "viewAllProducts": "Zobacz wszystkie produkty",
+  "viewAllStores": "Zobacz wszystkie sklepy"
 }

messages/tr-TR.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Azletmek"
-  }
+  },
+  "featuredProductsDescription": "Dünyanın dört bir yanından ürünleri keşfedin",
+  "featuredProductsTitle": "Öne çıkan ürünler",
+  "featuredStoresDescription": "Dünyanın dört bir yanından mağazaları keşfedin",
+  "featuredStoresTitle": "Öne çıkan mağazalar",
+  "viewAllProducts": "Tüm ürünleri görüntüle",
+  "viewAllStores": "Tüm mağazaları görüntüle"
 }

messages/uk-UA.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "Відхилити"
-  }
+  },
+  "featuredProductsDescription": "Досліджуйте продукти з усього світу",
+  "featuredProductsTitle": "Рекомендовані продукти",
+  "featuredStoresDescription": "Досліджуйте магазини з усього світу",
+  "featuredStoresTitle": "Рекомендовані магазини",
+  "viewAllProducts": "Переглянути всі продукти",
+  "viewAllStores": "Переглянути всі магазини"
 }

messages/zh-CN.json

@@ -600,5 +600,11 @@
   },
   "with-button-animated": {
     "dismiss": "解雇"
-  }
+  },
+  "featuredProductsDescription": "探索来自世界各地的产品",
+  "featuredProductsTitle": "特色产品",
+  "featuredStoresDescription": "探索世界各地的商店",
+  "featuredStoresTitle": "特色店铺",
+  "viewAllProducts": "查看所有产品",
+  "viewAllStores": "查看所有商店"
 }

package.json

@@ -116,7 +116,7 @@
     "stripe": "^17.2.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript-eslint": "^8.11.0",
+    "typescript-eslint": "^8.12.0",
     "uploadthing": "^7.2.0",
     "vaul": "^1.1.0",
     "zod": "^3.23.8"
@@ -128,13 +128,13 @@
     "@tailwindcss/typography": "^0.5.15",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.8.2",
     "@types/pg": "^8.11.10",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.0",
+    "@typescript-eslint/parser": "^8.12.0",
     "autoprefixer": "^10.4.20",
     "dotenv-cli": "^7.4.2",
     "drizzle-kit": "^0.26.2",

src/app/[locale]/(dashboard)/dashboard/stores/[storeId]/_components/dashboard-sidebar-sheet.tsx

@@ -9,6 +9,8 @@ import {
   Sheet,
   SheetClose,
   SheetContent,
+  SheetHeader,
+  SheetTitle,
   SheetTrigger,
 } from "~/components/ui/sheet";
 import { Icons } from "~/components/icons";
@@ -49,6 +51,9 @@ export function DashboardSidebarSheet({
         side="left"
         className="inset-y-0 flex h-auto w-[18.75rem] flex-col items-center gap-4 px-0 py-4"
       >
+        <SheetHeader className="px-1 sr-only">
+          <SheetTitle>Dashboard Sidebar</SheetTitle>
+        </SheetHeader>
         <SheetClose asChild>
           <Link
             href="/"

src/app/[locale]/(lobby)/@modal/(.)preview/layout.tsx

@@ -1,8 +1,13 @@
-import { AlertDialog, AlertDialogContent } from "~/components/ui/alert-dialog";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from "~/components/ui/alert-dialog";
 
 export default function ModalLayout({ children }: React.PropsWithChildren) {
   return (
     <AlertDialog defaultOpen={true}>
+      <AlertDialogTitle className="sr-only">Command Dialog</AlertDialogTitle>
       <AlertDialogContent className="max-w-3xl overflow-hidden p-0">
         {children}
       </AlertDialogContent>

src/app/[locale]/(lobby)/_components/lobby.tsx

@@ -20,6 +20,7 @@ import { Shell } from "~/components/shell";
 import { StoreCard } from "~/components/store-card";
 
 import { CategoryCard } from "./category-card";
+import { getTranslations } from "next-intl/server";
 
 interface LobbyProps {
   githubStarsPromise: ReturnType<typeof getGithubStars>;
@@ -34,6 +35,8 @@ export async function Lobby({
   categoriesPromise,
   storesPromise,
 }: LobbyProps) {
+  const t = await getTranslations();
+
   // @see the "Parallel data fetching" docs: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching
   const [githubStars, products, categories, stores] = await Promise.all([
     githubStarsPromise,
@@ -69,8 +72,13 @@ export async function Lobby({
           className="animate-fade-up"
           style={{ animationDelay: "0.20s", animationFillMode: "both" }}
         >
-          Relivator template is the foundation of your eCommerce platform: Build
-          More Efficient, Engaging, and Profitable Online Stores
+          <span className="hidden md:block">
+            Relivator template is the foundation of your eCommerce platform:
+            Build More Efficient, Engaging, and Profitable Online Stores
+          </span>
+          <span className="block md:hidden">
+            Relivator template is the foundation of your eCommerce platform
+          </span>
         </PageHeaderHeading>
         <PageHeaderDescription
           className="max-w-[46.875rem] animate-fade-up"
@@ -103,21 +111,21 @@ export async function Lobby({
         ))}
       </section>
       <ContentSection
-        title="Featured products"
-        description="Explore products from around the world"
+        title={t("featuredProductsTitle")}
+        description={t("featuredProductsDescription")}
         href="/products"
-        linkText="View all products"
+        linkText={t("viewAllProducts")}
         className="pt-14 md:pt-20 lg:pt-24"
       >
         {products.map((product) => (
           <ProductCard key={product.id} product={product} />
         ))}
       </ContentSection>
       <ContentSection
-        title="Featured stores"
-        description="Explore stores from around the world"
+        title={t("featuredStoresTitle")}
+        description={t("featuredStoresDescription")}
         href="/stores"
-        linkText="View all stores"
+        linkText={t("viewAllStores")}
         className="py-14 md:py-20 lg:py-24"
       >
         {stores.map((store) => (

src/app/[locale]/(lobby)/page.tsx

@@ -10,7 +10,8 @@ import { LobbySkeleton } from "./_components/lobby-skeleton";
 export default async function IndexPage() {
   /**
    * To avoid sequential waterfall requests, multiple promises are passed to fetch data parallelly.
-   * These promises are also passed to the `Lobby` component, making them hot promises. This means they can execute without being awaited, further preventing sequential requests.
+   * These promises are also passed to the `Lobby` component, making them hot promises.
+   * This means they can execute without being awaited, further preventing sequential requests.
    * @see https://www.youtube.com/shorts/A7GGjutZxrs
    * @see https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching
    */

src/app/[locale]/layout.tsx

@@ -9,9 +9,13 @@ import { siteConfig } from "~/config/site";
 import { fontHeading } from "~/lib/fonts";
 import { absoluteUrl, cn } from "~/lib/utils";
 import { Toaster } from "~/components/ui/toaster";
-import { Analytics } from "~/components/analytics";
+import { Analytics as VercelAnalytics } from "~/components/analytics";
 import { ThemeProvider } from "~/components/providers";
 import { TailwindIndicator } from "~/components/tailwind-indicator";
+import { routing } from "~/i18n/routing";
+import { notFound } from "next/navigation";
+import { getMessages } from "next-intl/server";
+import { NextIntlClientProvider } from "next-intl";
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"),
@@ -59,12 +63,27 @@ export const viewport: Viewport = {
 
 interface RootLayoutProps {
   children: React.ReactNode;
+  params: Promise<{ locale: string }>;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default async function RootLayout({
+  children,
+  params,
+}: RootLayoutProps) {
+  // Get the locale from the params
+  const { locale } = await params;
+
+  // Ensure that the incoming `locale` is valid
+  if (!routing.locales.includes(locale as any)) {
+    notFound();
+  }
+
+  // Provide all messages to the client
+  const messages = await getMessages();
+
   return (
     <ClerkProvider>
-      <html lang="en" suppressHydrationWarning>
+      <html lang={locale} suppressHydrationWarning>
         <head />
         <body
           className={cn(
@@ -80,9 +99,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
             enableSystem
             disableTransitionOnChange
           >
-            {children}
+            <NextIntlClientProvider messages={messages}>
+              {children}
+            </NextIntlClientProvider>
             <TailwindIndicator />
-            <Analytics />
+            <VercelAnalytics />
           </ThemeProvider>
           <Toaster />
         </body>