diff --git a/.changeset/swift-files-retire.md b/.changeset/swift-files-retire.md
new file mode 100644
index 00000000000..497e3c9ece2
--- /dev/null
+++ b/.changeset/swift-files-retire.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Fix word wrapping in search modal on narrow screens
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 63073ee4477..3a6bb2af114 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -44,6 +44,7 @@ export default defineConfig({
de: { label: 'Deutsch', lang: 'de' },
es: { label: 'Español', lang: 'es' },
ja: { label: '日本語', lang: 'ja' },
+ fr: { label: 'Français', lang: 'fr' },
},
sidebar: [
{
@@ -52,23 +53,33 @@ export default defineConfig({
de: 'Beginne hier',
es: 'Comienza aqui',
ja: 'ここからはじめる',
+ fr: 'Commencez ici',
},
items: [
{
label: 'Getting Started',
link: 'getting-started',
- translations: { es: "Empezando", ja: '入門' },
+ translations: {
+ de: 'Erste Schritte',
+ es: 'Empezando',
+ ja: '入門',
+ fr: 'Mise en route'
+ },
},
{
label: 'Environmental Impact',
link: 'environmental-impact',
- translations: { es: "Documentación ecológica", ja: '環境への負荷' },
+ translations: {
+ es: 'Documentación ecológica',
+ ja: '環境への負荷',
+ fr: 'Impact environnemental'
+ },
},
],
},
{
label: 'Guides',
- translations: { de: 'Anleitungen', es: 'Guías', ja: 'ガイド' },
+ translations: { de: 'Anleitungen', es: 'Guías', ja: 'ガイド', fr: 'Guides' },
autogenerate: { directory: 'guides' },
},
{
@@ -77,6 +88,7 @@ export default defineConfig({
de: 'Referenz',
es: 'Referencias',
ja: 'リファレンス',
+ fr: 'Référence',
},
autogenerate: { directory: 'reference' },
},
diff --git a/docs/src/content/docs/de/getting-started.mdx b/docs/src/content/docs/de/getting-started.mdx
new file mode 100644
index 00000000000..47cf01c48ca
--- /dev/null
+++ b/docs/src/content/docs/de/getting-started.mdx
@@ -0,0 +1,87 @@
+---
+title: Erste Schritte
+description: Lerne wie du deine nächste Dokumentationsseite mit Starlight und Astro erstellst.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+:::caution[In Arbeit]
+Starlight befindet sich in einer frühen Entwicklungsphase.
+Wenn du etwas findest, das nicht funktioniert, [öffne ein Issue auf GitHub](https://github.com/withastro/starlight/issues/new/choose) oder lass es uns bei [Discord](https://astro.build/chat) wissen.
+:::
+
+## Erstelle ein neues Projekt
+
+Starlight ist ein voll ausgestattetes Dokumentations-Theme, das auf dem [Astro](https://astro.build) Framework aufbaut.
+
+Du kannst ein neues Astro + Starlight Projekt mit dem folgenden Befehl erstellen:
+
+
+
+
+```sh
+# Erstelle ein neues Projekt mit npm
+npm create astro@latest -- --template starlight
+```
+
+
+
+
+```sh
+# Erstelle ein neues Projekt mit pnpm
+pnpm create astro --template starlight
+```
+
+
+
+
+```sh
+# Erstelle ein neues Projekt mit yarn
+yarn create astro --template starlight
+```
+
+
+
+
+Damit wird ein neues [Projektverzeichnis](/de/guides/project-structure/) mit allen erforderlichen Dateien und Konfigurationen für deine Webseite erstellt.
+
+:::tip[In Aktion sehen]
+Probiere Starlight in deinem Browser aus:
+[öffne die Vorlage in StackBlitz](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics).
+:::
+
+## Inhalte mit Starlight erstellen
+
+Starlight ist bereit für dich, neuen Inhalt hinzuzufügen oder deine vorhandenen Dateien mitzubringen!
+
+### Dateiformate
+
+Starlight unterstützt das Erstellen von Inhalten in Markdown und MDX. (Du kannst die experimentelle [Astro Markdoc Integration](https://docs.astro.build/de/guides/integrations-guide/markdoc/) installieren, um Markdoc zu unterstützen.)
+
+### Seiten hinzufügen
+
+Füge neue Seiten zu deiner Webseite automatisch hinzu, indem du `.md` oder `.mdx` Dateien in `src/content/docs/` erstellst. Erstelle Unterordner, um deine Dateien zu organisieren und mehrere Pfadsegmente zu erstellen:
+
+```js
+`src/content/docs/hello-world.md` -> `your-site/hello-world`
+`src/content/docs/guides/faq.md` -> `your-site/guides/faq`
+```
+
+### Typsichere Frontmatter
+
+Alle Starlight Seiten teilen sich anpassbare [Frontmatter-Eigenschaften](/de/reference/frontmatter/), mit denen das Erscheinungsbild der Seite gesteuert wird:
+
+```md
+---
+title: Hello, World!
+description: This is a page in my Starlight-powered site
+---
+```
+
+Wenn du etwas Wichtiges vergisst, wird Starlight dich daran erinnern.
+
+## Veröffentlichung deiner Starlight Webseite
+
+Sobald du deine Starlight Webseite erstellt und angepasst hast, kannst du sie auf einen Webserver oder Hosting-Plattform deiner Wahl veröffentlichen, einschließlich Netlify, Vercel, GitHub Pages und vielen mehr.
+
+[Lerne mehr über die Veröffentlichung einer Astro Webseite in der Astro Dokumentation.](https://docs.astro.build/de/guides/deploy/)
diff --git a/docs/src/content/docs/de/reference/configuration.md b/docs/src/content/docs/de/reference/configuration.md
index 015acc6aa5b..b4aef5e32fb 100644
--- a/docs/src/content/docs/de/reference/configuration.md
+++ b/docs/src/content/docs/de/reference/configuration.md
@@ -3,9 +3,25 @@ title: Konfigurationsreferenz
description: Ein Überblick über alle von Starlight unterstützten Konfigurationsoptionen.
---
-## Die Starlight-Integration konfigurieren
+## Konfiguriere die `starlight` Integration
-Du kannst die folgenden Optionen an die Starlight-Integration übergeben.
+Starlight ist eine Integration, die auf dem [Astro](https://astro.build) Web-Framework aufbaut. Du kannst dein Projekt innerhalb der Astro-Konfigurationsdatei `astro.config.mjs` anpassen:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: "My delightful docs site",
+ }),
+ ],
+});
+```
+
+Du kannst die folgenden Optionen an die `starlight` Integration übergeben.
### `title` (erforderlich)
diff --git a/docs/src/content/docs/es/reference/configuration.md b/docs/src/content/docs/es/reference/configuration.md
index 7761ee63cc3..a19075fb73a 100644
--- a/docs/src/content/docs/es/reference/configuration.md
+++ b/docs/src/content/docs/es/reference/configuration.md
@@ -5,6 +5,21 @@ description: Una descripción general de todas las opciones de configuración qu
## Configurar la integración `starlight`
+Starlight es una integración construida sobre el framework [Astro](https://astro.build). Puedes configurar tu proyecto dentro del archivo de configuración de Astro `astro.config.mjs`:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: "My delightful docs site",
+ }),
+ ],
+});
+```
+
Puedes pasar las siguientes opciones a la integración `starlight`.
### `title` (requerido)
diff --git a/docs/src/content/docs/fr/environmental-impact.md b/docs/src/content/docs/fr/environmental-impact.md
new file mode 100644
index 00000000000..9e552f60ac3
--- /dev/null
+++ b/docs/src/content/docs/fr/environmental-impact.md
@@ -0,0 +1,135 @@
+---
+title: Documents écologiques
+description: Découvrez comment Starlight peut vous aider à créer des documentations plus écologiques et à réduire votre empreinte carbone.
+---
+
+Les estimations de l'impact climatique de l'industrie du web varient entre [2 %][sf] et [4 % des émissions mondiales de carbone][bbc], ce qui équivaut à peu près aux émissions de l'industrie du transport aérien.
+Le calcul de l'impact écologique d'un site web repose sur de nombreux facteurs complexes, mais ce guide contient quelques conseils pour réduire l'empreinte écologique de votre site documentaire.
+
+La bonne nouvelle, c'est que le choix de Starlight est un excellent début.
+Selon le Website Carbon Calculator, ce site est [plus propre que 99 % des pages web testées][sl-carbon], produisant 0,01 g de CO₂ par page visitée.
+
+## Poids de la page
+
+Plus une page web transfère de données, plus elle nécessite de ressources énergétiques.
+En avril 2023, la page web médiane demandait à l'utilisateur de télécharger plus de 2 000 Ko selon les [données de l'archive HTTP][http].
+
+Starlight construit des pages aussi légères que possible.
+Par exemple, lors de sa première visite, un utilisateur téléchargera moins de 50 Ko de données compressées, soit seulement 2,5 % de la médiane des archives HTTP.
+Avec une bonne stratégie de mise en cache, les navigations suivantes peuvent télécharger jusqu'à 10 Ko.
+
+### Images
+
+Bien que Starlight fournisse une bonne base de référence, les images que vous ajoutez à vos pages de documentation peuvent rapidement augmenter le poids de vos pages.
+Starlight utilise le [support d'actifs optimisés][assets] d'Astro pour optimiser les images locales dans vos fichiers Markdown et MDX.
+
+### Composants d'interface utilisateur
+
+Les composants construits avec des frameworks d'interface utilisateur tels que React ou Vue peuvent facilement ajouter de grandes quantités de JavaScript à une page.
+Starlight étant construit sur Astro, les composants de ce type chargent **zéro JavaScript côté client par défaut** grâce à [Astro Islands][islands].
+
+### Mise en cache
+
+La mise en cache est utilisée pour contrôler la durée pendant laquelle un navigateur stocke et réutilise les données qu'il a déjà téléchargées.
+Une bonne stratégie de mise en cache permet à l'utilisateur d'obtenir un nouveau contenu dès qu'il est modifié, tout en évitant de télécharger inutilement le même contenu à plusieurs reprises lorsqu'il n'a pas changé.
+
+La façon la plus courante de configurer la mise en cache est d'utiliser l'en-tête HTTP [`Cache-Control`][cache].
+Lorsque vous utilisez Starlight, vous pouvez définir une longue durée de mise en cache pour tout ce qui se trouve dans le répertoire `/_astro/`.
+Ce répertoire contient des fichiers CSS, JavaScript, et d'autres actifs intégrés qui peuvent être mis en cache pour toujours, réduisant ainsi les téléchargements inutiles :
+
+```
+Cache-Control: public, max-age=604800, immutable
+```
+
+La configuration de la mise en cache dépend de votre hébergeur. Par exemple, Vercel applique cette stratégie de mise en cache pour vous sans configuration nécessaire, tandis que vous pouvez définir des [en-têtes personnalisés pour Netlify][ntl-headers] en ajoutant un fichier `public/_headers` à votre projet :
+
+```
+/_astro/*
+ Cache-Control: public
+ Cache-Control: max-age=604800
+ Cache-Control: immutable
+```
+
+[cache]: https://csswizardry.com/2019/03/cache-control-for-civilians/
+[ntl-headers]: https://docs.netlify.com/routing/headers/
+
+## Consommation d'énergie
+
+La façon dont une page web est construite peut avoir un impact sur la puissance nécessaire pour fonctionner sur l'appareil d'un utilisateur.
+En utilisant un minimum de JavaScript, Starlight réduit la puissance de traitement dont le téléphone, la tablette ou l'ordinateur d'un utilisateur a besoin pour charger et afficher les pages.
+
+Soyez vigilant lorsque vous ajoutez des fonctionnalités telles que des scripts de suivi analytique ou des contenus à forte teneur en JavaScript, comme des vidéos intégrées, car ils peuvent augmenter la consommation d'énergie de la page.
+Si vous avez besoin d'analyses, envisagez de choisir une option légère comme [Cabin][cabin], [Fathom][fathom], ou [Plausible][plausible].
+Les vidéos intégrées comme celles de YouTube et de Vimeo peuvent être améliorées en attendant de [charger la vidéo lors de l'interaction avec l'utilisateur][lazy-video].
+Des paquets comme [`astro-embed`][embed] peuvent aider pour les services communs.
+
+:::tip[Le saviez-vous ?]
+L'analyse et la compilation de JavaScript est l'une des tâches les plus coûteuses pour les navigateurs.
+Par rapport au rendu d'une image JPEG de même taille, [le traitement de JavaScript peut prendre plus de 30 fois plus de temps][coût-de-js].
+:::
+
+[cabin]: https://withcabin.com/
+[fathom]: https://usefathom.com/
+[plausible]: https://plausible.io/
+[lazy-video]: https://web.dev/iframe-lazy-loading/
+[embed]: https://www.npmjs.com/package/astro-embed
+[cost-of-js]: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
+
+## Hébergement
+
+Le lieu d'hébergement d'une page web peut avoir un impact important sur le degré de respect de l'environnement de votre site de documentation.
+Les centres de données et les fermes de serveurs peuvent avoir un impact écologique important, notamment en raison de leur consommation élevée d'électricité et de leur utilisation intensive de l'eau.
+
+Le choix d'un hébergeur utilisant des énergies renouvelables se traduira par une réduction des émissions de carbone pour votre site. Le [Green Web Directory][gwb] est un outil qui peut vous aider à trouver des hébergeurs.
+
+[gwb]: https://www.thegreenwebfoundation.org/directory/
+
+## Comparaisons
+
+Curieux de savoir comment les autres frameworks de documentation se comparent ?
+Ces tests avec le [Website Carbon Calculator][wcc] comparent des pages similaires construites avec différents outils.
+
+| Framework | CO₂ par page visitée |
+| --------------------------- | ------------------ |
+| [Starlight][sl-carbon] | 0.01g |
+| [VitePress][vp-carbon] | 0.05g |
+| [Sphinx][sx-carbon] | 0.07g |
+| [MkDocs][mk-carbon] | 0.10g |
+| [Nextra][nx-carbon] | 0.11g |
+| [Docusaurus][ds-carbon] | 0.24g |
+| [Read the Docs][rtd-carbon] | 0.24g |
+| [GitBook][gb-carbon] | 0.71g |
+
+Données collectées le 14 mai 2023. Cliquez sur un lien pour voir les chiffres actualisés.
+
+[sl-carbon]: https://www.websitecarbon.com/website/starlight-astro-build-getting-started/
+[vp-carbon]: https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/
+[sx-carbon]: https://www.websitecarbon.com/website/sphinx-doc-org-en-master-usage-quickstart-html/
+[mk-carbon]: https://www.websitecarbon.com/website/mkdocs-org-getting-started/
+[nx-carbon]: https://www.websitecarbon.com/website/nextra-site-docs-docs-theme-start/
+[ds-carbon]: https://www.websitecarbon.com/website/docusaurus-io-docs/
+[rtd-carbon]: https://www.websitecarbon.com/website/docs-readthedocs-io-en-stable-index-html/
+[gb-carbon]: https://www.websitecarbon.com/website/docs-gitbook-com/
+
+## Plus de ressources
+
+### Outils
+
+- [Website Carbon Calculator][wcc]
+- [Ecograder](https://ecograder.com/)
+- [WebPageTest Carbon Control](https://www.webpagetest.org/carbon-control/)
+- [Ecoping](https://ecoping.earth/)
+
+### Articles et discussions
+
+- [“Building a greener web”](https://youtu.be/EfPoOt7T5lg), conférence de Michelle Barker
+- [“Sustainable Web Development Strategies Within An Organization”](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), article par Michelle Barker
+- [“A sustainable web for everyone”](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), conférence de Tom Greenwood
+- [“How Web Content Can Affect Power Usage”](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), article de Benjamin Poulain et Simon Fraser
+
+[sf]: https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/
+[bbc]: https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think
+[http]: https://httparchive.org/reports/state-of-the-web
+[assets]: https://docs.astro.build/en/guides/assets/
+[islands]: https://docs.astro.build/en/concepts/islands/
+[wcc]: https://www.websitecarbon.com/
diff --git a/docs/src/content/docs/fr/getting-started.mdx b/docs/src/content/docs/fr/getting-started.mdx
new file mode 100644
index 00000000000..d076bc4905c
--- /dev/null
+++ b/docs/src/content/docs/fr/getting-started.mdx
@@ -0,0 +1,86 @@
+---
+title: Mise en route
+description: Apprenez à créer votre prochain site de documentation avec Starlight by Astro.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+:::caution[Work in progress]
+Starlight est en début de développement.
+Si vous trouvez quelque chose qui ne fonctionne pas, [ouvrez une issue sur GitHub](https://github.com/withastro/starlight/issues/new/choose) ou faites-le nous savoir sur [Discord](https://astro.build/chat).
+:::
+
+## Créer un nouveau projet
+
+Starlight est un thème de documentation complet construit sur le framework [Astro](https://astro.build).
+
+Vous pouvez créer un nouveau projet Astro + Starlight en utilisant la commande suivante :
+
+
+
+
+```sh
+# créer un nouveau projet avec npm
+npm create astro@latest -- --template starlight
+```
+
+
+
+
+```sh
+# créer un nouveau projet avec pnpm
+pnpm create astro --template starlight
+```
+
+
+
+
+```sh
+# créer un nouveau projet avec yarn
+yarn create astro --template starlight
+```
+
+
+
+
+Cela créera un nouveau [répertoire de projet](/fr/guides/projet-structure/) avec tous les fichiers et configurations nécessaires pour votre site.
+
+:::tip[Voir en action]
+Essayez Starlight dans votre navigateur :
+[ouvrir le modèle sur StackBlitz](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics).
+:::
+
+## Créer du contenu avec Starlight
+
+Starlight est conçu pour que vous puissiez ajouter du nouveau contenu, ou apporter vos fichiers existants !
+
+### Formats de fichiers
+
+Starlight prend en charge la création de contenu en Markdown et MDX. (Vous pouvez ajouter la prise en charge de Markdoc en installant l'intégration expérimentale [Astro Markdoc integration](https://docs.astro.build/fr/guides/integrations-guide/markdoc/).)
+
+### Ajouter des pages
+Ajoutez automatiquement de nouvelles pages à votre site en créant des fichiers `.md` ou `.mdx` dans `src/content/docs/`. Ajoutez des sous-dossiers pour organiser vos fichiers, et pour créer plusieurs segments de chemin :
+
+```js
+`src/content/docs/hello-world.md` -> `votre-site/hello-world`
+`src/content/docs/guides/faq.md` -> `votre-site/guides/faq`
+```
+
+### Type-safe frontmatter
+
+Toutes les pages Starlight partagent un [ensemble commun de propriétés de présentation](/fr/reference/frontmatter/) personnalisable pour contrôler l'apparence de la page :
+
+```md
+---
+title: Bonjour, le monde !
+description: Ceci est une page de mon site web propulsé par Starlight.
+---
+```
+
+Si vous oubliez quelque chose d'important, Starlight vous le fera savoir.
+
+## Déployer votre site web Starlight
+
+Une fois que vous avez créé et personnalisé votre site Web Starlight, vous pouvez le déployer sur un serveur Web ou une plateforme d'hébergement de votre choix, y compris Netlify, Vercel, GitHub Pages et bien d'autres.
+
+[Pour en savoir plus sur le déploiement d'un site Astro, consultez la documentation Astro](https://docs.astro.build/fr/guides/deploy/)
diff --git a/docs/src/content/docs/fr/guides/authoring-content.md b/docs/src/content/docs/fr/guides/authoring-content.md
new file mode 100644
index 00000000000..35a117631dc
--- /dev/null
+++ b/docs/src/content/docs/fr/guides/authoring-content.md
@@ -0,0 +1,208 @@
+---
+title: Création de contenu en Markdown
+description: Un aperçu de la syntaxe Markdown prise en charge par Starlight.
+---
+
+Starlight prend en charge l'ensemble de la syntaxe [Markdown](https://daringfireball.net/projects/markdown/) dans les fichiers `.md` ainsi que la syntaxe frontale [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) pour définir des métadonnées telles qu'un titre et une description.
+
+Veillez à consulter les [MDX docs](https://mdxjs.com/docs/what-is-mdx/#markdown) ou les [Markdoc docs](https://markdoc.dev/docs/syntax) si vous utilisez ces formats de fichiers, car la prise en charge et l'utilisation de Markdown peuvent varier.
+
+## Styles en ligne
+
+Le texte peut être **gras**, _italique_, ou ~~barré~~.
+
+```md
+Le texte peut être **gras**, _italique_, ou ~~barré~~.
+```
+
+Vous pouvez [faire un lien vers une autre page](/fr/getting-started/).
+
+```md
+Vous pouvez [faire un lien vers une autre page](/fr/getting-started/).
+```
+
+Vous pouvez mettre en évidence le `code en ligne` à l'aide d'un astérisque.
+
+```md
+Vous pouvez mettre en évidence le `code en ligne` à l'aide de barres de défilement.
+```
+
+## Images
+
+Les images dans Starlight utilisent la prise en charge intégrée des ressources optimisées d'Astro.
+
+Markdown et MDX supportent la syntaxe Markdown pour l'affichage des images qui inclut le texte alt pour les lecteurs d'écran et les technologies d'assistance.
+
+
+
+```md
+
+```
+
+Les chemins d'accès relatifs aux images sont également supportés pour les images stockées localement dans votre projet.
+
+```md
+// src/content/docs/page-1.md
+
+
+```
+
+## En-têtes
+
+Vous pouvez structurer le contenu à l'aide d'un titre. En Markdown, les titres sont indiqués par un nombre de `#` en début de ligne.
+
+### Comment structurer le contenu d'une page dans Starlight
+
+Starlight est configuré pour utiliser automatiquement le titre de votre page comme titre de premier niveau et inclura un titre "Aperçu" en haut de la table des matières de chaque page. Nous vous recommandons de commencer chaque page par un paragraphe de texte normal et d'utiliser des titres de page à partir de `` :
+
+```md
+---
+title: Guide Markdown
+description: Comment utiliser Markdown dans Starlight
+---
+
+Cette page décrit comment utiliser Markdown dans Starlight.
+
+## Styles en ligne
+
+## Titres
+
+```
+
+### Liens d'ancrage automatiques pour les titres
+
+L'utilisation de titres en Markdown vous donnera automatiquement des liens d'ancrage afin que vous puissiez accéder directement à certaines sections de votre page :
+
+```md
+---
+title: Ma page de contenu
+description: Comment utiliser les liens d'ancrage intégrés de Starlight
+---
+## Introduction
+
+Je peux faire un lien vers [ma conclusion](#conclusion) plus bas sur la même page.
+
+## Conclusion
+
+`https://my-site.com/page1/#introduction` renvoie directement à mon Introduction.
+```
+
+Les titres de niveau 2 (``) et de niveau 3 (``) apparaissent automatiquement dans la table des matières de la page.
+
+## Asides
+
+Les Asides (également connus sous le nom de "callouts") sont utiles pour afficher des informations secondaires à côté du contenu principal d'une page.
+
+Starlight fournit une syntaxe Markdown personnalisée pour le rendu des apartés. Les blocs d'apartés sont indiqués en utilisant une paire de triples points `:::` pour envelopper votre contenu, et peuvent être de type `note`, `tip`, `caution` ou `danger`.
+
+Vous pouvez imbriquer n'importe quel autre type de contenu Markdown à l'intérieur d'un aparté, mais les aparté sont mieux adaptés à des morceaux de contenu courts et concis.
+
+### Note aside
+
+:::note
+Starlight est une boîte à outils pour sites web de documentation construite avec [Astro](https://astro.build/). Vous pouvez démarrer avec cette commande :
+
+```sh
+npm run create astro@latest --template starlight
+```
+
+:::
+
+````md
+:::note
+Starlight est une boîte à outils pour sites web de documentation construite avec [Astro](https://astro.build/). Vous pouvez démarrer avec cette commande :
+
+```sh
+npm run create astro@latest --template starlight
+```
+
+:::
+````
+
+### Titres personnalisés dans les asides
+
+Vous pouvez spécifier un titre personnalisé pour l'aparté entre crochets après le type d'aparté, par exemple `:::tip[Le saviez-vous ?]`.
+
+:::tip[Le saviez-vous ?]
+Astro vous aide à construire des sites Web plus rapides grâce à ["Islands Architecture"](https://docs.astro.build/fr/concepts/islands/).
+:::
+
+```md
+:::tip[Le saviez-vous ?]
+Astro vous aide à construire des sites Web plus rapides grâce à ["Islands Architecture"](https://docs.astro.build/fr/concepts/islands/).
+:::
+```
+
+### Plus de types pour l'aside
+
+Les apartés de type Attention et Danger sont utiles pour attirer l'attention de l'utilisateur sur des détails qui pourraient le perturber. Si vous vous retrouvez à utiliser ces derniers fréquemment, cela pourrait aussi être un signe que ce que vous documentez pourrait bénéficier d'une refonte.
+
+:::caution
+Si vous n'êtes pas sûr de vouloir un site de documentation génial, réfléchissez à deux fois avant d'utiliser [Starlight](../../../).
+:::
+
+:::danger
+Vos utilisateurs peuvent être plus productifs et trouver votre produit plus facile à utiliser grâce aux fonctionnalités utiles de Starlight.
+
+- Navigation claire
+- Thème de couleurs configurable par l'utilisateur
+- [Support i18n](/fr/guides/i18n)
+
+:::
+
+```md
+:::caution
+Si vous n'êtes pas sûr de vouloir un site de documentation génial, réfléchissez à deux fois avant d'utiliser [Starlight](../../../).
+:::
+
+:::danger
+Vos utilisateurs peuvent être plus productifs et trouver votre produit plus facile à utiliser grâce aux fonctionnalités utiles de Starlight.
+
+- Navigation claire
+- Thème de couleurs configurable par l'utilisateur
+- [Support i18n](/fr/guides/i18n)
+
+:::
+```
+
+## Blockquotes
+
+> Il s'agit d'une citation en bloc, couramment utilisée pour citer une autre personne ou un document.
+>
+> Les guillemets sont indiqués par un `>` au début de chaque ligne.
+
+```md
+> Il s'agit d'une citation en bloc, couramment utilisée pour citer une autre personne ou un document.
+>
+> Les guillemets sont indiqués par un `>` au début de chaque ligne.
+```
+
+## Code blocks
+
+Un bloc de code est indiqué par un bloc avec trois crochets ``` au début et à la fin. Vous pouvez indiquer le langage de programmation utilisé après les premiers crochets.
+
+```js
+// Code Javascript avec mise en évidence de la syntaxe.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l);
+ return true;
+};
+```
+
+````md
+```js
+// Code Javascript avec mise en évidence de la syntaxe.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l);
+ return true;
+};
+```
+````
+
+```md
+Les longs blocs de code d'une seule ligne ne doivent pas être enveloppés. Ils doivent défiler horizontalement s'ils sont trop longs. Cette ligne devrait être suffisamment longue pour le démontrer.
+```
+
+## Autres fonctionnalités courantes de Markdown
+
+Starlight prend en charge toutes les autres syntaxes de rédaction Markdown, telles que les listes et les tableaux. Voir [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) pour un aperçu rapide de tous les éléments de la syntaxe Markdown.
diff --git a/docs/src/content/docs/fr/guides/components.mdx b/docs/src/content/docs/fr/guides/components.mdx
new file mode 100644
index 00000000000..5e1000cfb30
--- /dev/null
+++ b/docs/src/content/docs/fr/guides/components.mdx
@@ -0,0 +1,111 @@
+---
+title: Composants
+description: Utilisation de composants dans MDX avec Starlight.
+---
+
+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 lien ou d'une intégration YouTube.
+Starlight prend en charge l'utilisation de composants dans les fichiers [MDX](https://mdxjs.com/) et fournit des composants courants que vous pouvez utiliser.
+
+[Pour en savoir plus sur la création de composants, consultez les Astro Docs](https://docs.astro.build/fr/core-concepts/astro-components/).
+
+## Utilisation d'un composant
+
+Vous pouvez utiliser un composant en l'important dans votre fichier MDX et en le rendant sous forme de balise JSX.
+Ces balises ressemblent à des balises HTML mais commencent par une lettre majuscule correspondant au nom de votre déclaration `import` :
+
+```mdx
+---
+# src/content/docs/index.mdx
+title: Bienvenue dans ma documentation
+---
+
+import SomeComponent from '../../components/SomeComponent.astro';
+import AnotherComponent from '../../components/AnotherComponent.astro';
+
+
+
+
+ Les composants peuvent également contenir du **contenu imbriqué**.
+
+```
+
+Starlight étant alimenté par Astro, vous pouvez ajouter la prise en charge des composants construits avec n'importe quel [cadre d'interface utilisateur pris en charge (React, Preact, Svelte, Vue, Solid, Lit et Alpine)](https://docs.astro.build/fr/core-concepts/framework-components/) dans vos fichiers MDX.
+Pour en savoir plus sur [l'utilisation de composants dans MDX](https://docs.astro.build/fr/guides/markdown-content/#using-components-in-mdx), consultez la documentation Astro.
+
+## Composants intégrés
+
+Starlight fournit quelques composants intégrés pour les cas d'utilisation courants de la documentation.
+Ces composants sont disponibles dans le paquet `@astrojs/starlight/components`.
+
+### Onglets
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Vous pouvez afficher une interface à onglets en utilisant les composants `` et ``.
+Chaque `` doit avoir un `label` à afficher aux utilisateurs.
+
+```mdx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+
+ Sirius, Vega, Betelgeuse
+ Io, Europa, Ganymede
+
+```
+
+Le code ci-dessus génère les onglets suivants sur la page :
+
+
+ Sirius, Vega, Betelgeuse
+ Io, Europa, Ganymede
+
+
+### Cards
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+Vous pouvez afficher du contenu dans une boîte correspondant aux styles de Starlight en utilisant le composant ``.
+Enveloppez plusieurs cartes dans le composant `` pour afficher les cartes côte à côte lorsqu'il y a suffisamment d'espace.
+
+Une `` nécessite un `titre` et peut éventuellement inclure un attribut `icon` fixé au nom de [l'une des icônes intégrées de Starlight](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Icons.ts).
+
+```mdx
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+Contenu intéressant que vous souhaitez mettre en évidence.
+
+
+
+ Sirius, Vega, Betelgeuse
+
+
+ Io, Europa, Ganymede
+
+
+```
+
+Le code ci-dessus génère ce qui suit sur la page :
+
+Contenu intéressant que vous souhaitez mettre en évidence.
+
+
+
+ Sirius, Vega, Betelgeuse
+
+
+ Io, Europa, Ganymede
+
+
+
+:::tip
+Utilisez une grille de cartes sur votre page d'accueil pour afficher les principales caractéristiques de votre projet.
+Ajoutez l'attribut `stagger` pour décaler verticalement la deuxième colonne de cartes et ajouter un intérêt visuel :
+
+```astro
+
+
+
+```
+
+:::
diff --git a/docs/src/content/docs/fr/guides/i18n.mdx b/docs/src/content/docs/fr/guides/i18n.mdx
new file mode 100644
index 00000000000..19c5d6f6895
--- /dev/null
+++ b/docs/src/content/docs/fr/guides/i18n.mdx
@@ -0,0 +1,201 @@
+---
+title: Internationalisation (i18n)
+description: Apprenez à configurer votre site Starlight pour qu'il prenne en charge plusieurs langues.
+---
+
+import FileTree from '../../../../components/file-tree.astro';
+
+Starlight offre une prise en charge intégrée des sites multilingues, y compris le routage, le contenu de repli et la prise en charge complète des langues de droite à gauche (RTL).
+
+## Configurer i18n
+
+1. Indiquez à Starlight les langues que vous prenez en charge en passant `locales` et `defaultLocale` à l'intégration Starlight :
+
+ ```js
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import starlight from '@astrojs/starlight';
+
+ export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'My Docs',
+ // Définit l'anglais comme langue par défaut pour ce site.
+ defaultLocale: 'en',
+ locales: {
+ // Docs en anglais dans `src/content/docs/en/`
+ en: {
+ label: 'English',
+ },
+ // Documentation en chinois simplifié dans `src/content/docs/zh/`
+ zh: {
+ label: '简体中文',
+ lang: 'zh-CN',
+ },
+ // docs en arabe dans `src/content/docs/ar/`
+ ar: {
+ label: 'العربية',
+ dir: 'rtl',
+ },
+ },
+ }),
+ ],
+ });
+ ```
+
+ Votre `defaultLocale` sera utilisé pour le contenu de repli et les étiquettes de l'interface utilisateur, donc choisissez la langue dans laquelle vous êtes le plus susceptible de commencer à écrire du contenu, ou pour laquelle vous avez déjà du contenu.
+
+2. Créez un répertoire pour chaque langue dans `src/content/docs/`.
+ Par exemple, pour la configuration montrée ci-dessus, créez les dossiers suivants :
+
+
+
+ - src/
+ - content/
+ - docs/
+ - ar/
+ - en/
+ - zh/
+
+
+
+3. Vous pouvez maintenant ajouter des fichiers de contenu dans vos répertoires de langues. Utilisez le même nom de fichier pour associer les pages d'une langue à l'autre et profiter de l'ensemble des fonctionnalités i18n de Starlight, y compris le contenu de repli, les avis de traduction, etc.
+
+ Par exemple, créez `ar/index.md` et `en/index.md` pour représenter la page d'accueil en arabe et en anglais respectivement.
+
+### Utiliser une racine locale
+
+Vous pouvez utiliser une racine locale pour servir une langue sans aucun préfixe i18n dans son chemin. Par exemple, si l'anglais est votre racine locale, le chemin d'une page en anglais ressemblera à `/about` au lieu de `/en/about`.
+
+Pour définir une racine locale, utilisez la clé `root` dans votre configuration `locales`. Si la racine locale est aussi la locale par défaut de votre contenu, supprimez `defaultLocale` ou donnez-lui la valeur `'root''.
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'My Docs',
+ defaultLocale: 'root', // optionnel
+ locales: {
+ root: {
+ label: 'English',
+ lang: 'en', // lang est nécessaire pour les locales de la racine
+ },
+ zh: {
+ label: '简体中文',
+ lang: 'zh-CN',
+ },
+ },
+ }),
+ ],
+});
+```
+
+Lorsque vous utilisez une locale `root`, gardez les pages pour cette langue directement dans `src/content/docs/` au lieu d'un dossier dédié à la langue. Par exemple, voici les fichiers de la page d'accueil pour l'anglais et le chinois en utilisant la configuration ci-dessus :
+
+
+
+- src/
+ - content/
+ - docs/
+ - **index.md**
+ - zh/
+ - **index.md**
+
+
+
+#### Sites monolingues
+
+Par défaut, Starlight est un site monolingue (anglais). Pour créer un site monolingue dans une autre langue, définissez-la comme `root` dans votre configuration `locales` :
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'My Docs',
+ locales: {
+ root: {
+ label: '简体中文',
+ lang: 'zh-CN',
+ },
+ },
+ }),
+ ],
+});
+```
+
+Cela vous permet de remplacer la langue par défaut de Starlight sans activer d'autres fonctions d'internationalisation pour les sites multilingues, telles que le sélecteur de langue.
+
+## Contenu de remplacement
+
+Starlight s'attend à ce que vous créiez des pages équivalentes dans toutes vos langues. Par exemple, si vous avez un fichier `en/about.md`, créez un `about.md` pour chaque autre langue que vous supportez. Cela permet à Starlight de fournir un contenu de remplacement automatique pour les pages qui n'ont pas encore été traduites.
+
+Si une traduction n'est pas encore disponible pour une langue, Starlight affichera aux lecteurs le contenu de cette page dans la langue par défaut (définie via `defaultLocale`). Par exemple, si vous n'avez pas encore créé de version française de votre page À propos et que votre langue par défaut est l'anglais, les visiteurs de `/fr/about` verront le contenu anglais de `/en/about` avec un avis indiquant que cette page n'a pas encore été traduite. Cela vous permet d'ajouter du contenu dans votre langue par défaut et de le traduire progressivement lorsque vos traducteurs en ont le temps.
+
+## Traduire l'interface utilisateur de Starlight
+
+En plus d'héberger des fichiers de contenu traduits, Starlight vous permet de traduire les chaînes de l'interface utilisateur par défaut (par exemple, l'en-tête "Sur cette page" dans la table des matières) afin que vos lecteurs puissent découvrir votre site entièrement dans la langue sélectionnée.
+
+Les chaînes d'interface utilisateur traduites en anglais, allemand, japonais, portugais et espagnol sont fournies d'office, et nous acceptons les [contributions pour ajouter d'autres langues par défaut](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md).
+
+Vous pouvez fournir des traductions pour les langues supplémentaires que vous supportez - ou remplacer nos étiquettes par défaut - via la collecte de données `i18n`.
+
+1. Configurez la collection de données `i18n` dans `src/content/config.ts` si elle n'est pas déjà configurée :
+
+ ```js
+ // src/content/config.ts
+ import { defineCollection } from 'astro:content';
+ import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
+
+ export const collections = {
+ docs: defineCollection({ schema: docsSchema() }),
+ i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
+ };
+ ```
+
+2. Créez un fichier JSON dans `src/content/i18n/` pour chaque locale supplémentaire pour laquelle vous voulez fournir des chaînes de traduction pour l'interface utilisateur.
+ Par exemple, cela ajouterait des fichiers de traduction pour l'arabe et le chinois simplifié :
+
+
+
+ - src/
+ - content/
+ - i18n/
+ - ar.json
+ - zh-CN.json
+
+
+
+3. Ajoutez des traductions pour les clés que vous souhaitez traduire dans les fichiers JSON. Traduire uniquement les valeurs, en laissant les clés en anglais (e.g. `"search.label": "Buscar"`).
+
+ Il s'agit des valeurs anglaises par défaut des chaînes de caractères existantes avec lesquelles Starlight est livré :
+
+ ```json
+ {
+ "skipLink.label": "Aller au contenu",
+ "search.label": "rechercher",
+ "search.shortcutLabel": "(Presser / pour rechercher)",
+ "search.cancelLabel": "Annuler",
+ "themeSelect.accessibleLabel": "Selectionner le thème",
+ "themeSelect.dark": "Dark",
+ "themeSelect.light": "Light",
+ "themeSelect.auto": "Auto",
+ "languageSelect.accessibleLabel": "Selectionner la langue",
+ "menuButton.accessibleLabel": "Menu",
+ "sidebarNav.accessibleLabel": "Main",
+ "tableOfContents.onThisPage": "Sur cette page",
+ "tableOfContents.overview": "Vue d'ensemble",
+ "i18n.untranslatedContent": "Ce contenu n'est pas encore disponible dans votre langue.",
+ "page.editLink": "Editer la page",
+ "page.lastUpdated": "Dernière mise à jour :",
+ "page.previousLink": "Précédent",
+ "page.nextLink": "Suivant"
+ }
+ ```
diff --git a/docs/src/content/docs/fr/guides/project-structure.mdx b/docs/src/content/docs/fr/guides/project-structure.mdx
new file mode 100644
index 00000000000..26322543e64
--- /dev/null
+++ b/docs/src/content/docs/fr/guides/project-structure.mdx
@@ -0,0 +1,48 @@
+---
+title: Structure du projet
+description: Apprenez à organiser les fichiers dans votre projet Starlight.
+---
+
+Ce guide vous montrera comment un projet Starlight est organisé et ce que font les différents fichiers de votre projet.
+
+Les projets Starlight suivent généralement la même structure de fichiers et de répertoires que les autres projets Astro. Voir [la documentation sur la structure des projets Astro](https://docs.astro.build/fr/core-concepts/project-structure/) pour plus de détails.
+
+## Fichiers et répertoires
+
+- `astro.config.mjs` — Le fichier de configuration d'Astro ; inclut l'intégration et la configuration de Starlight.
+- `src/content/config.ts` — Fichier de configuration des collections de contenu ; ajoute les schémas de la matière première de Starlight à votre projet.
+- `src/content/docs/` — Fichiers de contenu. Starlight transforme chaque fichier `.md`, `.mdx` ou `.mdoc` de ce répertoire en une page de votre site.
+- `src/content/i18n/` (optionnel) — Données de traduction pour prendre en charge l'[internationalisation](/fr/guides/i18n/).
+- `src/` — Autre code source et fichiers (composants, styles, images, etc.) pour votre projet.
+- `public/` — Actifs statiques (polices, favicon, PDFs, etc.) qui ne seront pas traités par Astro.
+
+## Exemple de contenu de projet
+
+Un répertoire de projet Starlight peut ressembler à ceci :
+
+import FileTree from '../../../../components/file-tree.astro';
+
+
+
+- public/
+ - favicon.svg
+- src/
+ - assets/
+ - logo.svg
+ - screenshot.jpg
+ - components/
+ - CustomButton.astro
+ - InteractiveWidget.jsx
+ - content/
+ - docs/
+ - guides/
+ - 01-getting-started.md
+ - 02-advanced.md
+ - index.mdx
+ - config.ts
+ - env.d.ts
+- astro.config.mjs
+- package.json
+- tsconfig.json
+
+
diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx
new file mode 100644
index 00000000000..b03ab4e07e6
--- /dev/null
+++ b/docs/src/content/docs/fr/index.mdx
@@ -0,0 +1,44 @@
+---
+title: Starlight 🌟 Construire des sites de documentation avec Astro
+description: Starlight vous aide à créer de magnifiques sites web de documentation très performants avec Astro.
+template: splash
+hero:
+ title: Faites briller vos documents avec Starlight
+ tagline: Tout ce dont vous avez besoin pour créer un excellent site web de documentation. Rapide, accessible et facile à utiliser.
+ image:
+ file: ../../../assets/hero-star.webp
+ actions:
+ - text: Mise en route
+ icon: right-arrow
+ variant: primary
+ link: /fr/getting-started/
+ - text: Voir sur GitHub
+ icon: external
+ link: https://github.com/withastro/starlight
+---
+
+import { CardGrid, Card } from '@astrojs/starlight/components';
+import AboutAstro from '../../../components/about-astro.astro';
+
+
+
+ Comprend : Navigation dans le site, recherche, internationalisation, référencement naturel, typographie facile à lire, mise en évidence du code, mode sombre, etc.
+
+
+ Exploitez toute la puissance et les performances d'Astro. Étendez Starlight avec vos intégrations et bibliothèques Astro préférées.
+
+
+ Apportez votre langage de balisage préféré. Starlight vous offre une validation frontmatter intégrée avec la sécurité de type TypeScript.
+
+
+ Starlight est une solution de documentation complète, indépendante du cadre de travail. Étendez avec React, Vue, Svelte, Solid, et plus encore.
+
+
+
+
+Astro est le framework web tout-en-un conçu pour la vitesse.
+Tirez votre contenu de n'importe où et déployez-le partout, le tout alimenté par vos composants et bibliothèques d'interface utilisateur préférés.
+
+[En savoir plus sur Astro](https://astro.build/)
+
+
diff --git a/docs/src/content/docs/fr/reference/configuration.md b/docs/src/content/docs/fr/reference/configuration.md
new file mode 100644
index 00000000000..4e6ab2f99ff
--- /dev/null
+++ b/docs/src/content/docs/fr/reference/configuration.md
@@ -0,0 +1,326 @@
+---
+title: Référence de configuration
+description: Une vue d'ensemble de toutes les options de configuration prises en charge par Starlight.
+---
+
+## Configuration de l'intégration `starlight`
+
+Starlight est une intégration construite sur le framework web [Astro](https://astro.build). Vous pouvez configurer votre projet dans le fichier de configuration Astro `astro.config.mjs` :
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: "Mon délicieux site de docs",
+ }),
+ ],
+});
+```
+
+Vous pouvez passer les options suivantes à l'intégration `starlight`.
+
+### `title` (obligatoire)
+
+**type:** `string`
+
+Définissez le titre de votre site web. Il sera utilisé dans les métadonnées et dans le titre de l'onglet du navigateur.
+
+### `description`
+
+**type:** `string`
+
+Définissez la description de votre site web. Utilisée dans les métadonnées partagées avec les moteurs de recherche dans la balise `` si `description` n'est pas définie dans le frontmatter d'une page.
+
+### `logo`
+
+**type:** [`LogoConfig`](#logoconfig)
+
+Définit une image de logo à afficher dans la barre de navigation à côté ou à la place du titre du site. Vous pouvez soit définir une seule propriété `src`, soit définir des sources d'images séparées pour `light` et `dark`.
+
+```js
+starlight({
+ logo: {
+ src: '/src/assets/my-logo.svg',
+ },
+});
+```
+
+#### `LogoConfig`
+
+```ts
+type LogoConfig = { alt?: string; replacesTitle?: boolean } & (
+ | { src: string }
+ | { light: string; dark: string }
+);
+```
+
+### `tableOfContents`
+
+**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
+**default:** `{ minHeadingLevel: 2; maxHeadingLevel: 3; }`
+
+Configurez la table des matières affichée à droite de chaque page. Par défaut, les titres `` et `` seront inclus dans cette table des matières.
+
+### `editLink`
+
+**type:** `{ baseUrl: string }`
+
+Permet d'activer les liens "Modifier cette page" en définissant l'URL de base qu'ils doivent utiliser. Le lien final sera `editLink.baseUrl` + le chemin de la page actuelle. Par exemple, pour permettre l'édition de pages dans le repo `withastro/starlight` sur GitHub :
+
+```js
+starlight({
+ editLink: {
+ baseUrl: 'https://github.com/withastro/starlight/edit/main/',
+ },
+});
+```
+
+Avec cette configuration, une page `/introduction` aurait un lien d'édition pointant vers `https://github.com/withastro/starlight/edit/main/src/docs/introduction.md`.
+
+### `sidebar`
+
+**type:** [`SidebarGroup[]`](#sidebargroup)
+
+Configure les éléments de navigation de la barre latérale de votre site.
+
+Une barre latérale est un tableau de groupes, chacun avec un `label` pour le groupe et un tableau `items` ou un objet de configuration `autogenerate`.
+
+Vous pouvez définir manuellement le contenu d'un groupe en utilisant `items`, qui est un tableau pouvant inclure des liens et des sous-groupes. Vous pouvez aussi générer automatiquement le contenu d'un groupe à partir d'un répertoire spécifique de votre documentation, en utilisant `autogenerate`.
+
+```js
+starlight({
+ sidebar: [
+ // Un groupe intitulé "Commencer ici" contenant deux liens.
+ {
+ label: 'Commencer ici',
+ items: [
+ { label: 'Introduction', link: '/intro' },
+ { label: 'Etapes', link: '/next-steps' },
+ ],
+ },
+ // Un groupe qui renvoie à toutes les pages du répertoire de référence.
+ {
+ label: 'Référence',
+ autogenerate: { directory: 'reference' },
+ },
+ ],
+});
+```
+
+#### Tri
+
+Les groupes de barres latérales générées automatiquement sont triés par nom de fichier et par ordre alphabétique.
+Par exemple, une page générée à partir de `astro.md` apparaîtrait au-dessus de la page de `starlight.md`.
+
+#### Traduire les étiquettes
+
+Si votre site est multilingue, le `label` de chaque élément est considéré comme étant dans la locale par défaut. Vous pouvez définir une propriété `translations` pour fournir des étiquettes pour les autres langues supportées :
+
+```js
+sidebar: [
+ // Un exemple de barre latérale avec des étiquettes traduites en anglais.
+ {
+ label: 'Commencer ici',
+ translations: { en: 'Start here' },
+ items: [
+ {
+ label: 'Bien démarrer',
+ translations: { en: 'Getting Started' },
+ link: '/getting-started',
+ },
+ {
+ label: 'Structure du projet',
+ translations: { en: 'Project Structure' },
+ link: '/structure',
+ },
+ ],
+ },
+];
+```
+
+#### `SidebarGroup`
+
+```ts
+type SidebarGroup =
+ | {
+ label: string;
+ translations?: Record;
+ items: Array;
+ }
+ | {
+ label: string;
+ translations?: Record;
+ autogenerate: {
+ directory: string;
+ };
+ };
+```
+
+#### `LinkItem`
+
+```ts
+interface LinkItem {
+ label: string;
+ link: string;
+}
+```
+
+### `locales`
+
+**type:** `{ [dir: string]: LocaleConfig }`
+
+Configurez l'internationalisation (i18n) de votre site en définissant les `locales` supportées.
+
+Chaque entrée doit utiliser comme clé le répertoire dans lequel les fichiers de cette langue sont sauvegardés.
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'My Site',
+ // Définit l'anglais comme langue par défaut pour ce site.
+ defaultLocale: 'en',
+ locales: {
+ // Documentations en anglais danse trouve dans `src/content/docs/en/`
+ en: {
+ label: 'English',
+ },
+ // Documentations en Chinois simplifié se trouve dans `src/content/docs/zh/`
+ zh: {
+ label: '简体中文',
+ lang: 'zh-CN',
+ },
+ // Documentations en Arabe se trouve dans `src/content/docs/ar/`
+ ar: {
+ label: 'العربية',
+ dir: 'rtl',
+ },
+ },
+ }),
+ ],
+});
+```
+
+#### Options des paramètres linguistiques
+
+Vous pouvez définir les options suivantes pour chaque locale :
+
+##### `label` (obligatoire)
+
+**type:** `string`
+
+L'étiquette de cette langue à afficher aux utilisateurs, par exemple dans le sélecteur de langue. Le plus souvent, il s'agit du nom de la langue tel qu'un utilisateur de cette langue s'attendrait à le lire, par exemple `"English"`, `"العربية"`, ou `"简体中文"`.
+
+##### `lang`
+
+**type:** `string`
+
+La balise BCP-47 pour cette langue, par exemple `"en"`, `"ar"`, ou `"zh-CN"`. S'il n'est pas défini, le nom du répertoire de la langue sera utilisé par défaut.
+
+##### `dir`
+
+**type:** `'ltr' | 'rtl'`
+
+Le sens d'écriture de cette langue ; `"ltr"` pour gauche à droite (par défaut) ou `"rtl"` pour droite à gauche.
+
+#### Locale racine
+
+Vous pouvez servir la langue par défaut sans répertoire `/lang/` en définissant une locale `root` :
+
+```js
+starlight({
+ locales: {
+ root: {
+ label: 'English',
+ lang: 'en',
+ },
+ fr: {
+ label: 'Français',
+ },
+ },
+});
+```
+
+Par exemple, cela vous permet de servir `/getting-started/` comme une route anglaise et d'utiliser `/fr/getting-started/` comme la page française équivalente.
+
+### `defaultLocale`
+
+**type:** `string`
+
+Définit la langue par défaut pour ce site.
+La valeur doit correspondre à l'une des clés de votre objet [`locales`](#locales).
+(Si votre langue par défaut est votre [root locale](#root-locale), vous pouvez sauter cette étape).
+
+La locale par défaut sera utilisée pour fournir un contenu de remplacement lorsque les traductions sont manquantes.
+
+### `social`
+
+**type:** `{ discord?: string; github?: string; mastodon?: string; twitter?: string }`
+
+Détails optionnels sur les comptes de médias sociaux pour ce site. L'ajout de l'un d'entre eux les affichera sous forme de liens iconiques dans l'en-tête du site.
+
+```js
+starlight({
+ social: {
+ discord: 'https://astro.build/chat',
+ github: 'https://github.com/withastro/starlight',
+ mastodon: 'https://m.webtoo.ls/@astro',
+ twitter: 'https://twitter.com/astrodotbuild',
+ },
+});
+```
+
+### `customCss`
+
+**type:** `string[]`
+
+Fournit des fichiers CSS pour personnaliser l'aspect et la convivialité de votre site Starlight.
+
+Prend en charge les fichiers CSS locaux relatifs à la racine de votre projet, par exemple `'/src/custom.css'`, et les CSS que vous avez installés en tant que module npm, par exemple `'@fontsource/roboto'`.
+
+```js
+starlight({
+ customCss: ['/src/custom-styles.css', '@fontsource/roboto'],
+});
+```
+
+### `head`
+
+**type:** [`HeadConfig[]`](#headconfig)
+
+Ajoute des balises personnalisées au `` de votre site Starlight.
+Cela peut être utile pour ajouter des analyses et d'autres scripts et ressources tiers.
+
+```js
+starlight({
+ head: [
+ // Exemple : ajouter un script d'analyse Fathom tag.
+ {
+ tag: 'script',
+ attrs: {
+ src: 'https://cdn.usefathom.com/script.js',
+ 'data-site': 'MY-FATHOM-ID',
+ defer: true,
+ },
+ },
+ ],
+});
+```
+
+#### `HeadConfig`
+
+```ts
+interface HeadConfig {
+ tag: string;
+ attrs?: Record;
+ content?: string;
+}
+```
diff --git a/docs/src/content/docs/fr/reference/frontmatter.md b/docs/src/content/docs/fr/reference/frontmatter.md
new file mode 100644
index 00000000000..6a8bdc3f280
--- /dev/null
+++ b/docs/src/content/docs/fr/reference/frontmatter.md
@@ -0,0 +1,119 @@
+---
+title: Frontmatter Reference
+description: Une vue d'ensemble des champs frontmatter par défaut pris en charge par Starlight.
+---
+
+Vous pouvez personnaliser des pages Markdown et MDX individuelles dans Starlight en définissant des valeurs dans leur page de garde. Par exemple, une page normale peut définir les champs `title` et `description` :
+
+```md
+---
+title: A propos de ce projet
+description: En savoir plus sur le projet sur lequel je travaille.
+---
+
+Bienvenue sur la page "à propos" !
+```
+
+## Champs de la page d'accueil
+
+### `title` (obligatoire)
+
+**type:** `string`
+
+Vous devez fournir un titre pour chaque page. Il sera affiché en haut de la page, dans les onglets du navigateur et dans les métadonnées de la page.
+
+### `description`
+
+**type:** `string`
+
+La description de la page est utilisée pour les métadonnées de la page et sera reprise par les moteurs de recherche et dans les aperçus des médias sociaux.
+
+### `editUrl`
+
+**type:** `string | boolean`
+
+Remplace la [configuration globale `editLink`](/fr/reference/configuration/#editlink). Mettez `false` pour désactiver le lien "Editer la page" pour une page spécifique ou pour fournir une URL alternative où le contenu de cette page est éditable.
+
+### `head`
+
+**type:** [`HeadConfig[]`](/fr-FR/reference/configuration/#headconfig)
+
+Vous pouvez ajouter des balises supplémentaires au champ `` de votre page en utilisant le champ `head` frontmatter. Cela signifie que vous pouvez ajouter des styles personnalisés, des métadonnées ou d'autres balises à une seule page. Similaire à [l'option globale `head`](/fr/reference/configuration/#head).
+
+```md
+---
+title: A propos de nous
+head:
+ # Utiliser une balise personnalisée
+ - tag: title
+ content: Titre personnalisé à propos de nous
+---
+```
+
+### `tableOfContents`
+
+**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }`
+
+Remplace la [configuration globale `tableOfContents`](/fr/reference/configuration/#tableofcontents).
+Personnalisez les niveaux d'en-tête à inclure ou mettez `false` pour cacher la table des matières sur cette page.
+
+### `template`
+
+**type:** `'doc' | 'splash'`
+**default:** `'doc'`
+
+Définit le modèle de mise en page pour cette page.
+Les pages utilisent la mise en page `'doc'`' par défaut.
+La valeur `'splash''` permet d'utiliser une mise en page plus large, sans barres latérales, conçue pour les pages d'atterrissage.
+
+### `hero`
+
+**type:** [`HeroConfig`](#heroconfig)
+
+Ajoute un composant héros en haut de la page. Fonctionne bien avec `template : splash`.
+
+Par exemple, cette configuration montre quelques options communes, y compris le chargement d'une image depuis votre dépôt.
+
+```md
+---
+title: Ma page d'accueil
+template: splash
+hero:
+ title: 'Mon projet : Stellar Stuffer Sooner'
+ tagline: Emmenez vos affaires sur la lune et revenez-y en un clin d'œil.
+ image:
+ alt: Un logo aux couleurs vives et scintillantes
+ file: ../../assets/logo.png
+ actions:
+ - text: En savoir plus
+ link: /getting-started/
+ icon: right-arrow
+ variant: primary
+ - text: Voir sur GitHub
+ link: https://github.com/astronaut/my-project
+ icon: external
+---
+```
+
+#### `HeroConfig`
+
+```ts
+interface HeroConfig {
+ title?: string;
+ tagline?: string;
+ image?: {
+ alt?: string;
+ // Chemin relatif vers une image dans votre référentiel.
+ file?: string;
+ // HTML brut à utiliser dans l'emplacement de l'image.
+ // Il peut s'agir d'une balise `<img>` personnalisée ou d'une balise `<svg>` en ligne.
+ html?: string;
+ };
+ actions?: Array<{
+ text: string;
+ link: string;
+ variant: 'primary' | 'secondary' | 'minimal';
+ icon: string;
+ }>;
+}
+```
diff --git a/docs/src/content/docs/guides/authoring-content.md b/docs/src/content/docs/guides/authoring-content.md
index bfeb044e4de..52896a03ebb 100644
--- a/docs/src/content/docs/guides/authoring-content.md
+++ b/docs/src/content/docs/guides/authoring-content.md
@@ -104,7 +104,7 @@ You can nest any other Markdown content types inside an aside, but asides are be
Starlight is a documentation website toolkit built with [Astro](https://astro.build/). You can get started with this command:
```sh
-npm run create astro@latest --template starlight
+npm create astro@latest -- --template starlight
```
:::
@@ -114,7 +114,7 @@ npm run create astro@latest --template starlight
Starlight is a documentation website toolkit built with [Astro](https://astro.build/). You can get started with this command:
```sh
-npm run create astro@latest --template starlight
+npm create astro@latest -- --template starlight
```
:::
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
index fbf2748d9a7..38bd8fdea30 100644
--- a/packages/starlight/components/Search.astro
+++ b/packages/starlight/components/Search.astro
@@ -294,6 +294,7 @@ const t = useTranslations(Astro.props.locale);
#starlight__search .pagefind-ui__result-excerpt {
font-size: var(--sl-text-body-sm);
+ word-break: break-word;
}
#starlight__search mark {
diff --git a/packages/starlight/translations/fr.json b/packages/starlight/translations/fr.json
new file mode 100644
index 00000000000..55a69fee2dd
--- /dev/null
+++ b/packages/starlight/translations/fr.json
@@ -0,0 +1,20 @@
+{
+ "skipLink.label": "Aller au contenu",
+ "search.label": "rechercher",
+ "search.shortcutLabel": "(Presser / pour rechercher)",
+ "search.cancelLabel": "Annuler",
+ "themeSelect.accessibleLabel": "Selectionner le thème",
+ "themeSelect.dark": "Dark",
+ "themeSelect.light": "Light",
+ "themeSelect.auto": "Auto",
+ "languageSelect.accessibleLabel": "Selectionner la langue",
+ "menuButton.accessibleLabel": "Menu",
+ "sidebarNav.accessibleLabel": "Main",
+ "tableOfContents.onThisPage": "Sur cette page",
+ "tableOfContents.overview": "Vue d'ensemble",
+ "i18n.untranslatedContent": "Ce contenu n'est pas encore disponible dans votre langue.",
+ "page.editLink": "Editer la page",
+ "page.lastUpdated": "Dernière mise à jour :",
+ "page.previousLink": "Précédent",
+ "page.nextLink": "Suivant"
+ }
diff --git a/packages/starlight/translations/index.ts b/packages/starlight/translations/index.ts
index c721633d1be..ee16ba32ce9 100644
--- a/packages/starlight/translations/index.ts
+++ b/packages/starlight/translations/index.ts
@@ -4,9 +4,10 @@ import es from './es.json';
import de from './de.json';
import ja from './ja.json';
import pt from './pt.json';
+import fr from './fr.json';
const parse = i18nSchema().required().strict().parse;
export default Object.fromEntries(
- Object.entries({ en, es, de, ja, pt }).map(([key, dict]) => [key, parse(dict)])
+ Object.entries({ en, es, de, ja, pt, fr }).map(([key, dict]) => [key, parse(dict)])
);