From b02b935513819cd8634e3f656831ff184e713e91 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 19 Sep 2024 19:23:49 +0200 Subject: [PATCH 1/7] i18n(fr): add `components/cards`, `components/link-cards` & `components/card-grids` (#2346) Co-authored-by: Thomas Bonnet --- .../content/docs/fr/components/card-grids.mdx | 181 ++++++++++++++++++ docs/src/content/docs/fr/components/cards.mdx | 110 +++++++++++ .../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 00000000000..4b6f15eb93f --- /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 00000000000..23babbeebc2 --- /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 00000000000..64a03d7e638 --- /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. From a257b83f1e5704ff41bcbe85482ac81a1a61ce1f Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 19 Sep 2024 20:55:48 +0200 Subject: [PATCH 2/7] Fix synced nested `` restoration issue (#2377) --- .changeset/beige-knives-visit.md | 5 ++ .../basics/src/content/docs/tabs-nested.mdx | 47 +++++++++++++++++++ packages/starlight/__e2e__/tabs.test.ts | 40 ++++++++++++++-- packages/starlight/user-components/Tabs.astro | 2 +- 4 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 .changeset/beige-knives-visit.md create mode 100644 packages/starlight/__e2e__/fixtures/basics/src/content/docs/tabs-nested.mdx diff --git a/.changeset/beige-knives-visit.md b/.changeset/beige-knives-visit.md new file mode 100644 index 00000000000..443bbf07468 --- /dev/null +++ b/.changeset/beige-knives-visit.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes an issue with synced `` components containing nested `` causing tab panels to not render correctly. diff --git a/packages/starlight/__e2e__/fixtures/basics/src/content/docs/tabs-nested.mdx b/packages/starlight/__e2e__/fixtures/basics/src/content/docs/tabs-nested.mdx new file mode 100644 index 00000000000..1be29663b4c --- /dev/null +++ b/packages/starlight/__e2e__/fixtures/basics/src/content/docs/tabs-nested.mdx @@ -0,0 +1,47 @@ +--- +title: Tabs +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +A set of tabs using the `pkg` sync key with some nested tabs using an `os` sync key. + + + + + + npm content + + + npm macOS + npm Windows + npm GNU/Linux + + + + + + + pnpm content + + + pnpm macOS + pnpm Windows + pnpm GNU/Linux + + + + + + + yarn content + + + yarn macOS + yarn Windows + yarn GNU/Linux + + + + + diff --git a/packages/starlight/__e2e__/tabs.test.ts b/packages/starlight/__e2e__/tabs.test.ts index 45e96c842ca..2812494f14b 100644 --- a/packages/starlight/__e2e__/tabs.test.ts +++ b/packages/starlight/__e2e__/tabs.test.ts @@ -312,7 +312,41 @@ test('gracefully handles invalid persisted state for synced tabs', async ({ ); }); -async function expectSelectedTab(tabs: Locator, label: string, panel: string) { - expect((await tabs.getByRole('tab', { selected: true }).textContent())?.trim()).toBe(label); - expect((await tabs.getByRole('tabpanel').textContent())?.trim()).toBe(panel); +test('syncs and restores nested tabs', async ({ page, getProdServer }) => { + const starlight = await getProdServer(); + await starlight.goto('/tabs-nested'); + + const tabs = page.locator('starlight-tabs'); + const pkgTabs = tabs.nth(0); + const osTabsA = tabs.nth(1); + const osTabsB = tabs.nth(2); + + // Select the linux tab in the npm tab. + await osTabsA.getByRole('tab').filter({ hasText: 'linux' }).click(); + + await expectSelectedTab(osTabsA, 'linux', 'npm GNU/Linux'); + + // Select the pnpm tab. + await pkgTabs.getByRole('tab').filter({ hasText: 'pnpm' }).click(); + + await expectSelectedTab(pkgTabs, 'pnpm'); + await expectSelectedTab(osTabsB, 'linux', 'pnpm GNU/Linux'); + + page.reload(); + + // The synced tabs should be restored. + await expectSelectedTab(pkgTabs, 'pnpm'); + await expectSelectedTab(osTabsB, 'linux', 'pnpm GNU/Linux'); +}); + +async function expectSelectedTab(tabs: Locator, label: string, panel?: string) { + expect( + (await tabs.locator(':scope > div [role=tab][aria-selected=true]').textContent())?.trim() + ).toBe(label); + + if (panel) { + const tabPanel = tabs.locator(':scope > [role=tabpanel]:not([hidden])'); + await expect(tabPanel).toBeVisible(); + expect((await tabPanel.textContent())?.trim()).toBe(panel); + } } diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro index f3108806686..4234eb0126a 100644 --- a/packages/starlight/user-components/Tabs.astro +++ b/packages/starlight/user-components/Tabs.astro @@ -54,7 +54,7 @@ if (isSynced) { const tabIndexToRestore = tabs.findIndex( (tab) => tab instanceof HTMLAnchorElement && tab.textContent?.trim() === label ); - const panels = starlightTabs?.querySelectorAll('[role="tabpanel"]'); + const panels = starlightTabs?.querySelectorAll(':scope > [role="tabpanel"]'); const newTab = tabs[tabIndexToRestore]; const newPanel = panels[tabIndexToRestore]; if (tabIndexToRestore < 1 || !newTab || !newPanel) return; From 0ed7312ac0abae48c85f42bb0a388d80c22020f1 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 19 Sep 2024 20:56:40 +0200 Subject: [PATCH 3/7] docs: fix link buttons incorrect heading name (#2372) --- docs/src/content/docs/components/link-buttons.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/components/link-buttons.mdx b/docs/src/content/docs/components/link-buttons.mdx index 457796c904d..008adc22c54 100644 --- a/docs/src/content/docs/components/link-buttons.mdx +++ b/docs/src/content/docs/components/link-buttons.mdx @@ -63,7 +63,7 @@ Configuration Reference -### Add icons to cards +### Add icons to link buttons Include an icon in a link button using the [`icon`](#icon) attribute set to the name of [one of Starlight’s built-in icons](/reference/icons/#all-icons). From 3fa153309bcf2486bb9580b502b235267a6f529e Mon Sep 17 00:00:00 2001 From: "Houston (Bot)" <108291165+astrobot-houston@users.noreply.github.com> Date: Thu, 19 Sep 2024 12:01:45 -0700 Subject: [PATCH 4/7] [ci] release (#2378) Co-authored-by: github-actions[bot] --- .changeset/beige-knives-visit.md | 5 ----- examples/basics/package.json | 2 +- examples/markdoc/package.json | 2 +- examples/tailwind/package.json | 2 +- packages/starlight/CHANGELOG.md | 6 ++++++ packages/starlight/package.json | 2 +- pnpm-lock.yaml | 6 +++--- 7 files changed, 13 insertions(+), 12 deletions(-) delete mode 100644 .changeset/beige-knives-visit.md diff --git a/.changeset/beige-knives-visit.md b/.changeset/beige-knives-visit.md deleted file mode 100644 index 443bbf07468..00000000000 --- a/.changeset/beige-knives-visit.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@astrojs/starlight': patch ---- - -Fixes an issue with synced `` components containing nested `` causing tab panels to not render correctly. diff --git a/examples/basics/package.json b/examples/basics/package.json index eed739d1adb..86da617c295 100644 --- a/examples/basics/package.json +++ b/examples/basics/package.json @@ -11,7 +11,7 @@ "astro": "astro" }, "dependencies": { - "@astrojs/starlight": "^0.28.1", + "@astrojs/starlight": "^0.28.2", "astro": "^4.15.3", "sharp": "^0.32.5" } diff --git a/examples/markdoc/package.json b/examples/markdoc/package.json index 8901b555e3a..87645b4b33e 100644 --- a/examples/markdoc/package.json +++ b/examples/markdoc/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/markdoc": "^0.11.4", - "@astrojs/starlight": "^0.28.1", + "@astrojs/starlight": "^0.28.2", "@astrojs/starlight-markdoc": "^0.1.0", "astro": "^4.15.3", "sharp": "^0.32.5" diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json index 0c6720a528b..b362696afc2 100644 --- a/examples/tailwind/package.json +++ b/examples/tailwind/package.json @@ -11,7 +11,7 @@ "astro": "astro" }, "dependencies": { - "@astrojs/starlight": "^0.28.1", + "@astrojs/starlight": "^0.28.2", "@astrojs/starlight-tailwind": "^2.0.3", "@astrojs/tailwind": "^5.1.0", "astro": "^4.15.3", diff --git a/packages/starlight/CHANGELOG.md b/packages/starlight/CHANGELOG.md index 4b581d8c230..80bfa04968b 100644 --- a/packages/starlight/CHANGELOG.md +++ b/packages/starlight/CHANGELOG.md @@ -1,5 +1,11 @@ # @astrojs/starlight +## 0.28.2 + +### Patch Changes + +- [#2377](https://github.com/withastro/starlight/pull/2377) [`a257b83`](https://github.com/withastro/starlight/commit/a257b83f1e5704ff41bcbe85482ac81a1a61ce1f) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue with synced `` components containing nested `` causing tab panels to not render correctly. + ## 0.28.1 ### Patch Changes diff --git a/packages/starlight/package.json b/packages/starlight/package.json index f5f3d9b9935..0aa7096e644 100644 --- a/packages/starlight/package.json +++ b/packages/starlight/package.json @@ -1,6 +1,6 @@ { "name": "@astrojs/starlight", - "version": "0.28.1", + "version": "0.28.2", "description": "Build beautiful, high-performance documentation websites with Astro", "scripts": { "test": "vitest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad10a53cf4b..e71d5b16329 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -73,7 +73,7 @@ importers: examples/basics: dependencies: '@astrojs/starlight': - specifier: ^0.28.1 + specifier: ^0.28.2 version: link:../../packages/starlight astro: specifier: ^4.15.3 @@ -88,7 +88,7 @@ importers: specifier: ^0.11.4 version: 0.11.4(astro@4.15.3) '@astrojs/starlight': - specifier: ^0.28.1 + specifier: ^0.28.2 version: link:../../packages/starlight '@astrojs/starlight-markdoc': specifier: ^0.1.0 @@ -103,7 +103,7 @@ importers: examples/tailwind: dependencies: '@astrojs/starlight': - specifier: ^0.28.1 + specifier: ^0.28.2 version: link:../../packages/starlight '@astrojs/starlight-tailwind': specifier: ^2.0.3 From 47b21c9e9e3f96bc58071610d40688101b559d9e Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 19 Sep 2024 21:26:43 +0200 Subject: [PATCH 5/7] i18n(fr): add `components/using-components` (#2345) Co-authored-by: Chris Swithinbank --- .../docs/fr/components/using-components.mdx | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 docs/src/content/docs/fr/components/using-components.mdx diff --git a/docs/src/content/docs/fr/components/using-components.mdx b/docs/src/content/docs/fr/components/using-components.mdx new file mode 100644 index 00000000000..168133f217f --- /dev/null +++ b/docs/src/content/docs/fr/components/using-components.mdx @@ -0,0 +1,96 @@ +--- +title: Utilisation des composants +description: Utilisation des composants avec MDX et Markdoc avec Starlight. +sidebar: + order: 1 +--- + +Les composants vous permettent de réutiliser facilement un élément d'interface utilisateur ou de style de manière cohérente. +Il peut s'agir par exemple d'une carte de liaison ou d'une intégration YouTube. +Starlight prend en charge l'utilisation de composants dans les fichiers [MDX](https://mdxjs.com/) et [Markdoc](https://markdoc.dev/) et fournit des composants courants que vous pouvez utiliser. + +[Pour en savoir plus sur la création de composants, consultez la documentation d'Astro](https://docs.astro.build/fr/core-concepts/astro-components/). + +## Utilisation d'un composant avec MDX + +Vous pouvez utiliser un composant en l'important dans votre fichier MDX et ensuite l'afficher en tant que balise JSX. +Ces balises ressemblent à des balises HTML, mais commencent par une lettre majuscule correspondant au nom utilisé dans votre instruction `import` : + +```mdx +--- +# src/content/docs/exemple.mdx +title: Bienvenue dans ma documentation +--- + +import { Icon } from '@astrojs/starlight/components'; +import CustomCard from '../../components/CustomCard.astro'; + + + + + Les composants peuvent également contenir du **contenu imbriqué**. + +``` + +Starlight étant basé sur Astro, vous pouvez ajouter la prise en charge de composants construits avec n'importe quel [framework d'interface utilisateur pris en charge (React, Preact, Svelte, Vue, Solid, and Alpine)](https://docs.astro.build/fr/guides/framework-components/) dans vos fichiers MDX. +Pour en savoir plus sur [l'utilisation de composants avec MDX](https://docs.astro.build/fr/guides/integrations-guide/mdx/#utilisation-de-composants-dans-mdx), consultez la documentation Astro. + +## Utilisation d'un composant avec Markdoc + +Ajoutez la prise en charge de la rédaction de contenu avec Markdoc en suivant notre [guide de configuration Markdoc](/fr/guides/authoring-content/#markdoc). + +En utilisant la préconfiguration Markdoc de Starlight, vous pouvez utiliser les composants intégrés à Starlight avec la syntaxe de balises `{% %}` de Markdoc. +À la différence du format MDX, les composants dans les fichiers Markdoc n'ont pas besoin d'être importés. +L'exemple suivant affiche le [composant de carte](/fr/components/cards/) de Starlight dans un fichier Markdoc : + +```markdoc +--- +# src/content/docs/exemple.mdoc +title: Bienvenue dans ma documentation +--- + +{% card title="Étoiles" icon="star" %} +Sirius, Véga, Bételgeuse +{% /card %} +``` + +Consultez la [documentation de l'intégration Astro Markdoc](https://docs.astro.build/fr/guides/integrations-guide/markdoc/#afficher-les-composants) pour plus d'informations sur l'utilisation des composants dans les fichiers Markdoc. + +## Composants intégrés + +Starlight fournit des composants intégrés par défaut pour des cas d'utilisation courants à une documentation. +Ces composants sont disponibles dans le paquet `@astrojs/starlight/components` dans les fichiers MDX et dans la [préconfiguration Markdoc de Starlight](/fr/guides/authoring-content/#markdoc) dans les fichiers Markdoc. + +Utilisez la barre latérale pour obtenir une liste des composants disponibles et savoir comment les utiliser. + +## Compatibilité avec les styles de Starlight + +Starlight applique des styles par défaut à votre contenu Markdown, par exemple en ajoutant une marge entre les éléments. +Si ces styles entrent en conflit avec l'apparence de votre composant, utilisez la classe `not-content` sur votre composant pour les désactiver. + +```astro 'class="not-content"' +--- +// src/components/Exemple.astro +--- + +
+

Contenu non affecté par les styles par défaut de Starlight.

+
+``` + +## Props des composants + +Utilisez le type [`ComponentProps`](https://docs.astro.build/fr/guides/typescript/#type-componentprops) depuis `astro/types` pour référencer les `Props` acceptées par un composant même si elles ne sont pas exportées par le composant lui-même. +Cela peut être utile lorsqu'il s'agit d'entourer ou d'étendre un composant existant. + +L'exemple suivant utilise `ComponentProps` pour obtenir le type des props acceptées par le composant `Icon` intégré à Starlight : + +```astro +--- +// src/components/Exemple.astro +import type { ComponentProps } from 'astro/types'; +import { Icon } from '@astrojs/starlight/icon'; + +type IconProps = ComponentProps; +--- +``` From b97d29345adfd5bfe2a6e4d849ba5bd268948657 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 20 Sep 2024 09:29:37 +0200 Subject: [PATCH 6/7] i18n(fr): add `components/link-buttons` (#2373) Co-authored-by: Thomas Bonnet <14293805+thomasbnt@users.noreply.github.com> --- .../docs/fr/components/link-buttons.mdx | 145 ++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 docs/src/content/docs/fr/components/link-buttons.mdx diff --git a/docs/src/content/docs/fr/components/link-buttons.mdx b/docs/src/content/docs/fr/components/link-buttons.mdx new file mode 100644 index 00000000000..aaf0490c638 --- /dev/null +++ b/docs/src/content/docs/fr/components/link-buttons.mdx @@ -0,0 +1,145 @@ +--- +title: Boutons de liaison +description: Apprenez à créer des boutons de liaison dans Starlight pour des liens visuellement distincts qui appellent à l'action. +--- + +import { LinkButton } from '@astrojs/starlight/components'; + +Pour afficher des liens visuellement distincts qui appellent à l'action (également connus sous le nom de « call-to-action » ou « CTA » en anglais), utilisez le composant ``. + +import Preview from '~/components/component-preview.astro'; + + + + + Lire la documentation + + + + +## Import + +```tsx +import { LinkButton } from '@astrojs/starlight/components'; +``` + +## Utilisation + +Utilisez le composant `` pour afficher un lien visuellement distinct qui appelle à l'action. +Un bouton de liaison est utile pour diriger les utilisateurs vers le contenu le plus pertinent ou actionnable et est souvent utilisé sur les pages d'accueil. + +Le composant `` nécessite un attribut [`href`](#href). +Facultativement, personnalisez l'apparence du bouton de liaison en utilisant l'attribut [`variant`](#variant), qui peut être défini sur `primary` (la valeur par défaut), `secondary` ou `minimal`. + + + +```mdx +import { LinkButton } from '@astrojs/starlight/components'; + +Mise en route + + Référence de configuration + +``` + + + +```markdoc +{% linkbutton href="/fr/getting-started/" %}Mise en route{% /linkbutton %} + +{% linkbutton href="/fr/reference/configuration/" variant="secondary" %} +Référence de configuration +{% /linkbutton %} +``` + + + + + Mise en route + + Référence de configuration + + + + + +### Ajouter des icônes aux boutons de liaison + +Incluez une icône dans un bouton de liaison en utilisant l'attribut [`icon`](#icon) défini avec [une des icônes disponibles avec Starlight](/fr/reference/icons/#toutes-les-icônes). + +L'attribut [`iconPlacement`](#iconplacement) peut être utilisé pour positionner l'icône avant le texte en le définissant sur `start` (par défaut à `end`). + + + +```mdx {6-7} +import { LinkButton } from '@astrojs/starlight/components'; + + + Référence: Astro + +``` + + + +```markdoc {4-5} +{% linkbutton + href="https://docs.astro.build/fr/" + variant="secondary" + icon="external" + iconPlacement="start" %} +Référence: Astro +{% /linkbutton %} +``` + + + + + Référence: Astro + + + + +## Props de `` + +**Implémentation :** [`LinkButton.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkButton.astro) + +Le composant `` accepte les props suivantes et également tout [autre attribut de l'élément ``](https://developer.mozilla.org/fr/docs/Web/HTML/Element/a) : + +### `href` + +**Obligatoire** +**Type :** `string` + +L'URL vers laquelle le bouton de liaison pointe. + +### `variant` + +**Type :** `'primary' | 'secondary' | 'minimal'` +**Par défaut :** `'primary'` + +L'apparence du bouton de liaison. +Définissez `primary` pour un lien qui appelle à l'action proéminent utilisant la couleur d'accentuation du thème, `secondary` pour un lien moins proéminent, ou `minimal` pour un lien avec un style minimal. + +### `icon` + +**Type :** `string` + +Un bouton de liaison peut inclure un attribut `icon` défini avec [une des icônes disponibles avec Starlight](/fr/reference/icons/#toutes-les-icônes). + +### `iconPlacement` + +**Type :** `'start' | 'end'` +**Par défaut :** `'end'` + +Détermine la position de l'icône par rapport au texte du bouton de liaison. From 70e7e7978435195cbd8c4be7f279e155b1d3298d Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 20 Sep 2024 09:35:37 +0200 Subject: [PATCH 7/7] i18n(fr): add `components/tabs` (#2375) Co-authored-by: Thomas Bonnet <14293805+thomasbnt@users.noreply.github.com> --- docs/src/content/docs/fr/components/tabs.mdx | 221 +++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 docs/src/content/docs/fr/components/tabs.mdx diff --git a/docs/src/content/docs/fr/components/tabs.mdx b/docs/src/content/docs/fr/components/tabs.mdx new file mode 100644 index 00000000000..277992cd91f --- /dev/null +++ b/docs/src/content/docs/fr/components/tabs.mdx @@ -0,0 +1,221 @@ +--- +title: Onglets +description: Apprenez à créer des interfaces à onglets dans Starlight pour regrouper des informations équivalentes. +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Pour créer une interface à onglets, utilisez les composants `` et ``. +Des onglets sont utiles pour regrouper des informations équivalentes où un utilisateur n'a besoin de voir qu'une des options. + +import Preview from '~/components/component-preview.astro'; + + + + + Sirius, Véga, Bételgeuse + Io, Europe, Ganymède + + + + +## Import + +```tsx +import { Tabs, TabItem } from '@astrojs/starlight/components'; +``` + +## Utilisation + +Affichez une interface à onglets en utilisant les composants `` et ``. +Chaque composant `` doit avoir un [`label`](#label) à afficher aux utilisateurs. + + + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + Sirius, Véga, Bételgeuse + Io, Europe, Ganymède + +``` + + + +```markdoc +{% tabs %} +{% tabitem label="Étoiles" %} +Sirius, Véga, Bételgeuse +{% /tabitem %} + +{% tabitem label="Lunes" %} +Io, Europe, Ganymède +{% /tabitem %} +{% /tabs %} +``` + + + + + Sirius, Véga, Bételgeuse + Io, Europe, Ganymède + + + + +### Synchroniser des onglets + +Conservez plusieurs groupes d'onglets synchronisés en ajoutant l'attribut [`syncKey`](#synckey). + +Tous les composants `` avec la même valeur `syncKey` afficheront le même label actif. +Cela permet à votre lecteur de choisir une fois (par exemple, leur système d'exploitation ou leur gestionnaire de paquets) et de voir leur choix persisté au travers de navigations entre différentes pages. + +Pour synchroniser des onglets liés, ajoutez une propriété `syncKey` identique à chaque composant `` et assurez-vous qu'ils utilisent tous les mêmes libellés avec le composant `` : + + + +```mdx 'syncKey="constellations"' +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +_Quelques étoiles :_ + + + Bellatrix, Rigel, Bételgeuse + Pollux, Castor A, Castor B + + +_Quelques exoplanètes :_ + + + HD 34445 b, Gliese 179 b, Wasp-82 b + Pollux b, HAT-P-24b, HD 50554 b + +``` + + + +```markdoc 'syncKey="constellations"' +_Quelques étoiles :_ + +{% tabs syncKey="constellations" %} +{% tabitem label="Orion" %} +Bellatrix, Rigel, Bételgeuse +{% /tabitem %} + +{% tabitem label="Gémeaux" %} +Pollux, Castor A, Castor B +{% /tabitem %} +{% /tabs %} + +_Quelques exoplanètes :_ + +{% tabs syncKey="constellations" %} +{% tabitem label="Orion" %} +HD 34445 b, Gliese 179 b, Wasp-82 b +{% /tabitem %} + +{% tabitem label="Gémeaux" %} +Pollux b, HAT-P-24b, HD 50554 b +{% /tabitem %} +{% /tabs %} +``` + + + + + +_Quelques étoiles :_ + + + Bellatrix, Rigel, Bételgeuse + Pollux, Castor A, Castor B + + +_Quelques exoplanètes :_ + + + HD 34445 b, Gliese 179 b, Wasp-82 b + Pollux b, HAT-P-24b, HD 50554 b + + + + + + +### Ajouter des icônes aux onglets + +Incluez une icône dans un onglet en utilisant l'attribut [`icon`](#icon) défini avec [une des icônes disponibles avec Starlight](/fr/reference/icons/#toutes-les-icônes) pour afficher une icône à côté du libellé. + + + +```mdx /icon="\w+"/ +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + + Sirius, Véga, Bételgeuse + + + Io, Europe, Ganymède + + +``` + + + +```markdoc /icon="\w+"/ +{% tabs %} +{% tabitem label="Étoiles" icon="star" %} +Sirius, Véga, Bételgeuse +{% /tabitem %} + +{% tabitem label="Lunes" icon="moon" %} +Io, Europe, Ganymède +{% /tabitem %} +{% /tabs %} +``` + + + + + + Sirius, Véga, Bételgeuse + + + Io, Europe, Ganymède + + + + + +## Props de `` + +**Implémentation :** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro) + +Le composant `` regroupe plusieurs composants `` et accepte les props suivantes : + +### `syncKey` + +**Type :** `string` + +Une clé utilisée pour conserver plusieurs groupes d'onglets synchronisés sur plusieurs pages. + +## Props de `` + +**Implémentation :** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro) + +Un ensemble d'onglets est composé d'onglets, chacun avec les props suivantes : + +### `label` + +**Obligatoire** +**Type :** `string` + +Un onglet doit inclure un attribut `label` défini avec le texte qui sera affiché dans l'onglet. + +### `icon` + +**Type :** `string` + +Chaque onglet peut inclure un attribut `icon` défini avec [une des icônes disponibles avec Starlight](/fr/reference/icons/#toutes-les-icônes) pour afficher une icône à côté du libellé.