From b02b935513819cd8634e3f656831ff184e713e91 Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 19:23:49 +0200 Subject: i18n(fr): add `components/cards`, `components/link-cards` & `components/card-grids` (#2346) Co-authored-by: Thomas Bonnet --- docs/src/content/docs/fr/components/card-grids.mdx | 181 +++++++++++++++++++++ docs/src/content/docs/fr/components/cards.mdx | 110 +++++++++++++ docs/src/content/docs/fr/components/link-cards.mdx | 130 +++++++++++++++ 3 files changed, 421 insertions(+) create mode 100644 docs/src/content/docs/fr/components/card-grids.mdx create mode 100644 docs/src/content/docs/fr/components/cards.mdx create mode 100644 docs/src/content/docs/fr/components/link-cards.mdx diff --git a/docs/src/content/docs/fr/components/card-grids.mdx b/docs/src/content/docs/fr/components/card-grids.mdx new file mode 100644 index 00000000..4b6f15eb --- /dev/null +++ b/docs/src/content/docs/fr/components/card-grids.mdx @@ -0,0 +1,181 @@ +--- +title: Grilles de cartes +description: Apprenez à regrouper plusieurs cartes dans une grille dans Starlight. +sidebar: + order: 4 +--- + +import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Pour regrouper plusieurs composants [``](/fr/components/cards/) ou [``](/fr/components/link-cards/) dans une grille, utilisez le composant ``. + +import Preview from '~/components/component-preview.astro'; + + + + + + Sirius, Véga, Bételgeuse + + + Io, Europe, Ganymède + + + + + +## Import + +```tsx +import { CardGrid } from '@astrojs/starlight/components'; +``` + +## Utilisation + +### Grouper des cartes + +Affichez plusieurs composants [``](/fr/components/cards/) côte à côte lorsqu'il y a suffisamment d'espace en les regroupant à l'aide du composant ``. + + + +```mdx {3,10} +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + Contenu intéressant que vous souhaitez mettre en évidence. + + + Plus d'informations que vous souhaitez partager. + + +``` + + + +```markdoc {1,9} +{% cardgrid %} +{% card title="Regardez-ça" icon="open-book" %} +Contenu intéressant que vous souhaitez mettre en évidence. +{% /card %} + +{% card title="Et autre chose" icon="information" %} +Plus d'informations que vous souhaitez partager. +{% /card %} +{% /cardgrid %} +``` + + + + + + Contenu intéressant que vous souhaitez mettre en évidence. + + + Plus d'informations que vous souhaitez partager. + + + + + +### Grouper des cartes de liaison + +Affichez plusieurs composants [``](/fr/components/link-cards/) côte à côte lorsqu'il y a suffisamment d'espace en les regroupant à l'aide du composant ``. + + + +```mdx {3,9} +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + +``` + + + +```markdoc {1,7} +{% cardgrid %} +{% linkcard + title="Création de contenu en Markdown" + href="/fr/guides/authoring-content/" /%} + +{% linkcard title="Composants" href="/fr/components/using-components/" /%} +{% /cardgrid %} +``` + + + + + + + + + + +### Décaler des cartes + +Décalez la deuxième colonne de la grille verticalement pour ajouter un intérêt visuel en ajoutant l'attribut [`stagger`](#stagger) au composant ``. + +Cet attribut est utile sur votre page d'accueil pour afficher les principales fonctionnalités de votre projet. + + + +```mdx "stagger" +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + Contenu intéressant que vous souhaitez mettre en évidence. + + + Plus d'informations que vous souhaitez partager. + + +``` + + + +```markdoc "stagger=true" +{% cardgrid stagger=true %} +{% card title="Regardez-ça" icon="open-book" %} +Contenu intéressant que vous souhaitez mettre en évidence. +{% /card %} + +{% card title="Et autre chose" icon="information" %} +Plus d'informations que vous souhaitez partager. +{% /card %} +{% /cardgrid %} +``` + + + + + + Contenu intéressant que vous souhaitez mettre en évidence. + + + Plus d'informations que vous souhaitez partager. + + + + + +## Props de `` + +**Implémentation :** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/CardGrid.astro) + +Le composant `` accepte les props suivantes : + +### `stagger` + +**Type :** `boolean` + +Définit si les cartes de la grille doivent être décalées ou non. diff --git a/docs/src/content/docs/fr/components/cards.mdx b/docs/src/content/docs/fr/components/cards.mdx new file mode 100644 index 00000000..23babbee --- /dev/null +++ b/docs/src/content/docs/fr/components/cards.mdx @@ -0,0 +1,110 @@ +--- +title: Cartes +description: Apprenez à utiliser des cartes dans Starlight pour afficher du contenu dans un cadre. +sidebar: + order: 2 +--- + +import { Card } from '@astrojs/starlight/components'; + +Pour afficher du contenu dans un cadre correspondant aux styles de Starlight, utilisez le composant ``. + +import Preview from '~/components/component-preview.astro'; + + + + + Io, Europe, Ganymède + + + + +## Import + +```tsx +import { Card } from '@astrojs/starlight/components'; +``` + +## Utilisation + +Affichez une carte en utilisant le composant `` et fournissez un titre à la carte en utilisant la propriété [`title`](#title). + + + +```mdx +import { Card } from '@astrojs/starlight/components'; + + + Contenu intéressant que vous souhaitez mettre en évidence. + +``` + + + +```markdoc +{% card title="Regardez-ça" %} +Contenu intéressant que vous souhaitez mettre en évidence. +{% /card %} +``` + + + + + Contenu intéressant que vous souhaitez mettre en évidence. + + + + +### Ajouter des icônes aux cartes + +Incluez une icône dans une carte en utilisant l'attribut [`icon`](#icon) défini avec le nom de [l'une des icônes intégrées à Starlight](/fr/reference/icons/#toutes-les-icônes). + + + +```mdx 'icon="star"' +import { Card } from '@astrojs/starlight/components'; + + + Sirius, Véga, Bételgeuse + +``` + + + +```markdoc 'icon="star"' +{% card title="Étoiles" icon="star" %} +Sirius, Véga, Bételgeuse +{% /card %} +``` + + + + + Sirius, Véga, Bételgeuse + + + + +### Grouper des cartes + +Affichez plusieurs cartes côte à côte lorsqu'il y a suffisamment d'espace en les regroupant à l'aide du composant [``](/fr/components/card-grids/). +Consultez le guide [« Grouper des cartes »](/fr/components/card-grids/#grouper-des-cartes) pour un exemple. + +## Props de `` + +**Implémentation :** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Card.astro) + +Le composant `` accepte les props suivantes : + +### `title` + +**Obligatoire** +**Type :** `string` + +Le titre de la carte à afficher. + +### `icon` + +**Type :** `string` + +Une carte peut inclure un attribut `icon` défini avec le nom de [l'une des icônes intégrées à Starlight](/fr/reference/icons/#toutes-les-icônes). diff --git a/docs/src/content/docs/fr/components/link-cards.mdx b/docs/src/content/docs/fr/components/link-cards.mdx new file mode 100644 index 00000000..64a03d7e --- /dev/null +++ b/docs/src/content/docs/fr/components/link-cards.mdx @@ -0,0 +1,130 @@ +--- +title: Cartes de liaison +description: Apprenez à afficher des liens de manière proéminente sous forme de cartes dans Starlight. +sidebar: + order: 3 +--- + +import { LinkCard } from '@astrojs/starlight/components'; + +Pour afficher des liens vers différentes pages de manière proéminente, utilisez le composant ``. + +import Preview from '~/components/component-preview.astro'; + + + + + + + +## Import + +```tsx +import { LinkCard } from '@astrojs/starlight/components'; +``` + +## Utilisation + +Affichez un lien en évidence en utilisant le composant ``. +Chaque `` nécessite un attribut [`title`](#title) ainsi qu'un attribut [`href`](#href). + + + +```mdx +import { LinkCard } from '@astrojs/starlight/components'; + + +``` + + + +```markdoc +{% linkcard + title="Création de contenu en Markdown" + href="/fr/guides/authoring-content/" /%} +``` + + + + + + + +### Ajouter une description à un lien + +Ajoutez une courte description à une carte de liaison en utilisant l'attribut [`description`](#description). + + + +```mdx {6} +import { LinkCard } from '@astrojs/starlight/components'; + + +``` + + + +```markdoc {4} +{% linkcard + title="Internationalisation" + href="/fr/guides/i18n/" + description="Configurer Starlight pour prendre en charge plusieurs langues." /%} +``` + + + + + + + +### Grouper des cartes de liaison + +Affichez plusieurs cartes de liaison côte à côte lorsqu'il y a suffisamment d'espace en les regroupant à l'aide du composant [``](/fr/components/card-grids/). +Consultez le guide [« Grouper des cartes de liaison »](/fr/components/card-grids/#grouper-des-cartes-de-liaison) pour un exemple. + +## Props de `` + +**Implémentation :** [`LinkCard.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkCard.astro) + +Le composant `` accepte les props suivantes, ainsi que tous les autres [attributs de l'élément ``](https://developer.mozilla.org/fr/docs/Web/HTML/Element/a) : + +### `title` + +**Obligatoire** +**Type :** `string` + +Le titre de la carte de liaison à afficher. + +### `href` + +**Obligatoire** +**Type :** `string` + +L'URL vers laquelle pointer lorsque d'une interaction avec la carte. + +### `description` + +**Type :** `string` + +Une description facultative à afficher sous le titre. -- cgit