From 6e18853a544309fabfb88e46e38389f7a20f08d1 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 01:04:49 +0100 Subject: [PATCH 01/20] Update index.md --- docs/tutorial/part-three/index.md | 46 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 1a296fb..097e630 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -1,57 +1,57 @@ --- -title: Creating Nested Layout Components +title: إنشاء مكونات تخطيط متداخل typora-copy-images-to: ./ disableTableOfContents: true --- -Welcome to part three! +مرحبا بكم في الجزء الثالث!! ## What's in this tutorial? -In this part, you'll learn about Gatsby plugins and creating "layout" components. +في هذا الجزء ، ستتعرف على المكونات الإضافية لـ Gatsby وإنشاء مكونات "layout". -Gatsby plugins are JavaScript packages that help add functionality to a Gatsby site. Gatsby is designed to be extensible, which means plugins are able to extend and modify just about everything Gatsby does. +ملحقات Gatsby هي حزم JavaScript تساعد على إضافة وظائف إلى موقع Gatsby. تم تصميم Gatsby ليكون قابلاً للتوسعة ، مما يعني أن الإضافات قادرة على تمديد وتعديل كل ما يفعله Gatsby. -Layout components are for sections of your site that you want to share across multiple pages. For example, sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.org's layout component. -Let's dive into part three. +مكونات النسق مخصصة لأقسام موقعك التي ترغب في مشاركتها عبر عدة صفحات. على سبيل المثال ، سيكون للمواقع عادةً مكون تخطيط برأس وتذييل مشترك. الأشياء الشائعة الأخرى المراد إضافتها إلى التخطيطات هي شريط جانبي و / أو قائمة تنقل. في هذه الصفحة على سبيل المثال ، يمثل الرأس في الجزء العلوي جزءًا من مكون تخطيط gatsbyjs.org. -## Using plugins +دعونا الغوص في الجزء الثالث. -You’re probably familiar with the idea of plugins. Many software systems support adding custom plugins to add new functionality or even modify the core workings of the software. Gatsby plugins work the same way. +## باستخدام الإضافات -Community members (like you!) can contribute plugins (small amounts of JavaScript code) that others can then use when building Gatsby sites. +ربما تكون على دراية بفكرة المكونات الإضافية. تدعم العديد من أنظمة البرامج إضافة مكونات إضافية مخصصة لإضافة وظائف جديدة أو حتى تعديل الأعمال الأساسية للبرنامج. الإضافات Gatsby تعمل بنفس الطريقة. -> There are already hundreds of plugins! Explore the Gatsby [Plugin Library](/plugins/). +يمكن لأعضاء المجتمع (مثلك!) المساهمة في المكونات الإضافية (كميات صغيرة من شفرة JavaScript) التي يمكن للآخرين استخدامها عند إنشاء مواقع Gatsby. -Our goal with plugins is to make them straightforward to install and use. You will likely be using plugins in almost every Gatsby site you build. While working through the rest of the tutorial you’ll have many opportunities to practice installing and using plugins. +> هناك بالفعل المئات من الإضافات! استكشف Gatsby [Plugin Library](/plugins/). -For an initial introduction to using plugins, we'll install and implement the Gatsby plugin for Typography.js. +هدفنا مع المكونات الإضافية هو جعلها سهلة التركيب والاستخدام. من المحتمل أنك تستخدم المكونات الإضافية في كل موقع Gatsby تقريبًا تقوم بإنشائه. أثناء العمل خلال بقية البرنامج التعليمي ، ستتاح لك العديد من الفرص للتدرب على تثبيت المكونات الإضافية واستخدامها. -[Typography.js](https://kyleamathews.github.io/typography.js/) is a JavaScript library which generates global base styles for your site's typography. The library has a [corresponding Gatsby plugin](/packages/gatsby-plugin-typography/) to streamline using it in a Gatsby site. +للحصول على مقدمة أولية لاستخدام المكونات الإضافية ، سنقوم بتثبيت وتطبيق Gatsby plugin لـ Typography.js. +[Typography.js] (https://kyleamathews.github.io/typography.js/) هي مكتبة JavaScript تنشئ أنماطًا أساسية عالمية لطباعة موقعك. تحتوي المكتبة على [ملحق Gatsby المقابل] (/package/gatsby-plugin-typography/) لتبسيط استخدامه في موقع Gatsby. ### ✋ Create a new Gatsby site As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory: ```shell -gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world -cd tutorial-part-three +غاتسبي تعليمي جديد ، الجزء الثالث https://github.com/gatsbyjs/gatsby-starter-hello-world +مؤتمر نزع السلاح تعليمي الجزء الثالث ``` -### ✋ Install and configure `gatsby-plugin-typography` +### ✋ تثبيت وتكوين `gatsby-plugin-typography` -There are two main steps to using a plugin: Installing and configuring. +هناك خطوتان أساسيتان لاستخدام مكون إضافي: التثبيت والتكوين. -1. Install the `gatsby-plugin-typography` NPM package. +1. تحميل هذا `gatsby-plugin-typography` NPM package. ```shell npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates ``` -> Note: Typography.js requires a few additional packages, so those are included in the instructions. Additional requirements like this will be listed in the "install" instructions of each plugin. +> ملاحظة: يتطلب Typography.js بعض الحزم الإضافية ، بحيث يتم تضمينها في الإرشادات. سيتم إدراج متطلبات إضافية مثل هذا في تعليمات "التثبيت" لكل مكون إضافي. -2. Edit the file `gatsby-config.js` at the root of your project to the following: +2. قم بتحرير الملف `gatsby-config.js` في جذر مشروعك إلى ما يلي: ```javascript:title=gatsby-config.js module.exports = { @@ -66,11 +66,11 @@ module.exports = { } ``` -The `gatsby-config.js` is another special file that Gatsby will automatically recognize. This is where you add plugins and other site configuration. +يعد "gatsby-config.js" ملفًا خاصًا آخر يتعرف عليه Gatsby تلقائيًا. هذا هو المكان الذي تضيف فيه المكونات الإضافية وتهيئة الموقع الأخرى. -> Check out the [doc on gatsby-config.js](/docs/gatsby-config/) to read more, if you wish. +> تحقق من [doc on gatsby-config.js] (/docs/gatsby-config/) لقراءة المزيد ، إذا كنت ترغب في ذلك. -3. Typography.js needs a configuration file. Create a new directory called `utils` in the `src` directory. Then add a new file called `typography.js` to `utils` and copy the following into the file: +3. Typography.js يحتاج إلى ملف التكوين. قم بإنشاء دليل جديد يسمى `utils` في دليل` src`. ثم قم بإضافة ملف جديد يسمى `typography.js` إلى` utils` وانسخ ما يلي إلى الملف: ```javascript:title=src/utils/typography.js import Typography from "typography" From 3f47ccf51e37f2815dbad0767297f7e7d0d75951 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 17:40:36 +0100 Subject: [PATCH 02/20] Update index.md --- docs/tutorial/part-three/index.md | 59 ++++++++++++++++--------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 097e630..bfd0df7 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -6,7 +6,7 @@ disableTableOfContents: true مرحبا بكم في الجزء الثالث!! -## What's in this tutorial? +## ماذا يوجد في هذا الدليل التطبيقي؟? في هذا الجزء ، ستتعرف على المكونات الإضافية لـ Gatsby وإنشاء مكونات "layout". @@ -92,10 +92,10 @@ Once you load the site, if you inspect the generated HTML using the Chrome devel ![typography-styles](typography-styles.png) -### ✋ Make some content and style changes +### ✋ قم بإجراء بعض التغييرات في المحتوى والأسلوب -Copy the following into your `src/pages/index.js` so you can see the -effect of the CSS generated by Typography.js better. +انسخ ما يلي إلى `src/pages/index.js` حتى تتمكن من رؤية +تأثير CSS التي تم إنشاؤها بواسطة Typography.js أفضل. ```jsx:title=src/pages/index.js import React from "react" @@ -111,11 +111,12 @@ export default () => ( ) ``` -Your site should now look like this: +يجب أن يبدو موقعك الآن هكذا: ![no-layout](no-layout.png) -Let's make a quick improvement. Many sites have a single column of text centered in the middle of the page. To create this, add the following styles to the +دعونا نجعل تحسنا سريعا. تحتوي العديد من المواقع على عمود واحد من النص يتمركز في منتصف الصفحة. لإنشاء هذا ، أضف الأنماط التالية إلى + `
` in `src/pages/index.js`. ```jsx:title=src/pages/index.js @@ -135,11 +136,11 @@ export default () => ( ![with-layout2](with-layout2.png) -Sweet. You've installed and configured your very first Gatsby plugin! +حلو. لقد قمت بتثبيت وتهيئة أول مكون إضافي لبرنامج Gatsby! -## Creating layout components +## إنشاء مكونات التخطيط -Now let's move on to learning about layout components. To get ready for this part, add a couple new pages to your project: an about page and a contact page. +الآن دعنا ننتقل إلى التعرف على مكونات التخطيط. للاستعداد لهذا الجزء ، أضف صفحتين جديدتين إلى مشروعك: صفحة حول وصفحة اتصال. ```jsx:title=src/pages/about.js import React from "react" @@ -165,19 +166,19 @@ export default () => ( ) ``` -Let's see what the new about page looks like: +لنرى كيف تبدو الصفحة الجديدة: ![about-uncentered](about-uncentered.png) -Hmm. It would be nice if the content of the two new pages were centered like the index page. And it would be nice to have some sort of global navigation so it's easy for visitors to find and visit each of the sub-pages. +سيكون من الرائع أن يتم توسيط محتوى الصفحتين الجديدتين مثل صفحة الفهرس. وسيكون من الجيد أن يكون لديك نوع من التنقل العالمي ، لذلك يسهل على الزائرين العثور على كل صفحة من الصفحات الفرعية وزيارتها. -You'll tackle these changes by creating your first layout component. +ستتعامل مع هذه التغييرات عن طريق إنشاء مكون التخطيط الأول. -### ✋ Create your first layout component +### ✋ قم بإنشاء مكون التصميم الأول الخاص بك -1. Create a new directory at `src/components`. +1. إنشاء دليل جديد في `src/components`. -2. Create a very basic layout component at `src/components/layout.js`: +2. قم بإنشاء مكون تخطيط أساسي جدًا على `src/components/layout.js`: ```jsx:title=src/components/layout.js import React from "react" @@ -189,7 +190,7 @@ export default ({ children }) => ( ) ``` -3. Import this new layout component into your `src/pages/index.js` page component: +3. قم باستيراد مكون التصميم الجديد هذا إلى مكون الصفحة src/pages/index.js`: ```jsx:title=src/pages/index.js import React from "react" @@ -208,17 +209,17 @@ export default () => ( ![with-layout2](with-layout2.png) -Sweet, the layout is working! The content of your index page is still centered. +الحلو ، والتخطيط يعمل! لا يزال محتوى صفحة الفهرس مركَّزًا. -But try navigating to `/about/`, or `/contact/`. The content on those pages still won't be centered. +ولكن حاول الانتقال إلى `/about/`, أو `/contact/`. لا يزال المحتوى على تلك الصفحات غير مركز. -4. Import the layout component in `about.js` and `contact.js` (as you did for `index.js` in the previous step). +4. قم باستيراد مكون التخطيط في `about.js` و` contact.js` (كما فعلت بالنسبة لـ index.js` في الخطوة السابقة). -The content of all three of your pages is centered thanks to this single shared layout component! +تتمحور محتويات الصفحات الثلاث جميعها بفضل مكون التخطيط المشترك هذا! -### ✋ Add a site title +### ✋ إضافة عنوان الموقع -1. Add the following line to your new layout component: +1. أضف السطر التالي إلى مكون التصميم الجديد الخاص بك: ```jsx:title=src/components/layout.js import React from "react" @@ -231,13 +232,13 @@ export default ({ children }) => ( ) ``` -If you go to any of your three pages, you'll see the same title added, e.g. the `/about/` page: +إذا ذهبت إلى أي من صفحاتك الثلاث ، فستظهر العنوان نفسه مضافًا ، على سبيل المثال صفحة `/about/`: ![with-title](with-title.png) -### ✋ Add navigation links between pages +### ✋ إضافة روابط التنقل بين الصفحات -1. Copy the following into your layout component file: +1. انسخ ما يلي إلى ملف مكون التخطيط الخاص بك: ```jsx:title=src/components/layout.js import React from "react" @@ -272,10 +273,10 @@ export default ({ children }) => ( ![with-navigation2](with-navigation2.png) -And there you have it! A three page site with basic global navigation. +وهناك لديك! موقع من ثلاث صفحات مع الملاحة العالمية الأساسية. -_Challenge:_ With your new "layout component" powers, trying adding headers, footers, global navigation, sidebars, etc. to your Gatsby sites! +_Challenge: _ بفضل قوى "مكون التخطيط" الجديدة ، حاول إضافة الرؤوس والتذييلات والملاحة العالمية والأشرطة الجانبية وما إلى ذلك إلى مواقع Gatsby الخاصة بك! -## What's coming next? +## ما الذي سيأتي بعد ذلك؟ -Continue on to [part four of the tutorial](/tutorial/part-four/) where you'll start learning about Gatsby's data layer and programmatically creating pages! +تابع إلى [الجزء الرابع من الدليل التطبيقي] (/tutorial/part-four/) حيث ستبدأ في التعرف على طبقة بيانات Gatsby وإنشاء صفحات برمجيًا! From 16da16ed98f06e1135a4917af63634dd087b5abc Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 17:45:23 +0100 Subject: [PATCH 03/20] Update index.md --- docs/tutorial/part-three/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index bfd0df7..6792171 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -278,5 +278,4 @@ export default ({ children }) => ( _Challenge: _ بفضل قوى "مكون التخطيط" الجديدة ، حاول إضافة الرؤوس والتذييلات والملاحة العالمية والأشرطة الجانبية وما إلى ذلك إلى مواقع Gatsby الخاصة بك! ## ما الذي سيأتي بعد ذلك؟ - -تابع إلى [الجزء الرابع من الدليل التطبيقي] (/tutorial/part-four/) حيث ستبدأ في التعرف على طبقة بيانات Gatsby وإنشاء صفحات برمجيًا! +متابعة إلى [الجزء الرابع من الدليل التطبيقي](/tutorial/part-four/) حيث ستبدأ في التعرف على طبقة بيانات Gatsby وإنشاء صفحات برمجياً! From 845fd17b35656ba6be0e75b5bce012db61cd15fd Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 22:15:26 +0100 Subject: [PATCH 04/20] Update index.md --- docs/tutorial/part-three/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 6792171..46cbe09 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -30,7 +30,7 @@ disableTableOfContents: true للحصول على مقدمة أولية لاستخدام المكونات الإضافية ، سنقوم بتثبيت وتطبيق Gatsby plugin لـ Typography.js. [Typography.js] (https://kyleamathews.github.io/typography.js/) هي مكتبة JavaScript تنشئ أنماطًا أساسية عالمية لطباعة موقعك. تحتوي المكتبة على [ملحق Gatsby المقابل] (/package/gatsby-plugin-typography/) لتبسيط استخدامه في موقع Gatsby. -### ✋ Create a new Gatsby site +### ✋ إنشاء موقع Gatsby جديد As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory: @@ -82,7 +82,7 @@ export const { scale, rhythm, options } = typography export default typography ``` -4. Start the development server. +4. تشغيل خادم التطوير . ```shell gatsby develop From 5f63854ae0f5ee2986d958e92fc9ef763d36ed3e Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:02 +0100 Subject: [PATCH 05/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 46cbe09..32e972a 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -25,7 +25,7 @@ disableTableOfContents: true > هناك بالفعل المئات من الإضافات! استكشف Gatsby [Plugin Library](/plugins/). -هدفنا مع المكونات الإضافية هو جعلها سهلة التركيب والاستخدام. من المحتمل أنك تستخدم المكونات الإضافية في كل موقع Gatsby تقريبًا تقوم بإنشائه. أثناء العمل خلال بقية البرنامج التعليمي ، ستتاح لك العديد من الفرص للتدرب على تثبيت المكونات الإضافية واستخدامها. +هدفنا مع المكونات الإضافية هو جعلها سهلة التركيب والاستخدام. من المحتمل أنك تستخدم المكونات الإضافية في كل موقع Gatsby تقريبًا تقوم بإنشائه. أثناء العمل خلال بقية الدليل التطبيقي، ستتاح لك العديد من الفرص للتدرب على تثبيت المكونات الإضافية واستخدامها. للحصول على مقدمة أولية لاستخدام المكونات الإضافية ، سنقوم بتثبيت وتطبيق Gatsby plugin لـ Typography.js. From f9ce728f3cf506ea35a50e1e2407e61fafc8faab Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:10 +0100 Subject: [PATCH 06/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 32e972a..9e79df5 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -29,7 +29,7 @@ disableTableOfContents: true للحصول على مقدمة أولية لاستخدام المكونات الإضافية ، سنقوم بتثبيت وتطبيق Gatsby plugin لـ Typography.js. -[Typography.js] (https://kyleamathews.github.io/typography.js/) هي مكتبة JavaScript تنشئ أنماطًا أساسية عالمية لطباعة موقعك. تحتوي المكتبة على [ملحق Gatsby المقابل] (/package/gatsby-plugin-typography/) لتبسيط استخدامه في موقع Gatsby. +[Typography.js] (https://kyleamathews.github.io/typography.js/) هي مكتبة JavaScript تنشئ تناسيق أساسية عالمية لطباعة موقعك. تحتوي المكتبة على [ملحق Gatsby المقابل] (/package/gatsby-plugin-typography/) لتبسيط استخدامه في موقع Gatsby. ### ✋ إنشاء موقع Gatsby جديد As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory: From 698de15096798ca1633ac7cfe247427ff2284635 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:24 +0100 Subject: [PATCH 07/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 9e79df5..3ad9e2e 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -35,7 +35,7 @@ disableTableOfContents: true As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory: ```shell -غاتسبي تعليمي جديد ، الجزء الثالث https://github.com/gatsbyjs/gatsby-starter-hello-world +gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world مؤتمر نزع السلاح تعليمي الجزء الثالث ``` From 04e9a717ea1a185c2085334a4632d6005dd43b58 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:31 +0100 Subject: [PATCH 08/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 3ad9e2e..dbf8380 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -170,7 +170,7 @@ export default () => ( ![about-uncentered](about-uncentered.png) -سيكون من الرائع أن يتم توسيط محتوى الصفحتين الجديدتين مثل صفحة الفهرس. وسيكون من الجيد أن يكون لديك نوع من التنقل العالمي ، لذلك يسهل على الزائرين العثور على كل صفحة من الصفحات الفرعية وزيارتها. +سيكون من الرائع أن يتم توسيط محتوى الصفحتين الجديدتين مثل صفحة الفهرس. وسيكون من الجيد أن يكون لديك نوع من التنقل الشامل ، لذلك يسهل على الزائرين العثور على كل صفحة من الصفحات الفرعية وزيارتها. ستتعامل مع هذه التغييرات عن طريق إنشاء مكون التخطيط الأول. From c445eb4cd383d142ae46130657f140d82c98b406 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:40 +0100 Subject: [PATCH 09/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index dbf8380..fd7bccc 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -219,7 +219,7 @@ export default () => ( ### ✋ إضافة عنوان الموقع -1. أضف السطر التالي إلى مكون التصميم الجديد الخاص بك: +1. أضف السطر التالي إلى مكون التخطيط الجديد الخاص بك: ```jsx:title=src/components/layout.js import React from "react" From cfb43f275cf1277a606e402471abf8ad2f88c4cc Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:47 +0100 Subject: [PATCH 10/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index fd7bccc..5cacab8 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -275,7 +275,7 @@ export default ({ children }) => ( وهناك لديك! موقع من ثلاث صفحات مع الملاحة العالمية الأساسية. -_Challenge: _ بفضل قوى "مكون التخطيط" الجديدة ، حاول إضافة الرؤوس والتذييلات والملاحة العالمية والأشرطة الجانبية وما إلى ذلك إلى مواقع Gatsby الخاصة بك! +__تحدي: _بفضل قوى "مكون التخطيط" الجديدة ، حاول إضافة الرؤوس والتذييلات والتنقل الشامل والأشرطة الجانبية وما إلى ذلك إلى مواقع Gatsby الخاصة بك! ## ما الذي سيأتي بعد ذلك؟ متابعة إلى [الجزء الرابع من الدليل التطبيقي](/tutorial/part-four/) حيث ستبدأ في التعرف على طبقة بيانات Gatsby وإنشاء صفحات برمجياً! From a2b7d8ba51e81e4b475b74cc830280d3c86247a4 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:26:55 +0100 Subject: [PATCH 11/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 5cacab8..8a8327a 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -273,7 +273,7 @@ export default ({ children }) => ( ![with-navigation2](with-navigation2.png) -وهناك لديك! موقع من ثلاث صفحات مع الملاحة العالمية الأساسية. +وهناك لديك! موقع من ثلاث صفحات مع تنقل شامل أساسي. __تحدي: _بفضل قوى "مكون التخطيط" الجديدة ، حاول إضافة الرؤوس والتذييلات والتنقل الشامل والأشرطة الجانبية وما إلى ذلك إلى مواقع Gatsby الخاصة بك! From 9c88c767f4b941d3a677b82f5b242f017d01ba62 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:27:03 +0100 Subject: [PATCH 12/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 8a8327a..e9dec28 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -176,7 +176,7 @@ export default () => ( ### ✋ قم بإنشاء مكون التصميم الأول الخاص بك -1. إنشاء دليل جديد في `src/components`. +1. إنشاء مجلد جديد في `src/components`. 2. قم بإنشاء مكون تخطيط أساسي جدًا على `src/components/layout.js`: From ea6bb8e5a0f0fa446b572a2593414cbd670ce608 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:27:10 +0100 Subject: [PATCH 13/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index e9dec28..4b51627 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -36,7 +36,7 @@ As we mentioned in [part two](/tutorial/part-two/), at this point it's probably ```shell gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world -مؤتمر نزع السلاح تعليمي الجزء الثالث +cd tutorial-part-three ``` ### ✋ تثبيت وتكوين `gatsby-plugin-typography` From 1452782d804ea07f1fff4993f74fcb2632ad9ed1 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:27:19 +0100 Subject: [PATCH 14/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 4b51627..a36b6de 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -115,7 +115,7 @@ export default () => ( ![no-layout](no-layout.png) -دعونا نجعل تحسنا سريعا. تحتوي العديد من المواقع على عمود واحد من النص يتمركز في منتصف الصفحة. لإنشاء هذا ، أضف الأنماط التالية إلى +دعونا نجعل تحسنا سريعا. تحتوي العديد من المواقع على عمود واحد من النص يتمركز في منتصف الصفحة. لإنشاء هذا ، أضف التناسيق التالية إلى `
` in `src/pages/index.js`. From 0f0adfc94182346409fedff81fae2acd44c64a3d Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:30:43 +0100 Subject: [PATCH 15/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index a36b6de..55d62ff 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -43,7 +43,7 @@ cd tutorial-part-three هناك خطوتان أساسيتان لاستخدام مكون إضافي: التثبيت والتكوين. -1. تحميل هذا `gatsby-plugin-typography` NPM package. +1. تحميل `gatsby-plugin-typography` حزمة NPM. ```shell npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates From 5321ce9bd9c83613e427e7331660df74e87a06b4 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:30:54 +0100 Subject: [PATCH 16/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 55d62ff..b9c4a75 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -66,7 +66,7 @@ module.exports = { } ``` -يعد "gatsby-config.js" ملفًا خاصًا آخر يتعرف عليه Gatsby تلقائيًا. هذا هو المكان الذي تضيف فيه المكونات الإضافية وتهيئة الموقع الأخرى. +يعد `gatsby-config.js` ملفًا خاصًا آخر يتعرف عليه Gatsby تلقائيًا. هذا هو المكان الذي تضيف فيه الإضافات وبقية تهيئة الموقع الأخرى. > تحقق من [doc on gatsby-config.js] (/docs/gatsby-config/) لقراءة المزيد ، إذا كنت ترغب في ذلك. From 1fe26c0b5d29df2a97624b4b5755ac7c035f1171 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:31:05 +0100 Subject: [PATCH 17/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index b9c4a75..d6fddd7 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -70,7 +70,7 @@ module.exports = { > تحقق من [doc on gatsby-config.js] (/docs/gatsby-config/) لقراءة المزيد ، إذا كنت ترغب في ذلك. -3. Typography.js يحتاج إلى ملف التكوين. قم بإنشاء دليل جديد يسمى `utils` في دليل` src`. ثم قم بإضافة ملف جديد يسمى `typography.js` إلى` utils` وانسخ ما يلي إلى الملف: +3. Typography.js يحتاج إلى ملف التكوين. قم بإنشاء مجلد جديد يسمى `utils` في دليل` src`. ثم قم بإضافة ملف جديد يسمى `typography.js` إلى` utils` وانسخ ما يلي إلى الملف: ```javascript:title=src/utils/typography.js import Typography from "typography" From dfcb6c483421609f0615c0c05d20ec2a44b06ed9 Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:31:15 +0100 Subject: [PATCH 18/20] Update docs/tutorial/part-three/index.md Co-Authored-By: imed jaberi --- docs/tutorial/part-three/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index d6fddd7..d1ac6cf 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -136,7 +136,7 @@ export default () => ( ![with-layout2](with-layout2.png) -حلو. لقد قمت بتثبيت وتهيئة أول مكون إضافي لبرنامج Gatsby! +حلو. لقد قمت بتثبيت وتهيئة أول مكون إضافي لـ Gatsby! ## إنشاء مكونات التخطيط From d8a706ec6cda27964b74f77819817995a2059b6f Mon Sep 17 00:00:00 2001 From: moumni Date: Sun, 5 Jan 2020 23:43:49 +0100 Subject: [PATCH 19/20] Update index.md --- docs/tutorial/part-three/index.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index d1ac6cf..fff3ad4 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -87,9 +87,8 @@ export default typography ```shell gatsby develop ``` - -Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you’ll see that the typography plugin added a `