# Technical Documentation: justjavac/wechat-miniapp-radar

> ℹ️ **Provenance:** Hybrid Fusion: `justjavac/wechat-miniapp-radar` + `justjavac/docs` · [CodeWiki Reference](https://codewiki.google/github.com/justjavac/wechat-miniapp-radar) · Recency: Active (< 180 days)

## 1. Project Overview & Quickstart (justjavac/wechat-miniapp-radar)

<h1 align="center">小程序雷达</h1>

AI 驱动的小程序生态选型与风险评估工具，把微信小程序开发资源转化为可筛选、可评估、可对比的技术雷达。

## 线上地址

- 主站：<https://miniapp.jjc.fun>
- Vercel：<https://wechat-miniapp-radar.vercel.app>

## 适合谁

- 正在做微信小程序技术选型的产品、研发和架构团队。
- 需要判断 Taro、uni-app、原生小程序、组件库、云开发和 SDK 风险的团队。
- 需要把历史 awesome 列表转成可筛选、可对比、可验证技术雷达的维护者。

## 可以做什么

- Radar：按推荐状态、风险等级、资源类型、分类和适用场景浏览小程序生态资源。
- Quick Search：快速搜索资源并跳转常用页面。
- Compare：对比 Taro、uni-app、原生小程序等核心方案。
- Advisor：输入选型问题，获得推荐结论、适用/不适用条件、迁移成本、下一步和证据来源。
- Doctor：粘贴小程序项目配置，识别框架依赖、过时方案和迁移风险。
- Weekly：查看小程序生态周报和近期风险信号。

## 数据概览

当前数据集中包含 237 个小程序生态资源。完整资源可在 Radar 页面和导出能力中查看。

| 分类 | 资源数 |
| --- | ---: |
| 官方文档 | 6 |
| 工具 | 44 |
| 插件 | 13 |
| 组件 | 64 |
| 后端SDK组件 | 2 |
| Demo | 106 |

## 核心样例

- [Taro ★30.6k+](https://github.com/NervJS/taro) - 使用 React 的方式开发小程序的框架，同时支持生成多端应用
- [uni-app ★36.1k+](https://github.com/dcloudio/uni-app) - 使用 Vue 语法开发小程序、H5、App的统一框架
- [MPX ★2.1k+](https://github.com/didi/mpx) - 增强型小程序框架，深度性能优化，支持跨小程序平台开发，完全兼容原生小程序组件
- [WePY ★21.7k+](https://github.com/Tencent/wepy) - 支持组件化的小程序开发框架
- [vant-weapp ★12.3k+](https://github.com/youzan/vant-weapp) - 高颜值、好用、易扩展的微信小程序 UI 库
- [tdesign-miniprogram ★1.3k+](https://github.com/Tencent/tdesign-miniprogram) - TDesign 适配微信小程序的组件库
- [CloudBase Framework ★1.1k](https://github.com/Tencent/cloudbase-framework) - 腾讯云开发开源一键部署工具，支持部署小程序及云开发应用
- [小程序开发教程](https://developers.weixin.qq.com/miniprogram/dev/framework/) - 微信小程序官方开发教程与基础框架说明

## 使用入口

- Radar 页面：`/radar`
- Compare 页面：`/compare`
- Advisor 页面：`/advisor`
- Doctor 页面：`/doctor`
- Weekly 页面：`/weekly`

## QQ交流群

- [微信小程序1号群](https://jq.qq.com/?_wv=1027&k=5vqgNd0)：593495800 （已满）
- [微信小程序2号群](https://jq.qq.com/?_wv=1027&k=51d5Ckf)：578063690
- [微信小程序3号群](https://jq.qq.com/?_wv=1027&k=5pNiKHt)：682463867

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

## 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;
---

<!-- 示例：在浏览器中输出 {answer: 6} -->
<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 -g @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);
---
<!-- Envía el resultado a la página -->
<div>{JSON.stringify(data)}</div>
```

## 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 <div>{JSON.stringify(data)}</div>;
};

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://<USERNAME>.github.io
   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

   # si estás desplegando en https://<USERNAME>.github.io/<REPO>
   # git push -f git@github.com:<USERNAME>/<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 -g 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 <div className={styles.error}>Your Error Message</div>;
```

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.
<img src={imgReference} />;
```

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);
---

<span>Versión: {data.version}</span>
```

---

## 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 -g @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',
    description: 'An example blog on Astro',
    customData: `<language>en-us</language>`,
    // The list of items for your RSS feed, sorted.
    items: sortedPosts.map(item => ({
      title: item.title,
      description: item.description,
      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.

---

## File: src/pages/de/guides/deploy/github.md

---
title: Veröffentliche deine Astro-Website bei GitHub Pages
layout: ~/layouts/DeployGuideLayout.astro
i18nReady: true
---

Du kannst [GitHub Pages](https://pages.github.com/) verwenden, um eine Astro-Website direkt von einem Repository auf [GitHub.com](https://github.com/) zu hosten.

## Wie du sie veröffentlichst

Du kannst eine Astro-Website bei GitHub Pages veröffentlichen, indem du [GitHub Actions](https://github.com/features/actions) verwendest und so deine Website automatisch erzeugst und veröffentlichst. Um dies zu erreichen, muss dein Quelltext auf GitHub liegen.

Astro pflegt die offizielle `withastro/action`, welche dein Projekt mit minimaler Konfiguration veröffentlicht. Folge den unten angeführten Anweisungen, um deine Astro-Website bei GitHub Pages zu veröffentlichen, und lies [die README des Pakets](https://github.com/withastro/action), falls du mehr Informationen benötigst.

1. Setze die Optionen [`site`](/de/reference/configuration-reference/#site) und bei Bedarf auch [`base`](/de/reference/configuration-reference/#base) in `astro.config.mjs`.
    - `site` sollte in etwa `https://<DEIN_NUTZERNAME>.github.io` entsprechen
    - `base` sollte ein Schrägstrich gefolgt vom Namen deines Repositories sein, zum Beispiel `/mein-repository`.
    
    :::note
    Falls dein Repository `<DEIN_NUTZERNAME>.github.io` heißt, benötigst du die Option `base` nicht.
    :::

2. Erstelle eine neue Datei `.github/workflows/deploy.yml` in deinem Projekt und füge den folgenden YAML-Code ein:

    ```yaml
    name: Github Pages Astro CI

    on:
      # Löst den Workflow bei jedem Push auf den `main`-Branch aus
      # Verwendest du einen anderen Branch-Namen? Ersetze `main` durch den Namen deines Branches
      push:
        branches: [ main ]
      # Erlaubt es dir, diesen Workflow manuell über den Actions-Tab auf GitHub zu starten
      workflow_dispatch:
      
    # Erlaubt diesem Job das Repository zu klonen und eine Veröffentlichung bei GitHub Pages zu erstellen
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checke dein Repository mit Git aus
            uses: actions/checkout@v2          
          - name: Installiere Abhängigkeiten, erzeuge deine Website und lade sie hoch
            uses: withastro/action@v0

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Bei GitHub Pages veröffentlichen
            id: deployment
            uses: actions/deploy-pages@v1
    ```
    
    :::caution
    Die offizielle Astro-[Action](https://github.com/withastro/action) sucht nach einem Lockfile, um deinen bevorzugten Paketmanager (`npm`, `yarn` oder `pnpm`) zu erkennen. Du solltest die von deinem Paketmanager automatisch generierte Datei `package-lock.json`, `yarn.lock` oder `pnpm-lock.yaml` zu deinem Repository hinzufügen.
    :::

3. Committe die neue Workflow-Datei und pushe sie zu GitHub.

4. Gehe auf GitHub zum Tab **Settings** deines Repositories und suche den Abschnitt **Pages**.  

5. Wähle den `gh-pages`-Branch und das `"/" (root)`-Verzeichnis als **Source** deiner Website aus und drücke **Save**.  
  
Deine Website sollte jetzt veröffentlicht sein! Wenn du Änderungen an deinem Astro-Projekt zu deinem Repository pushst, wird die GitHub Action diese automatisch veröffentlichen.

:::tip[Richte eine benutzerdefinierte Domäne ein]
Optional kannst du eine benutzerdefinierte Domäne einrichten, indem du die folgende Datei `./public/CNAME` zu deinem Projekt hinzufügst:

```js title="public/CNAME"
sub.meine-domain.de
```

Dadurch wird deine Website auf deiner benutzerdefinierten Domäne veröffentlicht, und nicht auf `<DEIN_NUTZERNAME>.github.io`. Vergiss nicht, auch [den DNS-Eintrag deines Domänen-Anbieters anzupassen](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain).   
:::

---

## File: src/pages/de/guides/deploy/gitlab.md

---
title: Veröffentliche deine Astro-Website mit GitLab Pages
layout: ~/layouts/DeployGuideLayout.astro
---

[GitLab Pages](https://pages.gitlab.io/) ermöglichen es dir eine Astro-Website für deine [GitLab](https://about.gitlab.com/) Projekte, Gruppen oder Benutzerkonten bereitzustellen.

:::tip[Auf der Suche nach einem Beispiel?]
Schau dir [das offizielle Astro-Beispiel für GitLab Pages an](https://gitlab.com/pages/astro)!
:::

## So funktioniert die Veröffentlichung

1. Setze den Parameter `.site` in `astro.config.mjs` auf den benötigten Wert.
2. Setze den Parameter `dist` in `astro.config.mjs` auf den Wert `public` und den Parameter `public` in `astro.config.mjs` auf einen neu benannten Ordner, der alles enthält, was sich derzeit in `public` befindet. Der Grund dafür ist, dass `public` ein zweiter Quellordner in Astro ist. Damit du Dateien von `public` veröffentlichen kannst, musst du die entsprechenden Dateien aus einem anderen Ordner holen. Ihre "astro.config.mjs" könnte damit so aussehen:

   ```js
   export default defineConfig({
     sitemap: true,
     site: 'https://astro.build/',
   });
   ```

3. Erstelle eine Datei namens `.gitlab-ci.yml` im Stammverzeichnis deines Projekts mit folgendem Inhalt. Sobald du Änderungen an den Inhalten deiner Seite durchführst wird deine Website damit neu gebaut und veröffentlicht:

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

--- METRICS ---
- Files Extracted: 12
- Estimated Token Budget: ~12237 tokens
- Recency Window: Active (< 180 days)
- Canonical Reference: https://codewiki.google/github.com/justjavac/wechat-miniapp-radar