Merge branch 'main' into sssidebar

astro.config.ts

@@ -89,7 +89,7 @@ export default defineConfig({
 		service: sharpImageService(),
 	},
 	experimental: {
-		contentCollectionCache: false,
+		contentCollectionCache: true,
 		directRenderScript: true,
 	},
 });

package.json

@@ -38,7 +38,7 @@
     "@types/node": "^18.6.4",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
     "@typescript-eslint/parser": "^5.46.1",
-    "astro": "^4.8.6",
+    "astro": "4.9.3",
     "astro-auto-import": "^0.4.2",
     "astro-eslint-parser": "^0.16.0",
     "astro-og-canvas": "^0.5.0",
@@ -81,9 +81,9 @@
     "unist-util-walker": "^1.0.0"
   },
   "dependencies": {
-    "@astrojs/check": "^0.4.1",
-    "@astrojs/sitemap": "^3.1.3",
-    "@astrojs/starlight": "0.23.1",
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/starlight": "0.23.4",
     "@docsearch/js": "^3.5.2",
     "@fontsource/ibm-plex-mono": "^4.5.10",
     "@lunariajs/core": "^0.0.32",

src/content/docs/ar/basics/project-structure.mdx

@@ -0,0 +1,125 @@
+---
+title: هيكل المشروع
+description: تعلم كيفية تنظيم مشروع مع أسترو.
+i18nReady: true
+---
+import { FileTree } from '@astrojs/starlight/components';
+
+مشروع أسترو الجديد الذي تم إنشاؤه من CLI `create astro`  يتضمن بالفعل بعض الملفات والمجلدات. و أخرى، سوف تقوم بإنشاءها بنفسك وتضيف إلى بنية ملفات أسترو الحالية.
+
+إليك كيفية تنظيم مشروع أسترو ، وبعض الملفات التي ستجدها في مشروعك الجديد.
+
+## المجلدات والملفات
+يستفيد أسترو من تصميم مجلد من أجل مشروعك.يجب أن يتضمن كل جذر مشروع أسترو المجلدات والملفات التالية:
+
+- `*/src` - رمز مصدر المشروع الخاص بك (المكونات والصفحات والأنماط ، إلخ)
+- `*/public` - ما ليس بكود ، أصولك الجاهزة (الخطوط ، الرموز ، إلخ)
+- `package.json` - بيان المشروع.
+- `astro.config.mjs` - ملف تكوين أسترو. (مُستَحسَن)
+- `tsconfig.json` - ملف تكوين TypeScript. (مُستَحسَن)
+
+### مثال شجرة المشروع
+قد يبدو دليل مشروع أسترو الشائع هكذا:
+
+<FileTree>
+- public/
+  - robots.txt
+  - favicon.svg
+  - social-image.png
+- src/
+  - components/
+    - Header.astro
+    - Button.jsx
+  - layouts/
+    - PostLayout.astro
+  - pages/
+    - posts/
+      - post1.md
+      - post2.md
+      - post3.md
+    - index.astro
+  - styles/
+    - global.css
+- astro.config.mjs
+- package.json
+- tsconfig.json
+</FileTree>
+
+### `/src`
+
+المجلد `src`  هو المكان الذي يعيش فيه معظم رمز مصدر المشروع. هذا يتضمن:
+
+- [الصفحات](/ar/basics/astro-pages/)
+- [تخطيطات](/ar/basics/layouts/)
+- [مكونات أسترو](/ar/basics/astro-components/)
+- [مكونات إطار واجهة المستخدم (React, etc.)](/ar/guides/framework-components/)
+- [أنماط (CSS, Sass)](/ar/guides/styling/)
+- [Markdown](/ar/guides/markdown-content/)
+
+يقوم أسترو  بمعالجة  و تحسين ، وحزم ملفات `/src`  لإنشاء موقع الويب النهائي الذي يتم شحنه إلى المتصفح. على عكس المجلد الثابت `public/` ، تم تصميم ملفات `src/` الخاصة بك والتعامل معها من قبل أسترو.
+
+لا يتم إرسال بعض الملفات (مثل مكونات أسترو) إلى المتصفح كما هو مكتوب ولكن يتم تقديمها بدلاً من ذلك إلى HTML ثابت. يتم إرسال الملفات الأخرى (مثل CSS) إلى المتصفح ولكن قد يتم تحسينها أو تجميعها مع ملفات CSS الأخرى للأداء.
+
+:::tip
+بينما يصف هذا الدليل بعض الاتفاقيات الشائعة المستخدمة في مجتمع أسترو ، فإن المجلدات التي تحتفظ بها أسترو هي `src/pages/` و `src/content/`. أنت حر في إعادة تسمية أي مجلدات أخرى وإعادة تنظيمها بطريقة تناسبك بشكل أفضل.
+:::
+
+### `src/components`
+
+**العناصر** هي وحدات كود قابلة لإعادة الاستخدام في صفحات HTML الخاصة بك. يمكن أن تكون هذه [مكونات أسترو](ar/basic/astro-components) ، أو [مكونات إطار واجهة المستخدم](/ar/guides/framework-components/) مثل React أو VUE. من الشائع تجميع وتنظيم جميع مكونات المشروع معًا في هذا المجلد.
+
+هذه اتفاقية شائعة في مشاريع أسترو ، لكنها غير مطلوبة. لا تتردد في تنظيم مكوناتك كما تريد!
+
+### `src/content`
+
+المجلد `src/content/` محجوز لتخزين [مجموعات المحتوى](/ar/guides/content-collections/) وملف تكوين مجموعات اختياري. لا يُسمح بالملفات الأخرى داخل هذا المجلد.
+
+### `src/layouts`
+
+[التخطيطات](/ar/basics/layouts/) هي مكونات أسترو التي تحدد بنية واجهة المستخدم التي تشاركها صفحة واحدة أو [صفحات](/ar/basics/astro-pages/).
+
+تماما مثل `src/components`, هذا المجلد هو اتفاقية شائعة ولكنها غير مطلوبة.
+
+### `src/pages`
+
+[الصفحات](/ar/basics/astro-pages/) هي نوع خاص من المكونات المستخدمة لإنشاء صفحات جديدة على موقعك. يمكن أن تكون الصفحة مكونًا لأسترو ، أو ملف Markdown الذي يمثل بعض صفحة المحتوى لموقعك.
+
+:::caution
+`src/pages` هو مجلد فرعي **مطلوب** في مشروع أسترو الخاص بك. بدون ذلك ، لن يحتوي موقعك على صفحات أو طرق!
+:::
+
+### `src/styles`
+
+إنها اتفاقية شائعة لتخزين ملفات CSS أو SASS في مجلد `src/styles` ، لكن هذا غير مطلوب. طالما أن الأنماط تعيش في مكان ما في المجلد `/src` ويتم استيرادها بشكل صحيح ، فإن أسترو سوف يتعامل معها ويحسنها.
+
+### `public/`
+
+المجلد `public/` مخصص للملفات والأصول في مشروعك والتي لا تحتاج إلى معالجتها أثناء عملية بناء أسترو. سيتم نسخ الملفات الموجودة في هذا المجلد في مجلد Build دون مساس ، ثم سيتم بناء موقعك.
+
+هذا السلوك يجعل `public/` مثالي للأصول الشائعة مثل الصور والخطوط ، أو الملفات الخاصة مثل `robots.txt` و` manifest.webmanifest`.
+
+يمكنك وضع CSS و جافاسكريبت في دليل `/public` الخاص بك ، ولكن كن على علم بأن هذه الملفات لن يتم تجميعها أو تحسينها في البناء النهائي.
+
+:::tip
+كقاعدة عامة ، يجب أن تعيش أي CSS أو جافاسكريبت التي تكتبها بنفسك في مجلد `/src` .
+:::
+
+### `package.json`
+
+هذا ملف يستخدمه مديري حزم جافاسكريبت لإدارة تبعياتك. كما أنه يحدد البرامج النصية التي يتم استخدامها بشكل شائع لتشغيل أسترو (على سبيل المثال: `npm start` ، `npm run build`).
+
+هناك [نوعان من التبعيات](https://docs.npmjs.com/specifice-dependencies-and-devdedencies-in-a-package-json-file) يمكنك تحديدها في `package.json`:` dependencies` و `devdependencies`. في معظم الحالات ، تعمل هذه كما هي: يحتاج أسترو إلى جميع التبعيات في وقت الإنشاء ، وسيقوم مدير الحزمة بتثبيت كليهما. نوصي بوضع جميع تبعياتك في "التبعيات" للبدء ، واستخدام فقط "DevDependencies" إذا وجدت حاجة محددة للقيام بذلك.
+
+للمساعدة في إنشاء ملف `package.json` الجديد لمشروعك ، تحقق من تعليمات [الإعداد اليدوي](/ar/install/manual/).
+
+### `astro.config.mjs`
+
+يتم إنشاء هذا الملف في كل قالب بداية ويتضمن خيارات التكوين لمشروع أسترو الخاص بك. هنا يمكنك تحديد التكامل لاستخدام الخيارات ، وخيارات الخادم ، والمزيد.
+
+راجع [تكوين دليل أسترو](ar/guides/configuring-astro) للحصول على تفاصيل حول تكوينات الإعداد.
+
+### `tsconfig.json`
+
+يتم إنشاء هذا الملف في كل قالب بداية ويتضمن خيارات تكوين TypeScript لمشروع أسترو الخاص بك. بعض الميزات (مثل استيرادات حزمة npm) ليست مدعومة بالكامل في المحرر بدون ملف `tsconfig.json`.
+
+راجع [دليل TypeScript](ar/guides/typescript)  للحصول على تفاصيل حول تكوينات الإعداد.

src/content/docs/en/basics/astro-components.mdx

@@ -318,6 +318,10 @@ const { title } = Astro.props;
 </div>
 ```
 
+Fallback content will only be displayed when there are no matching elements with the slot="name" attribute being passed in to a named slot.
+
+Astro will pass an empty slot when a slot element exists but has no content to pass. Fallback content cannot be used as a default when an empty slot is passed. Fallback content is only displayed when no slot element can be found.
+
 ### Transferring slots
 
 Slots can be transferred to other components. For example, when creating nested layouts:

src/content/docs/en/community-resources/content.mdx

@@ -88,6 +88,7 @@ Have you published a recipe or guide for working with Astro? [Edit this page](ht
 ### Animation
 - [Using GreenSock Animation Platform (GSAP) in Astro](https://www.launchfa.st/blog/gsap-astro)
 - [Using GreenSock Animation Platform (GSAP) in Astro with View Transitions](https://www.launchfa.st/blog/gsap-astro-view-transitions)
+- [Using Animate On Scroll (AOS) in Astro: A Step-by-Step Guide](https://www.launchfa.st/blog/aos-astro)
 ### Internationalization and Localization
 - [How to make your Astro website multilingual with Crowdin: Astro localization guide](https://crowdin.com/blog/2023/06/21/astro-localization-and-i18n)
 - [Translate routes in Astro for content collections and subpages](https://www.webdesign-sopelnik.de/en/blog/translate-routes-for-astro-content-collections-or-subpages-with-trailingslash-and-base-support/)

src/content/docs/en/guides/astro-db.mdx

@@ -10,7 +10,7 @@ import ReadMore from '~/components/ReadMore.astro';
 import StudioHeading from '~/components/StudioHeading.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-Astro DB is a fully-managed SQL database designed exclusively for Astro. Develop locally or connect to a hosted database managed on our [Astro Studio](/en/recipes/studio/) platform.
+Astro DB is a fully-managed SQL database designed exclusively for Astro. Develop locally or connect to a hosted database managed on our [Astro Studio](#astro-studio) platform.
 
 ## Installation
 
@@ -339,9 +339,134 @@ See the [Drizzle `db.batch()`](https://orm.drizzle.team/docs/batch-api) docs for
 ## Astro Studio
 </StudioHeading>
 
-Astro DB can [connect to the Astro Studio platform](/en/recipes/studio/) to quickly add a hosted database to your project. You can view, manage and deploy new hosted databases all from the Astro Studio dashboard.
+Astro DB can connect to the Astro Studio platform to quickly add a hosted database to your project. You can view, manage and deploy new hosted databases all from the Astro Studio dashboard.
 
-To create a new project, you can use a [ready-made template](https://studio.astro.build) or visit the [Astro Studio guide](/en/recipes/studio/#create-a-new-studio-project).
+The [Astro Studio web portal](http://studio.astro.build) allows you to connect to and manage your remote hosted Astro DB databases through a web interface or using [CLI commands](/en/reference/cli-reference/#astro-studio-cli).
+
+From your Studio dashboard, you have access to account management, help articles and a support message console.
+
+Visit [Astro Studio](http://studio.astro.build) to sign up or log in.
+
+<StudioHeading>
+### Create a new Studio project
+</StudioHeading>
+
+There are two ways to create a project in Astro Studio:
+
+1. [**Use the Astro Studio web UI**](https://studio.astro.build) to create from a new or existing GitHub repository.
+
+    To get started, click the "create project" button in the header and follow the instructions. Astro Studio will connect to your GitHub repository and create a new hosted database for your project.
+
+2. **Use the Astro Studio CLI** to create from any local Astro project. You can run the following commands to get started:
+
+    <PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
+    # Log in to Astro Studio with your GitHub account
+    npx astro login
+
+    # Link to a new project by following the prompts
+    npx astro link
+
+    # (Optional) Push your local db configuration to the remote database
+    npx astro db push
+    ```
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    # Log in to Astro Studio with your GitHub account
+    pnpm astro login
+
+    # Link to a new project by following the prompts
+    pnpm astro link
+
+    # (Optional) Push your local db configuration to the remote database
+    pnpm astro db push
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    # Log in to Astro Studio with your GitHub account
+    yarn astro login
+
+    # Link to a new project by following the prompts
+    yarn astro link
+
+    # (Optional) Push your local db configuration to the remote database
+    yarn astro db push
+    ```
+    </Fragment>
+    </PackageManagerTabs>
+
+    Once you are logged in and linked successfully, you can run all Astro DB commands to manage your remote database. 
+
+    <ReadMore>See [the Astro DB CLI reference](/en/guides/integrations-guide/db/#astro-db-cli-reference) for all available commands.</ReadMore>
+
+<StudioHeading>
+### Deploy with a Studio connection
+</StudioHeading>
+
+You can deploy your Astro DB project with a live connection to your Studio database. This is possible with any deployment platform using static builds or an [SSR adapter](/en/guides/server-side-rendering/).
+
+First, configure your build command to connect with Studio using the `--remote` flag. This example applies the flag to a `"build"` script in your project's `package.json`. If your deployment platform accepts a build command, ensure this is set to `npm run build`.
+
+```json title="package.json" "--remote"
+{
+  "scripts": {
+    "build": "astro build --remote"
+  }
+}
+```
+<StudioHeading>
+#### Create a Studio app token
+</StudioHeading>
+
+You need to create an app token to access your Studio database from a production deploy. You can create an app token from your Studio project dashboard by navigating to the **Settings** tab and selecting **Tokens**. 
+
+Copy the generated token and apply as an environment variable / environment secret in your deployment platform using the name `ASTRO_STUDIO_APP_TOKEN`. 
+
+<StudioHeading>
+### Set up the GitHub CI Action
+</StudioHeading>
+
+You can automatically push schema changes to your Studio database with the Studio CI action. This verifies changes can be made safely, and keeps your configuration up-to-date whenever you merge to `main`.
+
+[Follow GitHub's documentation](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) to configure a new secret in your repository with the name `ASTRO_STUDIO_APP_TOKEN` and your Studio app token as the value for the secret.
+
+Once your secret is configured, create a new GitHub Actions workflow file in your project's `.github/workflows` directory to checkout the repository and install Node.js as steps, and use the `withastro/action-studio` action to sync schema changes. 
+
+The action will run `astro db verify` on all [event triggers](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows) to ensure schema changes can be applied safely. If you add the **[push](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#push)** trigger specifically, the action will push those changes to your Studio database.
+
+This example GitHub Action `_studio.yml` pushes changes whenever the `main` branch is updated:
+
+```yaml title=".github/workflows/_studio.yml"
+name: Astro Studio
+
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{secrets.ASTRO_STUDIO_APP_TOKEN }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  DB:
+    permissions:
+      contents: read
+      actions: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: jaid/[email protected]
+      - uses: withastro/action-studio@main
+```
 
 <StudioHeading>
 ### Pushing table schemas
@@ -520,7 +645,7 @@ To use a remote connection, you will need an app token to authenticate with Stud
 
 <ReadMore>
 
-When you're ready to deploy, see our [Deploy with a Studio Connection guide](/en/recipes/studio/#deploy-with-a-studio-connection).
+When you're ready to deploy, see our [Deploy with a Studio Connection guide](#deploy-with-a-studio-connection).
 
 </ReadMore>
 
@@ -604,7 +729,7 @@ Using a database file is an advanced feature, and care should be taken when depl
 
 Additionally, this method will not work in serverless deployments, as the file system is not persisted in those environments.
 
-For a fully managed solution, [connect to databases hosted on the Astro Studio platform](/en/recipes/studio/) instead.
+For a fully managed solution, [connect to databases hosted on the Astro Studio platform](#astro-studio) instead.
 :::
 
 If you are comfortable with the risks, and can manage deployment yourself, you can use a database file instead of connecting to Studio.