Astro 6.1

Por
Fred Schott

¡Astro 6.1 está aquí! Astro 6.1 te da control global sobre la codificación de imágenes con defaults específicos por codec para Sharp, así puedes configurar los ajustes de JPEG, WebP, AVIF, y PNG una vez en tu configuración de Astro en lugar de en cada imagen.

Explora qué hay de nuevo en este lanzamiento:

Para actualizar un proyecto existente, usa la herramienta CLI automatizada @astrojs/upgrade. Alternativamente, actualiza manualmente ejecutando el comando de actualización para tu gestor de paquetes:

# Recommended:
npx @astrojs/upgrade


# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Defaults de imagen específicos por codec para Sharp

Sharp, el image service integrado de Astro, siempre ha soportado opciones de codificación fine-grained — compresión mozjpeg para JPEG, niveles de effort para WebP y AVIF, niveles de compresión para PNG. Los defaults de Sharp funcionan genial para la mayoría de proyectos, pero si necesitabas ajustes de codificación consistentes en un gran número de imágenes, la única opción era establecerlos en cada <Image /> individualmente.

Astro 6.1 añade image.service.config para establecer defaults específicos por codec una vez en tu configuración de Astro, aplicados a cada imagen procesada durante el build:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  image: {
    service: {
      config: {
        jpeg: { mozjpeg: true },
        webp: { effort: 6, alphaQuality: 80 },
        avif: { effort: 4, chromaSubsampling: '4:2:0' },
        png: { compressionLevel: 9 },
      },
    },
  },
});

El quality por imagen sigue teniendo prioridad cuando se establece, así los defaults globales y los overrides por imagen funcionan juntos sin conflicto. Consulta la referencia de configuración del image service para la lista completa de opciones soportadas.

Configuración avanzada de SmartyPants

Si tu contenido Markdown está dirigido a una audiencia no anglófona, probablemente has notado que SmartyPants — la librería que Astro usa para convertir automáticamente la puntuación en sus equivalentes tipográficos — asume convenciones del inglés. Las comillas francesas («»), las comillas alemanas („"), o el manejo old-school de em-dash no eran posibles sin deshabilitar SmartyPants enteramente y manejarlo tú mismo.

Astro 6.1 abre la configuración completa de SmartyPants, así puedes personalizar cada transformación individualmente:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  markdown: {
    smartypants: {
      dashes: 'oldschool',
      openingQuotes: { double: '«', single: '‹' },
      closingQuotes: { double: '»', single: '›' },
      ellipses: 'unspaced',
      quotes: false,
    },
  },
});

Consulta las opciones de retext-smartypants para la lista completa de ajustes soportados.

Rutas fallback de i18n para integraciones

Astro 6.1 expone fallbackRoutes en cada ruta en el hook astro:routes:resolved, dando a las integraciones acceso a las rutas adicionales que Astro genera para locales que no tienen su propio contenido cuando se usa fallbackType: 'rewrite'.

{
  'astro:routes:resolved': ({ routes }) => {
    for (const route of routes) {
      const fallbacks = route.fallbackRoutes.map((f) => f.pathname);
      console.log(route.pathname, '->', fallbacks);
      // '/about/' -> ['/fr/about/', '/de/about/']
    }
  }
}

Ya hemos puesto esto en uso en @astrojs/sitemap, que ahora incluye automáticamente las páginas fallback de i18n en el sitemap generado. Anteriormente, estas rutas eran invisibles para las integraciones, lo que significaba que las páginas fallback faltaban silenciosamente de tu sitemap.

Aprende más sobre i18n fallback routing en la documentación de Astro.

Otras mejoras

  • View transitions más suaves en móvil — El client router ahora omite las animaciones de view transition cuando el browser ya está proporcionando su propia transición visual, como un gesto de swipe en iOS Safari. Esto elimina el flicker de doble animación que podía ocurrir al navegar hacia atrás y adelante con gestos. (#16025)
  • Aviso de compatibilidad con Vite 8 — Astro ahora avisa al iniciar el dev server cuando se detecta Vite 8 en el nivel superior de tu proyecto. El comando astro add cloudflare también añade automáticamente una entrada "overrides": { "vite": "^7" } a tu package.json, previniendo un crash común al usar paquetes como @tailwindcss/vite. (#16062)
  • Correcciones de hidratación de React — Múltiples correcciones para errores de hidratación de React, incluyendo renderizado condicional de slots y mismatches de experimentalReactChildren. (#15378, #15146)
  • Protección CSRF detrás de reverse proxies — checkOrigin ahora lee correctamente X-Forwarded-Proto durante astro dev cuando está detrás de un reverse proxy que termina TLS, previniendo errores 403 falsos en envíos de formularios. (#16043)

Para una lista completa de correcciones de bugs y mejoras menores, consulta el changelog completo.

Comunidad

El core team de Astro es:

Alexander Niebuhr , Armand Philippot , Chris Swithinbank , Emanuele Stoppa , Erika , Florian Lefebvre , Fred Schott , HiDeoo , Luiz Ferraz , Matt Kane , Matthew Phillips , Reuben Tier , Sarah Rainsberger , and Yan Thomas .

Gracias a todos los demás contribuidores que ayudaron a hacer posible Astro 6.1 con adiciones y mejoras de código y documentación, incluyendo:

0xRozier, Adam Matthiesen, Adam Page, Ahmad Yasser, AitorMT, Alex Dombroski, B Sai Thrishul, bashrocks, Ben Limmer, Bernd Strehl, Burra Karthikeya, Calvin Liang, chaegumi, Chase McCoy, Corbin Crutchley, Daniel Bodky, Daniil Sivak, Dario Piotrowicz, dataCenter430, Dawid Gaweł, Desel72, Em Poulter, Eveeifyeve, farshad, Felix Schneider, Felmon, fkatsuhiro, Giray, Gokhan Kurt, Greg L. Turnquist, hank00111, Haz, Jack Lukic, jahndan, Jason P. Cochrane, Jimmy, Junseong Park, Kedar Vartak, Kevin Z, Koji Wakamiya, Kumar Gautam, Kyle McLean, ld-web, Leif Marcus, Louis Escher, Martin Trapp, Matthew Justice, Natan Sągol, Oliver Speir, oliverlynch, Ossaid, paul valladares, Paweł Grzybek, pierreeurope, Rafael Yasuhide Sudo, Raymond Camden, Sakku 🦉, Sam Richard, Sanjaiyan Parthipan, Sebastian Beltran, Shinya Fujino, Sora, Tay, teinett, Thomas Bonnet, Tom Callahan, Tomasz Cz-Sokołow, Tristan Bessoussa, Vagno, vrabe, Will (liruifengv), xyamzw, Yevhen Amelin, マルコス, and もっちー