Starlight 0.28

¡Starlight v0.28 ya está disponible! La última versión del constructor de sitios de documentación todo-en-uno oficial de Astro acaba de salir. Echemos un vistazo a algunos de los destacados de los lanzamientos recientes de Starlight.

• Localización de siguiente nivel
• Soporte de renderizado bajo demanda
• Pestañas que te recuerdan
• Persistencia del estado de la barra lateral
• Configuración de barra lateral más simple
• Documentación renovada y brillante
• Un preset de Markdoc para los aventureros

Para actualizar un proyecto existente, ejecuta el CLI automatizado @astrojs/upgrade desde tu terminal:

npx @astrojs/upgrade

Localización de siguiente nivel

Starlight ha sido multilingüe desde el primer día y v0.28 lleva esto al siguiente nivel. El sistema de localización integrado de Starlight ahora está impulsado por la biblioteca de primera clase i18next y disponible para usar en cualquier parte de tu sitio.

Usa el nuevo método Astro.locals.t() desde cualquier componente de Astro para renderizar las etiquetas de UI integradas de Starlight o tus propias cadenas personalizadas, incluyendo soporte para interpolación y pluralización:

<p>{Astro.locals.t('404.text')}</p>
<!-- <p>Page not found. Check the URL or try using the search bar.</p> -->

<p>{Astro.locals.t('componentCount', { count: 99 })}</p>
<!-- <p>I have 99 components 🎉</p> -->

Esta actualización convierte a Starlight en una opción sin rival para funciones de internacionalización listas para usar. Comienza con un solo idioma hoy, y construye con la confianza de que estarás listo para traducir tu documentación cuando llegue el momento.

Soporte de renderizado bajo demanda

Desde v0.27, Starlight soporta renderizado dinámico del lado del servidor completamente si lo necesitas. Establece prerender: false en las opciones de Starlight para desactivar la generación estática de tus páginas y cambiar al modo de renderizado bajo demanda de Astro:

starlight({
  title: 'Docs on Demand',
  prerender: false,
}),

Esto desbloquea funciones como autenticación de usuarios y personalización, haciendo a Starlight aún más flexible. Echa un vistazo a nuestro demo de Docs bajo Demanda para ver algunas de las posibilidades en acción. ¡Gracias a Fryuni por implementar esta función!

Pestañas que te recuerdan

El componente <Tabs> de Starlight ahora soporta recordar las preferencias del usuario a través de las navegaciones entre páginas. Esto permite a tus lectores elegir opciones como su gestor de paquetes o sistema operativo preferido una sola vez, y ver esa preferencia reflejada en otras partes de tu documentación. Para habilitar esta función, añade atributos syncKey coincidentes a tus <Tabs>:

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs syncKey="package-manager">
  <TabItem label="npm">npm install @astrojs/starlight</TabItem>
  <TabItem label="pnpm">pnpm add @astrojs/starlight</TabItem>
  <TabItem label="yarn">yarn add @astrojs/starlight</TabItem>
</Tabs>

Persistencia del estado de la barra lateral

Starlight se construye sobre tecnología web probada y testeada, sirviendo HTML simple y estático con JavaScript mínimo para un rendimiento óptimo. Escuchamos los comentarios de los usuarios de que las navegaciones de página completa podían ser disruptivas porque el estado de la barra lateral se perdía en cada carga de página.

Desde v0.26, Starlight persiste y restaura el estado de la barra lateral a través de las navegaciones gracias a un elemento personalizado ligero, ofreciendo una experiencia de navegación más fluida. Esto es una mejora progresiva — si JavaScript no está disponible en el dispositivo del usuario, la barra lateral se renderiza como de costumbre, asegurando una experiencia robusta para todos.

Configuración de barra lateral más simple

En versiones anteriores de Starlight, configurar tu configuración de barra lateral podía ser un poco verboso:

starlight({
  title: 'Old Skool Starlight',
  sidebar: [
    { label: 'Page one', link: '/one' },
    { label: 'Page two', link: '/two' },
    // ...
  ],
}),

Con Starlight v0.25, esto se volvió mucho más simple para enlaces internos. Ahora puedes especificar solo el slug de la página a la que enlazas y Starlight usará automáticamente el título de la página como etiqueta del enlace:

starlight({
  title: 'Cutting Edge Starlight',
  sidebar: [
    'one', 'two', // ...
  ],
}),

Como bonus, con esta sintaxis obtienes verificación de enlaces gratis — ¡no más 404s accidentales! Gracias a Lorenzo por añadir esta función.

Documentación renovada y brillante

¡Y también hemos estado trabajando en nuestra propia documentación! Renovamos por completo la documentación de los componentes integrados de Starlight. Cada componente ahora tiene una página dedicada que incluye ejemplos de uso común y una referencia completa de props.

Visita la nueva guía de "Uso de componentes" para explorar los componentes disponibles.

Por supuesto, estos no serían docs de Astro sin traducciones. ¡Un agradecimiento a @dreyfus92, @jsparkdev, @dragomano, @liruifengv, @zhoushengdao, @Nin3lee, @casungo, @at-the-vr y @thomasbnt por mantener actualizada nuestra documentación en español, coreano, ruso, chino simplificado, italiano, hindi y francés!

Un preset de Markdoc para los aventureros

Los usuarios de Starlight interesados en Markdoc pueden usar el nuevo paquete @astrojs/starlight-markdoc para configurar rápidamente todos los componentes integrados de Starlight para usarlos en archivos Markdoc. Consulta nuestra guía de configuración de Markdoc para más detalles.

¡Prueba Starlight hoy!

Hemos estado emocionados de ver a empresas como Cloudflare, Crowdin, StackBlitz, Sentry, Font Awesome y SST adoptar Starlight al construir su documentación. Únete a ellos y a proyectos de código abierto como FreeCodeCamp, RealWorld Apps, Biome, Jimp, Shepherd, Bloc y Knip — ¡por nombrar solo algunos! — y empieza hoy.

Visita la documentación de Starlight o crea un nuevo sitio directamente desde tu terminal:

npm create astro@latest -- --template starlight