Skip to content

Commit 5e6f0bd

Browse files
yanthomasdevyanthomasdev
authored
Merge branch 'main' into patch-2
2 parents 1adff4a + d6e836f commit 5e6f0bd

14 files changed

Lines changed: 523 additions & 307 deletions

File tree

‎src/content/docs/en/reference/publish-to-npm.mdx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -279,18 +279,23 @@ Avatars are a great way to highlight your brand in the library! Once your packag
279279
Need to override the information our library reads from NPM? No problem! [File an issue](https://github.com/withastro/astro.build/issues/new/choose) with the updated information and we'll make sure the custom `name`, `description`, or `homepage` is used instead.
280280
:::
281281

282-
### Collections
282+
### Categories
283283

284-
In addition to the required `astro-component` or `withastro` keyword, special keywords are also used to automatically organize packages. Including any of the keywords below will add your integration to the collection in our integrations library.
284+
In addition to the required `astro-component` or `withastro` keyword, special keywords are also used to automatically organize packages. Including any of the keywords below will add your integration to the matching category in our integrations library.
285285

286-
| collection | keywords |
286+
| category | keywords |
287287
|------------------ | -------------------------------------------- |
288288
| Accessibility | `a11y`, `accessibility` |
289289
| Adapters | `astro-adapter` |
290290
| Analytics | `analytics` |
291291
| CSS + UI | `css`, `ui`, `icon`, `icons`, `renderer` |
292292
| Frameworks | `renderer` |
293+
| Content Loaders | `astro-loader` |
293294
| Performance + SEO | `performance`, `perf`, `seo`, `optimization` |
295+
| Dev Toolbar | `devtools`, `dev-overlay`, `dev-toolbar` |
296+
| Utilities | `tooling`, `utils`, `utility` |
297+
298+
Packages that don't include any keyword matching a category will be shown as `Uncategorized`.
294299

295300
## Share
296301

‎src/content/docs/fr/basics/astro-components.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ import Wrapper from '../components/Wrapper.astro';
252252
Utilisez un attribut `slot="my-slot"` sur l'élément enfant que vous voulez passer à un emplacement correspondant `<slot name="my-slot" />` dans votre composant.
253253
:::
254254

255-
Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'un composant sans qu'ils soient enveloppés par une balise `<div>`, utilisez l'attribut `slot=""` sur le [composant `<Fragment/>` d'Astro](/fr/reference/api-reference/#fragment-):
255+
Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'un composant sans qu'ils soient enveloppés par une balise `<div>`, utilisez l'attribut `slot=""` sur le [composant `<Fragment/>` d'Astro](/fr/reference/components-reference/#fragment-):
256256

257257
```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body" />"
258258
---

‎src/content/docs/fr/reference/api-reference.mdx‎

Lines changed: 1 addition & 258 deletions
Original file line numberDiff line numberDiff line change
@@ -1369,7 +1369,7 @@ export default function () {
13691369

13701370
La fonction `getImage()` est prévue pour générer des images destinées à être utilisées ailleurs que directement en HTML, par exemple dans une [route d'API](/fr/guides/endpoints/#points-de-terminaison-du-serveur-routes-api). Elle vous permet également de créer votre propre composant `<Image />` personnalisé.
13711371

1372-
`getImage()` prend un objet d'options avec les [mêmes propriétés que le composant Image](#propriétés) (à l'exception de `alt`).
1372+
`getImage()` prend un objet d'options avec les [mêmes propriétés que le composant Image](/fr/reference/components-reference/#propriétés) (à l'exception de `alt`).
13731373

13741374
```astro
13751375
---
@@ -2636,261 +2636,4 @@ La propriété `code` accepte les versions lisibles par l'homme de tous les code
26362636

26372637
La propriété `message` accepte une chaîne de caractères. (par exemple, « L'utilisateur doit être connecté. »)
26382638

2639-
## Composants intégrés
2640-
2641-
Astro comprend plusieurs composants intégrés que vous pouvez utiliser dans vos projets. Tous les composants intégrés sont disponibles dans les fichiers `.astro` via `import {} from 'astro:components';`.
2642-
2643-
Vous pouvez référencer les `Props` de ces composants à l'aide de l'utilitaire [`ComponentProp`](/fr/guides/typescript/#type-componentprops).
2644-
2645-
### `<Code />`
2646-
2647-
```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/
2648-
---
2649-
import { Code } from 'astro:components';
2650-
---
2651-
<!-- Ajouter la coloration syntaxique à du code JavaScript. -->
2652-
<Code code={`const foo = 'bar';`} lang="js" />
2653-
<!-- Facultatif : Personnaliser votre thème. -->
2654-
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
2655-
<!-- Facultatif : Activer le retour à la ligne. -->
2656-
<Code code={`const foo = 'bar';`} lang="js" wrap />
2657-
<!-- Facultatif : Générer du code en ligne. -->
2658-
<p>
2659-
<Code code={`const foo = 'bar';`} lang="js" inline />
2660-
sera généré en ligne.
2661-
</p>
2662-
<!-- Facultatif : defaultColor -->
2663-
<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />
2664-
```
2665-
2666-
Ce composant fournit une coloration syntaxique pour les blocs de code au moment de la construction (aucun JavaScript côté client n'est inclus). Le composant est alimenté en interne par Shiki et prend en charge tous les [thèmes](https://shiki.style/themes) et [langues](https://shiki.style/languages) populaires. De plus, vous pouvez ajouter vos thèmes, langues, [transformateurs](#transformateurs) et [couleurs par défaut](https://shiki.style/guide/dual-themes#without-default-color) personnalisés en les transmettant respectivement aux attributs `theme`, `lang`, `transformers` et `defaultColor`.
2667-
2668-
:::note
2669-
Ce composant **n'hérite** pas des paramètres de votre [configuration Shiki](/fr/guides/markdown-content/#configuration-de-shiki). Vous devrez les définir à l'aide des props du composant.
2670-
:::
2671-
2672-
#### Transformateurs
2673-
2674-
<p><Since v="4.11.0" /></p>
2675-
2676-
[Les Transformateurs de Shiki](https://shiki.style/packages/transformers#shikijs-transformers) peuvent éventuellement être appliqués au code en les transmettant via la propriété `transformers` sous forme de tableau. Depuis Astro v4.14.0, vous pouvez également fournir une chaîne de caractères à [l'attribut `meta` de Shiki](https://shiki.style/guide/transformers#meta) pour transmettre des options aux transformateurs.
2677-
2678-
Notez que `transformers` n'applique que les classes et vous devez fournir vos propres règles CSS pour cibler les éléments de votre bloc de code.
2679-
2680-
```astro title="src/pages/index.astro" {12-13}
2681-
---
2682-
import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'
2683-
import { Code } from 'astro:components'
2684-
const code = `const foo = 'hello'
2685-
const bar = ' world'
2686-
console.log(foo + bar) // [!code focus]
2687-
`
2688-
---
2689-
<Code
2690-
code={code}
2691-
lang="js"
2692-
transformers={[transformerMetaHighlight()]}
2693-
meta="{1,3}" />
2694-
2695-
<style is:global>
2696-
pre.has-focused .line:not(.focused) {
2697-
filter: blur(1px);
2698-
}
2699-
</style>
2700-
```
2701-
2702-
### `<Fragment />`
2703-
2704-
Un composant utilisé avec les [directives `set:*`](/fr/reference/directives-reference/#sethtml) pour restituer le contenu HTML sans aucun élément d'habillage supplémentaire :
2705-
2706-
```astro title="src/components/SetHtml.astro" "Fragment"
2707-
---
2708-
const htmlString = '<p>Contenu HTML brut</p>';
2709-
---
2710-
<Fragment set:html={htmlString} />
2711-
```
2712-
2713-
En savoir plus sur [l'utilisation de fragments](/fr/basics/astro-syntax/#fragments) dans la syntaxe Astro.
2714-
2715-
### `<Prism />`
2716-
2717-
Pour utiliser le composant de coloration `Prism`, **installez** d'abord le package `@astrojs/prism` :
2718-
2719-
<PackageManagerTabs>
2720-
<Fragment slot="npm">
2721-
```shell
2722-
npm install @astrojs/prism
2723-
```
2724-
</Fragment>
2725-
<Fragment slot="pnpm">
2726-
```shell
2727-
pnpm add @astrojs/prism
2728-
```
2729-
</Fragment>
2730-
<Fragment slot="yarn">
2731-
```shell
2732-
yarn add @astrojs/prism
2733-
```
2734-
</Fragment>
2735-
</PackageManagerTabs>
2736-
2737-
```astro
2738-
---
2739-
import { Prism } from '@astrojs/prism';
2740-
---
2741-
<Prism lang="js" code={`const foo = 'bar';`} />
2742-
```
2743-
2744-
Ce composant fournit une coloration syntaxique spécifique au langage pour les blocs de code en appliquant les classes CSS de Prism. Notez que **vous devez fournir une feuille de style CSS Prism** (ou apporter la vôtre) pour que la coloration syntaxique apparaisse ! Consultez la [section Configuration de Prism](/fr/guides/markdown-content/#configuration-de-prism) pour plus de détails.
2745-
2746-
Consultez la [liste des langues supportées par Prism](https://prismjs.com/#supported-languages) où vous pouvez trouver l'alias correspondant à une langue. Et vous pouvez également afficher vos blocs de code Astro avec `lang="astro"` !
2747-
2748-
### `<Image />`
2749-
2750-
```astro title="src/components/MyComponent.astro"
2751-
---
2752-
// importation du composant Image et de l'image
2753-
import { Image } from 'astro:assets';
2754-
import myImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
2755-
---
2756-
2757-
<!-- `alt` est obligatoire sur le composant Image -->
2758-
<Image src={myImage} alt="Une description de mon image." />
2759-
```
2760-
2761-
```html
2762-
<!-- Sortie -->
2763-
<!-- L'image est optimisée, les attributs appropriés sont appliqués -->
2764-
<img
2765-
src="/_astro/mon_image.hash.webp"
2766-
width="1600"
2767-
height="900"
2768-
decoding="async"
2769-
loading="lazy"
2770-
alt="Une description de mon image."
2771-
/>
2772-
```
2773-
#### Propriétés
2774-
2775-
- src (requis)
2776-
- alt (requis)
2777-
- width et height (requis pour les images dans `public/` et celles distantes)
2778-
- format
2779-
- quality
2780-
- densities
2781-
- widths
2782-
2783-
En plus des propriétés ci-dessus, le composant `<Image />` accepte toutes les propriétés acceptées par la balise HTML `<img>`.
2784-
2785-
Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#image--astroassets).
2786-
2787-
### `<Picture />`
2788-
2789-
<p><Since v="3.3.0" /></p>
2790-
2791-
Utilisez le composant Astro intégré `<Picture />` pour afficher une image réactive avec plusieurs formats et/ou tailles.
2792-
2793-
```astro title="src/pages/index.astro"
2794-
---
2795-
import { Picture } from 'astro:assets';
2796-
import monImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
2797-
---
2798-
2799-
<!-- `alt` est obligatoire sur le composant Image -->
2800-
<Picture src={monImage} formats={['avif', 'webp']} alt="Une description de mon image." />
2801-
```
2802-
2803-
```html
2804-
<!-- Sortie -->
2805-
<picture>
2806-
<source srcset="/_astro/mon_image.hash.avif" type="image/avif" />
2807-
<source srcset="/_astro/mon_image.hash.webp" type="image/webp" />
2808-
<img
2809-
src="/_astro/mon_image.hash.png"
2810-
width="1600"
2811-
height="900"
2812-
decoding="async"
2813-
loading="lazy"
2814-
alt="Une description de mon image."
2815-
/>
2816-
</picture>
2817-
```
2818-
2819-
Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#picture-).
2820-
2821-
#### Propriétés
2822-
2823-
`<Picture />` accepte toutes les propriétés du composant `<Image />` en plus des suivantes :
2824-
2825-
##### `formats`
2826-
2827-
Un tableau de formats d'image à utiliser pour les balises `<source>`. Par défaut, ceci est défini sur `['webp']`.
2828-
2829-
##### `fallbackFormat`
2830-
2831-
Format à utiliser comme valeur de repli pour la balise `<img>`. La valeur par défaut est `.png` pour les images statiques, `.gif` pour les images animées et `.svg` pour les fichiers SVG.
2832-
2833-
##### `pictureAttributes`
2834-
2835-
Un objet d'attributs à ajouter à la balise `<picture>`. Utilisez cette propriété pour appliquer des attributs à l'élément externe `<picture>` lui-même. Les attributs appliqués directement au composant `<Picture />` s'appliqueront à l'élément interne `<img>`, à l'exception de ceux utilisés pour la transformation d'image.
2836-
2837-
2838-
### `<Content />`
2839-
2840-
Un composant générique utilisé pour restituer le contenu d'une [entrée de collection de contenu](/fr/guides/content-collections/#que-sont-les-collections-de-contenu-).
2841-
2842-
Tout d'abord, interrogez une ou plusieurs entrées en utilisant `getCollection()` ou `getEntry()`. Ensuite, la fonction `entry.render()` peut renvoyer le composant `<Content />` à utiliser dans un modèle de fichier `.astro`.
2843-
2844-
```astro title="src/pages/render-example.astro" {4, 7}
2845-
---
2846-
import { getEntry } from 'astro:content';
2847-
const entry = await getEntry('blog', 'article-1');
2848-
const { Content } = await entry.render();
2849-
---
2850-
<p>Publié le : {entry.data.published.toDateString()}</p>
2851-
<Content />
2852-
```
2853-
2854-
### `<ViewTransitions />`
2855-
2856-
<p><Since v="2.9.0" /></p>
2857-
2858-
Choisissez d'utiliser les transitions de vue sur des pages individuelles en important et en ajoutant le composant de routage `<ViewTransitions />` à la balise `<head>` sur chaque page souhaitée.
2859-
2860-
```astro title="src/pages/index.astro" ins={2,7}
2861-
---
2862-
import { ViewTransitions } from 'astro:transitions';
2863-
---
2864-
<html lang="fr">
2865-
<head>
2866-
<title>Ma page d'accueil</title>
2867-
<ViewTransitions />
2868-
</head>
2869-
<body>
2870-
<h1>Bienvenue sur mon site web !</h1>
2871-
</body>
2872-
</html>
2873-
```
2874-
2875-
Découvrez comment [contrôler le routeur](/fr/guides/view-transitions/#contrôle-du-routeur) et [ajouter des directives de transition](/fr/guides/view-transitions/#directives-de-transition) aux éléments et composants de la page.
2876-
2877-
### `<Debug />`
2878-
2879-
```astro
2880-
---
2881-
import { Debug } from 'astro:components';
2882-
const serverObject = {
2883-
a: 0,
2884-
b: "string",
2885-
c: {
2886-
nested: "object"
2887-
}
2888-
}
2889-
---
2890-
<Debug {serverObject} />
2891-
```
2892-
2893-
Ce composant fournit un moyen d'inspecter les valeurs côté client, sans aucun JavaScript.
2894-
2895-
28962639
[canonical]: https://fr.wikipedia.org/wiki/Élément_de_lien_canonique

0 commit comments

Comments
 (0)