Skip to content

Commit

Permalink
Merge branch 'main' into chore/vite-rollup-recipe
Browse files Browse the repository at this point in the history
  • Loading branch information
Jacob Lamb authored Nov 13, 2023
2 parents 4d08fb5 + d479e8e commit 8b2d26a
Show file tree
Hide file tree
Showing 22 changed files with 1,037 additions and 273 deletions.
1 change: 1 addition & 0 deletions src/content/docs/es/editor-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ Nuestra increíble comunidad mantiene extensiones para otros editores de código
- [Extensión de Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)<span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> - Provee resaltado de sintaxis y autocompletado para Astro en Nova.
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> - Provee resaltado de sintaxis, indentación y compatibilidad con folding de código para Astro en Vim o Neovim.
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) y [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> - Provee resaltado de sintaxis, análisis de árboles y autocompletado para Astro en Neovim.
- Emacs - Ve las instrucciones para [Configurar Emacs y Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> para trabajar con Astro

## Editores de código del navegador

Expand Down
76 changes: 76 additions & 0 deletions src/content/docs/fr/core-concepts/astro-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ description: Une introduction aux pages Astro
i18nReady: true
---

import Since from '~/components/Since.astro'

Les **pages** sont des fichiers qui se trouvent dans le sous-répertoire `src/pages/` de votre projet Astro. Ils sont responsables de la gestion du routage, du chargement des données et de la mise en page globale de chaque page de votre site Web.

## Fichiers de page pris en charge
Expand Down Expand Up @@ -51,6 +53,8 @@ Les pages Astro utilisent l'extension de fichier `.astro` et prennent en charge
</html>
```

Une page doit produire un document HTML complet. S'il n'est pas explicitement inclus, Astro ajoutera la déclaration `<!DOCTYPE html>` et le contenu `<head>` nécessaires à tout composant `.astro` situé dans `src/pages/` par défaut. Vous pouvez renoncer à ce comportement pour chaque composant en le marquant comme une page [partial](#page-partielle).

Pour éviter de répéter les mêmes éléments HTML sur chaque page, vous pouvez déplacer les éléments communs `<head>` et `<body>` dans vos propres [composants de mise en page](/fr/core-concepts/layouts/). Vous pouvez utiliser autant, ou aussi peu de composants de mise en page que vous le souhaitez.

```astro {3} /</?MySiteLayout>/
Expand Down Expand Up @@ -96,3 +100,75 @@ Les fichiers portant l'extension `.html` peuvent être placés dans le répertoi
Pour une page d'erreur 404 personnalisée, vous pouvez créer un fichier `404.astro` ou `404.md` dans `/src/pages`.

Il sera construit en une page `404.html`. La plupart des [services de déploiement](/fr/guides/deploy/) le trouveront et l'utiliseront.

## Page Partielle

<Since v="3.4.0" />

:::caution
Les pages partielles sont destinées à être utilisées en conjonction avec une bibliothèque front-end, telle que [htmx](https://htmx.org/) ou [Unpoly](https://unpoly.com/). Vous pouvez également les utiliser si vous êtes à l'aise avec l'écriture d'un JavaScript front-end de bas niveau. C'est pourquoi il s'agit d'une fonctionnalité avancée.

En outre, les pages partielles ne doivent pas être utilisées si le composant contient des styles ou des scripts, car ces éléments seront supprimés de la sortie HTML. Si vous avez besoin de styles délimités, il est préférable d'utiliser des pages régulières, non partielles, ainsi qu'une bibliothèque front-end qui sait comment fusionner le contenu dans l'en-tête.
:::

Les partiels sont des composants de page situés dans `src/pages/` qui ne sont pas destinés à être affichés comme des pages complètes.

Comme les composants situés en dehors de ce dossier, ces fichiers n'incluent pas automatiquement la déclaration `<!DOCTYPE html>`, ni aucun contenu `<head>` tel que les styles et les scripts.

Cependant, parce qu'ils sont situés dans le répertoire spécial `src/pages/`, le HTML généré est disponible à une URL correspondant à son chemin de fichier. Cela permet à une bibliothèque de rendu (par exemple htmx, Stimulus, jQuery) d'y accéder sur le client et de charger des sections de HTML dynamiquement sur une page sans rafraîchissement du navigateur ni navigation dans la page.

Les partiels, lorsqu'ils sont associés à une bibliothèque de rendu, constituent une alternative aux [îles Astro](/fr/concepts/islands/) et aux [balises `<script>`](/fr/guides/client-side-scripts/) pour la création de contenu dynamique dans Astro.

Les fichiers de page qui peuvent exporter une valeur (par exemple `.astro` , `.mdx`) peuvent être marqués comme partiels.

Configurez un fichier dans le répertoire `src/pages/` pour être un partiel en ajoutant l'export suivant :

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---
<li>Je suis un partiel!</li>
```

L'`export const partial` doit être identifiable statiquement. Il peut avoir la valeur de :

- Le booléen __`true`__.
- Une variable d'environnement utilisant import.meta.env comme `import.meta.env.USE_PARTIALS`.

### Utilisation avec une bibliothèque

Les partiels sont utilisés pour mettre à jour dynamiquement une section d'une page en utilisant une bibliothèque telle que [htmx](https://htmx.org/).

L'exemple suivant montre un attribut `hx-post` défini sur l'URL d'une page partielle. Le contenu de la page partielle sera utilisé pour mettre à jour l'élément HTML ciblé sur cette page.

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
<head>
<title>Ma page</title>
<script src="https://unpkg.com/[email protected]"
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
crossorigin="anonymous"></script>
</head>
</html>
<section>
<div id="parent-div">Target here</div>
<button hx-post="/partials/clicked/"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="innerHTML"
>
Cliquez!
</button>
</section>
```

Le fichier partiel `.astro` doit exister dans le chemin d'accès correspondant et inclure une exportation définissant la page comme un fichier partiel :

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>J'ai été cliqué!</div>
```

Voir la [documentation htmx](https://htmx.org/docs/) pour plus de détails sur l'utilisation de htmx.
3 changes: 2 additions & 1 deletion src/content/docs/fr/editor-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ Notre incroyable communauté gère plusieurs extensions pour d'autres éditeurs
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Fournit la coloration syntaxique et la complétion de code pour Astro à l'intérieur de Nova
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Fournit la coloration syntaxique, l'indentation et le support de pliage de code pour Astro à l'intérieur de Vim ou Neovim.
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) and [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Fournit la coloration syntaxique, l'analyse des repertoires et l'achèvement du code pour Astro dans Neovim.
- Emacs - Voir les instructions pour [Configurer Emacs et Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> pour travailler avec Astro

## Éditeur de code "In-Browser"

Expand Down Expand Up @@ -75,7 +76,7 @@ Pour commencer, installez d'abord Prettier et le plugin :
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm install -D prettier prettier-plugin-astro
pnpm add -D prettier prettier-plugin-astro
```
</Fragment>
<Fragment slot="yarn">
Expand Down
23 changes: 21 additions & 2 deletions src/content/docs/fr/guides/deploy/microsoft-azure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ i18nReady: true

[Azure](https://azure.microsoft.com/) est une plateforme cloud de Microsoft. Vous pouvez déployer votre site Astro avec le service [Static Web Apps](https://aka.ms/staticwebapps) de Microsoft Azure.

## Conditions préalables
Ce guide vous explique comment déployer votre site Astro stocké dans GitHub à l'aide de Visual Studio Code. Veuillez vous référer aux guides Microsoft pour l'utilisation d'une [tâche Azure Pipelines](https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/reference/azure-static-web-app-v0?view=azure-pipelines) pour d'autres configurations.

## Conditions préalables
Pour suivre ce guide, vous aurez besoin de :

- Un compte Azure et une clé d'abonnement. Vous pouvez créer un [compte Azure gratuit ici](https://azure.microsoft.com/free).
Expand All @@ -21,6 +22,24 @@ Pour suivre ce guide, vous aurez besoin de :

2. Ouvrez l'extension Static Web Apps, connectez-vous à Azure et cliquez sur le bouton **+** pour créer une nouvelle Static Web App. Vous serez invité à désigner la clé d'abonnement à utiliser.

3. Suivez l'assistant lancé par l'extension pour donner un nom à votre application, choisir un préréglage de cadre et désigner la racine de l'application (généralement `/`) et l'emplacement du fichier construit `/dist`. L'assistant s'exécutera et créera une [Action GitHub](https://github.com/features/actions) dans le dossier `.github` de votre dépôt. (Ce dossier sera automatiquement créé s'il n'existe pas déjà).
3. Suivez l'assistant lancé par l'extension pour donner un nom à votre application, choisir un préréglage de cadre et désigner la racine de l'application (généralement `/`) et l'emplacement du fichier construit (utilisez `/dist`). Astro n'est pas listé dans les modèles intégrés dans Azure, vous devrez donc sélectionner `custom`. L'assistant s'exécutera et créera une [Action GitHub](https://github.com/features/actions) dans le dossier `.github` de votre dépôt. (Ce dossier sera automatiquement créé s'il n'existe pas déjà.)

L'action GitHub va déployer votre application (vous pouvez voir sa progression dans l'onglet Actions de votre repo sur GitHub). Une fois le déploiement terminé, vous pouvez visualiser votre application à l'adresse indiquée dans la fenêtre de progression de l'extension SWA en cliquant sur le bouton **Browse Website** (qui apparaîtra après l'exécution de l'action GitHub).


## Problèmes connus
L'action GitHub yaml qui est créée pour vous, suppose l'utilisation de node 14. Cela signifie que la construction d'Astro échoue. Pour résoudre ce problème, mettez à jour le fichier package.json de votre projet avec cet extrait.

```
"engines": {
"node": ">=18.0.0"
},
```

## Ressources officielles

- [Documentation de Microsoft Azure Static Web Apps](https://learn.microsoft.com/fr-fr/azure/static-web-apps/

## Ressources de la communauté

- [Déploiement d'un site web Astro vers Azure Static Web Apps](https://www.blueboxes.co.uk/deploying-an-astro-website-to-azure-static-web-apps)
27 changes: 20 additions & 7 deletions src/content/docs/fr/guides/integrations-guide/cloudflare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
type: integration
title: '@astrojs/cloudflare'
description: Apprendre à utiliser l'adaptateur SSR @astrojs/cloudflare pour déployer votre projet Astro.
githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare/'
githubURL: 'https://github.com/withastro/adapters/tree/main/packages/cloudflare/'
hasREADME: true
category: adapter
i18nReady: true
Expand All @@ -11,8 +11,6 @@ i18nReady: true
import Video from '~/components/Video.astro';
import DontEditWarning from '~/components/DontEditWarning.astro';

<DontEditWarning/>

Un adaptateur SSR pour utiliser les fonctionnalités de Cloudflare Pages. Écrivez votre code en Astro/Javascript et déployez-le sur Cloudflare Pages.

## Installation
Expand Down Expand Up @@ -183,7 +181,7 @@ Par défaut: `false`

Importer ou non les fichiers `.wasm` directement en tant que [modules ES](https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration).

Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la fois dans la version Cloudflare et dans le serveur de développement Astro. En savoir plus sur l'[utilisation des modules Wasm](#utilisation-des-modules-wasm)
Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la fois dans la version Cloudflare et dans le serveur de développement Astro. En savoir plus sur l'[utilisation des modules Wasm](#utilisation-des-modules-wasm).

```diff lang="ts"
// astro.config.mjs
Expand All @@ -200,15 +198,25 @@ Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la foi

### `runtime`

`runtime: "off" | "local"`
`runtime: { mode: "off" | "local", persistTo: string }`

Par défaut `"off"`
Par défaut `{ mode: 'off', persistTo: '' }`

Détermine si et comment le Cloudflare Runtime est ajouté à `astro dev`.

Le moteur d'exécution Cloudflare comprend les [liaisons Cloudflare](https://developers.cloudflare.com/pages/platform/functions/bindings), les [variables d'environment](https://developers.cloudflare.com/pages/platform/functions/bindings/#environment-variables), et l'[objet cf](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties). En savoir plus sur [l'accès au moteur d'exécution Cloudflare](#cloudflare-runtime).

La propriété `mode` définit comment le moteur d'exécution est ajouté à `astro dev` :

* `local`: utilise des bindings mocking et des placeholders statiques localement.
* `off`: pas d'accès au runtime Cloudflare en utilisant `astro dev`. Vous pouvez également utiliser [Prévisualisation avec Wrangler](#prévisualisation-avec-wrangler)

La propriété `persistTo` définit l'endroit où le moteur d'exécution local est installé lors de l'utilisation de `mode : local`. Cette valeur est un répertoire relatif à votre chemin d'exécution `astro dev`.

La valeur par défaut est `.wrangler/state/v3` pour correspondre au chemin par défaut utilisé par Wrangler. Cela signifie que les deux outils sont capables d'accéder et d'utiliser l'état local.

Quel que soit le répertoire défini dans `persistTo`, `.wrangler` ou votre valeur personnalisée, il doit être ajouté à `.gitignore`.

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
Expand All @@ -217,7 +225,7 @@ import cloudflare from '@astrojs/cloudflare';
export default defineConfig({
output: 'server',
adapter: cloudflare({
runtime: 'local',
+ runtime: { mode: 'local' },
}),
});
```
Expand Down Expand Up @@ -351,6 +359,7 @@ L'adaptateur Cloudflare d'Astro vous permet d'utiliser n'importe quelle API d'ex
* assert
* AsyncLocalStorage
* Buffer
* Crypto
* Diagnostics Channel
* EventEmitter
* path
Expand All @@ -369,6 +378,10 @@ import { Buffer } from 'node:buffer';

En plus, vous devez activer l'option de compatibilité (Compatibility Flag) dans Cloudflare. La configuration de cette option peut varier en fonction de l'endroit où vous déployez votre site Astro. Pour des conseils détaillés, consulter la [documentation Cloudflare (EN)](https://developers.cloudflare.com/workers/runtime-apis/nodejs).

## Support des modules Cloudflare

Tous les paquets Cloudflare (par exemple `cloudflare:sockets`) sont autorisés à être utilisés. Notez que le paquet `cloudflare:sockets` ne fonctionne pas localement sans utiliser le mode dev de Wrangler.

## Prévisualisation avec Wrangler

Pour utiliser [`wrangler`](https://developers.cloudflare.com/workers/wrangler/) afin d'exécuter votre application localement, mettez à jour le script de prévisualisation :
Expand Down
16 changes: 8 additions & 8 deletions src/content/docs/fr/guides/middleware.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ Le middleware est disponible dans les projets SSG et SSR Astro.

3. Dans n'importe quel fichier `.astro`, accédez aux données de réponse en utilisant `Astro.locals`.

```astro title="src/components/Component.astro"
---
const data = Astro.locals;
---
<h1>{data.title}</h1>
<p>Cette {data.property} provient du middleware.</p>
```
```astro title="src/components/Component.astro"
---
const data = Astro.locals;
---
<h1>{data.title}</h1>
<p>This {data.property} provient du middleware.</p>
```

### Types de middleware

Expand All @@ -53,7 +53,7 @@ export const onRequest = defineMiddleware((context, next) => {
});
```

A la place, si vous utilisez JsDoc pour profiter de la sécurité des types, vous pouvez utiliser `MiddlewareRequestHandler` :
A la place, si vous utilisez JsDoc pour profiter de la sécurité des types, vous pouvez utiliser `MiddlewareResponseHandler`:

```js
// src/middleware.js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ title: Collection does not exist
i18nReady: true
githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
---
import DontEditWarning from '~/components/DontEditWarning.astro'

:::caution[Obsolète]
Les collections qui n'existent pas n'entraînent plus d'erreur. Un avertissement est omis à la place.
Les collections qui n'existent pas n'entraînent plus d'erreur. Un avertissement est donné à la place.
:::

> Aucune collection n'a été trouvée lors de l'appel à `getCollection()`.
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/fr/reference/publish-to-npm.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ Partagez votre travail en ajoutant votre intégration à notre [bibliothèque d'

### Données du fichier `package.json`

La bibliothèque est mise à jour tous les jours automatiquement; chaque Paquet publié sur NPM avec le mot-clé `astro-component` est extrait.
La bibliothèque est automatiquement mise à jour chaque semaine; chaque paquet publié sur NPM avec le mot-clé `astro-component` est extrait.

La bibliothèque d'intégration lit les données `name`, `description`, `repository`, et `homepage` de votre `package.json`.

Expand All @@ -283,4 +283,4 @@ En plus du mot-clé obligatoire `astro-component` ou `withastro`, des mots-clés

## Partagez

Nous vous encourageons à partager votre travail, nous apprécions vraiment de voir ce que nos talentueux Astronautes créent. Partagez ce que vous créez avec nous dans notre [Discord](https://discord.gg/YQRVveAgED) ou mentionnez [@astrodotbuild](https://twitter.com/astrodotbuild) dans un Tweet !
Nous vous encourageons à partager votre travail, nous apprécions vraiment de voir ce que nos talentueux Astronautes créent. Venez partager vos créations avec nous sur notre [Discord](https://astro.build/chat) ou mentionnez [@astrodotbuild](https://twitter.com/astrodotbuild) dans un Tweet !
Loading

0 comments on commit 8b2d26a

Please sign in to comment.