Recetas de Astro

Consulta ejemplos guiados para añadir funcionalidades a tu proyecto de Astro.

Recetas oficiales

Las recetas oficiales de Astro son guías cortas y enfocadas que llevan al lector a través de completar un ejemplo funcional de una tarea específica. ¡Las recetas son una excelente forma de añadir nuevas funcionalidades o comportamientos a tu proyecto de Astro siguiendo instrucciones paso a paso!

• Instalar un plugin de Vite o Rollup

  Aprende cómo puedes importar datos YAML añadiendo un plugin de Rollup a tu proyecto.

• Analizar el tamaño del bundle

  Aprende cómo analizar el bundle generado por Astro usando `rollup-plugin-visualizer`.

• Construir un componente de imagen personalizado

  Aprende cómo construir un componente de imagen personalizado que soporta media queries usando la función getImage.

• Construir formularios HTML en páginas de Astro

  Aprende cómo construir formularios HTML y manejar envíos en tu frontmatter.

• Construir formularios con API routes

  Aprende cómo usar JavaScript para enviar envíos de formulario a un API Route.

• Usar Bun con Astro

  Aprende cómo usar Bun con tu sitio de Astro.

• Llamar a endpoints desde el servidor

  Aprende cómo llamar a endpoints desde el servidor en Astro.

• Verificar un Captcha

  Aprende cómo crear un API route y hacer fetch desde el cliente.

• Personalizar nombres de archivos en la salida del build

  Aprende cómo cambiar el patrón de nombres por defecto para tus assets compilados como JavaScript, CSS, e imágenes en Astro usando las opciones de Rollup de Vite.

• Construye tu sitio de Astro con Docker

  Aprende cómo construir tu sitio de Astro usando Docker.

• Importar imágenes dinámicamente

  Aprende cómo importar imágenes dinámicamente usando la función import.meta.glob de Vite.

• Añadir iconos a enlaces externos

  Aprende cómo instalar un plugin de rehype para añadir iconos a enlaces externos en tus archivos Markdown.

• Añadir funcionalidades de i18n

  Usa enrutamiento dinámico y content collections para añadir soporte de internacionalización a tu sitio de Astro.

• Crear una app de dev toolbar

  Aprende cómo crear una app de dev toolbar para tu sitio.

• Añadir tiempo de última modificación

  Construye un plugin de remark para añadir el tiempo de última modificación a tu Markdown y MDX.

• Añadir tiempo de lectura

  Construye un plugin de remark para añadir el tiempo de lectura a tus archivos Markdown o MDX.

• Añadir un RSS feed

  Añade un RSS feed a tu sitio de Astro para permitir que los usuarios se suscriban a tu contenido.

• Compartir estado entre componentes de Astro

  Aprende cómo compartir estado entre componentes de Astro con Nano Stores.

• Compartir estado entre islands

  Aprende cómo compartir estado entre componentes de framework con Nano Stores.

• Usar streaming para mejorar el rendimiento de la página

  Aprende cómo usar streaming para mejorar el rendimiento de la página.

• Estilizar Markdown renderizado con Tailwind Typography

  Aprende cómo usar @tailwind/typography para estilizar tu Markdown renderizado.

Recursos de la comunidad

Encuentra más recetas escritas y enviadas por la comunidad en Astro Tips.