Merge branch 'main' into i18n-fr-add-guides-overriding-components

withastro · Mar 21, 2024 · 02e3520 · 02e3520
2 parents 9af2cfd + e364227
commit 02e3520
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 102 deletions.
diff --git a/docs/src/content/docs/fr/guides/css-and-tailwind.mdx b/docs/src/content/docs/fr/guides/css-and-tailwind.mdx
@@ -3,12 +3,16 @@ title: CSS et mise en forme
 description: Apprendre à mettre en forme votre site Starlight avec du CSS personnalisé ou l'intégrer avec Tailwind CSS.
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 Vous pouvez mettre en forme votre site Starlight avec du CSS personnalisé ou utiliser le module d'extension Tailwind de Starlight.
 
 ## Styles CSS personnalisés
 
 Personnalisez les styles appliqués à votre site Starlight en fournissant des fichiers CSS supplémentaires pour modifier ou étendre les styles par défaut de Starlight.
 
+<Steps>
+
 1. Ajoutez un fichier CSS à votre répertoire `src/`.
    Par exemple, vous pouvez définir une largeur de colonne par défaut plus large et une taille de texte plus grande pour les titres de page :
 
@@ -40,6 +44,8 @@ Personnalisez les styles appliqués à votre site Starlight en fournissant des f
    });
    ```
 
+</Steps>
+
 Vous pouvez retrouver toutes les propriétés CSS personnalisées utilisées par Starlight que vous pouvez définir pour personnaliser votre site dans le fichier [`props.css` sur GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
 
 ## Tailwind CSS
@@ -55,8 +61,6 @@ Le module d'extension Tailwind de Starlight applique la configuration suivante :
 
 ### Créer un nouveau projet avec Tailwind
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 Démarrez un nouveau projet Starlight avec Tailwind CSS préconfiguré en utilisant `create astro` :
 
 <Tabs>
@@ -87,6 +91,8 @@ yarn create astro --template starlight/tailwind
 
 Si vous avez déjà un site Starlight et que vous souhaitez ajouter Tailwind CSS, suivez ces étapes.
 
+<Steps>
+
 1.  Ajoutez l'intégration Astro pour Tailwind :
 
     <Tabs>
@@ -194,6 +200,8 @@ Si vous avez déjà un site Starlight et que vous souhaitez ajouter Tailwind CSS
     };
     ```
 
