From 704002133a78b7ff05cbc4cbc078e900ce975c26 Mon Sep 17 00:00:00 2001 From: Renato Lacerda Date: Fri, 7 Oct 2022 12:57:16 -0300 Subject: [PATCH 01/22] i18n(pt-br): add `deploy/gitlab.md` translation (#1738) * add translation to `deply/gitlab.md` * Apply suggestions and corrections from @Yan-Thomas Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- src/pages/pt-br/guides/deploy/gitlab.md | 59 +++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/pages/pt-br/guides/deploy/gitlab.md diff --git a/src/pages/pt-br/guides/deploy/gitlab.md b/src/pages/pt-br/guides/deploy/gitlab.md new file mode 100644 index 0000000000000..33bc0cfd5176b --- /dev/null +++ b/src/pages/pt-br/guides/deploy/gitlab.md @@ -0,0 +1,59 @@ +--- +title: Faço o deploy do seu site Astro no GitLab Pages +description: Como fazer o deploy do seu site Astro para a web no GitLab Pages. +layout: ~/layouts/DeployGuideLayout.astro +i18nReady: true +--- + +Você pode usar o [GitLab Pages](https://pages.gitlab.io/) para hospedar um site Astro para seu projeto, grupo ou conta de usuário do [GitLab](https://about.gitlab.com/). + +:::tip[Procurando por um exemplo?] +Veja o [exemplo oficial de um projeto Astro no GitLab Pages](https://gitlab.com/pages/astro)! +::: + +## Como fazer o deploy + +1. Defina a opção `site` corretamente em `astro.config.mjs`. +2. Defina `outDir:public` em `astro.config.mjs`. Essa opção instrui o Astro a colocar o resultado estático da build do site em um diretório chamado `public`, que é o local exigido pelo GitLab Pages para arquivos expostos. + +Se você estava usando o [diretório `public/`](/pt-br/core-concepts/project-structure/#public) como fonte de arquivos estáticos em seu projeto Astro, renomeie o diretório e defina `publicDir` com o novo nome em `astro.config.mjs`. + +Por exemplo, aqui estão as configurações corretas de `astro.config.mjs` quando o diretório `public/` é renomeado para `static/`: + + ```js + import { defineConfig } from 'astro/config'; + + export default defineConfig({ + sitemap: true, + site: 'https://astro.build/', + outDir: 'public', + publicDir: 'static', + }); + ``` + +3. Crie um novo arquivo chamado `.gitlab-ci.yml` na raiz do seu projeto com o conteúdo abaixo. Assim será realizado a build e o deploy do seu site sempre que você modificar seu conteúdo: + + ```yaml + # A imagem do Docker que será utilizada para a build da sua aplicação + image: node:14 + + pages: + cache: + paths: + - node_modules/ + script: + # Especifique as etapas necessárias para a build da sua aplicação aqui + - npm install + - npm run build + + artifacts: + paths: + # O diretório que possui os arquivos construídos a serem publicados. + # Precisa ser chamado de "public" + - public + + only: + # Inicia uma nova build e deploy somente quando há um push + # na(s) branch(es) abaixo + - main + ``` From 11dcca68c2c79a2eb353f88fdd59de33fd492d9a Mon Sep 17 00:00:00 2001 From: "Fred K. Bot" <108291165+fredkbot@users.noreply.github.com> Date: Fri, 7 Oct 2022 14:01:41 -0700 Subject: [PATCH 02/22] ci: update reference docs (#1724) Co-authored-by: delucis --- src/pages/en/reference/configuration-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/reference/configuration-reference.md b/src/pages/en/reference/configuration-reference.md index be83b7c5a0439..605256e389a70 100644 --- a/src/pages/en/reference/configuration-reference.md +++ b/src/pages/en/reference/configuration-reference.md @@ -132,7 +132,7 @@ Your final, deployed URL. Astro uses this full URL to generate your sitemap and **Type:** `string`

-The base path you're deploying to. Astro will match this pathname during development so that your development experience matches your build environment as closely as possible. In the example below, `astro dev` will start your server at `/docs`. +The base path to deploy to. Astro will build your pages and assets using this path as the root. Currently, this has no effect during development. ```js { From 382d1e05ded2d7f497e62c4fcd5b5a13ad24a9ee Mon Sep 17 00:00:00 2001 From: "Fred K. Bot" <108291165+fredkbot@users.noreply.github.com> Date: Sat, 8 Oct 2022 12:11:35 -0700 Subject: [PATCH 03/22] ci: update reference docs (#1752) Co-authored-by: delucis --- src/pages/en/reference/configuration-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/reference/configuration-reference.md b/src/pages/en/reference/configuration-reference.md index 605256e389a70..16baf4d73c19d 100644 --- a/src/pages/en/reference/configuration-reference.md +++ b/src/pages/en/reference/configuration-reference.md @@ -132,7 +132,7 @@ Your final, deployed URL. Astro uses this full URL to generate your sitemap and **Type:** `string`

-The base path to deploy to. Astro will build your pages and assets using this path as the root. Currently, this has no effect during development. +The base path to deploy to. Astro will build your pages and assets using this path as the root. Currently, this has no effect during development. ```js { From 02b2fc145e235442bc7042a9a579a463a4750598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Freddy=20Gonz=C3=A1lez?= <7684330+fredoist@users.noreply.github.com> Date: Sat, 8 Oct 2022 22:08:26 -0500 Subject: [PATCH 04/22] i18n(es): check grammar for core-concepts, reference, and integrations pages (#1739) * i18n(es): fix grammar checks for core-concepts pages * i18n(es): check grammar for reference and integrations pages * i18n(es): grammar check for astro guides pages * i18n(es): remove hyphen from pre-renderizado word * i18n(es): update framework-components.md Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com> * i18n(es): apply review suggestions Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com> --- .../es/core-concepts/astro-components.md | 20 ++++++------ src/pages/es/core-concepts/astro-pages.md | 2 +- .../es/core-concepts/framework-components.md | 6 ++-- .../es/core-concepts/project-structure.md | 2 +- src/pages/es/core-concepts/routing.md | 18 +++++------ src/pages/es/core-concepts/sharing-state.md | 32 +++++++++---------- src/pages/es/guides/configuring-astro.md | 4 +-- src/pages/es/guides/data-fetching.md | 2 +- src/pages/es/guides/deploy.md | 2 +- src/pages/es/guides/environment-variables.md | 2 +- src/pages/es/guides/images.md | 8 ++--- src/pages/es/guides/imports.md | 2 +- src/pages/es/guides/markdown-content.md | 2 +- src/pages/es/guides/publish-to-npm.md | 4 +-- src/pages/es/guides/rss.md | 2 +- src/pages/es/guides/server-side-rendering.md | 2 +- src/pages/es/guides/styling.md | 12 +++---- src/pages/es/guides/troubleshooting.md | 6 ++-- src/pages/es/integrations/integrations.md | 10 +++--- src/pages/es/reference/adapter-reference.md | 2 +- src/pages/es/reference/api-reference.md | 8 ++--- .../es/reference/configuration-reference.md | 8 ++--- .../es/reference/directives-reference.md | 12 +++---- .../es/reference/integrations-reference.md | 6 ++-- 24 files changed, 87 insertions(+), 87 deletions(-) diff --git a/src/pages/es/core-concepts/astro-components.md b/src/pages/es/core-concepts/astro-components.md index 3aef37caa807e..61dc7bc2dec6b 100644 --- a/src/pages/es/core-concepts/astro-components.md +++ b/src/pages/es/core-concepts/astro-components.md @@ -13,7 +13,7 @@ La sintaxis del componente de Astro es un superconjunto de HTML. Fue [diseñada Los componentes de Astro son extremadamente flexibles. Un componente de Astro puede contener **UI reutilizable**, tal como encabezados o una tarjeta de perfil. También puede contener un fragmento pequeño de HTML, o una colección de etiquetas `` para facilitar nuestro trabajo con el SEO. Los componentes de Astro también pueden contener el layout de una página. -Lo más importante acerca de los componentes de Astro es que **se renderizan a HTML durante la construccion del proyecto**. Aún si posees código JavaScript dentro de tus componentes, este código solo se ejecuta al construir tu projecto, siendo removido de la página final que se enviará al usuario. El resultado es un sitio web más rápido y sin rastros de JavaScript. +Lo más importante acerca de los componentes de Astro es que **se renderizan a HTML durante la compilación del proyecto**. Aún si posees código JavaScript dentro de tus componentes, este código solo se ejecuta al construir tu proyecto, siendo removido de la página final que se enviará al usuario. El resultado es un sitio web más rápido y sin rastros de JavaScript. ## Estructura de un componente @@ -45,7 +45,7 @@ import Button from './Button.astro'; Astro utiliza una valla de código (`---`) para identificar el script del componente Astro. Si has escrito Markdown anteriormente deberías estar familiarizado con un concepto similar llamado *frontmatter*. El script del componente de Astro fue inspirado por este concepto. -Puedes utilizar el script del componente para escribir cualquier código de Javascript que necesites para renderizar el maquetado. Esto puede incluir: +Puedes utilizar el script del componente para escribir cualquier código de JavaScript que necesites para renderizar el maquetado. Esto puede incluir: - Importar otros componentes Astro - Importar componentes de otros frameworks, como React @@ -88,12 +88,12 @@ Sin embargo, la sintaxis de maquetado del componente de Astro también es compat import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx'; const misPokemonesFavoritos = [/* ... */]; --- - + -

Hola mundo!

+

¡Hola mundo!

-

Mi pokemon favorito es: {Astro.props.title}

+

Mi Pokémon favorito es: {Astro.props.title}

@@ -126,7 +126,7 @@ Las variables locales pueden ser agregadas al maquetado usando la sintaxis de ll const nombre = "Astro"; ---
-

Hola {nombre}!

+

¡Hola {nombre}!

``` @@ -179,7 +179,7 @@ import MyComponent from "./MyComponent.astro"; const Element = 'div' const Component = MyComponent; --- -Hola! +¡Hola! ``` @@ -385,7 +385,7 @@ import Wrapper from '../components/Wrapper.astro'; Utiliza un atributo `slot="mi-slot"` en el elemento hijo que quieras enviar junto con su `` emparejado en tu componente. :::tip -Los slots con nombre tambien se pueden pasar a [componentes de framework](/es/core-concepts/framework-components/) en archivos Astro. +Los slots con nombre también se pueden pasar a [componentes de framework](/es/core-concepts/framework-components/) en archivos Astro. ::: ### Contenido alternativo para slots @@ -449,7 +449,7 @@ Por defecto, las etiquetas ` ``` @@ -496,7 +496,7 @@ Astro detecta los módulos JavaScript importados del lado del cliente y luego co ## Componentes HTML -Astro soporta importar y usar archivos `.html` como componentes o colocarlos dentro del subdirectorio `src/pages`. Es posible que quieras usar componentes HTML si estás reusando código de un sitio existente construido sin usar freamwors, o si quieres aseguarte que tu componente no tiene características dinámicas. +Astro soporta importar y usar archivos `.html` como componentes o colocarlos dentro del subdirectorio `src/pages`. Es posible que quieras usar componentes HTML si estás reusando código de un sitio existente construido sin usar frameworks, o si quieres asegurarte que tu componente no tiene características dinámicas. Los componentes HTML solo deben contener HTML válido, y por lo tanto le faltarán características claves de los componentes de Astro. - Ellos no soportan el frontmatter, importaciones del lado del servidor, o expresiones dinámicas. diff --git a/src/pages/es/core-concepts/astro-pages.md b/src/pages/es/core-concepts/astro-pages.md index 2f10037672ab6..dc06ac173b290 100644 --- a/src/pages/es/core-concepts/astro-pages.md +++ b/src/pages/es/core-concepts/astro-pages.md @@ -20,7 +20,7 @@ Astro es compatible con los siguientes tipos de archivos en el directorio `src/p ## Enrutamiento basado en archivos -Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto deacuerdo a su ruta. +Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto de acuerdo a su ruta. Escriba elementos HTML [``](https://developer.mozilla.org/es/docs/Web/HTML/Element/a) estándar en el maquetado del componente para vincular entre páginas. diff --git a/src/pages/es/core-concepts/framework-components.md b/src/pages/es/core-concepts/framework-components.md index 4eab1b77a7948..8052db0ee4df0 100644 --- a/src/pages/es/core-concepts/framework-components.md +++ b/src/pages/es/core-concepts/framework-components.md @@ -36,7 +36,7 @@ export default defineConfig({ }); ``` -⚙️ Consulte la [guía de integraciones](/es/guides/integrations-guide/) para obtener más informarción sobre la instalación y configuración de las integraciones de Astro. +⚙️ Consulte la [guía de integraciones](/es/guides/integrations-guide/) para obtener más información sobre la instalación y configuración de las integraciones de Astro. ⚙️ ¿Quieres ver un ejemplo del framework de tu elección? Visite [astro.new](https://astro.new/) y seleccione la plantilla de framework correspondiente. @@ -66,7 +66,7 @@ Un componente de framework puede hacerse interactivo (hidratado) usando una de l 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. +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 con la directiva especificada. El componente se hidratará cuando su JavaScript haya terminado de importarse. ```astro title="src/pages/interactive-components.astro" /client:\S+/ --- @@ -83,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 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_. +El JavaScript necesario para renderizar el componente del framework (por ejemplo, React, Svelte) se descargará con la página. Las directivas `client:*` solo dictan cuándo se importa el _JavaScript del componente_ y cuándo se hidrata el _componente_. ::: :::note[Accesibilidad] diff --git a/src/pages/es/core-concepts/project-structure.md b/src/pages/es/core-concepts/project-structure.md index 64260a5964ad3..2f1b4fa2b4a49 100644 --- a/src/pages/es/core-concepts/project-structure.md +++ b/src/pages/es/core-concepts/project-structure.md @@ -60,7 +60,7 @@ La carpeta `src/` es donde se encuentra el código fuente de tu proyecto. Esto i Astro procesa, optimiza y empaqueta los archivos en `src/` para crear la website final que será desplegada al navegador. A diferencia de la carpeta estática `public/`, los archivos en `src/` serán procesados por Astro. -Algunos archivos (como los componentes de Astro) no serán enviados al navegador como fueron escritos sino que serán renderizados a HTML estático. Otros archivos (como CSS) serán enviados directamete al navegador pero antes serán optimizados o empaquetados con otros archivos para un mejor rendimiento. +Algunos archivos (como los componentes de Astro) no serán enviados al navegador como fueron escritos, sino que serán renderizados a HTML estático. Otros archivos (como CSS) serán enviados directamente al navegador, pero antes serán optimizados o empaquetados con otros archivos para un mejor rendimiento. ### `src/components` diff --git a/src/pages/es/core-concepts/routing.md b/src/pages/es/core-concepts/routing.md index 4239fdaae8314..cb5d915459578 100644 --- a/src/pages/es/core-concepts/routing.md +++ b/src/pages/es/core-concepts/routing.md @@ -34,7 +34,7 @@ Astro utiliza estándar de HTML [``](https://developer.mozilla.org/es/docs/We ## Rutas dinámicas -Un componente de página Astro también puede especificar parámetros de ruta dinámicos con el nombre del archivo que serviran para generar múltiples rutas que coincidan con un criterio dado. Puedes crear varias páginas relacionadas a la vez, como páginas de autor o una página para cada etiqueta de blog. Los parámetros nombrados también le permiten especificar valores variables para los differentes niveles de rutas y los parámetros comodín permiten crear rutas más flexibles. +Un componente de página Astro también puede especificar parámetros de ruta dinámicos con el nombre del archivo que servirán para generar múltiples rutas que coincidan con un criterio dado. Puedes crear varias páginas relacionadas a la vez, como páginas de autor o una página para cada etiqueta de blog. Los parámetros nombrados también le permiten especificar valores variables para los diferentes niveles de rutas y los parámetros rest permiten crear rutas más flexibles. :::note Las páginas creadas dinámicamente y las rutas se generan en la compilación final. @@ -44,7 +44,7 @@ Las páginas Astro que crean rutas dinámicas deben: 1. usar notación en `[corchete]` para identificar los parámetros dinámicos -2. exportar una función `getStaticPaths()` para especificar exactamente qué rutas serán pre-renderizadas por Astro. +2. exportar una función `getStaticPaths()` para especificar exactamente qué rutas serán prerenderizadas por Astro. ### Parámetros nombrados @@ -102,9 +102,9 @@ const { id, comment } = Astro.params; { "id": "abc", "comment": "a-comment" } ``` -### Parámetros comodín +### Parámetros Rest -Si necesitas más flexibilidad en el enrutamiento de la URL, puedes usar un parámetro comodín en el nombre de archivo `.astro` que servira como ruta universal para rutas de archivos de cualquier profundidad. Para crear una ruta comodín agrega tres puntos (`...`) dentro de los corchetes junto con el nombre de la variable. +Si necesitas más flexibilidad en el enrutamiento de la URL, puedes usar un parámetro rest en el nombre de archivo `.astro` que servirá como ruta universal para rutas de archivos de cualquier profundidad. Para crear una ruta rest agrega tres puntos (`...`) dentro de los corchetes junto con el nombre de la variable. Por ejemplo: @@ -118,12 +118,12 @@ Los parámetros coincidentes se pasarán como un variable (`slug` en el ejemplo) ``` :::tip -Los parámetros comodín son opcionales por defecto, por lo que `pages/post/[...slug].astro` también podría coincidir con `/post/`. +Los parámetros rest son opcionales por defecto, por lo que `pages/post/[...slug].astro` también podría coincidir con `/post/`. ::: -#### Ejemplo: parámetros comodín +#### Ejemplo: parámetros rest -Como un ejemplo real, puedes implementar el visor de archivos de GitHub con los siguientes parámetros nombrados y un comodín: +Como un ejemplo real, puedes implementar el visor de archivos de GitHub con los siguientes parámetros nombrados y rest: ``` /[org]/[repo]/tree/[branch]/[...file] @@ -200,8 +200,8 @@ Es posible que varias rutas coincidan con la misma ruta URL. Por ejemplo, cada u Astro necesita saber qué ruta debe usarse para construir la página. Para ello, los ordena de acuerdo con las siguientes reglas: - Las rutas estáticas sin parámetros de ruta tendrán prioridad sobre todas las demás rutas -- Las rutas dinámicas que usan parámetros nombrados tienen prioridad sobre los parámetros comodín -- Los parámetros comodín tienen la prioridad más baja. +- Las rutas dinámicas que usan parámetros nombrados tienen prioridad sobre los parámetros rest +- Los parámetros rest tienen la prioridad más baja. - Los empates se resuelven alfabéticamente Dado el ejemplo anterior, aquí hay algunos ejemplos de cómo las reglas harán coincidir una URL solicitada con la ruta utilizada al compilar el HTML: diff --git a/src/pages/es/core-concepts/sharing-state.md b/src/pages/es/core-concepts/sharing-state.md index b8f6e82c73207..ec795d126c7eb 100644 --- a/src/pages/es/core-concepts/sharing-state.md +++ b/src/pages/es/core-concepts/sharing-state.md @@ -31,7 +31,7 @@ Aun así, hay otras alternativas a explorar. Entre ellas puedes encontrar: **🙋 ¿Puedo usar Nano Stores en archivos `.astro` u otros archivos del lado del servidor?** Las Nano Stores _pueden_ ser importadas, escritas y leídas desde componentes del lado del servidor, **¡aunque no lo recomendamos!**. Esto se debe a ciertas restricciones: -- Escribir en una store desde un archivo `.astro` o un [componente no-hidratado](/es/core-concepts/framework-components/#hidratando-componentes-interactivos) _no_ afectará el valor recibido por un [componente del lado del cliente](/es/reference/directives-reference/#directivas-del-cliente). +- Escribir en un store desde un archivo `.astro` o un [componente no-hidratado](/es/core-concepts/framework-components/#hidratando-componentes-interactivos) _no_ afectará el valor recibido por un [componente del lado del cliente](/es/reference/directives-reference/#directivas-del-cliente). - No puedes pasar una Nano Store como "prop" a componentes del lado del cliente. - No puedes suscribirte a cambios en la store desde un archivo `.astro`, ya que los componentes de Astro no se re-renderizan. @@ -108,7 +108,7 @@ Digamos que queremos construir una interfaz de ecommerce simple con tres element -_[**Prueba el ejemplo terminado**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) en tu máquina u online vía Stackblitz._ +_[**Prueba el ejemplo terminado**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) en tu máquina u online vía StackBlitz._ Tu archivo base de Astro podría verse así: @@ -144,7 +144,7 @@ import AddToCartForm from '../components/AddToCartForm'; Empecemos por abrir nuestro `CartFlyout` cada vez que cliqueamos en `CartFlyoutToggle`. -Primero, crea un nuevo archivo JS o TS para nuestra store. Usaremos un ["atom"](https://github.com/nanostores/nanostores#atoms) para esto: +Primero, crea un nuevo archivo JS o TS para nuestro store. Usaremos un ["atom"](https://github.com/nanostores/nanostores#atoms) para esto: ```js // src/cartStore.js @@ -153,7 +153,7 @@ import { atom } from 'nanostores'; export const isCartOpen = atom(false); ``` -Ahora, podemos importar esta store dentro de cualquier archivo que necesite leer o escribir en ella. Comenzaremos conectando nuestro `CartFlyoutToggle`: +Ahora, podemos importar este store dentro de cualquier archivo que necesite leer o escribir en ella. Comenzaremos conectando nuestro `CartFlyoutToggle`: @@ -163,9 +163,9 @@ import { useStore } from '@nanostores/preact'; import { isCartOpen } from '../cartStore'; export default function CartButton() { - // lee el valor de la store con el hook `useStore` + // lee el valor del store con el hook `useStore` const $isCartOpen = useStore(isCartOpen); - // escribe en la store importada usando `.set` + // escribe en el store importado usando `.set` return ( ) @@ -179,9 +179,9 @@ import { useStore } from '@nanostores/react'; import { isCartOpen } from '../cartStore'; export default function CartButton() { - // lee el valor de la store con el hook `useStore` + // lee el valor del store con el hook `useStore` const $isCartOpen = useStore(isCartOpen); - // escribe en la store importada usando `.set` + // escribe en el store importado usando `.set` return ( ) @@ -195,9 +195,9 @@ import { useStore } from '@nanostores/solid'; import { isCartOpen } from '../cartStore'; export default function CartButton() { - // lee el valor de la store con el hook `useStore` + // lee el valor del store con el hook `useStore` const $isCartOpen = useStore(isCartOpen); - // escribe en la store importada usando `.set` + // escribe en el store importado usando `.set` return ( ) @@ -211,7 +211,7 @@ export default function CartButton() { import { isCartOpen } from '../cartStore'; - + ``` @@ -219,7 +219,7 @@ export default function CartButton() { ```vue @@ -227,7 +227,7 @@ export default function CartButton() { import { isCartOpen } from '../cartStore'; import { useStore } from '@nanostores/vue'; - // lee el valor de la store con el hook `useStore` + // lee el valor del store con el hook `useStore` const $isCartOpen = useStore(isCartOpen); ``` @@ -313,7 +313,7 @@ export default function CartFlyout() { Ahora, llevemos la cuenta de los ítems que hay dentro de tu carrito. Para evitar duplicados y llevar el registro de la "cantidad", puedes guardar tu carrito como un objeto con el ID del ítem como key. Usaremos un [Map](https://github.com/nanostores/nanostores#maps) para lograr esto. -Agreguemos una store `cartItem` a nuestro `cartStore.js` anterior. También puedes utilizar un archivo TypeScript si deseas definir el tipo de dato. +Agreguemos un store `cartItem` a nuestro `cartStore.js` anterior. También puedes utilizar un archivo TypeScript si deseas definir el tipo de dato. @@ -413,7 +413,7 @@ export function addCartItem({ id, name, imageSrc }: ItemDisplayInfo) { **🙋 ¿Por qué usamos `.get()` aquí en vez de un helper `useStore`?** -Habrás notado que estamos llamando a `cartItems.get()` aquí, en vez de usar el helper `useStore` de nuestros ejemplos de React / Preact / Solid / Vue. Esto es porque **useStore genera re-renderizados.** En otras palabras, `useStore` debe usarse cada vez que el valor de la store se renderice en la UI. Como estamos leyendo este valor cuando un **evento** es accionado (`addToCart` en este caso), y no estamos intentando renderizar ese valor, en este caso no necesitamos `useStore`. +Habrás notado que estamos llamando a `cartItems.get()` aquí, en vez de usar el helper `useStore` de nuestros ejemplos de React / Preact / Solid / Vue. Esto es porque **useStore genera re-renderizados.** En otras palabras, `useStore` debe usarse cada vez que el valor del store se renderice en la UI. Como estamos leyendo este valor cuando un **evento** es accionado (`addToCart` en este caso), y no estamos intentando renderizar ese valor, en este caso no necesitamos `useStore`. ::: @@ -694,4 +694,4 @@ export default function CartFlyout() { Ya deberías tener un ejemplo de ecommerce totalmente interactivo con el menor paquete de JS de la galaxia 🚀 -¡[**Prueba el ejemplo terminado**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) en tu máquina u online vía Stackblitz! +¡[**Prueba el ejemplo terminado**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) en tu máquina u online vía StackBlitz! diff --git a/src/pages/es/guides/configuring-astro.md b/src/pages/es/guides/configuring-astro.md index 56aac4928ea89..96fc04b7d5d3e 100644 --- a/src/pages/es/guides/configuring-astro.md +++ b/src/pages/es/guides/configuring-astro.md @@ -44,7 +44,7 @@ Astro intentará resolver automáticamente el archivo de configuración llamado astro build ``` -Puedes configurar explícitamente un archivo de configuración usando el indicador CLI `--config`. Este indicador CLI siempre se resuelve en relación a la carpeta de trabajo actual desde donde se ejecutó el comando CLI `astro`. +Puedes configurar explícitamente un archivo de configuración usando el indicador CLI `--config`. Este indicador CLI siempre se resuelve con relación a la carpeta de trabajo actual desde donde se ejecutó el comando CLI `astro`. ```bash # Ejemplo: Lee la configuración de este archivo @@ -53,7 +53,7 @@ astro build --config my-config-file.js ## Configurar Intellisense -Astro recomienda usar `defineConfig()` en el archivo de configuración. `defineConfig()` proporciona IntelliSense automático para tu IDE. Los editores como VSCode pueden leer las definiciones de tipo TypeScript y proporcionar sugerencias de tipos jsdoc automáticas, incluso si tu archivo de configuración no está escrito en TypeScript. +Astro recomienda usar `defineConfig()` en el archivo de configuración. `defineConfig()` proporciona IntelliSense automático para tu IDE. Los editores como VSCode pueden leer las definiciones de tipo TypeScript y proporcionar sugerencias de tipos JSDoc automáticas, incluso si tu archivo de configuración no está escrito en TypeScript. ```js // astro.config.mjs diff --git a/src/pages/es/guides/data-fetching.md b/src/pages/es/guides/data-fetching.md index fb46457a60cbe..1fe6efced4032 100644 --- a/src/pages/es/guides/data-fetching.md +++ b/src/pages/es/guides/data-fetching.md @@ -175,7 +175,7 @@ const data = await response.json(); ```astro title="src/pages/index.astro" --- -// Obtén tu catalogo de rutas desde la API de GraphQL de Crystallize +// Obtén tu catálogo de rutas desde la API de GraphQL de Crystallize import BaseLayout from '../../layouts/BaseLayout.astro'; import { createClient } from '@crystallize/js-api-client'; diff --git a/src/pages/es/guides/deploy.md b/src/pages/es/guides/deploy.md index dc2c49ea9e414..877a63662a042 100644 --- a/src/pages/es/guides/deploy.md +++ b/src/pages/es/guides/deploy.md @@ -47,7 +47,7 @@ Algunos hosts tendrán su propia interfaz de línea de comandos (CLI) que puedes 1. Ejecute la CLI y siga las instrucciones de autorización, configuración, etc. -1. Crea tu proyecto y despliegalo en el host +1. Crea tu proyecto y despliégalo en el host Muchos proveedores de hosting construirán y desplegarán tu proyecto por ti. Por lo general, reconocerán tu proyecto como un sitio de Astro y elegirán los ajustes de configuración apropiados para construir y desplegar como se muestra a continuación. (De lo contrario, estos ajustes se pueden cambiar). diff --git a/src/pages/es/guides/environment-variables.md b/src/pages/es/guides/environment-variables.md index a8fb312eaa7bd..afd6d7fe00d72 100644 --- a/src/pages/es/guides/environment-variables.md +++ b/src/pages/es/guides/environment-variables.md @@ -73,7 +73,7 @@ También puedes agregar variables de entorno a medida que ejecuta su proyecto: :::caution -Las variables configuradas de esta manera estarán disponibles detro de todo tu proyecto, incluso en el cliente. +Las variables configuradas de esta manera estarán disponibles dentro de todo tu proyecto, incluso en el cliente. ::: ## Obteniendo variables de entorno diff --git a/src/pages/es/guides/images.md b/src/pages/es/guides/images.md index d756ca60fe82a..b75077818333d 100644 --- a/src/pages/es/guides/images.md +++ b/src/pages/es/guides/images.md @@ -7,7 +7,7 @@ setup: | import Since from '../../../components/Since.astro'; --- -Astro proporciona varias formas de usar imágenes en tu proyecto, tanto si están almacenadas localmente, enlazadas remotamente o almacenadas en un CMS o una CDN! +¡Astro proporciona varias formas de usar imágenes en tu proyecto, tanto si están almacenadas localmente, enlazadas remotamente o almacenadas en un CMS o una CDN! ### En archivos `.astro` @@ -25,7 +25,7 @@ import rocket from '../images/rocket.svg'; Un cielo nocturno estrellado. -Una cohete en el espacio. +Un cohete en el espacio. ``` ### En archivos `.md` @@ -35,7 +35,7 @@ Puedes usar la sintaxis estándar de Markdown `![]()` o las etiquetas estándar ```md // src/pages/post-1.md -# Mi pagina Markdown +# Mi página Markdown ![Un cielo nocturno estrellado.](/assets/stars.png) @@ -105,7 +105,7 @@ La [carpeta `public/`](/es/core-concepts/project-structure/#public) es para arch ## Integración Image de Astro :::caution -Cuando instales la integración `@astrojs/image`, los archivos `.astro` no podrán usar etiquetas estándar de HTML `` para imágenes locales en la carpeta `src` de tu proyecto . Todas las imágenes locales deben usar los componentes de la integración en lugar de etiquetas estándar de HTML. +Cuando instales la integración `@astrojs/image`, los archivos `.astro` no podrán usar etiquetas estándar de HTML `` para imágenes locales en la carpeta `src` de tu proyecto. Todas las imágenes locales deben usar los componentes de la integración en lugar de etiquetas estándar de HTML. Consulta la [guía de la integración image](/es/guides/integrations-guide/image/) para más detalles sobre esta nueva característica experimental! ::: diff --git a/src/pages/es/guides/imports.md b/src/pages/es/guides/imports.md index 2fb41db8639c1..2e6bf0533eed0 100644 --- a/src/pages/es/guides/imports.md +++ b/src/pages/es/guides/imports.md @@ -5,7 +5,7 @@ description: Aprende a importar diferentes tipos de contenido con Astro. i18nReady: true --- -Astro es compatible con la mayoría de recursos estáticos sin necesidad de configuración. Puedes usar `import` en cualquier lugar de tu proyecto (incluido el script de frontmatter de Astro) y Astro incluirá una copia optimizada de ese recurso estático en la compilación final. `@import` también es compatible dentro del CSS y `