i18n(ar): create install-and-setup.mdx

src/content/docs/ar/install-and-setup.mdx

@@ -0,0 +1,328 @@
+---
+title: تثبيت Astro
+sidebar:
+  label: التثبيت
+description: 'كيفية تثبيت Astro وبدء مشروع جديد.'
+i18nReady: true
+---
+import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import ReadMore from '~/components/ReadMore.astro';
+
+أمر `create astro` عبر CLI هو أسرع طريقة لبدء مشروع Astro جديد من الصفر. سيرشدك خلال كل خطوة من خطوات إعداد مشروع Astro الجديد ويتيح لك الاختيار من بين عدة قوالب ابتدائية رسمية مختلفة.
+
+يمكنك أيضًا تشغيل أمر CLI مع الوسيط `--template` لبدء مشروعك باستخدام أي قالب أو نموذج ابتدائي موجود. استكشف [معرض القوالب والنماذج الابتدائية](https://astro.build/themes/) حيث يمكنك تصفح القوالب للمدونات، ومحافظ الأعمال، ومواقع التوثيق، وصفحات الهبوط، والمزيد!
+
+لتثبيت Astro يدويًا بدلاً من ذلك، اطلع على [دليل التثبيت اليدوي خطوة بخطوة](#manual-setup).
+
+:::tip[معاينة مباشرة في المتصفح]
+هل تفضل تجربة Astro في متصفحك؟ تفضل بزيارة [astro.new](https://astro.new/) لتصفح قوالبنا الابتدائية وتشغيل مشروع Astro جديد دون مغادرة متصفحك أبدًا.
+:::
+
+## المتطلبات الأساسية
+
+- **Node.js** - الإصدار `v22.12.0` أو أحدث. الإصدارات الفردية مثل `v23` غير مدعومة.
+- **محرر النصوص** - نوصي بـ [VS Code](https://code.visualstudio.com/) مع [إضافة Astro الرسمية](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
+- **Terminal** - يتم الوصول إلى Astro عبر CLI.
+
+## توافق المتصفحات
+
+تم بناء Astro باستخدام Vite الذي يستهدف المتصفحات الحديثة التي تدعم JavaScript بشكل افتراضي. للحصول على مرجع كامل، يمكنك الاطلاع على [قائمة إصدارات المتصفحات المدعومة حاليًا في Vite](https://vite.dev/guide/build.html#browser-compatibility).
+
+## التثبيت من CLI wizard
+
+يمكنك تشغيل `create astro` في أي مكان على جهازك، لذلك لا حاجة لإنشاء مجلد فارغ جديد لمشروعك قبل البدء. إذا لم يكن لديك مجلد فارغ بعد لمشروعك الجديد، فسيساعدك المعالج في إنشاء واحد تلقائيًا.
+
+<Steps>
+1. قم بتشغيل الأمر التالي في الـ terminal لبدء معالج التثبيت:
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      # create a new project with npm
+      npm create astro@latest
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      # create a new project with pnpm
+      pnpm create astro@latest
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      # create a new project with yarn
+      yarn create astro
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    إذا سار كل شيء على ما يرام، سترى رسالة نجاح متبوعة ببعض الخطوات التالية الموصى بها.
+
+2. الآن بعد إنشاء مشروعك، يمكنك التنقل باستخدام `cd` إلى مجلد مشروعك الجديد لبدء استخدام Astro.
+
+3. إذا قمت بتخطي خطوة "?Install dependencies" أثناء CLI wizard، فتأكد من تثبيتها قبل المتابعة.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm install
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn install
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+4. يمكنك الآن [تشغيل Astro dev server](/ar/develop-and-build/#start-the-astro-dev-server) ومشاهدة معاينة مباشرة لمشروعك أثناء بنائه!
+</Steps>
+
+## أعلام التثبيت في CLI 
+
+يمكنك تشغيل أمر `create astro` مع وسائط إضافية لتخصيص عملية الإعداد (مثل الإجابة بـ "yes" على جميع الأسئلة، تخطي رسمة Houston المتحركة) أو مشروعك الجديد (مثل تثبيت git أم لا، إضافة integrations).
+
+<ReadMore>اطلع على [جميع أعلام أمر `create astro` المتاحة](https://github.com/withastro/astro/blob/main/packages/create-astro/README.md).</ReadMore>
+
+### إضافة integrations
+
+يمكنك بدء مشروع Astro جديد وتثبيت أي [رسمية integrations](/en/guides/integrations/) أو integrations مجتمعية تدعم أمر `astro add` في نفس الوقت عن طريق تمرير الوسيط `--add` إلى أمر `create astro`.
+
+قم بتشغيل الأمر التالي في الـ terminal، مع استبدال أي integration تدعم أمر `astro add`:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  # create a new project with React and Partytown
+  npm create astro@latest -- --add react --add partytown
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  # create a new project with React and Partytown
+  pnpm create astro@latest --add react --add partytown
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  # create a new project with React and Partytown
+  yarn create astro --add react --add partytown
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+### استخدام قالب أو قالب ابتدائي
+
+يمكنك بدء مشروع Astro جديد بناءً على [official example](https://github.com/withastro/astro/tree/main/examples) أو الفرع `main` لأي GitHub repository عن طريق تمرير الوسيط `--template` إلى أمر `create astro`.
+
+قم بتشغيل الأمر التالي في terminal، مع استبدال اسم قالب Astro starter الرسمي، أو اسم مستخدم GitHub ومستودع القالب الذي تريد استخدامه:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  # create a new project with an official example
+  npm create astro@latest -- --template <example-name>
+
+  # create a new project based on a GitHub repository’s main branch
+  npm create astro@latest -- --template <github-username>/<github-repo>
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  # create a new project with an official example
+  pnpm create astro@latest --template <example-name>
+
+  # create a new project based on a GitHub repository’s main branch
+  pnpm create astro@latest --template <github-username>/<github-repo>
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  # create a new project with an official example
+  yarn create astro --template <example-name>
+
+  # create a new project based on a GitHub repository’s main branch
+  yarn create astro --template <github-username>/<github-repo>
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+بشكل افتراضي، سيستخدم هذا الأمر الفرع `main` لمستودع القالب. لاستخدام اسم فرع مختلف، قم بتمريره كجزء من الوسيط `--template`: `<github-username>/<github-repo>#<branch>`.
+
+## الإعداد اليدوي
+
+سيرشدك هذا الدليل خلال خطوات إلى تثبيت وتكوين مشروع Astro جديد.
+
+إذا كنت تفضل عدم استخدام أداة `create astro` التلقائية الخاصة بنا، فيمكنك إعداد مشروعك بنفسك باتباع الدليل أدناه.
+
+<Steps>
+1. إنشاء المجلد الخاص بك
+
+    قم بإنشاء مجلد فارغ باسم مشروعك، ثم انتقل إليه.
+
+    ```bash
+    mkdir my-astro-project
+    cd my-astro-project
+    ```
+
+    بمجرد وصولك إلى مجلدك الجديد، قم بإنشاء ملف `package.json` الخاص بمشروعك. هذه هي الطريقة التي ستدير بها تبعيات مشروعك، بما في ذلك Astro. إذا لم تكن معتادًا على تنسيق هذا الملف، فقم بتشغيل الأمر التالي لإنشاء واحد.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm init --yes
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm init 
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn init --yes
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+2. تثبيت Astro
+
+    أولاً، قم بتثبيت تبعيات مشروع Astro داخل مشروعك.
+
+    :::note[Important]
+    يجب تثبيت Astro محليًا (locally)، وليس عالميًا (globally). تأكد من أنك *لست* تقوم بتشغيل `npm install -g astro` أو `pnpm add -g astro` أو `yarn add global astro`.
+    :::
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install astro
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add astro
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add astro
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    ثم استبدل أي قسم "scripts" العنصر النائب في `package.json` الخاص بك بما يلي:
+
+    ```json title="package.json" del={3} ins={4-6}
+    {
+      "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "dev": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview"
+      },
+    }
+    ```
+
+    ستستخدم هذه الأوامر لاحقًا في الدليل لتشغيل Astro وتنفيذ أوامره المختلفة.
+
+3. إنشاء صفحتك الأولى
+
+    في محرر النصوص الخاص بك، قم بإنشاء ملف جديد في مجلدك في المسار `src/pages/index.astro`. ستكون هذه صفحة Astro الأولى في المشروع.
+
+    في هذا الدليل، قم بنسخ ولصق مقتطف الكود التالي (بما في ذلك الشرطات `---`) في ملفك الجديد:
+
+    ```astro title="src/pages/index.astro"
+    ---
+    // Welcome to Astro! Everything between these triple-dash code fences
+    // is your "component frontmatter". It never runs in the browser.
+    console.log('This runs in your terminal, not the browser!');
+    ---
+    <!-- Below is your "component template." It's just HTML, but with
+        some magic sprinkled in to help you build great templates. -->
+    <html>
+      <body>
+        <h1>مرحبا بالعالم!</h1>
+      </body>
+    </html>
+    <style>
+      h1 {
+        color: orange;
+      }
+    </style>
+    ```
+
+4. إنشاء أول static asset خاص بك
+
+    ستحتاج أيضًا إلى إنشاء مجلد `public/` لتخزين الـ static assets الخاصة بك. سيقوم Astro دائمًا بتضمين هذه الـ assets في بنائك النهائي، لذا يمكنك الرجوع إليها بأمان من داخل قوالب المكونات الخاصة بك.
+
+    في محرر النصوص الخاص بك، قم بإنشاء ملف جديد في مجلدك في المسار `public/robots.txt`. `robots.txt` هو ملف بسيط ستقوم معظم المواقع بتضمينه لإخبار برامج البحث مثل Google بكيفية التعامل مع موقعك.
+
+    في هذا الدليل، قم بنسخ ولصق مقتطف الكود التالي في ملفك الجديد:
+
+    ```diff title="public/robots.txt"
+    # Example: Allow all bots to scan and index your site.
+    # Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
+    User-agent: *
+    Allow: /
+    ```
+
+5. إنشاء `astro.config.mjs`
+
+    يتم تكوين Astro باستخدام `astro.config.mjs`. هذا الملف اختياري إذا كنت لا تحتاج إلى تكوين Astro، ولكن قد ترغب في إنشائه الآن.
+
+    قم بإنشاء `astro.config.mjs` في جذر مشروعك، وانسخ الكود أدناه فيه:
+
+    ```js title="astro.config.mjs"
+    import { defineConfig } from "astro/config";
+
+    // https://astro.build/config
+    export default defineConfig({});
+    ```
+
+    إذا كنت تريد تضمين [UI framework components](/en/guides/framework-components/) مثل React أو Svelte وما إلى ذلك، أو استخدام أدوات أخرى مثل MDX أو Partytown في مشروعك، فهنا ستقوم [باستيراد وتكوين integrations يدويًا](/en/guides/integrations/).
+
+    <ReadMore>اطلع على [مرجع تكوين API الخاص بـ Astro](/en/reference/configuration-reference/) لمزيد من المعلومات.</ReadMore>
+
+6. إضافة دعامة TypeScript
+
+    يتم تكوين TypeScript باستخدام `tsconfig.json`. حتى إذا كنت لا تكتب كود TypeScript، فهذا الملف مهم لكي تعرف أدوات مثل Astro و VS Code كيفية فهم مشروعك. بعض الميزات (مثل استيراد حزم npm) لا يتم دعمها بالكامل في المحرر بدون ملف `tsconfig.json`.
+
+    إذا كنت تنوي كتابة كود TypeScript، فمن المستحسن استخدام قالب `strict` أو `strictest` الخاص بـ Astro. يمكنك عرض ومقارنة تكوينات القوالب الثلاثة في [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).
+
+    قم بإنشاء `tsconfig.json` في جذر مشروعك، وانسخ الكود أدناه فيه. (يمكنك استخدام `base` أو `strict` أو `strictest` لقالب TypeScript الخاص بك):
+
+    ```json title="tsconfig.json" "base"
+    {
+      "extends": "astro/tsconfigs/base"
+    }
+    ```
+
+    <ReadMore>اطلع على [دليل إعداد TypeScript الخاص بـ Astro](/en/guides/typescript/#setup) لمزيد من المعلومات.</ReadMore>
+
+7. الخطوات التالية
+
+    إذا اتبعت الخطوات أعلاه، يجب أن يبدو مجلد مشروعك الآن كما يلي:
+
+    <FileTree>
+    - node_modules/
+    - public/
+      - robots.txt
+    - src/
+      - pages/
+        - index.astro
+    - astro.config.mjs
+    - package-lock.json or `yarn.lock`, `pnpm-lock.yaml`, etc.
+    - package.json
+    - tsconfig.json
+    </FileTree>
+
+8. يمكنك الآن [تشغيل Astro dev server](/ar/develop-and-build/#start-the-astro-dev-server) ومشاهدة معاينة مباشرة لمشروعك أثناء بنائه!
+
+</Steps>