From 6448fb8785105ecae9edeec99606b164a9d4250f Mon Sep 17 00:00:00 2001 From: AbdulrehmanSuliman Date: Tue, 2 May 2023 00:33:45 +0300 Subject: [PATCH 1/5] Initial translation of Installation --- src/components/MDX/MDXComponents.tsx | 8 +++--- src/components/PageHeading.tsx | 2 +- src/content/learn/installation.md | 37 ++++++++++++++-------------- src/styles/index.css | 6 ++++- 4 files changed, 29 insertions(+), 24 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index ba531c9f0..f6e9db8ad 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => ( ); const OL = (p: JSX.IntrinsicElements['ol']) => ( -
    +
      ); const LI = (p: JSX.IntrinsicElements['li']) => (
    1. ); const UL = (p: JSX.IntrinsicElements['ul']) => ( -
        +
          ); const Divider = () => ( @@ -173,7 +173,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'In this chapter' : 'You will learn'; + let title = isChapter ? 'في هذا الفصل' : 'You will learn'; return {children}; } @@ -402,7 +402,7 @@ export const MDXComponents = { return children; }, MaxWidth({children}: {children: any}) { - return
          {children}
          ; + return
          {children}
          ; }, Pitfall, Deprecated, diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index a92cd8f60..4959af77e 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -24,7 +24,7 @@ function PageHeading({ }: PageHeadingProps) { return (
          -
          +
          {breadcrumbs ? : null}

          {title} diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index c5426ea94..62be6bb4b 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -1,25 +1,25 @@ --- -title: Installation +title: التثبيت --- -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. +تم تصميم React من البداية ليكون قابلاً للتبني التدريجي. يمكنك استخدام جزء قليل أو كثير من React، حسب الحاجة. سواء كنت ترغب في الحصول على تجربة من React، أو إضافة بعض التفاعلية إلى صفحة HTML، أو بدء تطبيق معقد يعتمد على React، فهذا القسم سيساعدك على البدء. -* [How to start a new React project](/learn/start-a-new-react-project) -* [How to add React to an existing project](/learn/add-react-to-an-existing-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +* [كيفية بدء مشروع React جديد](/learn/start-a-new-react-project) +* [كيفية إضافة React إلى مشروع موجود](/learn/add-react-to-an-existing-project) +* [كيفية إعداد محرر النصوص الخاص بك](/learn/editor-setup) +* [كيفية تثبيت أدوات مطور React](/learn/react-developer-tools) -## Try React {/*try-react*/} +## جرب React {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +لا يلزم تثبيت أي شيء لتجربة React. جرب تعديل هذا الـsandbox! @@ -33,25 +33,26 @@ export default function App() { } ``` + -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +يمكنك تعديله مباشرةً أو فتحه في علامة تبويب جديدة عن طريق الضغط على زر "Fork" (تفريع) في الزاوية العلوية اليمنى. -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) +تحتوي معظم الصفحات في توثيق React على sandboxes مثل هذا. وفيما عدا توثيق React، هناك العديد من الـsandboxes المتاحة عبر الإنترنت التي تدعم React: على سبيل المثال، [CodeSandbox](https://codesandbox.io/s/new)، [StackBlitz](https://stackblitz.com/fork/react)، أو [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) -### Try React locally {/*try-react-locally*/} +### جرب React محلياً {/*try-react-locally*/} -To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser! +جرب React محلياً على جهازك، [حمّل صفحة ال HTML هذه.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) افتحها في محرر النصوص الخاص بك وفي متصفحك! -## Start a new React project {/*start-a-new-react-project*/} +## ابدأ مشروع React جديد {/*start-a-new-react-project*/} -If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project) +إذا كنت ترغب في بناء تطبيق أو موقع ويب بالكامل باستخدام React، [ابدأ مشروع React جديد.](/learn/start-a-new-react-project) -## Add React to an existing project {/*add-react-to-an-existing-project*/} +## إضافة React إلى مشروع موجود {/*add-react-to-an-existing-project*/} -If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project) +إذا كنت تريد تجربة استخدام React في تطبيق أو موقع ويب موجود، [إضافة React إلى مشروع موجود.](/learn/add-react-to-an-existing-project) -## Next steps {/*next-steps*/} +## الخطوات التالية {/*next-steps*/} -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +انتقل إلى دليل [البدء السريع](/learn) لجولة في أهم مفاهيم React التي ستواجهها يومياً. diff --git a/src/styles/index.css b/src/styles/index.css index 7a2e2fa14..887508de0 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -560,7 +560,7 @@ html.dark .code-step * { .mdx-heading { scroll-margin-top: calc(4rem + 20px); /* Space for the anchor */ - padding-right: 1em; + padding-left: 1em; } .mdx-heading:before { @@ -713,3 +713,7 @@ ol.mdx-illustration-block { width: 100%; } } +[lang='ar'] :is(h1, h2, h3, h4, h5, h6, p), +[lang='ar'] :not(code, pre, .sp-layout) :is(ul, ol, li) { + direction: rtl; +} From 8ba3f03dd2f6a03a1ded4cafb0db1c9a9302fa9a Mon Sep 17 00:00:00 2001 From: AbdulrehmanSuliman Date: Wed, 3 May 2023 00:49:13 +0300 Subject: [PATCH 2/5] Finished translating Installation --- src/components/MDX/MDXComponents.tsx | 6 +++--- src/components/PageHeading.tsx | 2 +- src/sidebarLearn.json | 2 +- src/styles/index.css | 4 ---- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index f6e9db8ad..11c2e1c6b 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => ( ); const OL = (p: JSX.IntrinsicElements['ol']) => ( -
            +
              ); const LI = (p: JSX.IntrinsicElements['li']) => (
            1. ); const UL = (p: JSX.IntrinsicElements['ul']) => ( -
                +
                  ); const Divider = () => ( @@ -402,7 +402,7 @@ export const MDXComponents = { return children; }, MaxWidth({children}: {children: any}) { - return
                  {children}
                  ; + return
                  {children}
                  ; }, Pitfall, Deprecated, diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index 4959af77e..a92cd8f60 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -24,7 +24,7 @@ function PageHeading({ }: PageHeadingProps) { return (
                  -
                  +
                  {breadcrumbs ? : null}

                  {title} diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 89d5cffca..8dcd2cfef 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -21,7 +21,7 @@ ] }, { - "title": "Installation", + "title": "التثبيت", "path": "/learn/installation", "routes": [ { diff --git a/src/styles/index.css b/src/styles/index.css index 887508de0..98030bc30 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -713,7 +713,3 @@ ol.mdx-illustration-block { width: 100%; } } -[lang='ar'] :is(h1, h2, h3, h4, h5, h6, p), -[lang='ar'] :not(code, pre, .sp-layout) :is(ul, ol, li) { - direction: rtl; -} From 2d3c2783039dc7e4028255164a998ce165b773e5 Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Tue, 30 May 2023 20:43:24 +0300 Subject: [PATCH 3/5] Don't translate anything otherwise the content. These changes will be in separate pull request. --- src/components/MDX/MDXComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 11c2e1c6b..ba531c9f0 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -173,7 +173,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'في هذا الفصل' : 'You will learn'; + let title = isChapter ? 'In this chapter' : 'You will learn'; return {children}; } From 52a9539e34e5370f01751a4d20bbb75ed4c27eab Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Tue, 30 May 2023 20:45:36 +0300 Subject: [PATCH 4/5] Don't translate anything otherwise the content --- src/styles/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.css b/src/styles/index.css index 98030bc30..7a2e2fa14 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -560,7 +560,7 @@ html.dark .code-step * { .mdx-heading { scroll-margin-top: calc(4rem + 20px); /* Space for the anchor */ - padding-left: 1em; + padding-right: 1em; } .mdx-heading:before { From 14885fc9e19991c9e0181a5eb1a6037aaa2a8aa9 Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Wed, 31 May 2023 21:43:43 +0300 Subject: [PATCH 5/5] Update installation.md --- src/content/learn/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index 62be6bb4b..405a4005a 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -42,7 +42,7 @@ export default function App() { ### جرب React محلياً {/*try-react-locally*/} -جرب React محلياً على جهازك، [حمّل صفحة ال HTML هذه.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) افتحها في محرر النصوص الخاص بك وفي متصفحك! +لتجربة React محلياً على جهازك، [حمّل صفحة ال HTML هذه.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) افتحها في محرر النصوص الخاص بك وفي متصفحك! ## ابدأ مشروع React جديد {/*start-a-new-react-project*/}