## 1. Project Overview & Quickstart (justjavac/CONTRIBUTING)

# CONTRIBUTING

Open-source repository justjavac/CONTRIBUTING

### Repository Details
- **Repository:** [justjavac/CONTRIBUTING](https://github.com/justjavac/CONTRIBUTING)
- **Primary Language:** Code

*Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.*

## 2. Official Technical Reference & Guides (justjavac/docs)

## File: README.md

# Astro Docs 

To all who come to this happy place: welcome.

This is the repo for [docs.astro.build](https://docs.astro.build/).
This repo contains all the source code we use to build our docs site.

[](https://gitpod.io/#https://github.com/withastro/docs)
[](https://codesandbox.io/p/github/withastro/docs)

## We are Astro

Astro is an all-in-one web framework for building fast, content-focused websites.
We want everyone to be successful building sites, and that means helping everyone understand how Astro works.

## You are Awesome

You can also help make the docs awesome.
Your feedback is welcome.
Your writing, editing, translating, designing, and developing skills are welcome.
You being a part of our community is welcome.

## Chat with Us

You can learn more about Astro, get support, and meet other devs in [our Discord community](https://astro.build/chat).

## Raise an Issue

Is something missing?
Is something confusing?
Is something wrong?

Creating a new Issue puts a problem on our radar!

[See if your issue has already been reported](https://github.com/withastro/docs/issues), and if not, [create a new one](https://github.com/withastro/docs/issues/new/choose).

## Share an Idea

Could something be better?
Want to share an idea with us?

Discussions are threads where you can offer feedback on things that might not exactly be problems to be fixed but are ideas to be explored. 

[Join the Docs Discussions](https://github.com/withastro/docs/discussions) where we brainstorm, ask questions, share hopes and dreams...

## Make a Fix or Contribution

Did you find a typo, a broken link, or another item with an obvious quick fix?

If you can see what the problem is, and you know how to fix it, then you can make a PR (pull request) with the change and contribute to the docs repo yourself.

> Want to make a larger contribution? Please see [CONTRIBUTING.md](CONTRIBUTING.md) first! 

## Translate a Page

Speak another language natively? 

Join our i18n gang on Discord or jump into the PRs to help with reviewing existing draft translations!

Check out the dedicated [i18n guide](TRANSLATING.md) for more details.

## Next Steps

- [Read the docs](https://docs.astro.build/)
- [Raise an issue](https://github.com/withastro/docs/issues/new)
- [Participate in a discussion](https://github.com/withastro/docs/discussions)
- [Join the #docs channel on Discord](https://discord.gg/cZDZU3hJHc)

---

## File: old-translations/zh-CN/guides/debugging.md

---
layout: ~/layouts/MainLayout.astro
title: 调试
---

Astro 提供了几个不同的工具来帮助你更容易和更快地调试代码。

## 使用 `console.log()` 调试

`console.log()` 是一种简单却十分受欢迎的调试 Astro 代码方式。你在哪里写下的 `console.log` 语句将决定你的调试输出在哪里。

### Frontmatter

在 Astro frontmatter 中的 `console.log()` 语句将输出到运行 Astro CLI 的**终端**中。这是因为 Astro 运行在服务器上，而不是运行在浏览器上。

```astro
---
const sum = (a, b) => a + b;

// 示例：在 CLI 终端中输出 "4"
console.log(sum(2, 2));
---
```

### JS Script

在 Astro `<script>` 标签内编写或导入的代码会在直接浏览器运行。`console.log()` 语句或其他调试输出都将打印到浏览器的控制台中。

## 调试框架组件

框架组件（如 React 和 Svelte）是特别的。它们默认在服务器端渲染，这意味着 `console.log()` 调试输出将在终端可见。然而，它们也可以在浏览器上进行激活，这可能导致你的调试日志同时也出现在浏览器上。

这对于调试 SSR 输出和浏览器中激活组件间的差异很有用。

## Astro `<Debug />` 组件

为了帮助你调试 Astro 组件，Astro 提供了内置的 [`<Debug />`](/zh-CN/reference/api-reference/#debug-) 组件，任何值都可以直接将渲染传递到组件的 HTML 模板中。这对于在浏览器中进行快速调试非常有用的，使得开发者不必在终端和浏览器之间来回翻转。

```astro
---
import { Debug } from 'astro/components';
const sum = (a, b) => a + b;
---


<Debug answer={sum(2, 4)} />
```

调试组件支持多种语法选项，使调试更加灵活和简明。

```astro
---
import { Debug } from 'astro/components';
const sum = (a, b) => a + b;
const answer = sum(2, 4);
---

<Debug answer={sum(2, 4)} />
<Debug {{answer: sum(2, 4)}} />
<Debug {answer} />
```

---

## File: old-translations/pt-br/guides/layer-zero.md

---
title: Faça Deploy do seu Site Astro na Layer0
layout: ~/layouts/DeployGuideLayout.astro
i18nReady: true
---

Você pode fazer o deploy do seu projeto Astro na [Layer0](https://www.layer0.co/), uma plataforma edge e de distribuição de conteúdo (em Inglês, "content delivery network" ou CDN) para fazer deploy, proteger e acelerar websites e APIs.

:::tip
Confira [o guia para Astro na documentação da Layer0](https://docs.layer0.co/guides/astro)!
:::

## Como fazer o Deploy

1. Adicione Layer0

    ```bash
    # Primeiro, instale globalmente a CLI da Layer0:
    $ npm i @layer0/cli

    # Depois, adicione Layer0 ao seu site Astro:
    $ 0 init
    ```

2. Atualize seu Layer0 Router

    Cole o seguinte código em routes.ts:

    ```js
    // routes.ts
    import { Router } from '@layer0/core';

    export default new Router()
      .get(
        '/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)',
        ({ cache, serveStatic }) => {
          cache({
            browser: {
              // faz cache do js, css e imagens no navegador por uma hora...
              maxAgeSeconds: 60 * 60,
            },
            edge: {
              // ... E na edge por um ano
              maxAgeSeconds: 60 * 60 * 24 * 365,
            },
          });
          serveStatic('dist/:path*/:file.:ext');
        }
      )
      .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
        cache({
          // impede que o navegador faça cache do html...
          browser: false,
          edge: {
            // ...faz cache do html na edge por um ano
            maxAgeSeconds: 60 * 60 * 24 * 365,
          },
        });
        setResponseHeader('content-type', 'text/html; charset=UTF-8');
        serveStatic('dist/:path*');
      });
    ```

    Você pode remover o backend de origem de `layer0.config.js`:

    ```js
    module.exports = {};
    ```

3. Faça o deploy para a Layer0

    Para fazer o deploy do seu site na Layer0, execute:

    ```bash
    # Cria um build em produção do seu site astro
    $ npm run build

    # Faz o deploy do site na Layer0
    $ 0 deploy
    ```

---

## File: old-translations/es/guides/aliases.md

---
layout: ~/layouts/MainLayout.astro
title: Alias
---

Un **alias** es un atajo útil para tus importaciones de JavaScript. Esta puede ser una gran opción si no te gustan las rutas de importación relativas largas con muchos segmentos repetidos `../`. Define un alias para importar cosas directamente desde algún directorio de proyecto de nivel superior, sin importar qué tan profundamente anidado esté ubicado un archivo.

Con un alias, puedes importar desde `"$components/SomeComponent.astro"` en lugar de `" ../../../../../components/SomeComponent.astro "`.

## Agregar un alias personalizado

Para agregar un alias personalizado a tu proyecto, busca el archivo `snowpack.config.mjs` de tu proyecto. Este archivo de configuración contiene las instrucciones y la configuración de la herramienta de compilación interna de Astro [Snowpack](https://www.snowpack.dev/reference/configuration). Si no ves un archivo `snowpack.config.mjs` en el nivel superior de su proyecto (dentro de la misma carpeta que tu `package.json`), puedes crear un archivo en blanco ahora.

Para agregar un nuevo alias de importación, define una nueva entrada `alias`:

```ts
// snowpack.config.mjs
export default {
  alias: {
    // Asignar importaciones de "$components/*" a "src/components/*"
    $components: './src/components',
    // Asignar importaciones de "$/*" a "src/*"
    $: './src',
    // ¡Defina el tuyo!
    '$my-special-alias': './src/some/special/folder',
  },
  // ...
};
```

Una vez que hayas definido tu(s) alia(s) y hayas reiniciado Astro (si es necesario), puedes comenzar a importar desde el alias en cualquier lugar de tu proyecto:

```js
import MyComponent from '$components/MyComponent.astro';
import mySvgUrl from '$/logo.svg';
```

Puede leer más sobre la configuración de `alias` en [la documentación de Snowpack](https://www.snowpack.dev/reference/configuration#alias).

## Consejos y trucos

- Recomendamos comenzar todos los alias con el carácter especial `$`. No es necesario.
- Es común definir un alias `$` de nivel superior para tu directorio `src`. No es necesario.
- Para agregar soporte VSCode para tus alias, también necesitarás definir tus alias en un archivo `tsconfig.json` o `jsconfig.json` a través del valor de configuración `"paths"`. Esto habilitará Intellisense en VSCode y la mayoría de los demás editores de texto.
- ¡No necesitas usar un alias con Astro! Algunas personas prefieren menos magia en su código y no quieren molestarse con pasos adicionales para la compatibilidad con el editor de texto.

---

## File: old-translations/es/guides/data-fetching.md

---
layout: ~/layouts/MainLayout.astro
title: Obtención de datos
---

Los componentes y las páginas de Astro pueden obtener datos remotos para ayudar a generar tus páginas. Astro proporciona dos herramientas diferentes a las páginas para ayudarte a hacer esto: **fetch()** y **await de nivel superior**.

## `fetch()`

Las páginas de Astro tienen acceso a la función global `fetch()` en su script de configuración. `fetch()` es una API de JavaScript nativa ([MDN - fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) que te permite realizar solicitudes HTTP para cosas como API y recursos.

Aunque los scripts de componentes de Astro se ejecutan dentro de Node.js (y no en el navegador), Astro proporciona esta API nativa para que pueda obtener datos en el momento de la creación de la página.

```astro
---
// Movies.astro
const response = await fetch('https://example.com/movies.json');
const data = await response.json();
// Recuerda: las secuencias de comandos del componente de Astro se registran en la CLI
console.log(data);
---

{JSON.stringify(data)}
```

## await de nivel superior

`await` es otra característica nativa de JavaScript que te permite esperar la respuesta de alguna promesa asincrónica ([MDN - await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro admite "await" en el nivel superior de la secuencia de comandos de tu componente.

**Importante:** Estos aún no están disponibles dentro de los componentes de Astro que no son de página. En su lugar, carga todos tus datos dentro de tus páginas y luego pásalos a tus componentes como propiedades.

## Usando `fetch()` fuera de Componentes de Astro

Si quieres usar `fetch()` en un componente que no sea Astro, usa la biblioteca [`node-fetch`](https://github.com/node-fetch/node-fetch):

```tsx
// Movies.tsx
import fetch from 'node-fetch';
import type { FunctionalComponent } from 'preact';
import { h } from 'preact';

const data = fetch('https://example.com/movies.json').then((response) =>
  response.json()
);

// Los componentes que se procesan en tiempo de compilación también se registran en la CLI.
// Si cargaste este componente con una directiva, se registraría en la consola del navegador.
console.log(data);

const Movies: FunctionalComponent = () => {
  // Envía el resultado a la página
  return {JSON.stringify(data)};
};

export default Movies;
```

Si cargas un componente usando `node-fetch` [interactivamente](/es/core-concepts/component-hydration), con `client:load`, `client:visible`, etc., necesitarás no usar `node-fetch` o cambiar a una librería [isomórfica](https://en.wikipedia.org/wiki/Isomorphic_JavaScript) que se ejecutará tanto en el momento de la compilación como en el cliente, como [`node-fetch` README.md](https://github.com/node-fetch/node-fetch#motivation) recomienda:

> En lugar de implementar XMLHttpRequest en Node.js para ejecutar [Fetch polyfill] específico del navegador (https://github.com/github/fetch), ¿por qué no pasar de http nativo a buscar API directamente? Por lo tanto, node-fetch, código mínimo para una API compatible con window.fetch en tiempo de ejecución de Node.js.
>
> Consulta [isomorphic-unfetch](https://www.npmjs.com/package/isomorphic-unfetch) de Jason Miller o [cross-fetch] de Leonardo Quixada (https://github.com/lquixada/cross-fetch) para uso isomórfico (exporta node-fetch para el lado del servidor, whatwg-fetch para el lado del cliente).

> Citado de https://github.com/node-fetch/node-fetch#motivation

---

## File: old-translations/es/guides/debugging.md

---
layout: ~/layouts/MainLayout.astro
title: Depuración
---

Astro se ejecuta en el servidor y se registra directamente en su terminal, por lo que puede ser difícil depurar valores de Astro. El componente `<Debug>` incorporado de Astro puede ayudarte a inspeccionar los valores dentro de tus archivos en el lado del cliente. Lee más sobre el [componente de depuración incorporado](/es/reference/builtin-components#debug-).

---

## File: old-translations/es/guides/deploy.md

---
layout: ~/layouts/MainLayout.astro
title: Desplegar en la web
---

Las siguientes guías se basan en algunos supuestos compartidos:

- Estás utilizando la ubicación de salida de compilación predeterminada (`dist/`). Esta ubicación [se puede cambiar usando la opción de configuración `dist`](/es/reference/configuration-reference).
- Estás usando npm. Puedes usar comandos equivalentes para ejecutar los scripts si estás usando Yarn u otros administradores de paquetes.
- Astro está instalado como una dependencia de desarrollo local en su proyecto, y has configurado los siguientes scripts npm:

```json
{
  "scripts": {
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}
```

## Construyendo la aplicación

Puedes ejecutar el comando `npm run build` para compilar la aplicación.

```bash
$ npm run build
```

Por defecto, la salida de la compilación se colocará en `dist/`. Puedes desplegar esta carpeta `dist/` en cualquiera de tus plataformas preferidas.

## Páginas de GitHub

> **Advertencia:** De forma predeterminada, las páginas de Github romperán el directorio `_astro/` de su sitio web desplegado. Para deshabilitar este comportamiento y solucionar este problema, asegúrate de usar el script `deploy.sh` de abajo o agrega manualmente un archivo `.nojekyll` vacío a tu directorio `public/`.

1. Establece el `.site` correcto en `astro.config.mjs`.
2. Dentro de tu proyecto, crea `deploy.sh` con el siguiente contenido (sin comentar las líneas apropiadas) y ejecútalo para implementar:

   ```bash
   #!/usr/bin/env sh

   # abortar en errores
   set -e

   # construir
   npm run build

   # navegar hasta el directorio de salida de la compilación
   cd dist

   # añade .nojekyll para omitir el comportamiento predeterminado de las páginas de GitHub
   touch .nojekyll

   # si estás implementando en un dominio personalizado
   # echo 'www.example.com' > CNAME

   git init
   git add -A
   git commit -m 'deploy'

   # si estás desplegando en https://.github.io
   # git push -f git@github.com:/.github.io.git main

   # si estás desplegando en https://.github.io/<REPO>
   # git push -f git@github.com:/<REPO>.git main:gh-pages

   cd -
   ```

   > También puedes ejecutar el script anterior en tu configuración de CI para habilitar la implementación automática en cada envío.

### GitHub Actions

1. En el repositorio del proyecto astro, crea la rama `gh-pages`, luego ve a Configuración > Páginas y establece la rama `gh-pages` para las Páginas de GitHub y establece el directorio en `/` (raíz).
2. Establezca el `.site` correcto en `astro.config.mjs`.
3. Crea el archivo `.github/workflows/main.yml` y agrega el yaml de abajo. Asegúrate de editar con tus propios datos.
4. En GitHub, ve a Configuración > Configuración de desarrollador > Tokens de acceso personal. Genere un nuevo token con permisos de repositorio.
5. En el repositorio del proyecto Astro (no \<SU NOMBRE DE USUARIO\>.github.io) ve a Configuración > Secretos y agregue tu nuevo token de acceso personal con el nombre `API_TOKEN_GITHUB`.
6. Cuando envíes cambios al repositorio del proyecto Astro, CI los desplegará en \<SU NOMBRE DE USUARIO \>.github.io por ti.

```yaml
# Flujo de trabajo para compilar y desplegar en tus páginas de GitHub del repositorio.

# Edita los detalles de tu proyecto aquí.
# ¡Recuerda agregar API_TOKEN_GITHUB en Configuración del repositorio > Secretos también!
env:
  githubEmail: <YOUR GITHUB EMAIL ADDRESS>
  deployToRepo: <NAME OF REPO TO DEPLOY TO (E.G. <YOUR USERNAME>.github.io)>

name: Github Pages Astro CI

on:
  # Activa el flujo de trabajo en eventos de push y pull requests, pero solo para la rama principal
  push:
    branches: [main]
  pull_request:
    branches: [main]

  # Permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones.
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # Registra tu repositorio en $GITHUB_WORKSPACE, para que tu trabajo pueda acceder a él.
      - uses: actions/checkout@v2

      # Instalar dependencias con npm
      - name: Install dependencies
        run: npm ci

      # Construye el proyecto y agrega el archivo .nojekyll para suprimir el comportamiento predeterminado
      - name: Build
        run: |
          npm run build
          touch ./dist/.nojekyll

      # Hace push a tu repositorio de páginas
      - name: Push to pages repo
        uses: cpina/github-action-push-to-another-repository@main
        env:
          API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
        with:
          source-directory: 'dist'
          destination-github-username: ${{ github.actor }}
          destination-repository-name: ${{ env.deployToRepo }}
          user-email: ${{ env.githubEmail }}
          commit-message: Deploy ORIGIN_COMMIT
          target-branch: gh-pages
```

### Travis CI

1. Set the correct `.site` in `astro.config.mjs`.
2. Create a file named `.travis.yml` in the root of your project.
3. Run `npm install` locally and commit the generated lockfile (`package-lock.json`).
4. Use the GitHub Pages deploy provider template, and follow the [Travis CI documentation](https://docs.travis-ci.com/user/deployment/pages/).

   ```yaml
   language: node_js
   node_js:
     - lts/*
   install:
     - npm ci
   script:
     - npm run build
   deploy:
     provider: pages
     skip_cleanup: true
     local_dir: dist
     # A token generated on GitHub allowing Travis to push code on you repository.
     # Set in the Travis settings page of your repository, as a secure variable.
     github_token: $GITHUB_TOKEN
     keep_history: true
     on:
       branch: master
   ```

## GitLab Pages

1. Establece el `.site` correcto en `astro.config.mjs`.
2. Establece `dist` en `astro.config.mjs` a `public` y `public` en `astro.config.mjs` a una carpeta recién nombrada que contiene todo lo que se encuentra actualmente en `public`. El razonamiento es porque `public` es una segunda carpeta de origen en astro, por lo que si desea generar la salida a `public`, deberá extraer los activos públicos de una carpeta diferente.
3. Crea un archivo llamado `.gitlab-ci.yml` en la raíz de su proyecto con el contenido de abajo. Esto creará y desplegará su sitio cada vez que realice cambios en su contenido:

   ```yaml
   image: node:10.22.0
   pages:
     cache:
       paths:
         - node_modules/
     script:
       - npm install
       - npm run build
     artifacts:
       paths:
         - public
     only:
       - master
   ```

## Netlify

**Nota:** Si está utilizando una [imagen de compilación](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) antigua en Netlify, asegúrate de configurar tu versión de Node.js en un archivo [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) (ejemplo:` node v14.17.6`) o una variable de entorno `NODE_VERSION`. Este paso ya no es necesario de forma predeterminada.

Puedes configurar tu implementación de dos maneras, a través del sitio web de Netlify o con un archivo de proyecto local `netlify.toml`.

### `netlify.toml` file

Crea un nuevo archivo `netlify.toml` en el nivel superior del repositorio de su proyecto con la siguiente configuración:

```toml
[build]
  command = "npm run build"
  publish = "dist"
```

Empuja el nuevo archivo `netlify.toml` a tu repositorio de git alojado. Luego, configura un nuevo proyecto en [Netlify](https://netlify.com) para tu repositorio de git. Netlify leerá este archivo y configurará automáticamente su implementación.

### Interfaz de usuario del sitio web de Netlify

Puedes omitir el archivo `netlify.toml` e ir directamente a [Netlify](https://netlify.com) para configurar tu proyecto. Netlify ahora debería detectar los proyectos de Astro automáticamente y pre-rellenar la configuración por ti. Asegúrate de introducir la siguiente configuración antes de presionar el botón "Desplegar":

- **Comando de construcción:** `astro build` o `npm run build`
- **Publicar directorio:** `dist`

## Google Firebase

1. Asegúrate de tener [firebase-tools](https://www.npmjs.com/package/firebase-tools) instalado.

2. Crea `firebase.json` y `.firebaserc` en la raíz de tu proyecto con el siguiente contenido:

   `firebase.json`:

   ```json
   {
     "hosting": {
       "public": "dist",
       "ignore": []
     }
   }
   ```

   `.firebaserc`:

   ```json
   {
     "projects": {
       "default": "<YOUR_FIREBASE_ID>"
     }
   }
   ```

3. Después de ejecutar `npm run build`, despliega usando el comando `firebase deploy`.

## Surge

1. Primero instala [surge](https://www.npmjs.com/package/surge), si aún no lo has hecho.

2. Ejecuta `npm run build`.

3. Despliega en Surge escribiendo `surge dist`.

También puedes implementar en un [dominio personalizado](http://surge.sh/help/adding-a-custom-domain) agregando `surge dist yourdomain.com`.

## Heroku

1. Instalar [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).

2. Crea una cuenta en Heroku [registrándose](https://signup.heroku.com).

3. Ejecuta `heroku login` y completa tus credenciales de Heroku:

   ```bash
   $ heroku login
   ```

4. Crea un archivo llamado `static.json` en la raíz de su proyecto con el siguiente contenido:

   `static.json`:

   ```json
   {
     "root": "./dist"
   }
   ```

   Esta es la configuración de su sitio; leer más en [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static).

5. Configura tu git remoto de Heroku:

   ```bash
   # cambio de versión
   $ git init
   $ git add .
   $ git commit -m "My site ready for deployment."

   # crear una nueva aplicación con un nombre específico
   $ heroku apps:create example

   # establecer buildpack para sitios estáticos
   $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
   ```

6. Implemente su sitio:

   ```bash
   # publicar sitio
   $ git push heroku master

   # abre un navegador para ver la tablero de version de Heroku CI
   $ heroku open
   ```

## Vercel

Puede implementar Astro en [Vercel](http://vercel.com) a través de la CLI o las integraciones de Vercel Git.

### CLI

1. Instale la [Vercel CLI](https://vercel.com/cli) y ejecute `vercel` para implementar.
2. Cuando se le pregunte `¿Desea anular la configuración? [s/N]`, seleccione `S`.
3. Actualice `Directorio de salida` a `./dist`.
4. ¡Su aplicación está implementada! (por ejemplo, [astro.vercel.app](https://astro.vercel.app/))

```jsx
$ npm i vercel
$ vercel
```

### Git

1. Inserte su código en su repositorio git (GitHub, GitLab, BitBucket).
2. [Importe su proyecto](https://vercel.com/new) a Vercel.
3. Actualice `Directorio de salida` a `./dist`.
4. ¡Su aplicación está implementada! (por ejemplo, [astro.vercel.app](https://astro.vercel.app/))

Después de que su proyecto haya sido importado e implementado, todos los envíos subsiguientes a las sucursales generarán [Vista previa de implementaciones] (https://vercel.com/docs/concepts/deployments/environments#preview), y todos los cambios realizados en la rama de producción (comúnmente “principal”) dará como resultado una [Implementación de producción](https://vercel.com/docs/concepts/deployments/environments#production).

Obtenga más información sobre [Git Integration] de Vercel (https://vercel.com/docs/concepts/git).

## Aplicaciones web estáticas de Azure

Puedes implementar tu proyecto Astro con el servicio Microsoft Azure [Static Web Apps](https://aka.ms/staticwebapps). Necesitas:

- Una cuenta de Azure y una clave de suscripción. Aquí puedes crear una [cuenta gratuita de Azure](https://azure.microsoft.com/free).
- El código de tu aplicación enviado a [GitHub](https://github.com).
- La [Extensión SWA](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) en [Visual Studio Code](https://code.visualstudio.com).

Instala la extensión en VS Code y navega hasta la raíz de tu aplicación. Abre la extensión Static Web Apps, inicia sesión en Azure y haz clic en el signo '+' para crear una nueva Static Web App. Se te pedirá que designes qué clave de suscripción utilizar.

Sigue el asistente iniciado por la extensión para darle un nombre a tu aplicación, elige un framework preestablecido y designa la raíz de la aplicación (generalmente `/`) y la ubicación del archivo construido `/dist`. El asistente se ejecutará y creará una acción de GitHub en su repositorio en una carpeta `.github`.

La acción funcionará para desplegar tu aplicación (observa su progreso en la pestaña Acciones de tu repositorio) y, cuando se complete con éxito, podrá ver su aplicación en la dirección proporcionada en la ventana de progreso de la extensión haciendo clic en el botón 'Explorar sitio web' que aparece cuando el la acción de GitHub se ha ejecutado.

## Cloudflare Pages

Puedes implementar tu proyecto Astro en [Cloudflare Pages](https://pages.cloudflare.com). Necesitas:

- Una cuenta de Cloudflare. Si aún no tienes una, puedes crear una cuenta gratuita de Cloudflare durante el proceso.
- El código de tu aplicación enviado a un repositorio de [GitHub](https://github.com).

Luego, configura un nuevo proyecto en Cloudflare Pages.

Utiliza la siguiente configuración de compilación:

- **Framework preestablecido**: `Ninguno` (Al momento de escribir este artículo, Astro no está en la lista).
- **Comando de compilación**: `astro build` o `npm run build`
- **Directorio de salida de compilación**: `dist`
- **Variables de entorno (avanzadas)**: agrega una variable de entorno con el **Nombre de variable** de `NODE_VERSION` y un **Valor** de una [Versión de node que es compatible con Astro](https://docs.astro.build/installation#prerequisites), ya que la versión predeterminada de Cloudflare Pages probablemente no funcione.

Entonces haz clic en el botón **Guardar y Desplegar**.

## Render

Puedes desplegar tu proyecto Astro en [Render](https://render.com/) siguiendo estos pasos:

1. Crea una [cuenta en render.com](https://dashboard.render.com/) e inicia sesión.
2. Haz clic en el botón **Nuevo +** de tu panel y selecciona **Sitio estático**.
3. Conecta tu repositorio de [GitHub](https://github.com/) o [GitLab](https://about.gitlab.com/) o, alternativamente, introduce la URL pública de un repositorio público.
4. Asigna un nombre a tu sitio web, selecciona la rama y especifique el comando de compilación y el directorio de publicación.
   - **comando de compilación**: `npm run build`
   - **directorio de publicación**: `dist`
5. Haz clic en el botón **Crear sitio estático**.

## Créditos

Esta guía se basó originalmente en la guía de implementación estática bien documentada de [Vite](https://vitejs.dev/).

---

## File: old-translations/es/guides/imports.md

---
layout: ~/layouts/MainLayout.astro
title: Importaciones soportadas
---

Astro usa Snowpack como su sistema de construcción interno. Snowpack proporciona a Astro soporte integrado para los siguientes tipos de archivos, sin necesidad de configuración:

- JavaScript (`.js`, `.mjs`)
- TypeScript (`.ts`, `.tsx`)
- JSON (`.json`)
- JSX (`.jsx`, `.tsx`)
- CSS (`.css`)
- CSS Modules (`.module.css`)
- Imágenes y Activos (`.svg`, `.jpg`, `.png`, etc.)
- Componentes de Astro (`.astro`)
- Markdown (`.md`)
- WASM (`.wasm`)

Cualquier archivo en tu directorio `public/` se copia en la compilación final, sin ser tocado por Snowpack o Astro. Lo siguiente se aplica a los archivos en su directorio `src/`, del cual Astro es responsable en última instancia.

## JavaScript y ESM

Astro fue diseñado para la sintaxis nativa de ES Module (ESM) de JavaScript. ESM te permite definir importaciones y exportaciones explícitas que los navegadores y las herramientas de compilación pueden comprender y optimizar mejor. Si estás familiarizado con las palabras clave "import" y "export" en JavaScript, ¡entonces ya conoces ESM!

```js
// Ejemplo ESM - src/user.js
export function getUser() {
  /* ... */
}

// src/index.js
import { getUser } from './user.js';
```

Todos los navegadores ahora son compatibles con ESM, por lo que Astro puede enviar este código directamente al navegador durante el desarrollo.

## TypeScript

Astro incluye soporte integrado para crear archivos TypeScript (`*.ts`) en JavaScript. Los componentes de Astro también son compatibles con TypeScript en la sección de script preliminar.

Ten en cuenta que este soporte integrado es solo de compilación. De forma predeterminada, Astro no verifica el tipo de su código TypeScript.



## JSX

Astro incluye soporte integrado para construir archivos JSX (`*.jsx` & `*.tsx`) a JavaScript.

Si estás usando Preact, Astro detectará la importación de Preact y cambiará para usar la función estilo Preact de JSX `h()`. Todo esto se hace automáticamente.

**Nota: Astro no admite JSX en archivos `.js`/`.ts`.**

## JSON

```js
// Carga el objeto JSON a través de la exportación predeterminada
import json from './data.json';
```

Astro admite la importación de archivos JSON directamente en tu aplicación. Los archivos importados devuelven el objeto JSON completo en la importación predeterminada.

## CSS

```js
// Load and inject 'style.css' onto the page
import './style.css';
```

Astro admite la importación de archivos CSS directamente a tu aplicación. Los estilos importados no exponen exportaciones, pero la importación de uno agregará automáticamente esos estilos a la página. Esto funciona para todos los archivos CSS de forma predeterminada y puede admitir lenguajes de compilación a CSS como Sass y Less a través de complementos.

Si prefieres no escribir CSS, Astro también es compatible con todas las librerías populares de CSS en JS (por ejemplo, styled-components) para el estilo.

## CSS Modules

```js
// 1. Convierte los nombres de clase './style.module.css' en valores únicos con ámbito.
// 2. Devuelve un objeto que asigna los nombres de clase originales a su valor de ámbito final.
import styles from './style.module.css';

// This example uses JSX, but you can use CSS Modules with any framework.
return Your Error Message;
```

Astro admite módulos CSS utilizando la convención de nomenclatura `[nombre].module.css`. Al igual que con cualquier archivo CSS, la importación de uno aplicará automáticamente ese CSS a la página. Sin embargo, los módulos CSS exportan un objeto "estilos" predeterminado especial que asigna sus nombres de clase originales a identificadores únicos.

Los módulos CSS te ayudan a hacer cumplir el alcance y el aislamiento de los componentes en la interfaz con nombres de clase generados de forma única para sus hojas de estilo.

## Otros activos

```jsx
import imgReference from './image.png'; // img === '/src/image.png'
import svgReference from './image.svg'; // svg === '/src/image.svg'
import txtReference from './words.txt'; // txt === '/src/words.txt'

// Este ejemplo usa JSX, pero puedes usar referencias de importación con cualquier marco.
;
```

Todos los demás activos que no se mencionan explícitamente anteriormente se pueden importar a través de "import" de ESM y devolverán una referencia de URL al activo final creado. Esto puede ser útil para hacer referencia a activos que no son de JS por URL, como crear un elemento de imagen con un atributo `src` que apunte a esa imagen.

## WASM

```js
// Carga e inicializa el archivo WASM solicitado
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));
```

Astro admite la carga de archivos WASM directamente en tu aplicación utilizando la API [`WebAssembly`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) del navegador.

## Paquetes npm

```js
// Devuelve los paquetes npm React & React-DOM
import React from 'react';
import ReactDOM from 'react-dom';
```

Astro te permite importar paquetes npm directamente en el navegador. Incluso si un paquete se publicó utilizando un formato heredado, Astro convertirá el paquete a ESM antes de servirlo en el navegador.

Cuando inicies tu servidor de desarrollo o ejecutes una nueva compilación, es posible que vea un mensaje de que Snowpack está "instalando dependencias". Esto significa que Snowpack está convirtiendo sus dependencias para que se ejecuten en el navegador. Esto debe ejecutarse solo una vez, o hasta que cambie su árbol de dependencias agregando o quitando dependencias.

## Incluidos en Node

Recomendamos a los usuarios de Astro que eviten los archivos incorporados en Node.js (`fs`,` path`, etc.) siempre que sea posible. Astro pretende ser compatible con múltiples tiempos de ejecución de JavaScript en el futuro. Esto incluye [Deno](https://deno.land/) y [Cloudflare Workers](https://workers.cloudflare.com/) que no son compatibles con los módulos integrados de Node como `fs`.

Nuestro objetivo es proporcionar alternativas de Astro a las incorporaciones comunes de Node.js. Sin embargo, hoy en día no existen tales alternativas. Entonces, si _realmente_ necesitas usar estos módulos incorporados, no queremos detenerte. Astro soporta incorporaciones de Node.js usando el prefijo `node:` más nuevo de Node. Si deseas leer un archivo, por ejemplo, puedes hacerlo así:

```astro
---
// Ejemplo: importar el "fs/promises" incorporado desde Node.js
import fs from 'node:fs/promises';

const url = new URL('../../package.json', import.meta.url);
const json = await fs.readFile(url, 'utf-8');
const data = JSON.parse(json);
---

Versión: {data.version}
```

---

## File: old-translations/es/guides/layer-zero.md

---
title: Despliega tu proyecto de Astro en Layer0
layout: ~/layouts/DeployGuideLayout.astro
i18nReady: true
---

Puedes desplegar tu proyecto de Astro en [Layer0](https://www.layer0.co/), una plataforma edge y CDN para desplegar, proteger y acelerar sitios web y APIs.

:::tip
¡Revisa [la guía de Astro en la documentación de Layer0](https://docs.layer0.co/guides/astro)!
:::

## Cómo desplegar

1. Añade Layer0

    ```bash
    # Primero, instala de forma global la CLI de Layer0:
    $ npm install @layer0/cli

    # Después, añade Layer0 a tu proyecto de Astro:
    $ 0 init
    ```

2. Actualiza tu Layer0 Router

    Pega el siguiente código dentro de `routes.ts`:

    ```js
    // routes.ts
    import { Router } from '@layer0/core';

    export default new Router()
      .get(
        '/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)',
        ({ cache, serveStatic }) => {
          cache({
            browser: {
              // cachea js, css, e imágenes en el navegador por una hora...
              maxAgeSeconds: 60 * 60,
            },
            edge: {
              // ... y en edge por un año
              maxAgeSeconds: 60 * 60 * 24 * 365,
            },
          });
          serveStatic('dist/:path*/:file.:ext');
        }
      )
      .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
        cache({
          // previene el navegador de cachear el html...
          browser: false,
          edge: {
            // ...cachea el html en edge por un año
            maxAgeSeconds: 60 * 60 * 24 * 365,
          },
        });
        setResponseHeader('content-type', 'text/html; charset=UTF-8');
        serveStatic('dist/:path*');
      });
    ```

    Puedes remover el backend de origen de `layer0.config.js`:

    ```js
    module.exports = {};
    ```

3. Despliega en Layer0

    Para desplegar tu proyecto en Layer0, ejecuta:

    ```bash
    # Crea un build de producción de tu proyecto
    $ npm run build

    # Despliégalo en Layer0
    $ 0 deploy
    ```

---

## File: old-translations/es/guides/rss.md

---
layout: ~/layouts/MainLayout.astro
title: RSS
---

Astro admite la generación de feeds RSS rápida y automática para blogs y otros sitios web de contenido.

Puedes crear una fuente RSS desde cualquier página de Astro que utilice una función `getStaticPaths()` para el enrutamiento. Solo las rutas dinámicas pueden usar `getStaticPaths()` hoy (ver [Enrutamiento](/es/core-concepts/routing)).

> Esperamos que esta función esté disponible para todas las demás páginas antes de la v1.0. Como solución alternativa, puedes convertir una ruta estática en una ruta dinámica que solo genera una página. Consulta [Enrutamiento](/es/core-concepts/routing) para obtener más información sobre las rutas dinámicas.

Crea una fuente RSS llamando a la función `rss()` que se pasa como argumento a `getStaticPaths ()`. Esto creará un archivo `rss.xml` en tu compilación final basado en los datos que proporciones usando el array `items`.

```js
// Example: /src/pages/posts/[...page].astro
// Coloca esta función dentro de la secuencia de comandos del componente de Astro.
export async function getStaticPaths({rss}) {
  const allPosts = Astro.fetchContent('../post/*.md');
  const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
  // Genera un feed RSS de esta colección
  rss({
    // El título, la descripción y los metadatos personalizados de la fuente RSS.
    title: 'Don’s Blog',
    customData: `<language>en-us</language>`,
    // The list of items for your RSS feed, sorted.
    items: sortedPosts.map(item => ({
      title: item.title,
      link: item.url,
      pubDate: item.date,
    })),
    // Opcional: personaliza dónde se escribe el archivo.
    // De lo contrario, el valor predeterminado es "/rss.xml".
    dest: "/my/custom/feed.xml",
  });
  // Devuelve tus rutas
  return [...];
}
```

Nota: Las fuentes RSS **no** se crearán durante el desarrollo. Actualmente, las fuentes RSS solo se generan durante la compilación final.