diff --git a/src/i18n/fr/README.md b/src/i18n/fr/README.md index 439fa5c6ac42f..15e280ec92120 100644 --- a/src/i18n/fr/README.md +++ b/src/i18n/fr/README.md @@ -2,27 +2,27 @@ Le glossaire est là pour définir les mots, traductions et orientations concernant la traduction Française de la documentation d'Astro -Certains mots jugés comme "intégrant" à Astro n'auront pas de traduction car étant une pars conséquente de son environment +Certains mots jugés comme "intégrant" à Astro n'auront pas de traduction, car étant une part conséquente de son environment -## 🔄️ Mot ne nécessitant pas de traductions +## 🔄️ Mots ne nécessitant pas de traductions -> 💡 Ces mot sont considérés comme des nom propre du a leurs origines anglaises, prenant toujours une majuscule +> 💡 Ces mots sont considérés comme des noms propres dû à leurs origines anglaises, prenant toujours une majuscule | Mot concerné | Définition | Utilisation | |-------------------|------------|-------------| | Template | Mise en page / construction d'un composant Astro | Dans le context de “Templating” ou “Template” d'un composant | -| Composant Layout | Composant intégrant a la logique d'Astro, servant de modèle pour une page Astro, simplifiant sa syntaxe | Utilisé quand on parle d'un Composant Layout d'Astro peux s'averer utile de le mettre entre “crochets” -| Composant Page | Composant Astro situé dans `src/pages` contenant une syntaxe `` complète, sert de fondation pour le routage de base d'Astro | Utilisé dans le contexte d'un "Composant Page Astro" à ne pas confondre avec une “page HTML” qui ne prendra pas de majuscule car venant du français -| Slot | `` ou emplacement ce mot est souvent utilisé dans le code pour spécifier où dois se placer un contenu dans le contexte d'héritage ou dans des Frameworks / environnements orienté composants | Peut être spécifié sous cette forme ou sous sa version HTML ``. Utilisé pour son utilisation par tout les Frameworks supporté par Astro en plus de lui-même +| Composant Layout | Composant intégrant à la logique d'Astro, servant de modèle pour une page Astro, simplifiant sa syntaxe | Utilisé quand on parle d'un Composant Layout d'Astro peut s'avérer utile de le mettre entre “crochets” +| Composant Page | Composant Astro situé dans `src/pages` contenant une syntaxe `` complète, sert de fondation pour le routage de base d'Astro | Utilisé dans le contexte d'un "Composant Page Astro" à ne pas confondre avec une “page HTML” qui ne prendra pas de majuscule, car venant du français +| Slot | `` ou emplacement, ce mot est souvent utilisé dans le code pour spécifier où doit se placer un contenu dans le contexte d'héritage ou dans des Frameworks / environnements orienté composants | Peut être spécifié sous cette forme ou sous sa version HTML ``. Utilisé pour son utilisation par tous les Frameworks supporté par Astro en plus de lui-même | Framework | Mot couramment dans le code pour spécifier un logiciel ou un “Package” utilisant une syntaxe spécifique a son utilisation (ex: `React`, `Vue`, `Svelte`, etc...) | Utilisé dans le cadre des intégrations fournies par Astro intégrant de nombreux environnements différent. -| Node Built-in | Intégrations construites nativement dans le gestionnaire de packets Node (ex: `node:fs`, `node:path`, etc...) | Les intégrations natives à Astro n'ont pas a utiliser cela, utilisé seulement pour node, étant une syntaxe courante pour cet environnement +| Node Built-in | Intégrations construites nativement dans le gestionnaire de packets Node (ex: `node:fs`, `node:path`, etc...) | Les intégrations natives à Astro n'ont pas à utiliser cela, utilisé seulement pour node, étant une syntaxe courante pour cet environnement | Frontmatter | Aussi utilisé sous le nom de “Script du Composant”, c'est le code JavaScript placé au entre les barrières `---` dans tout les composants Astro | Peux être utilisé sous le nom de “Script du Composant” quand spécifié, utilisé seulement dans le contexte d'Astro (et les pages markdown d'Astro | Fragment | Est un concept lié au code, le plus souvent dans le web ou dans les interfaces, c'est un élément éphémère utilisé pour grouper plusieurs éléments ensembles | Est souvent écris sous sa forme HTML (` ` ou `<> `) mais peux être spécifié comme tel dans le texte -| Package | Peux être traduit par “Module” ou “Librairie” par certain, parlant d'un packet NPM, n'as pas besoin de traduction car couramment utilisé dans le code | Utilisé en parlant d'un packet NPM ou d'une installation à effectuer pour une intégration Astro -| Build | Dans le contexte d'un langage utilisant une étape de compilation, on parle de compilation / transpilation | Ce mot est a utiliser que dans le cadre où l'on parle de l'étape de compilation via la commande `astro build` servant à sortir un résultat compatible pour les navigateur et optimisé par Astro +| Package | Peux être traduit par “Module” ou “Librairie” par certain, parlant d'un packet NPM, n'as pas besoin de traduction, car couramment utilisé dans le code | Utilisé en parlant d'un paquet NPM ou d'une installation à effectuer pour une intégration Astro +| Build | Dans le contexte d'un langage utilisant une étape de compilation, on parle de compilation / transpilation | Ce mot est à utiliser que dans le cadre où l'on parle de l'étape de compilation via la commande `astro build` servant à sortir un résultat compatible pour les navigateurs et optimisé par Astro | Frontend | | Backend | -| Markdown, Astro, JavaScript, TypeScript, React, Vue, Svelte, Lit, Solid | Tout les noms de packages / langage prennent une majuscule car considéré comme des nom propres a ces environnements | Utilisé partout sur la docs de façon universel, dois toujours porter une majuscule +| Markdown, Astro, JavaScript, TypeScript, React, Vue, Svelte, Lit, Solid | Tous les noms de packages / langages prennent une majuscule, car considérés comme des noms propres à ces environnements | Utilisé partout sur la docs de façon universel, dois toujours porter une majuscule > Et non je ne parlerais pas du mot “Cadriciel” diff --git a/src/i18n/pt-br/nav.ts b/src/i18n/pt-br/nav.ts index 38cb6cc4e0013..f8dd641d2d93e 100644 --- a/src/i18n/pt-br/nav.ts +++ b/src/i18n/pt-br/nav.ts @@ -9,6 +9,7 @@ export default NavDictionary({ migrate: 'Guia de Migração', 'integrations/integrations': 'Feito com Astro', coreConcepts: 'Principais Conceitos', + 'concepts/mpa-vs-spa': 'MPA vs. SPA', basics: 'Fundamentos', 'core-concepts/project-structure': 'Estrutura de Projetos', 'core-concepts/astro-components': 'Componentes', @@ -36,4 +37,5 @@ export default NavDictionary({ 'reference/cli-reference': 'Interface de Linha de Comando', 'reference/api-reference': 'API de Runtime', 'reference/configuration-reference': 'Configuração', + 'concepts/why-astro': 'Por que Astro?' }); diff --git a/src/i18n/pt-br/ui.ts b/src/i18n/pt-br/ui.ts index 6288848f54673..2b37c74714b8b 100644 --- a/src/i18n/pt-br/ui.ts +++ b/src/i18n/pt-br/ui.ts @@ -2,12 +2,12 @@ import { UIDictionary } from '../translation-checkers'; export default UIDictionary({ 'a11y.skipLink': 'Pular para o Conteúdo', - 'navbar.a11yTitle': 'Navegação Superior', + 'navbar.a11yTitle': 'Superior', 'site.title': 'Documentação do Astro', 'site.description': 'Construa websites mais rápidos com menos Javascript no lado do cliente.', 'site.og.imageSrc': '/default-og-image.png?v=1', 'site.og.imageAlt': 'a logo do astro em um estrelado pedaço do espaço, com um planeta roxo parecido com Saturno flutuando à direita', - 'leftSidebar.a11yTitle': 'Navegação do site', + 'leftSidebar.a11yTitle': 'Primária', 'leftSidebar.noTranslations': 'Não foram encontradas traduções', 'leftSidebar.viewInEnglish': 'Veja em Inglês', 'leftSidebar.learnTab': 'Aprenda', @@ -21,7 +21,7 @@ export default UIDictionary({ 'rightSidebar.contribute': 'Contribua', 'rightSidebar.editPage': 'Edite esta página', 'rightSidebar.translatePage': 'Traduza esta página', - 'rightSidebar.a11yTitle': 'Índice', + 'rightSidebar.a11yTitle': 'Secundária', 'rightSidebar.github': 'Documentação do Astro no GitHub', 'themeToggle.useLight': 'Usar tema claro', 'themeToggle.useDark': 'Usar tema escuro', diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 597279eba822b..fda58ab0dec64 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -109,7 +109,7 @@ const myFavoritePokemon = [/* ... */]; ## JSX-like Expressions -You can can define local JavaScript variables inside of the frontmatter component script within an Astro component. You can then inject these variables into the component's HTML template using JSX-like expressions! +You can define local JavaScript variables inside of the frontmatter component script within an Astro component. You can then inject these variables into the component's HTML template using JSX-like expressions! ### Variables @@ -204,7 +204,7 @@ const htmlString = '

