From a497eb0d8a06e8c4e899d68846c9bf1b158bb689 Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Fri, 10 Jan 2025 18:18:48 +0200 Subject: [PATCH 1/7] i18n(ar): create ar/guides/fonts: - translate content i18n ar/guides/fonts.mdx --- src/content/docs/ar/guides/fonts.mdx | 137 +++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 src/content/docs/ar/guides/fonts.mdx diff --git a/src/content/docs/ar/guides/fonts.mdx b/src/content/docs/ar/guides/fonts.mdx new file mode 100644 index 0000000000000..e44df0f5486a6 --- /dev/null +++ b/src/content/docs/ar/guides/fonts.mdx @@ -0,0 +1,137 @@ +--- +title: استخدام الخطوط المخصصة +description: >- +هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟ يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة. +i18nReady: true +--- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components' + +سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها في مكوناتك. + +### استخدام ملف خط محلي + +سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط `DistantGalaxy.woff`. + + +1. أضف ملف الخط إلى `public/fonts/`. +2. أضف البيان التالي `@font-face` إلى CSS الخاص بك. يمكن أن يكون ذلك في ملف `.css` عام تستورده، أو في كتلة ` + + ``` + + + +### استخدام Fontsource + +يُبسط مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها. + + +1. ابحث عن الخط الذي تريد استخدامه في [كتالوج Fontsource](https://fontsource.org/). في هذا المثال، سيتم استخدام [Twinkle Star](https://fontsource.org/fonts/twinkle-star). +2. قم بتثبيت الحزمة الخاصة بالخط الذي اخترته باستخدام أداة إدارة الحزم مثل npm، pnpm أو yarn. + + + + ```shell + npm install @fontsource/twinkle-star + ``` + + + ```shell + pnpm add @fontsource/twinkle-star + ``` + + + ```shell + yarn add @fontsource/twinkle-star + ``` + + + + :::tip +ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط. + ::: + +3. استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك. + + سيقوم الاستيراد بإضافة القواعد اللازمة لـ `@font-face` تلقائيًا لإعداد الخط. + + ```astro title="src/layouts/BaseLayout.astro" + --- + import '@fontsource/twinkle-star'; + --- + ``` + +4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro. + + ```css + h1 { + font-family: "Twinkle Star", cursive; + } + ``` + + +لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام. + +## تسجيل الخطوط في Tailwind + +إذا كنت تستخدم [تكامل Tailwind](/ar/guides/integrations-guide/tailwind/)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة [`@font-face` لخط محلي](#استخدامiملف-خط-محلي) أو استخدام [استراتيجية الاستيراد الخاصة بـ Fontsource](#استخدام-Fontsource) لتثبيت خطك. + +لتسجيل خطك في Tailwind: + + +1. اتبع أيًا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة من إضافة `font-family` إلى CSS. +2. أضف اسم الخط إلى `tailwind.config.mjs`. + + هذا المثال يضيف `Inter` إلى مجموعة الخطوط بدون سيريف، مع الخطوط الاحتياطية الافتراضية من Tailwind CSS. + ```js title="tailwind.config.mjs" ins={1,8-10} + import defaultTheme from 'tailwindcss/defaultTheme' + + /** @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: [], + } + ``` + + الآن، سيستخدم كل النص بدون سيريف (الافتراضي في Tailwind) في مشروعك الخط الذي اخترته، وستقوم أيضًا فئة `font-sans` بتطبيق خط Inter. + + +راجع [توثيق 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). From 20cb6f882f9570264891c5f176c0aa9723de4ec6 Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Fri, 10 Jan 2025 18:28:59 +0200 Subject: [PATCH 2/7] i18n(ar): Update `i18nReady` flag to "Custom Fonts" page in Arabic documentation - Added `i18nReady: true` to ensure the page is marked as ready for translation. - Updated the Arabic documentation for adding custom fonts with Google Fonts and Fontsource. --- src/content/docs/ar/guides/fonts.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/ar/guides/fonts.mdx b/src/content/docs/ar/guides/fonts.mdx index e44df0f5486a6..4bf38c60c9b06 100644 --- a/src/content/docs/ar/guides/fonts.mdx +++ b/src/content/docs/ar/guides/fonts.mdx @@ -2,6 +2,7 @@ title: استخدام الخطوط المخصصة description: >- هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟ يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة. + i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; From 27764a16b04bd8df7590d0ec294b1fcbf1bb03dd Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Fri, 10 Jan 2025 18:32:52 +0200 Subject: [PATCH 3/7] i18n(ar): Fix multiline description formatting in "Custom Fonts" guide - Corrected the multiline formatting for the `description` field in the Arabic "Custom Fonts" guide. - Used proper YAML syntax for multiline values to ensure correct parsing and rendering. --- src/content/docs/ar/guides/fonts.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/ar/guides/fonts.mdx b/src/content/docs/ar/guides/fonts.mdx index 4bf38c60c9b06..f1b8faed80b8b 100644 --- a/src/content/docs/ar/guides/fonts.mdx +++ b/src/content/docs/ar/guides/fonts.mdx @@ -1,8 +1,8 @@ --- title: استخدام الخطوط المخصصة -description: >- -هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟ يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة. - +description: > + هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟ + يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة. i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; From cd31ee55bd2cbdec3989dfb7ec4949a039e2a56a Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Fri, 10 Jan 2025 18:37:51 +0200 Subject: [PATCH 4/7] i18n(ar): Fix HTML and style block formatting in "Custom Fonts" guide - Corrected the indentation and formatting issues in HTML and CSS blocks within the Arabic "Custom Fonts" guide. - Ensured proper alignment and structure for `

