diff --git a/src/content/docs/ar/editor-setup.mdx b/src/content/docs/ar/editor-setup.mdx index 1cab7f580f1d9..103cb1ec72a7e 100644 --- a/src/content/docs/ar/editor-setup.mdx +++ b/src/content/docs/ar/editor-setup.mdx @@ -1,5 +1,5 @@ --- -title: إعداد البيئة البرمجية +title: إعداد المحرر description: أعِد محررك لبناء المشاريع مع أسترو. i18nReady: true --- @@ -43,11 +43,11 @@ import ReadMore from '~/components/ReadMore.astro'; يقدم مجتمعنا المذهل عدة إضافات للمحررات الشهيرة الأخرى، بما في ذلك: - [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل [VSCodium](https://vscodium.com/) -- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova - [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ indentation على محررات Vim و Neovim - Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) و [TreeSitter](https://github.com/virchau13/tree-sitter-astro) لـ Neovim - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim - emacs - راجع تعليمات ل [تكوين Emacs و Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) للعمل مع أسترو - [أسترو syntax highlighting ل Sublime Text](https://packagecontrol.io/packages/Astro) - حزمة أسترو Sublime Text, متاح على مستودع Sublime Text. +- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova ## المحررات في المتصفح @@ -71,6 +71,10 @@ import ReadMore from '~/components/ReadMore.astro'; يمكن العثور على تعليمات التثبيت والتكامل مع المحررات ومعلومات إضافية في ملف README الخاص بالمشروع. +### Biome + +[Biome](https://biomejs.dev/) أداة شاملة للتنسيق والـ linting. لديها دعم تجريبي لملفات .astro ويمكن استخدامها بدلًا من مزيج أدوات متعددة في بعض المشاريع. + ### Prettier [Prettier](https://prettier.io/) هو [منسق](https://ar.wikipedia.org/wiki/برتي_برنت) شائع لأكواد JavaScript ،HTML ،CSS وغيرها. إذا كنت تستخدم [إضافة أسترو لـ VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) أو [إضافة أسترو للمحررات الأخرى](#محررات-برمجية-أخرى)، فستجدها تتضمن تنسيق الكود بـ Prettier. @@ -83,43 +87,61 @@ import ReadMore from '~/components/ReadMore.astro'; ```shell - npm install --save-dev prettier prettier-plugin-astro + npm install --save-dev --save-exact prettier prettier-plugin-astro ``` ```shell - pnpm add -D prettier prettier-plugin-astro + pnpm add --save-dev --save-exact prettier prettier-plugin-astro ``` ```shell - yarn add --dev prettier prettier-plugin-astro + yarn add --dev --exact prettier prettier-plugin-astro ``` -2. أنشئ ملف الإعدادات `.prettierrc.mjs` في المجلد الأساسي للمشروع وأضف له `prettier-plugin-astro`. +2. أنشئ ملف الإعدادات (`.prettierrc` آو `.prettierrc.json` آو `.prettierrc.mjs` آو [أحد الصيغ المدعومة](https://prettier.io/docs/configuration)) في المجلد الأساسي للمشروع وأضف له `prettier-plugin-astro`. - في هذا الملف, يوجد أيضا إعداد يدوي لمحلل ملفات Astro. + في هذا الملف, يوجد أيضا إعداد يدوي لمحلل ملفات استرو. - ```js title=".prettierrc.mjs" - /** @type {import("prettier").Config} */ - export default { - plugins: ['prettier-plugin-astro'], - overrides: [ + ```json title=".prettierrc" + { + "plugins": ["prettier-plugin-astro"], + "overrides": [ { - files: '*.astro', - options: { - parser: 'astro', - }, - }, + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] + } + ``` + +3. اختياري، تثبيت إضافات `Prettier` أخرى لمشروعك. قد يلزم إدراج هذه الإضافات الإضافية بترتيب معين. على سبيل المثال، إذا كنت تستخدم `Tailwind،` يجب أن يكون `prettier-plugin-tailwindcss` هو آخر إضافة في مصفوفة الإضافات. + + ```json title=".prettierrc" + { + "plugins": [ + "prettier-plugin-astro", + "prettier-plugin-tailwindcss" // needs to be last ], - }; + "overrides": [ + { + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] + } ``` -3. قم بتشغيل الأمر `prettier . --write` في الجهاز الطرفي (terminal) لتنسيق ملفاتك. +4. شغّل أمر التنسيق في الطرفية لتنسيق ملفات المشروع. - + ```shell npx prettier . --write @@ -132,10 +154,12 @@ import ReadMore from '~/components/ReadMore.astro'; ```shell - yarn prettier . --write + yarn exec prettier . --write ``` راجع ملف README [لإضافة أسترو على Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) لمزيد من المعلومات حول الخيارات المدعومة وكيفية إعداد Prettier داخل VS Code والمزيد. + +[dprint](https://dprint.dev/) هو مُنسّق بديل قابل للتوسع يدعم لغات متعددة، ويمكن إضافة دعم لملفات `.astro` عبر ملحق [markup_fmt plugin](https://github.com/g-plane/markup_fmt). \ No newline at end of file diff --git a/src/content/docs/ar/getting-started.mdx b/src/content/docs/ar/getting-started.mdx index 277b81dd8f698..e8ad83a1cdead 100644 --- a/src/content/docs/ar/getting-started.mdx +++ b/src/content/docs/ar/getting-started.mdx @@ -1,13 +1,13 @@ --- title: ابدء -description: مقدمة أساسية إلى أسترو. +description: أدلة وموارد ومراجع واجهة برمجة التطبيقات (API) لمساعدتك على البناء باستخدام أسترو — إطار الويب المخصص للمواقع المعتمدة على المحتوى. i18nReady: true tableOfContents: false editUrl: false next: false hero: title: مستندات أسترو - tagline: المرشدين والموارد ومراجع API لمساعدتك في البناء مع أسترو. + tagline: أدلة وموارد ومراجع API لمساعدتك على البناء باستخدام أسترو. actions: - text: ثبت أسترو icon: rocket @@ -20,8 +20,6 @@ hero: tagline: مدعوم من أسترو ومساهمي البرامج المفتوحة المصدر. linkText: انضم إلينا! link: /ar/contribute/ -banner: - content: هل تريد تجربة النسخة الأولية من الإصدار 5 ؟ اقرأ الإصدار 5. دليل الترقية! --- import { CardGrid } from '@astrojs/starlight/components' @@ -31,28 +29,28 @@ import SplitCard from '~/components/Landing/SplitCard.astro' import Discord from '~/components/Landing/Discord.astro' - - استكشف [Astro starter themes](https://astro.build/themes/) للمدونات ، المحافظ ، المستندات ، الصفحات المقصودة ، SaaS ، التسويق ، مواقع التجارة الإلكترونية ، والمزيد! + + استكشف [السمات المبدئية لأسترو](https://astro.build/themes/) للمدونات، المحافظ، المستندات، الصفحات التعريفية، تطبيقات SaaS، مواقع التسويق، التجارة الإلكترونية والمزيد! - - أكمل برنامجنا التمهيدي [دروس لبناء مدونة](/ar/tutorial/0-introduction/) لتعلم الأساسيات وإنشاء موقعك الأول باستخدام أسترو. + + أكمل [دليلنا التمهيدي لبناء مدونة](/ar/tutorial/0-introduction/) لتعلّم الأساسيات وإنشاء موقعك الأول باستخدام أسترو. ```sh - # create a new project with npm + # إنشاء مشروع جديد باستخدام npm npm create astro@latest ``` - - [دليلنا للتثبيت](/ar/install-and-setup/) لديه إرشادات خطوة بخطوة لتثبيت أسترو باستخدام معالج CLI الخاص بنا ، وإنشاء مشروع جديد من مستودع Astro Github موجود ، ولتثبيت أسترو يدويًا. + + يحتوي [دليل التثبيت](/ar/install-and-setup/) على إرشادات خطوة بخطوة لتثبيت أسترو عبر معالج CLI، أو إنشاء مشروع جديد من مستودع أسترو في GitHub، أو تثبيته يدويًا. - - - [ميزات أسترو الرئيسية](/ar/concepts/why-astro/) - - [معمارية جزر أسترو](/ar/concepts/islands/) + + - [الميزات الأساسية لأسترو](/ar/concepts/why-astro/) + - [معمارية الجزر](/ar/concepts/islands/) - [مكونات أسترو](/ar/basics/astro-components/) - - [بناء جملة قالب أسترو](/ar/reference/astro-syntax/) + - [صياغة قوالب أسترو](/ar/reference/astro-syntax/) diff --git a/src/content/docs/ar/guides/fonts.mdx b/src/content/docs/ar/guides/fonts.mdx index f992bbef81274..7f985f8d34a55 100644 --- a/src/content/docs/ar/guides/fonts.mdx +++ b/src/content/docs/ar/guides/fonts.mdx @@ -2,28 +2,29 @@ title: استخدام الخطوط المخصصة sidebar: label: الخطوط -description: > - هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟ - يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة. +description: >- + هل ترغب في إضافة خطوط مخصصة إلى موقع أسترو؟ يمكنك استخدام خطوط Google عبر Fontsource أو إضافة أي خط تختاره بنفسك. i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { Steps } from '@astrojs/starlight/components' -سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها في مكوناتك. +سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها داخل مكوناتك. + +:::tip[واجهة الخطوط التجريبية (Experimental Fonts API)] +اطّلع على [واجهة الخطوط التجريبية في أسترو](/ar/reference/experimental-flags/fonts/) التي تتيح لك استخدام الخطوط من نظامك المحلي أو من مزودي خطوط مختلفين عبر واجهة موحدة قابلة للتخصيص وآمنة الأنواع. +::: ## استخدام ملف خط محلي سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط `DistantGalaxy.woff`. - -1. أضف ملف الخط إلى `public/fonts/`. - -2. أضف البيان التالي `@font-face` إلى CSS الخاص بك. يمكن أن يكون ذلك في ملف `.css` عام تستورده، أو في كتلة ` ``` - ## استخدام Fontsource -يُبسط مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها. +يُسهل مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. فهو يوفّر حزم npm يمكنك تثبيتها للخطوط التي تريد استخدامها. - -1. ابحث عن الخط الذي تريد استخدامه في [كتالوج Fontsource](https://fontsource.org/). في هذا المثال، سيتم استخدام [Twinkle Star](https://fontsource.org/fonts/twinkle-star). - -2. قم بتثبيت الحزمة الخاصة بالخط الذي اخترته باستخدام أداة إدارة الحزم مثل npm، pnpm أو yarn. +1. ابحث عن الخط الذي ترغب في استخدامه في [كتالوج Fontsource](https://fontsource.org/). في هذا المثال، سنستخدم خط [Twinkle Star](https://fontsource.org/fonts/twinkle-star). +2. قم بتثبيت الحزمة الخاصة بالخط الذي اخترته. @@ -81,12 +79,12 @@ import { Steps } from '@astrojs/starlight/components' :::tip - ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط. + يمكنك العثور على اسم الحزمة الصحيح في قسم **“التثبيت السريع (Quick Installation)”** في صفحة كل خط على موقع Fontsource. سيبدأ الاسم بـ `@fontsource/` أو `@fontsource-variable/` متبوعًا باسم الخط. ::: -3. استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك. +3. استورد حزمة الخط داخل المكون الذي ترغب باستخدام الخط فيه. غالبًا ما يُنصح بالقيام بذلك داخل مكون التخطيط العام (layout) لضمان توفر الخط عبر جميع الصفحات. - سيقوم الاستيراد بإضافة القواعد اللازمة لـ `@font-face` تلقائيًا لإعداد الخط. + سيضيف الاستيراد تلقائيًا قواعد `@font-face` اللازمة لإعداد الخط. ```astro title="src/layouts/BaseLayout.astro" --- @@ -94,55 +92,43 @@ import { Steps } from '@astrojs/starlight/components' --- ``` -4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro. +4. استخدم اسم الخط كما هو موضح في مثال `body` بصفحة الخط على موقع Fontsource كقيمة لخاصية `font-family`. ويمكنك استخدامه في أي مكان تكتب فيه CSS داخل مشروعك. ```css h1 { font-family: "Twinkle Star", cursive; } ``` - لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام. ## تسجيل الخطوط في Tailwind -إذا كنت تستخدم [تكامل Tailwind](/ar/guides/integrations-guide/tailwind/)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة [`@font-face` لخط محلي](#استخدام-ملف-خط-محلي) أو استخدام [استراتيجية الاستيراد الخاصة بـ Fontsource](#استخدام-fontsource) لتثبيت خطك. +إذا كنت تستخدم [Tailwind](/ar/guides/styling/#tailwind)، يمكنك استخدام أي من الطرق السابقة لتثبيت خطك مع بعض التعديلات البسيطة. يمكنك إما إضافة [تعليمة `@font-face` لخط محلي](#استخدام-ملف-خط-محلي) أو استخدام [طريقة الاستيراد الخاصة بـ Fontsource](#استخدام-fontsource). -لتسجيل خطك في Tailwind: +لتسجيل الخط في Tailwind: +1. اتبع أيًّا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة الخاصة بإضافة `font-family` إلى CSS. +2. أضف اسم الخط إلى `src/styles/global.css`. -1. اتبع أيًا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة من إضافة `font-family` إلى CSS. - -2. أضف اسم الخط إلى `tailwind.config.mjs`. - - هذا المثال يضيف `Inter` إلى مجموعة الخطوط بدون سيريف، مع الخطوط الاحتياطية الافتراضية من Tailwind CSS. + في هذا المثال، نضيف الخط `Inter` إلى مجموعة الخطوط sans-serif. - ```js title="tailwind.config.mjs" ins={1,8-10} - import defaultTheme from 'tailwindcss/defaultTheme' + ```css title="src/styles/global.css" ins={3-5} + @import 'tailwindcss'; - /** @type {import('tailwindcss').Config} */ - export default { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: { - fontFamily: { - sans: ['Inter', ...defaultTheme.fontFamily.sans], - }, - }, - }, - plugins: [], + @theme { + --font-sans: 'Inter', 'sans-serif'; } ``` - الآن، سيستخدم كل النص بدون سيريف (الافتراضي في Tailwind) في مشروعك الخط الذي اخترته، وستقوم أيضًا فئة `font-sans` بتطبيق خط Inter. + الآن، سيُستخدم خط Inter تلقائيًا في جميع النصوص sans-serif (الإعداد الافتراضي في Tailwind)، كما أن الفئة `font-sans` ستطبّق هذا الخط أيضًا. -راجع [توثيق Tailwind حول إضافة عائلات الخطوط المخصصة](https://tailwindcss.com/docs/font-family#using-custom-values) لمزيد من المعلومات. +راجع [توثيق Tailwind حول إضافة عائلات الخطوط المخصصة](https://tailwindcss.com/docs/font-family#using-custom-values) لمزيد من التفاصيل. ## المزيد من الموارد -- تعرف على كيفية عمل خطوط الويب في [دليل MDN لخطوط الويب](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts). -- توليد CSS لخطك باستخدام [مولد الخطوط الويب من Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator). +- تعلّم كيفية عمل خطوط الويب في [دليل MDN لخطوط الويب](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts). +- أنشئ ملفات CSS لخطك باستخدام [مولّد خطوط الويب من Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator). \ No newline at end of file diff --git a/src/content/nav/ar.ts b/src/content/nav/ar.ts index 0d707b92c685f..2aee6e3fbaf26 100644 --- a/src/content/nav/ar.ts +++ b/src/content/nav/ar.ts @@ -1,5 +1,35 @@ import { navDictionary } from '../../util/navDictionary'; export default navDictionary({ - // Add translations of English labels here + start: 'ابدأ', + 'start.welcome': 'مرحباً بالعالم!', + 'start.newProject': 'ابدأ مشروعاً جديداً', + 'start.config': 'الإعدادات', + 'start.migrate': 'الترحيل إلى Astro', + + guides: 'الأدلة والوصفات', + 'guides.routing': 'التوجيه والتنقّل', + 'guides.ui': 'بناء واجهة المستخدم', + 'guides.content': 'إضافة المحتوى إلى موقعك', + 'guides.serverRendering': 'الاستدعاء من جهة الخادم (Server Rendering)', + 'guides.upgrade': 'الترقية', + 'guides.upgrade.major': 'أدلة الترقية الرئيسية', + 'guides.recipes': 'وصفات وخطوات التنفيذ', + + reference: 'المرجع', + 'reference.runtime': 'واجهة برمجة التشغيل (Runtime API)', + 'reference.other': 'واجهات برمجة تطوير أخرى', + 'reference.syntax': 'بناء جمل قوالب Astro', + 'reference.experimental': 'الميزات التجريبية', + + integrations: 'التكاملات', + 'integrations.ui': 'أُطر واجهات المستخدم', + 'integrations.adapters': 'المحوّلات (Adapters)', + 'integrations.other': 'تكاملات رسمية أخرى', + + thirdParty: 'الخدمات الخارجية', + 'thirdParty.deployment': 'أدلة النشر', + 'thirdParty.cms': 'أنظمة إدارة المحتوى', + 'thirdParty.backend': 'خدمات الخلفية (Backend)', + 'thirdParty.media': 'استضافة الصور والفيديو', });