Raw HTML content

'; ### Differences between Astro and JSX -Astro component syntax is a superset of HTML. It was designed to feel familiar to anyone with HTML or JSX experience, but there a couple of key differences between `.astro` files and JSX. +Astro component syntax is a superset of HTML. It was designed to feel familiar to anyone with HTML or JSX experience, but there are a couple of key differences between `.astro` files and JSX. #### Attributes diff --git a/src/pages/en/guides/images.md b/src/pages/en/guides/images.md index 986ff7f57a448..aaa9302abba3b 100644 --- a/src/pages/en/guides/images.md +++ b/src/pages/en/guides/images.md @@ -191,7 +191,7 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog --- // Local image with multiple sizes and formats - + // Remote image (aspect ratio is required) diff --git a/src/pages/en/guides/integrations-guide/image.md b/src/pages/en/guides/integrations-guide/image.md index 0a6091ae9d7af..033632f028107 100644 --- a/src/pages/en/guides/integrations-guide/image.md +++ b/src/pages/en/guides/integrations-guide/image.md @@ -246,6 +246,8 @@ A `string` can be provided in the form of `{width}:{height}`, ex: `16:9` or `3:4 A `number` can also be provided, useful when the aspect ratio is calculated at build time. This can be an inline number such as `1.777` or inlined as a JSX expression like `aspectRatio={16/9}`. +#### formats +