`, `

`, and ` + ``` From b848467875839c8ef6a3e8144e7907bc2d47a557 Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Fri, 10 Jan 2025 19:20:18 +0200 Subject: [PATCH 5/7] i18n(ar): Fix HTML and style block formatting in "Custom Fonts" guideUpdate fonts.mdx - Corrected the indentation and formatting issues in HTML and CSS blocks within the Arabic "Custom Fonts" guide. - Ensured proper alignment and structure for `

`, `

`, and ` - ``` + @@ -53,7 +55,9 @@ import { Steps } from '@astrojs/starlight/components' يُبسط مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها. + 1. ابحث عن الخط الذي تريد استخدامه في [كتالوج Fontsource](https://fontsource.org/). في هذا المثال، سيتم استخدام [Twinkle Star](https://fontsource.org/fonts/twinkle-star). + 2. قم بتثبيت الحزمة الخاصة بالخط الذي اخترته باستخدام أداة إدارة الحزم مثل npm، pnpm أو yarn. @@ -75,8 +79,8 @@ import { Steps } from '@astrojs/starlight/components' :::tip -ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط. - ::: + ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط. + ::: 3. استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك. @@ -88,13 +92,14 @@ import { Steps } from '@astrojs/starlight/components' --- ``` -4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro. +4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro. ```css h1 { font-family: "Twinkle Star", cursive; } ``` + لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام. @@ -106,10 +111,13 @@ import { Steps } from '@astrojs/starlight/components' لتسجيل خطك في Tailwind: + 1. اتبع أيًا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة من إضافة `font-family` إلى CSS. + 2. أضف اسم الخط إلى `tailwind.config.mjs`. هذا المثال يضيف `Inter` إلى مجموعة الخطوط بدون سيريف، مع الخطوط الاحتياطية الافتراضية من Tailwind CSS. + ```js title="tailwind.config.mjs" ins={1,8-10} import defaultTheme from 'tailwindcss/defaultTheme' From 125ae4bb645f10ff58c316d9ceb33492ea4ec6d8 Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Fri, 10 Jan 2025 19:37:06 +0200 Subject: [PATCH 6/7] i18n(ar): Fix casing in "Custom Fonts" guide link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Corrected the casing of the link from `#استخدام-Fontsource` to `#استخدام-fontsource` in the Arabic "Custom Fonts" guide. - Corrected the casing of the link from `#استخدامiملف-خط-محلي` to `استخدام-ملف-خط-محلي, #` in the Arabic "Custom Fonts" guide. --- src/content/docs/ar/guides/fonts.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/ar/guides/fonts.mdx b/src/content/docs/ar/guides/fonts.mdx index b8f679fd24ca3..0a94cb7c3b043 100644 --- a/src/content/docs/ar/guides/fonts.mdx +++ b/src/content/docs/ar/guides/fonts.mdx @@ -105,8 +105,8 @@ import { Steps } from '@astrojs/starlight/components' لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام. ## تسجيل الخطوط في Tailwind - -إذا كنت تستخدم [تكامل Tailwind](/ar/guides/integrations-guide/tailwind/)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة [`@font-face` لخط محلي](#استخدامiملف-خط-محلي) أو استخدام [استراتيجية الاستيراد الخاصة بـ Fontsource](#استخدام-Fontsource) لتثبيت خطك. + +إذا كنت تستخدم [تكامل Tailwind](/ar/guides/integrations-guide/tailwind/)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة [`@font-face` لخط محلي](#استخدام-ملف-خط-محلي) أو استخدام [استراتيجية الاستيراد الخاصة بـ Fontsource](#استخدام-fontsource) لتثبيت خطك. لتسجيل خطك في Tailwind: From b97a283ca60312265134457606705c37cca7c9bc Mon Sep 17 00:00:00 2001 From: Ahmed Nasser Date: Thu, 16 Jan 2025 18:14:27 +0200 Subject: [PATCH 7/7] i18n(ar): Update heading level and sidebar label for consistency with English version \n --- src/content/docs/ar/guides/fonts.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/content/docs/ar/guides/fonts.mdx b/src/content/docs/ar/guides/fonts.mdx index 00954dfed2bee..d74605bbb3e25 100644 --- a/src/content/docs/ar/guides/fonts.mdx +++ b/src/content/docs/ar/guides/fonts.mdx @@ -1,5 +1,7 @@ --- title: استخدام الخطوط المخصصة +sidebar: + label: الخطوط description: > هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟ يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة. @@ -10,7 +12,7 @@ import { Steps } from '@astrojs/starlight/components' سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها في مكوناتك. -### استخدام ملف خط محلي +## استخدام ملف خط محلي سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط `DistantGalaxy.woff`. @@ -48,7 +50,7 @@ import { Steps } from '@astrojs/starlight/components' -### استخدام Fontsource +## استخدام Fontsource يُبسط مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها.