feat: add rtl-detection

xiaoyu2er · xiaoyu2er · commit 8b0b32d94ea7 · 2025-05-31T13:56:11.000-07:00
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -26,6 +26,7 @@
     "next-intl": "^4.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rtl-detect": "^1.1.2",
     "tailwind-merge": "^3.3.0",
     "zod": "3.24.4"
   },
@@ -39,6 +40,7 @@
     "@types/node": "22.15.3",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
+    "@types/rtl-detect": "^1.0.3",
     "eslint": "^8.57.1",
     "eslint-config-next": "15.3.1",
     "github-slugger": "^2.0.0",
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { getLocale, getTranslations } from 'next-intl/server';
 import { baseUrl, createMetadata } from '@/lib/metadata';
 import type { Viewport } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
+import { getLangDir } from 'rtl-detect';
 
 export async function generateMetadata() {
   const t = await getTranslations('meta');
@@ -44,16 +45,18 @@ export default async function Layout({
   children: React.ReactNode;
 }) {
   const locale = await getLocale();
+  const direction = getLangDir(locale);
 
   return (
     <html
       lang={locale}
+      dir={direction}
       className={`${geist.variable} ${mono.variable}`}
       suppressHydrationWarning
     >
-      <body className="flex flex-col min-h-screen">
+      <body className="flex flex-col min-h-screen" dir={direction}>
         <NextIntlClientProvider>
-          <Provider>{children}</Provider>
+          <Provider dir={direction}>{children}</Provider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/apps/docs/src/app/provider.tsx b/apps/docs/src/app/provider.tsx
@@ -2,19 +2,20 @@
 
 import { ORAMA_CONFIGS_MAP } from '@/lib/orama/config';
 import { RootProvider } from 'fumadocs-ui/provider';
+import type { RootProviderProps } from 'fumadocs-ui/provider/base';
 import { useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
-import type { ReactNode } from 'react';
 
 const SearchDialog = dynamic(() => import('@/components/search-dialog'), {
   ssr: false,
 });
 
-export function Provider({ children }: { children: ReactNode }) {
+export function Provider({ children, ...props }: RootProviderProps) {
   const locale = useLocale();
   const config = ORAMA_CONFIGS_MAP[locale];
   return (
     <RootProvider
+      {...props}
       search={
         config
           ? {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
