Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 45 additions & 21 deletions src/content/docs/ar/editor-setup.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: إعداد البيئة البرمجية
title: إعداد المحرر
description: أعِد محررك لبناء المشاريع مع أسترو.
i18nReady: true
---
Expand Down Expand Up @@ -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) <span style="margin: 0.25em;"><Badge text="دعم رسمي" /></span> - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل [VSCodium](https://vscodium.com/)
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ 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 <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim
- emacs - راجع تعليمات ل [تكوين Emacs و Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> للعمل مع أسترو
- [أسترو syntax highlighting ل Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - حزمة أسترو Sublime Text, متاح على مستودع Sublime Text.
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova

## المحررات في المتصفح

Expand All @@ -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.
Expand All @@ -83,43 +87,61 @@ import ReadMore from '~/components/ReadMore.astro';
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install --save-dev prettier prettier-plugin-astro
npm install --save-dev --save-exact prettier prettier-plugin-astro
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add -D prettier prettier-plugin-astro
pnpm add --save-dev --save-exact prettier prettier-plugin-astro
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add --dev prettier prettier-plugin-astro
yarn add --dev --exact prettier prettier-plugin-astro
```
</Fragment>
</PackageManagerTabs>

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. شغّل أمر التنسيق في الطرفية لتنسيق ملفات المشروع.

<PackageManagerTabs>
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npx prettier . --write
Expand All @@ -132,10 +154,12 @@ import ReadMore from '~/components/ReadMore.astro';
</Fragment>
<Fragment slot="yarn">
```shell
yarn prettier . --write
yarn exec prettier . --write
```
</Fragment>
</PackageManagerTabs>
</Steps>

راجع ملف 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).
28 changes: 13 additions & 15 deletions src/content/docs/ar/getting-started.mdx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -20,8 +20,6 @@ hero:
tagline: مدعوم من أسترو ومساهمي البرامج المفتوحة المصدر.
linkText: انضم إلينا!
link: /ar/contribute/
banner:
content: هل تريد تجربة النسخة الأولية من الإصدار 5 ؟ اقرأ <a href="https://5-0-0-beta.docs.astro.build/ar/guides/upgrade-to/v5/">الإصدار 5. دليل الترقية</a>!
---

import { CardGrid } from '@astrojs/starlight/components'
Expand All @@ -31,28 +29,28 @@ import SplitCard from '~/components/Landing/SplitCard.astro'
import Discord from '~/components/Landing/Discord.astro'

<CardGrid>
<Card title="ماذا ستبني مع أسترو؟" icon="laptop">
استكشف [Astro starter themes](https://astro.build/themes/) للمدونات ، المحافظ ، المستندات ، الصفحات المقصودة ، SaaS ، التسويق ، مواقع التجارة الإلكترونية ، والمزيد!
<Card title="ماذا ستبني باستخدام أسترو؟" icon="laptop">
استكشف [السمات المبدئية لأسترو](https://astro.build/themes/) للمدونات، المحافظ، المستندات، الصفحات التعريفية، تطبيقات SaaS، مواقع التسويق، التجارة الإلكترونية والمزيد!
</Card>

<Card title="قم بجولة إرشاد" icon="star">
أكمل برنامجنا التمهيدي [دروس لبناء مدونة](/ar/tutorial/0-introduction/) لتعلم الأساسيات وإنشاء موقعك الأول باستخدام أسترو.
<Card title="ابدأ بجولة إرشادية" icon="star">
أكمل [دليلنا التمهيدي لبناء مدونة](/ar/tutorial/0-introduction/) لتعلّم الأساسيات وإنشاء موقعك الأول باستخدام أسترو.
</Card>

<SplitCard title="ابدأ مشروعًا جديدًا" icon="rocket">
```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، أو تثبيته يدويًا.
</SplitCard>

<ListCard title="تعلم" icon="open-book">
- [ميزات أسترو الرئيسية](/ar/concepts/why-astro/)
- [معمارية جزر أسترو](/ar/concepts/islands/)
<ListCard title="تعلّم" icon="open-book">
- [الميزات الأساسية لأسترو](/ar/concepts/why-astro/)
- [معمارية الجزر](/ar/concepts/islands/)
- [مكونات أسترو](/ar/basics/astro-components/)
- [بناء جملة قالب أسترو](/ar/reference/astro-syntax/)
- [صياغة قوالب أسترو](/ar/reference/astro-syntax/)
</ListCard>

<ListCard title="امتداد" icon="puzzle">
Expand Down
Loading