Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(es): Update project-structure.mdx #10755

Merged
merged 15 commits into from
Feb 6, 2025
Merged
52 changes: 27 additions & 25 deletions src/content/docs/es/basics/project-structure.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Estructura de proyecto
description: Aprende cómo estructurar un proyecto en Astro
description: Una introducción a la estructura básica de archivos de un proyecto de Astro.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';
Expand All @@ -12,7 +12,7 @@ Así es como se organiza un proyecto de Astro y algunos archivos que encontrará

Astro propone una estructura de carpetas opinionada para tu proyecto. La raíz de tu proyecto deberá incluir los siguientes archivos y carpetas:

- `src/*` - El código fuente de tu proyecto (componentes, páginas, estilos, etc.)
- `src/*` - El código fuente de tu proyecto (componentes, páginas, estilos, imágenes, etc.)
- `public/*` - Archivos sin código que no serán procesados (fuentes, íconos, etc.)
- `package.json` - El manifiesto de tu proyecto
- `astro.config.mjs` - El archivo de configuración de Astro (recomendado)
Expand All @@ -26,21 +26,30 @@ Un proyecto de Astro común debería verse así:
- public/
- robots.txt
- favicon.svg
- social-image.png
- my-cv.pdf
- src/
- blog/
- post1.md
- post2.md
- post3.md
- components/
- Header.astro
- Button.jsx
- images/
- image1.jpg
- image2.jpg
- image3.jpg
- layouts/
- PostLayout.astro
- pages/
- posts/
- post1.md
- post2.md
- post3.md
- index.astro
- [post].astro
- about.astro
- **index.astro**
- rss.xml.js
- styles/
- global.css
- content.config.ts
- astro.config.mjs
- package.json
- tsconfig.json
Expand All @@ -56,43 +65,36 @@ La carpeta `src/` es donde se encuentra el código fuente de tu proyecto. Esto i
- [Componentes de frameworks (React, etc.)](/es/guides/framework-components/)
- [Estilos (CSS, Sass)](/es/guides/styling/)
- [Markdown](/es/guides/markdown-content/)
- [Imágenes optimizadas y procesadas por Astro](/es/guides/images/)

Astro procesa, optimiza y empaqueta los archivos en `src/` para crear la página web 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 directamente al navegador, pero antes serán optimizados o empaquetados con otros archivos para un mejor rendimiento.

:::tip
Mientras esta guía describe algunas convenciones populares utilizadas en la comunidad de Astro, los únicos directorios reservados por Astro son `src/pages/` y `src/content/`. Eres libre de cambiar el nombre y reorganizar cualquier otro directorio de la manera que mejor te convenga.
Mientras esta guía describe algunas convenciones populares utilizadas en la comunidad de Astro, el único directorio reservado por Astro es `src/pages/` y `src/content/`. Eres libre de cambiar el nombre y reorganizar cualquier otro directorio de la manera que mejor te convenga.
:::

### `src/assets`
### `src/pages`

Las rutas de páginas se crean para tu sitio añadiendo [tipos de archivos compatibles](/es/basics/astro-pages/#tipos-de-página-compatibles) a este directorio.

El directorio [`src/assets`](/es/guides/images/) es la carpeta recomendada para almacenar activos (p. ej, imágenes) que son procesados por Astro. Esto no es obligatorio y no es una carpeta especial reservada.
:::caution
`src/pages` es un subdirectorio **requerido** en tu proyecto de Astro. Sin él, tu sitio no tendrá páginas ni rutas.
:::

### `src/components`

Los **componentes** son unidades reutilizables de código para tus páginas HTML. Estos componentes pueden ser [componentes de Astro](/es/basics/astro-components/) o [componentes de framework](/es/guides/framework-components/) como React o Vue. Es común agrupar y organizar todos tus componentes en una sola carpeta.

Esta es la convención común en proyectos de Astro, pero no es necesaria. ¡Siéntete libre de organizar tus componentes a gusto!

### `src/content`

El directorio `src/content/` está reservado para almacenar [colecciones de contenido](/es/guides/content-collections/) y un archivo de configuración opcional para las colecciones. No se permiten otros archivos dentro de esta carpeta.

### `src/layouts`

[Plantillas](/es/basics/layouts/) son componentes de Astro que definen la estructura de la UI compartida por una o más [páginas](/es/basics/astro-pages/).

Así como `src/components`, esta carpeta es una convención común pero no es necesaria.

### `src/pages`

[Páginas](/es/basics/astro-pages/) son componentes especiales usados para crear páginas en tu proyecto. Una página puede ser un componente de Astro o un archivo Markdown.

:::caution
¡`src/pages` es una carpeta **necesaria** en tu proyecto de Astro! ¡Sin ella, tu proyecto no tendrá páginas o rutas!
:::

### `src/styles`

Es una convención común para guardar todos tus archivos CSS o Sass en una sola carpeta `src/styles` pero no es necesaria. Siempre y cuando tus estilos se encuentren dentro de la carpeta `src/` y sean importados correctamente, Astro se encargará de optimizarlos.
Expand All @@ -102,7 +104,7 @@ Es una convención común para guardar todos tus archivos CSS o Sass en una sola
La carpeta `public/` es para archivos en tu proyecto que no necesiten ser procesados durante la compilación final de tu proyecto. Los archivos en esta carpeta serán copiados dentro de la carpeta build sin ser modificados y luego tu sitio será construido.


Este comportamiento hace que `public/` sea ideal para activos comunes como imágenes y fuentes, o archivos especiales como `robots.txt` y `manifest.webmanifest`.
Este comportamiento hace que `public/` sea ideal para activos comunes que no requieren ningún procesamiento, como imágenes y fuentes, o archivos especiales como `robots.txt` y `manifest.webmanifest`.

Puedes colocar CSS y JavaScript en tu carpeta `public/`, pero ten en cuenta que esos archivos no se empaquetarán ni optimizarán en la compilación final.

Expand All @@ -112,7 +114,7 @@ Como regla general, cualquier archivo CSS o JavaScript que escribas debe estar e

### `package.json`

Es un archivo utilizado por los gestores de paquetes de JavaScript para administrar tus dependencias. También define los scripts que se usan comúnmente para ejecutar Astro (ex: `npm start`, `npm run build`).
Es un archivo utilizado por los gestores de paquetes de JavaScript para administrar tus dependencias. También define los scripts que se usan comúnmente para ejecutar Astro (ex: `npm run dev`, `npm run build`).

Hay [dos tipos de dependencias](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) que puedes especificar en `package.json`: `dependencies` (dependencias) y `devDependencies` (dependencias de desarrollo). En la mayoría de los casos, estas funcionan de la misma manera: Astro necesita todas las dependencias al hacer *build*, y tu gestor de paquetes instalará ambos. Recomendamos poner todas tus dependencias en `dependencies` para comenzar, y solo usar `devDependencies` si encuentras la necesidad de hacerlo.

Expand All @@ -126,7 +128,7 @@ Astro soporta varios formatos de archivo para su archivo de configuración JavaS

La carga del archivo de configuración de TypeScript se maneja utilizando [`tsm`](https://github.com/lukeed/tsm) y respetará las opciones de `tsconfig` de tu proyecto.

Lee la [Guía de Configuración de Astro](/es/reference/configuration-reference/) para obtener detalles sobre las opciones de configuración.
Lee la [Guía de Configuración de Astro](/es/reference/configuration-reference/) para obtener detalles.

### `tsconfig.json`

Expand Down