Add Arabic translations for React documentation and components

scripts/list-untranslated-md.mjs

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+/**
+ * Lists Markdown files under src/content with few Arabic letters (likely English).
+ * Threshold is heuristic; raise ARABIC_MIN after more pages are translated.
+ *
+ * Usage: node scripts/list-untranslated-md.mjs
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+
+const ROOT = path.join(process.cwd(), 'src/content');
+const ARABIC = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/g;
+const ARABIC_MIN = 80;
+
+function walk(dir, out = []) {
+  for (const ent of fs.readdirSync(dir, {withFileTypes: true})) {
+    const p = path.join(dir, ent.name);
+    if (ent.isDirectory()) walk(p, out);
+    else if (ent.name.endsWith('.md')) out.push(p);
+  }
+  return out;
+}
+
+const files = walk(ROOT);
+const low = [];
+for (const f of files) {
+  const text = fs.readFileSync(f, 'utf8');
+  const n = (text.match(ARABIC) || []).length;
+  if (n < ARABIC_MIN) low.push({f: path.relative(process.cwd(), f), n});
+}
+low.sort((a, b) => a.n - b.n || a.f.localeCompare(b.f));
+console.log(
+  `Files with <${ARABIC_MIN} Arabic chars: ${low.length} / ${files.length}\n`
+);
+for (const {f, n} of low) console.log(`${String(n).padStart(5)}  ${f}`);

src/components/Layout/Feedback.tsx

@@ -74,11 +74,11 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
         {exit: isSubmitted}
       )}>
       <p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'شكراً لملاحظاتك!' : 'هل كانت هذه الصفحة مفيدة؟'}
       </p>
       {!isSubmitted && (
         <button
-          aria-label="Yes"
+          aria-label="نعم"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
           onClick={() => {
             setIsSubmitted(true);
@@ -90,7 +90,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       )}
       {!isSubmitted && (
         <button
-          aria-label="No"
+          aria-label="لا"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
           onClick={() => {
             setIsSubmitted(true);

src/components/Layout/Footer.tsx

@@ -26,7 +26,7 @@ export function Footer() {
         <div className="col-span-2 md:col-span-1 justify-items-start mt-3.5">
           <ExternalLink
             href="https://opensource.fb.com/"
-            aria-label="Meta Open Source">
+            aria-label="ميتا للمصدر المفتوح">
             <div>
               <svg
                 width="160"
@@ -291,26 +291,26 @@ export function Footer() {
           <div
             className="text-xs text-left rtl:text-right mt-2 pe-0.5"
             dir="ltr">
-            Copyright &copy; Meta Platforms, Inc
+            حقوق النشر © Meta Platforms, Inc
           </div>
           <div
             className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
             onClick={() => {
               // @ts-ignore
               window.__setUwu(false);
             }}>
-            no uwu plz
+            بدون uwu من فضلك
           </div>
           <div
             className="uwu-hidden text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
             onClick={() => {
               // @ts-ignore
               window.__setUwu(true);
             }}>
-            uwu?
+            uwu؟
           </div>
           <div className="uwu-visible text-xs">
-            Logo by
+            شعار من تصميم
             <ExternalLink
               className="ms-1"
               href="https://twitter.com/sawaratsuki1004">
@@ -320,72 +320,72 @@ export function Footer() {
         </div>
         <div className="flex flex-col">
           <FooterLink href="/learn" isHeader={true}>
-            Learn React
+            تعلّم React
           </FooterLink>
-          <FooterLink href="/learn/">Quick Start</FooterLink>
-          <FooterLink href="/learn/installation">Installation</FooterLink>
+          <FooterLink href="/learn/">بدء سريع</FooterLink>
+          <FooterLink href="/learn/installation">التثبيت</FooterLink>
           <FooterLink href="/learn/describing-the-ui">
-            Describing the UI
+            وصف واجهة المستخدم
           </FooterLink>
           <FooterLink href="/learn/adding-interactivity">
-            Adding Interactivity
+            إضافة التفاعلية
           </FooterLink>
-          <FooterLink href="/learn/managing-state">Managing State</FooterLink>
-          <FooterLink href="/learn/escape-hatches">Escape Hatches</FooterLink>
+          <FooterLink href="/learn/managing-state">إدارة الحالة</FooterLink>
+          <FooterLink href="/learn/escape-hatches">منافذ استثنائية</FooterLink>
         </div>
         <div className="flex flex-col">
           <FooterLink href="/reference/react" isHeader={true}>
-            API Reference
+            مرجع API
+          </FooterLink>
+          <FooterLink href="/reference/react">واجهات برمجة React</FooterLink>
+          <FooterLink href="/reference/react-dom">
+            واجهات برمجة React DOM
           </FooterLink>
-          <FooterLink href="/reference/react">React APIs</FooterLink>
-          <FooterLink href="/reference/react-dom">React DOM APIs</FooterLink>
         </div>
         <div className="md:col-start-2 xl:col-start-4 flex flex-col">
           <FooterLink href="/community" isHeader={true}>
-            Community
+            المجتمع
           </FooterLink>
           <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
-            Code of Conduct
+            مدونة السلوك
           </FooterLink>
-          <FooterLink href="/community/team">Meet the Team</FooterLink>
+          <FooterLink href="/community/team">تعرّف على الفريق</FooterLink>
           <FooterLink href="/community/docs-contributors">
-            Docs Contributors
-          </FooterLink>
-          <FooterLink href="/community/acknowledgements">
-            Acknowledgements
+            مساهمو الوثائق
           </FooterLink>
+          <FooterLink href="/community/acknowledgements">شكر وتقدير</FooterLink>
         </div>
         <div className="flex flex-col">
-          <FooterLink isHeader={true}>More</FooterLink>
-          <FooterLink href="/blog">Blog</FooterLink>
+          <FooterLink isHeader={true}>المزيد</FooterLink>
+          <FooterLink href="/blog">المدوّنة</FooterLink>
           <FooterLink href="https://reactnative.dev/">React Native</FooterLink>
           <FooterLink href="https://opensource.facebook.com/legal/privacy">
-            Privacy
+            الخصوصية
           </FooterLink>
           <FooterLink href="https://opensource.fb.com/legal/terms/">
-            Terms
+            الشروط
           </FooterLink>
           <div className="flex flex-row items-center mt-8 gap-x-2">
             <ExternalLink
-              aria-label="React on Facebook"
+              aria-label="React على Facebook"
               href="https://www.facebook.com/react"
               className={socialLinkClasses}>
               <IconFacebookCircle />
             </ExternalLink>
             <ExternalLink
-              aria-label="React on Twitter"
+              aria-label="React على X"
               href="https://twitter.com/reactjs"
               className={socialLinkClasses}>
               <IconTwitter />
             </ExternalLink>
             <ExternalLink
-              aria-label="React on Bluesky"
+              aria-label="React على Bluesky"
               href="https://bsky.app/profile/react.dev"
               className={socialLinkClasses}>
               <IconBsky />
             </ExternalLink>
             <ExternalLink
-              aria-label="React on Github"
+              aria-label="React على GitHub"
               href="https://github.com/facebook/react"
               className={socialLinkClasses}>
               <IconGitHub />