**Type:** `Array<'avif' | 'jpeg' | 'png' | 'webp'>`
diff --git a/src/pages/es/core-concepts/framework-components.md b/src/pages/es/core-concepts/framework-components.md index a21254ddf5fad..d58d0a3a74fc7 100644 --- a/src/pages/es/core-concepts/framework-components.md +++ b/src/pages/es/core-concepts/framework-components.md @@ -1,7 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Componentes de framework -description: Aprenda a usar React, Svelte, etc en Astro +description: Aprenda a usar React, Svelte, etc. i18nReady: true --- @@ -21,7 +21,7 @@ npm install --save-dev @astrojs/react react react-dom Luego importe y agregue la función a su lista de integraciones en `astro.config.mjs`: -```js +```js title="astro.config.mjs" ins={3} ins=/(? -

Use React components directly in Astro!

+

¡Use los componentes de React directamente en Astro!

``` -:::tip -Recuerde: ¡todas las importaciones deben vivir en la **parte superior** del script de su componente de Astro! -::: - -De forma predeterminada, tus componentes de framework se renderizarán como HTML estático. Esto es útil para crear maquetados de componentes que no son interactivos y evita enviar código JavaScript innecesario al cliente. +De forma predeterminada, los componentes de framework se renderizarán como HTML estático. Esto es útil para crear maquetados que no son interactivos y evitar enviar código JavaScript innecesario al cliente. ## Hidratando componentes interactivos -Un componente de framework puede hacerse interactivo (hidratado) usando una de las directivas `client:*`. Este es un atributo del componente para definir cómo se debe **renderizar** e **hidratar** su componente. +Un componente de framework puede hacerse interactivo (hidratado) usando una de las directivas `client:*`. Este es un atributo del componente para definir cómo se debe **renderizar** e **hidratar** el componente. -Esta [directiva del cliente](/es/reference/directives-reference/#directivas-del-cliente) describe si su componente se debe renderizar o no al momento de la compilación, además de cuándo el navegador debe cargar el JavaScript del lado del cliente de su componente. +Esta [directiva del cliente](/es/reference/directives-reference/#directivas-del-cliente) describe si su componente se debe renderizar o no al momento de la compilación, además de cuándo el navegador debe cargar el JavaScript del componente. La mayoría de las directivas renderizarán el componente en el servidor al momento de la compilación. El JavaScript del componente se enviará al cliente de acuerdo a la directiva especificada. El componente se hidratará cuando su JavaScript haya terminado de importarse. -```astro +```astro title="src/pages/interactive-components.astro" /client:\S+/ --- // Ejemplo: hidratando los componentes de framework en el navegador. import InteractiveButton from '../components/InteractiveButton.jsx'; @@ -87,7 +83,7 @@ el usuario se desplace hacia abajo y el componente sea visible en la página --> ``` :::caution -Cualquier renderizador de JavaScript necesario para el componente de framework (por ejemplo, React, Svelte) se descargará con la página. Las directivas `client:*` solo dictan cuándo se importa el _componente de JavaScript_ y cuándo se hidrata el _componente_. +Cualquier renderizador de JavaScript necesario para renderizar el componente de framework (por ejemplo, React, Svelte) se descargará con la página. Las directivas `client:*` solo dictan cuándo se importa el _componente de JavaScript_ y cuándo se hidrata el _componente_. ::: ### Directivas de hidratación disponibles @@ -100,9 +96,8 @@ Hay varias directivas de hidratación disponibles para los componentes de framew Puedes importar y renderizar componentes usando múltiples frameworks en el mismo componente de Astro. -```astro +```astro title="src/pages/mixing-frameworks.astro" --- -// src/pages/MyAstroPage.astro // Ejemplo: Mezclando múltiples componentes del framework en la misma página. import MyReactComponent from '../components/MyReactComponent.jsx'; import MySvelteComponent from '../components/MySvelteComponent.svelte'; @@ -119,13 +114,12 @@ import MyVueComponent from '../components/MyVueComponent.vue'; Solo los componentes de **Astro** (`.astro`) pueden contener componentes de múltiples frameworks. ::: -## Pasando Children a componentes de framework +## Pasando children a componentes de framework -Dentro de un componente de Astro, **puedes** pasar elementos secundarios a los componentes del framework. Cada framework tiene sus propios patrones sobre cómo hacer referencia a estos elementos secundarios: React, Preact y Solid usan una prop especial llamada `children`, mientras que Svelte y Vue usan el elemento ``. +Dentro de un componente de Astro, **puedes** pasar elementos children a los componentes del framework. Cada framework tiene sus propios patrones sobre cómo hacer referencia a estos elementos children: React, Preact y Solid usan una prop especial llamada `children`, mientras que Svelte y Vue usan el elemento ``. -```astro +```astro title="src/pages/component-children.astro" {5} --- -// src/pages/MyAstroPage.astro import MyReactSidebar from '../components/MyReactSidebar.jsx'; --- @@ -137,9 +131,8 @@ Además, puedes usar [slots con nombre](/es/core-concepts/astro-components/#slot Para React, Preact y Solid, estos slots se convertirán en una prop de nivel superior. Los slots con nombres que usen `kebab-case` se convertirán a `camelCase`. -```astro +```astro title="src/pages/named-slots.astro" /slot="(.*)"/ --- -// src/pages/MyAstroPage.astro import MySidebar from '../components/MySidebar.jsx'; --- @@ -152,7 +145,7 @@ import MySidebar from '../components/MySidebar.jsx'; ``` -```jsx +```jsx /{props.(title|socialLinks)}/ // src/components/MySidebar.jsx export default function MySidebar(props) { return ( @@ -165,9 +158,9 @@ export default function MySidebar(props) { } ``` -Para Svelte y Vue, se pueden hacer referencia a estos slots mediante un elemento `` con el atributo `name`. Se conservarán los nombres de los slots que usen `kebab-case`. +Para Svelte y Vue, puedes hacer referencia a estos slots mediante un elemento `` con el atributo `name`. Se conservarán los nombres de los slots que usen `kebab-case`. -```jsx +```jsx /slot name="(.*)"/ // src/components/MySidebar.svelte