+</Steps>
+
 ### Mettre en forme Starlight avec Tailwind
 
 Starlight utilise les valeurs de votre [configuration de thème Tailwind](https://tailwindcss.com/docs/theme) dans son interface utilisateur.
@@ -242,7 +250,7 @@ export default {
 Le thème de couleur de Starlight peut être contrôlé en remplaçant ses propriétés personnalisées par défaut.
 Ces variables sont utilisées dans toute l'interface utilisateur avec une gamme de nuances de gris utilisées pour les couleurs de texte et d'arrière-plan et une couleur d'accentuation utilisée pour les liens et pour mettre en évidence les éléments courants durant la navigation.
 
-### Editeur de thème de couleur
+### Éditeur de thème de couleur
 
 Utiliser les contrôles ci-dessous pour modifier les palettes de couleurs d'accentuation et de gris de Starlight.
 Les zones d'aperçu sombre et clair afficheront les couleurs résultantes, et la page entière sera également mise à jour pour prévisualiser vos modifications.

diff --git a/docs/src/content/docs/fr/guides/site-search.mdx b/docs/src/content/docs/fr/guides/site-search.mdx
@@ -3,7 +3,7 @@ title: Recherche
 description: Découvrez les fonctionnalités de recherche intégrées à Starlight et comment les personnaliser.
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 
 Par défaut, les sites utilisant Starlight incluent une recherche plein texte utilisant [Pagefind](https://pagefind.app/), un outil de recherche rapide et à faible bande passante pour sites statiques.
 
@@ -48,6 +48,8 @@ Ce texte sera caché de la recherche.
 
 Si vous avez accès au [programme DocSearch d'Algolia](https://docsearch.algolia.com/) et que vous souhaitez l'utiliser à la place de Pagefind, vous pouvez utiliser le module d'extension officiel DocSearch de Starlight.
 
+<Steps>
+
 1. Installez `@astrojs/starlight-docsearch` :
 
    <Tabs>
@@ -102,13 +104,17 @@ Si vous avez accès au [programme DocSearch d'Algolia](https://docsearch.algolia
    });
    ```
 
+</Steps>
+
 Avec cette configuration mise à jour, la barre de recherche de votre site ouvrira désormais une modale Algolia au lieu de celle par défaut.
 
 #### Traduire l'interface utilisateur de DocSearch
 
 DocSearch fournit seulement des chaînes de l'interface utilisateur en anglais par défaut.
 Ajoutez des traductions de l'interface utilisateur de la modale pour votre langue en utilisant le [système d'internationalisation](/fr/guides/i18n/#traduire-linterface-utilisateur-de-starlight) intégré à Starlight.
 
+<Steps>
+
 1. Étendez la définition de la collection de contenus `i18n` de Starlight avec le schéma DocSearch dans `src/content/config.ts` :
 
    ```js ins={4} ins=/{ extend: .+ }/
@@ -162,3 +168,5 @@ Ajoutez des traductions de l'interface utilisateur de la modale pour votre langu
    	"docsearch.noResultsScreen.reportMissingResultsLinkText": "Let us know."
    }
    ```
+
+</Steps>
diff --git a/...t/docs/it/guides/overriding-components.md → .../docs/it/guides/overriding-components.mdx b/...t/docs/it/guides/overriding-components.md → .../docs/it/guides/overriding-components.mdx
@@ -3,6 +3,8 @@ title: Sostituzione dei componenti
 description: Scopri come sovrascrivere i componenti integrati di Starlight per aggiungere elementi personalizzati all'interfaccia utente del tuo sito di documentazione.
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 L'interfaccia utente predefinita e le opzioni di configurazione di Starlight sono progettate per essere flessibili e funzionare con una vasta gamma di contenuti. Gran parte dell'aspetto predefinito di Starlight può essere personalizzato con [CSS](/it/guides/css-and-tailwind/) e [opzioni di configurazione](/it/guides/customization/).
 
 Quando hai bisogno di più di ciò che è possibile fare di base, Starlight supporta la creazione di componenti personalizzati per estendere o sovrascrivere (sostituire completamente) i suoi componenti predefiniti.
@@ -17,6 +19,8 @@ Sostituire i componenti predefiniti di Starlight può essere utile quando:
 
 ## Come eseguire una sostituzione
 
+<Steps>
+
 1. Scegli il componente Starlight che desideri sovrascrivere.
    È possibile trovare un elenco completo dei componenti nel [Riferimento alle sostituzioni](/it/reference/overrides/).
 
@@ -42,18 +46,20 @@ Sostituire i componenti predefiniti di Starlight può essere utile quando:
    import starlight from '@astrojs/starlight';
 
    export default defineConfig({
-     integrations: [
-       starlight({
-         title: 'La Mia Documentazione con le sostituzioni',
-         components: {
-           // Sostituisce il componente `SocialIcons` predefinito.
-           SocialIcons: './src/components/EmailLink.astro',
-         },
-       }),
-     ],
+   	integrations: [
+   		starlight({
+   			title: 'La Mia Documentazione con le sostituzioni',
+   			components: {
+   				// Sostituisce il componente `SocialIcons` predefinito.
+   				SocialIcons: './src/components/EmailLink.astro',
+   			},
+   		}),
+   	],
    });
    ```
 
+</Steps>
+
 ## Riutilizza un componente integrato
 
 Puoi creare con i componenti dell'interfaccia utente predefiniti di Starlight proprio come faresti con i tuoi: importandoli e renderizzandoli nei tuoi componenti personalizzati. Ciò ti consente di mantenere tutta l'interfaccia utente di base di Starlight all'interno del tuo progetto, aggiungendo al contempo un'interfaccia utente aggiuntiva.
@@ -94,9 +100,9 @@ const { title } = Astro.props.entry.data;
 <h1 id="_top">{title}</h1>
 
 <style>
-  h1 {
-    font-family: 'Comic Sans';
-  }
+	h1 {
+		font-family: 'Comic Sans';
+	}
 </style>
 ```
 
@@ -118,13 +124,13 @@ const isHomepage = Astro.props.slug === '';
 ---
 
 {
-  isHomepage ? (
-    <footer>Costruito con Starlight 🌟</footer>
-  ) : (
-    <Default {...Astro.props}>
-      <slot />
-    </Default>
-  )
+	isHomepage ? (
+		<footer>Costruito con Starlight 🌟</footer>
+	) : (
+		<Default {...Astro.props}>
+			<slot />
+		</Default>
+	)
 }
 ```
 

diff --git a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx
@@ -3,12 +3,16 @@ title: CSS & 스타일링
 description: 맞춤형 CSS로 Starlight 사이트의 스타일을 지정하거나 Tailwind CSS와 통합하는 방법을 알아보세요.
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 사용자 정의 CSS 파일을 사용하여 Starlight 사이트의 스타일을 지정하거나 Starlight Tailwind 플러그인을 사용할 수 있습니다.
 
 ## 사용자 정의 CSS 스타일
 
 Starlight의 기본 스타일을 수정하거나 확장하기 위한 CSS 파일을 제공하여 사이트에 적용된 스타일을 원하는대로 변경할 수 있습니다.
 
+<Steps>
+
 1. `src/` 디렉터리에 CSS 파일을 추가합니다. 예를 들어, 아래 코드를 통해 페이지 제목을 더 넓게 만들고, 더 큰 텍스트를 사용할 수 있습니다.
 
    ```css
@@ -39,6 +43,8 @@ Starlight의 기본 스타일을 수정하거나 확장하기 위한 CSS 파일
    });
    ```
 
+</Steps>
+
 사이트를 스타일링하기 위해 Starlight에서 사용되는 모든 CSS 속성을 [`props.css` 파일](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css)에서 확인할 수 있습니다.
 
 ## Tailwind CSS
@@ -54,8 +60,6 @@ Starlight Tailwind 플러그인은 다음 구성을 적용합니다.
 
 ### Tailwind가 포함된 새 프로젝트 만들기
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 `create astro`를 사용하여 Tailwind CSS가 사전 구성된 새 Starlight 프로젝트를 시작하세요.
 
 <Tabs>
@@ -86,6 +90,8 @@ yarn create astro --template starlight/tailwind
 
 이미 Starlight 사이트가 존재할때, Tailwind CSS를 추가하려면 다음 단계를 따르세요.
 
+<Steps>
+
 1.  Astro의 Tailwind 통합 추가
 
     <Tabs>
@@ -193,6 +199,8 @@ yarn create astro --template starlight/tailwind
     };
     ```
 
+</Steps>
+
 ### Tailwind로 Starlight 스타일링하기
 
 Starlight는 UI에서 [Tailwind 테마 구성](https://tailwindcss.com/docs/theme) 값을 사용합니다.

diff --git a/docs/src/content/docs/ko/guides/customization.mdx b/docs/src/content/docs/ko/guides/customization.mdx
@@ -3,15 +3,16 @@ title: Starlight 사용자 정의
 description: 로고, 사용자 정의 글꼴, 랜딩 페이지 디자인 등을 사용하여 나만의 Starlight 사이트를 만드는 방법을 알아보세요.
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { FileTree } from '@astrojs/starlight/components';
+import { Tabs, TabItem, FileTree, Steps } from '@astrojs/starlight/components';
 
 Starlight는 합리적인 기본 스타일과 기능을 제공하므로 구성 없이 빠르게 시작할 수 있습니다. Starlight 사이트의 모양과 느낌을 바꾸고 싶다면 이 가이드를 참조하세요.
 
 ## 로고 추가
 
 사이트 헤더에 로고를 추가하는 것은 Starlight 사이트에 브랜드를 추가하는 빠른 방법입니다.
 
+<Steps>
+
 1. `src/assets/` 디렉터리에 로고 이미지 파일을 추가합니다.
 
    <FileTree>
@@ -43,6 +44,8 @@ Starlight는 합리적인 기본 스타일과 기능을 제공하므로 구성
    });
    ```
 
+</Steps>
+
 기본적으로 로고는 사이트의 `title`과 함께 표시됩니다. 이미 로고 이미지에 사이트 제목이 포함되어 있는 경우, `replacementTitle` 옵션을 설정하여 제목 텍스트를 시각적으로 숨길 수 있습니다. `title` 텍스트는 스크린 리더를 위해 남아 있기 때문에 헤더의 접근성은 유지됩니다.
 
 ```js {5}
@@ -59,6 +62,8 @@ starlight({
 
 라이트 모드와 다크 모드에서 다른 버전의 로고를 표시할 수 있습니다.
 
+<Steps>
+
 1. `src/assets/` 디렉터리에 각 변형에 대한 이미지 파일을 추가합니다.
 
    <FileTree>
@@ -84,6 +89,8 @@ starlight({
    }),
    ```
 
+</Steps>
+
 ## 사이트맵 활성화
 
 Starlight에는 사이트맵 생성 기능이 내장되어 있습니다. `astro.config.mjs` 파일에 있는 `site` 속성의 값을 URL로 설정하여 사이트맵 생성을 활성화할 수 있습니다.
@@ -299,6 +306,8 @@ Starlight 사이트에 사용자 정의 글꼴을 추가해야 하는 경우,
 
 #### 로컬 글꼴 파일 설정
 
+<Steps>
+
 1. `src/fonts/` 디렉터리에 글꼴 파일을 추가하고 빈 `font-face.css` 파일을 만드세요.
 
    <FileTree>
@@ -347,10 +356,14 @@ Starlight 사이트에 사용자 정의 글꼴을 추가해야 하는 경우,
    });
    ```
 
+</Steps>
+
 #### Fontsource 글꼴 설정
 
 [Fontsource](https://fontsource.org/) 프로젝트는 Google Fonts 및 기타 오픈 소스 글꼴 사용을 단순화합니다. 글꼴을 설치할 수 있는 npm 모듈과 프로젝트에 추가할 CSS 파일을 제공합니다.
 
+<Steps>
+
 1.  [Fontsource 카탈로그](https://fontsource.org/)에서 사용하려는 글꼴을 찾으세요. 예시에서는 [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif)를 사용합니다.
 
 2.  선택한 글꼴에 대한 패키지를 설치합니다. Fontsource 글꼴 페이지에서 “Install”을 클릭하면 패키지 이름을 찾을 수 있습니다.
@@ -406,6 +419,8 @@ Starlight 사이트에 사용자 정의 글꼴을 추가해야 하는 경우,
 
     Fontsource는 각 글꼴에 대해 여러 CSS 파일을 제공합니다. 다른 굵기 및 스타일을 포함하는 방법이 궁금하다면 [Fontsource 문서](https://fontsource.org/docs/getting-started/install#4-weights-and-styles)를 참조하세요.
 
+</Steps>
+
 ### 글꼴 사용
 
 설정한 글꼴을 웹 사이트에 적용하려면 [사용자 정의 CSS 파일](/ko/guides/css-and-tailwind/#사용자-정의-css-스타일)에서 선택한 글꼴 이름을 사용하세요. 예를 들어 Starlight의 기본 글꼴을 변경하려면 사용자 정의 속성인 `--sl-font`를 설정하세요.