Merge branch 'main' into cf

package.json

@@ -32,17 +32,17 @@
     "@types/html-escaper": "^3.0.2",
     "@types/mdast": "^4.0.4",
     "@types/node": "^20.17.10",
-    "@typescript-eslint/parser": "^8.18.1",
-    "astro": "^5.1.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "astro": "^5.1.3",
     "astro-auto-import": "^0.4.4",
     "astro-eslint-parser": "^1.1.0",
-    "astro-og-canvas": "^0.5.5",
+    "astro-og-canvas": "^0.5.6",
     "canvaskit-wasm": "^0.39.1",
     "dedent-js": "^1.0.1",
     "domhandler": "^5.0.3",
     "eslint": "^9.17.0",
     "eslint-plugin-astro": "^1.3.1",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
     "globals": "^15.14.0",
     "hast-util-select": "^6.0.3",
     "hast-util-to-string": "^3.0.1",
@@ -57,14 +57,14 @@
     "rehype": "^13.0.2",
     "tsm": "^2.3.0",
     "typescript": "5.6.2",
-    "typescript-eslint": "^8.18.1",
+    "typescript-eslint": "^8.19.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/starlight": "^0.30.3",
+    "@astrojs/starlight": "^0.30.5",
     "@expressive-code/plugin-collapsible-sections": "^0.38.3",
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@62a858f",
     "canvas-confetti": "^1.6.0",

src/content/docs/en/guides/content-collections.mdx

@@ -85,7 +85,7 @@ The Content Layer API allows you to fetch your content (whether stored locally i
 
 Astro provides two built-in loader functions (`glob()` and `file()`) for fetching your local content, as well as access to the API to construct your own loader and fetch remote data.
 
-The `glob()` loader creates entries from directories of Markdown, MDX, Markdoc, or JSON files from anywhere on the filesystem. It accepts a `pattern` of entry files to match using glob patterns supported by [micromatch](https://github.com/micromatch/micromatch#matching-featuresh), and a base file path of where your files are located. Each entry's `id` will be automatically generated from its file name. Use this loader when you have one file per entry.
+The `glob()` loader creates entries from directories of Markdown, MDX, Markdoc, or JSON files from anywhere on the filesystem. It accepts a `pattern` of entry files to match using glob patterns supported by [micromatch](https://github.com/micromatch/micromatch#matching-features), and a base file path of where your files are located. Each entry's `id` will be automatically generated from its file name. Use this loader when you have one file per entry.
 
 The `file()` loader creates multiple entries from a single local file. Each entry in the file must have a unique `id` key property. It accepts a `base` file path to your file and optionally a [`parser` function](#parser-function) for data files it cannot parse automatically. Use this loader when your data file can be parsed as an array of objects.
 

src/content/docs/en/guides/integrations-guide/alpinejs.mdx

@@ -60,7 +60,7 @@ First, install the `@astrojs/alpinejs` package.
   </Fragment>
 </PackageManagerTabs>
 
-Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
+Most package managers will install associated peer dependencies as well. However, if you see a `Cannot find package 'alpinejs'` (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -82,13 +82,13 @@ Most package managers will install associated peer dependencies as well. However
 
 Then, apply the integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins="alpine()" title="astro.config.mjs" ins={2}
+```js ins="alpinejs()" title="astro.config.mjs" ins={2}
 import { defineConfig } from 'astro/config';
-import alpine from '@astrojs/alpinejs';
+import alpinejs from '@astrojs/alpinejs';
 
 export default defineConfig({
   // ...
-  integrations: [alpine()],
+  integrations: [alpinejs()],
 });
 ```
 

src/content/docs/en/guides/integrations-guide/preact.mdx

@@ -71,7 +71,7 @@ First, install the `@astrojs/preact` package:
   </Fragment>
 </PackageManagerTabs>
 
-Most package managers will install associated peer dependencies as well. If you see a "Cannot find package 'preact'" (or similar) warning when you start up Astro, you'll need to install Preact:
+Most package managers will install associated peer dependencies as well. If you see a `Cannot find package 'preact'` (or similar) warning when you start up Astro, you'll need to install Preact:
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -103,6 +103,20 @@ export default defineConfig({
 });
 ```
 
+And add the following code to the `tsconfig.json` file.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}
+```
+
 ## Usage
 
 To use your first Preact component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:

src/content/docs/en/guides/integrations-guide/react.mdx

@@ -60,22 +60,22 @@ First, install the `@astrojs/react` package:
   </Fragment>
 </PackageManagerTabs>
 
-Most package managers will install associated peer dependencies as well. If you see a "Cannot find package 'react'" (or similar) warning when you start up Astro, you'll need to install `react` and `react-dom`:
+Most package managers will install associated peer dependencies as well. If you see a `Cannot find package 'react'` (or similar) warning when you start up Astro, you'll need to install `react` and `react-dom` with its type definitions:
 
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```sh
-  npm install react react-dom
+  npm install react react-dom @types/react @types/react-dom
   ```
   </Fragment>
   <Fragment slot="pnpm">
   ```sh
-  pnpm add react react-dom
+  pnpm add react react-dom @types/react @types/react-dom
   ```
   </Fragment>
   <Fragment slot="yarn">
   ```sh
-  yarn add react react-dom
+  yarn add react react-dom @types/react @types/react-dom
   ```
   </Fragment>
 </PackageManagerTabs>
@@ -92,6 +92,20 @@ export default defineConfig({
 });
 ```
 
+And add the following code to the `tsconfig.json` file.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
+```
+
 ## Getting started
 
 To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:

src/content/docs/en/guides/integrations-guide/solid-js.mdx

@@ -83,16 +83,30 @@ Most package managers will install associated peer dependencies as well. If you
 
 Then, apply the integration to your `astro.config.*` file using the `integrations` property:
 
-```js title="astro.config.mjs" ins={2} ins="solid()"
+```js title="astro.config.mjs" ins={2} ins="solidJs()"
 import { defineConfig } from 'astro/config';
-import solid from '@astrojs/solid-js';
+import solidJs from '@astrojs/solid-js';
 
 export default defineConfig({
   // ...
-  integrations: [solid()],
+  integrations: [solidJs()],
 });
 ```
 
+And add the following code to the `tsconfig.json` file.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}
+```
+
 ## Getting started
 
 To use your first SolidJS component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:

src/content/docs/en/guides/integrations-guide/svelte.mdx

@@ -61,22 +61,22 @@ First, install the `@astrojs/svelte` package:
   </Fragment>
 </PackageManagerTabs>
 
-Most package managers will install associated peer dependencies as well. If you see a "Cannot find package 'svelte'" (or similar) warning when you start up Astro, you'll need to install Svelte:
+Most package managers will install associated peer dependencies as well. If you see a `Cannot find package 'svelte'` (or similar) warning when you start up Astro, you'll need to install Svelte and TypeScript:
 
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```sh
-  npm install svelte
+  npm install svelte typescript
   ```
   </Fragment>
   <Fragment slot="pnpm">
   ```sh
-  pnpm add svelte
+  pnpm add svelte typescript
   ```
   </Fragment>
   <Fragment slot="yarn">
   ```sh
-  yarn add svelte
+  yarn add svelte typescript
   ```
   </Fragment>
 </PackageManagerTabs>
@@ -93,6 +93,16 @@ export default defineConfig({
 });
 ```
 
+And create a new file called `svelte.config.js` in your project root directory and add the following code:
+
+```js title="svelte.config.js"
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+  preprocess: vitePreprocess(),
+}
+```
+
 ## Getting started
 
 To use your first Svelte component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
@@ -140,4 +150,4 @@ This config file will be automatically added for you when you run `astro add sve
 
 [astro-integration]: /en/guides/integrations-guide/
 
-[astro-ui-frameworks]: /en/guides/framework-components/#using-framework-components
+[astro-ui-frameworks]: /en/guides/framework-components/#using-framework-components

src/content/docs/en/guides/integrations-guide/vue.mdx

@@ -62,7 +62,7 @@ First, install the `@astrojs/vue` package:
 </PackageManagerTabs>
 
 
-Most package managers will install associated peer dependencies as well. If you see a "Cannot find package 'vue'" (or similar) warning when you start up Astro, you'll need to install Vue:
+Most package managers will install associated peer dependencies as well. If you see a `Cannot find package 'vue'` (or similar) warning when you start up Astro, you'll need to install Vue:
 
 <PackageManagerTabs>
   <Fragment slot="npm">

src/content/docs/fr/guides/integrations-guide/alpinejs.mdx

@@ -60,7 +60,7 @@ Tout d'abord, installez le paquet `@astrojs/alpinejs`.
   </Fragment>
 </PackageManagerTabs>
 
-La plupart des gestionnaires de paquets installent également les dépendances associées. Cependant, si vous voyez un avertissement "Cannot find package 'alpinejs'" (ou similaire) lorsque vous démarrez Astro, vous devrez installer manuellement Alpine.js vous-même :
+La plupart des gestionnaires de paquets installent également les dépendances associées. Cependant, si vous voyez un avertissement `Cannot find package 'alpinejs'` (ou similaire) lorsque vous démarrez Astro, vous devrez installer manuellement Alpine.js vous-même :
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -82,13 +82,13 @@ La plupart des gestionnaires de paquets installent également les dépendances a
 
 Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :
 
-```js ins="alpine()" title="astro.config.mjs" ins={2}
+```js ins="alpinejs()" title="astro.config.mjs" ins={2}
 import { defineConfig } from 'astro/config';
-import alpine from '@astrojs/alpinejs';
+import alpinejs from '@astrojs/alpinejs';
 
 export default defineConfig({
   // ...
-  integrations: [alpine()],
+  integrations: [alpinejs()],
 });
 ```
 

src/content/docs/fr/guides/integrations-guide/preact.mdx

@@ -71,7 +71,7 @@ Tout d'abord, installez le paquet `@astrojs/preact` :
   </Fragment>
 </PackageManagerTabs>
 
-La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement "Cannot find package 'preact'" (ou similaire) lorsque vous démarrez Astro, vous devez installer Preact :
+La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement `Cannot find package 'preact'` (ou similaire) lorsque vous démarrez Astro, vous devez installer Preact :
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -103,6 +103,20 @@ export default defineConfig({
 });
 ```
 
+Et ajoutez le code suivant au fichier `tsconfig.json`.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}
+```
+
 ## Utilisation
 
 Pour utiliser votre premier composant Preact dans Astro, consultez notre [documentation sur les frameworks d'interface utilisateur][astro-ui-frameworks]. Vous y découvrirez :

src/content/docs/fr/guides/integrations-guide/react.mdx

@@ -60,22 +60,22 @@ Tout d'abord, installez le paquet `@astrojs/react` :
   </Fragment>
 </PackageManagerTabs>
 
-La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement "Cannot find package 'react'" (ou similaire) lorsque vous démarrez Astro, vous devrez installer `react` et `react-dom` :
+La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement `Cannot find package 'react'` (ou similaire) lorsque vous démarrez Astro, vous devrez installer `react` et `react-dom` avec ses définitions de type :
 
 <PackageManagerTabs>
   <Fragment slot="npm">
     ```sh
-    npm install react react-dom
+    npm install react react-dom @types/react @types/react-dom
     ```
   </Fragment>
   <Fragment slot="pnpm">
     ```sh
-    pnpm add react react-dom
+    pnpm add react react-dom @types/react @types/react-dom
     ```
   </Fragment>
   <Fragment slot="yarn">
     ```sh
-    yarn add react react-dom
+    yarn add react react-dom @types/react @types/react-dom
     ```
   </Fragment>
 </PackageManagerTabs>
@@ -92,6 +92,20 @@ export default defineConfig({
 });
 ```
 
+Et ajoutez le code suivant au fichier `tsconfig.json`.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
+```
+
 ## Démarrage
 
 Pour utiliser votre premier composant React dans Astro, dirigez-vous vers notre [documentation sur les frameworks UI][astro-ui-frameworks]. Vous y découvrirez :

src/content/docs/fr/guides/integrations-guide/solid-js.mdx

@@ -83,16 +83,30 @@ La plupart des gestionnaires de paquets installent également les dépendances a
 
 Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :
 
-```js title="astro.config.mjs" ins={2} ins="solid()"
+```js title="astro.config.mjs" ins={2} ins="solidJs()"
 import { defineConfig } from 'astro/config';
-import solid from '@astrojs/solid-js';
+import solidJs from '@astrojs/solid-js';
 
 export default defineConfig({
   // ...
-  integrations: [solid()],
+  integrations: [solidJs()],
 });
 ```
 
+Et ajoutez le code suivant au fichier `tsconfig.json`.
+
+```json title="tsconfig.json" ins={5-8}
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}
+```
+
 ## Démarrage
 
 Pour utiliser votre premier composant SolidJS dans Astro, consultez notre [documentation sur les frameworks UI][astro-ui-frameworks]. Vous y découvrirez :