diff --git a/src/components/LeftSidebar/Sponsors.astro b/src/components/LeftSidebar/Sponsors.astro index 9a70d765c6aa7..e2ceefecbe8a3 100644 --- a/src/components/LeftSidebar/Sponsors.astro +++ b/src/components/LeftSidebar/Sponsors.astro @@ -4,15 +4,9 @@ import UIString from '../UIString.astro';

- -

What is Astro?

Astro is an **all-in-one** **web framework** for building **fast,** **content-focused** websites. @@ -88,7 +93,7 @@ See examples of some of the key concepts and patterns of an Astro site! ## Join our Community -Join us in the [Astro Discord](https://astro.build/chat/) to share with and get help from an active, friendly community! +Join us in the [Astro Discord](https://astro.build/chat) to share with and get help from an active, friendly community! 💬 Say hi in our `#general` channel! diff --git a/src/content/docs/en/guides/integrations-guide/react.mdx b/src/content/docs/en/guides/integrations-guide/react.mdx index 11f07bb6446fc..633f6b417dde0 100644 --- a/src/content/docs/en/guides/integrations-guide/react.mdx +++ b/src/content/docs/en/guides/integrations-guide/react.mdx @@ -134,7 +134,7 @@ import ReactComponent from './ReactComponent'; ``` -If you are using a library that *expects* more than one child element element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker. +If you are using a library that *expects* more than one child element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker. You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility. diff --git a/src/content/docs/en/guides/integrations-guide/vercel.mdx b/src/content/docs/en/guides/integrations-guide/vercel.mdx index bd2b68f2edb7e..2bf9dc3d1e185 100644 --- a/src/content/docs/en/guides/integrations-guide/vercel.mdx +++ b/src/content/docs/en/guides/integrations-guide/vercel.mdx @@ -223,9 +223,11 @@ export default defineConfig({ }); ``` -### Per-page functions +### Function bundling configuration -The Vercel adapter builds to a single function by default. Astro 2.7 added support for splitting your build into separate entry points per page. If you use this configuration the Vercel adapter will generate a separate function for each page. This can help reduce the size of each function so they are only bundling code used on that page. +The Vercel adapter splits builds into a separate function per route by default. This helps reduce the size of each function, as it only bundles code used on that page. + +You can disable this and build to a single function by setting the `functionPerRoute` configuration option to `false`: ```js // astro.config.mjs @@ -235,7 +237,7 @@ import vercel from '@astrojs/vercel/serverless'; export default defineConfig({ output: 'server', adapter: vercel({ - functionPerRoute: true, + functionPerRoute: false, }), }); ``` diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx index 45749caee2244..19bc77b32f38b 100644 --- a/src/content/docs/en/guides/styling.mdx +++ b/src/content/docs/en/guides/styling.mdx @@ -159,8 +159,7 @@ import MyComponent from "../components/MyComponent.astro" This will be red! ``` -This pattern lets you style child components directly. Astro will pass the parent’s scoped class name (e.g. `astro-hhnqfkh6`) through the `class` prop automatically, including the child in its parent’s scope. - +This pattern lets you style child components directly. Astro will pass the parent’s scoped class name (e.g. `astro-hhnqfkh6`) through the `class` prop automatically, including the child in its parent’s scope. Note this pattern only works when your [`scopedStyleStrategy` option](/en/reference/configuration-reference/#scopedstylestrategy) is either `'where'` or `'class'`. :::note[Scoped classes from parent components] Because the `class` prop includes the child in its parent’s scope, it is possible for styles to cascade from parent to child. To avoid this having unintended side effects, ensure you use unique class names in the child component. ::: diff --git a/src/content/docs/en/guides/upgrade-to/v3.mdx b/src/content/docs/en/guides/upgrade-to/v3.mdx index ca1f54a6681c7..fd3fba8213159 100644 --- a/src/content/docs/en/guides/upgrade-to/v3.mdx +++ b/src/content/docs/en/guides/upgrade-to/v3.mdx @@ -182,9 +182,9 @@ If you are continuing to use v1.x APIs, use the new APIs for each feature instea ### Removed: `image` from `astro:content` in content collections schema -In Astro 2.x, the content collections API deprecated an `image` export from `astro:content` for use in your content collections schemas. +In Astro v2.x, the content collections API deprecated an `image` export from `astro:content` for use in your content collections schemas. -Astro 3.0 removes this export entirely. +Astro v3.0 removes this export entirely. #### What should I do? @@ -263,7 +263,7 @@ const { class: className } = Astro.props; In Astro v2.x, camelCase [CSS variables](/en/guides/styling/#css-variables) passed to the `style` attribute were rendered as both camelCase (as written) and kebab-case (kept for backwards compatibility). -Astro 3.0 removes the kebab-case transform for these camelCase CSS variable names, and only the original camelCase CSS variable is rendered. +Astro v3.0 removes the kebab-case transform for these camelCase CSS variable names, and only the original camelCase CSS variable is rendered. ```astro "my-value" --- @@ -380,7 +380,7 @@ export async function GET() { } ``` -If you really need to keep previous format, you can use the `ResponseWithEncoding` object, but will be depricated in the future. +If you really need to keep the previous format, you can use the `ResponseWithEncoding` object but will be deprecated in the future. ```ts title="endpoint.json.ts" del={2} ins={3} export async function GET() { diff --git a/src/content/docs/en/reference/adapter-reference.mdx b/src/content/docs/en/reference/adapter-reference.mdx index 6d5eb92878d6a..980ee5590eff0 100644 --- a/src/content/docs/en/reference/adapter-reference.mdx +++ b/src/content/docs/en/reference/adapter-reference.mdx @@ -358,6 +358,18 @@ export default function createIntegration() { The `entryFile` is of type `URL` and represents the physical path of the file in the file system. This means that the paths change based on the OS where the code runs. ::: +#### Serverless environments + +Setting `functionPerRoute: true` in a serverless environment creates a JavaScript file (handler) for each route. A handler might have different names based on your hosting platform: lambda, function, page, etc. + +Each of these routes is subject to a [cold start](https://azure.microsoft.com/en-us/blog/understanding-serverless-cold-start/) when the handler runs, which may cause some delay. This delay is influenced by different factors. + +With `functionPerRoute: false`, there is only one single handler in charge of rendering all your routes. When this handler is first triggered, you will be subject to a cold start. Then, all other routes should function without delay. However, you will lose the benefit of code splitting that `functionPerRoute: true` provides. + +:::note +It's important that you understand your hosting platform, and how it works, in order to choose the appropriate `functionPerRoute` configuration for your project. +::: + ### `edgeMiddleware` Defines whether any SSR middleware code will be bundled when built. diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx index 1eb46cff3df4b..d32890c906563 100644 --- a/src/content/docs/en/reference/configuration-reference.mdx +++ b/src/content/docs/en/reference/configuration-reference.mdx @@ -275,7 +275,7 @@ Specify the strategy used for scoping styles within Astro components. Choose fro Using `'class'` is helpful when you want to ensure that element selectors within an Astro component override global style defaults (e.g. from a global stylesheet). Using `'where'` gives you more control over specifity, but requires that you use higher-specifity selectors, layers, and other tools to control which selectors are applied. -Using 'attribute' is useful when you are manipulating the `class` attribute of elements and need to avoid conflicts between your own styling logic and Astro's application of styles. +Using `'attribute'` is useful when you are manipulating the `class` attribute of elements and need to avoid conflicts between your own styling logic and Astro's application of styles. ### adapter diff --git a/src/content/docs/en/reference/publish-to-npm.mdx b/src/content/docs/en/reference/publish-to-npm.mdx index 11946d4be493c..c5791f2338543 100644 --- a/src/content/docs/en/reference/publish-to-npm.mdx +++ b/src/content/docs/en/reference/publish-to-npm.mdx @@ -229,7 +229,7 @@ If you are extracting components from an existing project, you can even continue ## Testing your component -Astro does not currently ship a test runner. _(If you are interested in helping out with this, [join us on Discord!](https://astro.build/chat/))_ +Astro does not currently ship a test runner. _(If you are interested in helping out with this, [join us on Discord!](https://astro.build/chat))_ In the meantime, our current recommendation for testing is: @@ -284,4 +284,4 @@ In addition to the required `astro-component` or `withastro` keyword, special ke ## Share -We encourage you to share your work, and we really do love seeing what our talented Astronauts create. Come and share what you create with us in our [Discord](https://astro.build/chat/) or mention [@astrodotbuild](https://twitter.com/astrodotbuild) in a Tweet! +We encourage you to share your work, and we really do love seeing what our talented Astronauts create. Come and share what you create with us in our [Discord](https://astro.build/chat) or mention [@astrodotbuild](https://twitter.com/astrodotbuild) in a Tweet! diff --git a/src/content/docs/en/tutorial/5-astro-api/3.mdx b/src/content/docs/en/tutorial/5-astro-api/3.mdx index 725a13c070958..5752df8e371dd 100644 --- a/src/content/docs/en/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/3.mdx @@ -90,7 +90,8 @@ You have previously displayed items in a list from an array using `map()`. What ```astro title="src/pages/tags/index.astro" --- import BaseLayout from '../../layouts/BaseLayout.astro'; - const tags = ["astro", "successes", "community", "setbacks", "learning in public"]; + const allPosts = await Astro.glob("../posts/*.md"); + const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())]; const pageTitle = "Tag Index"; --- @@ -182,7 +183,6 @@ Instead of creating items in an unordered list this time, create one `

` for e .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { @@ -224,7 +224,6 @@ const pageTitle = "Tag Index"; .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { @@ -295,7 +294,6 @@ Follow the steps below, then check your work by comparing it to the [final code .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { @@ -370,7 +368,6 @@ const { frontmatter } = Astro.props; .tags { display: flex; flex-wrap: wrap; - margin: 0 auto; } .tag { diff --git a/src/content/docs/es/guides/view-transitions.mdx b/src/content/docs/es/guides/view-transitions.mdx index 62bbf41f3eac6..bde73dd8adb22 100644 --- a/src/content/docs/es/guides/view-transitions.mdx +++ b/src/content/docs/es/guides/view-transitions.mdx @@ -1,51 +1,54 @@ --- -title: View Transitions (Experimental) +title: View Transitions description: >- - Cómo habilitar el soporte experimental para las view transitions en tu sitio de Astro + Habilita una navegación fluida entre páginas en Astro con las view transitions. i18nReady: true --- import Since from '~/components/Since.astro' -El soporte para **transiciones de vista opcionales por página** en proyectos Astro puede habilitarse utilizando una bandera experimental. Las transiciones de vista actualizan el contenido de tu página sin recargar la navegación completa normal del navegador, lo que proporciona animaciones fluidas entre páginas. +Astro admite **view transitions opcionales por página** con solo unas pocas líneas de código. Las view transitions actualizan el contenido de tu página sin recargar la navegación completa normal del navegador, lo que proporciona animaciones fluidas entre páginas. -Astro proporciona un componente de enrutamiento `` que se puede agregar al elemento `` de una página para controlar las transiciones de página al navegar a otra página. Proporciona un enrutador del lado del cliente ligero que intercepta la navegación y te permite personalizar la transición entre páginas. Agrega este componente a un componente `.astro` reutilizable, como una cabecera o diseño común, para obtener transiciones de página animadas en todo tu sitio (modo SPA). +Astro ofrece un componente de enrutamiento `` que se puede agregar dentro del `` de una sola página para controlar las transiciones de página mientras navegas hacia otra página. Proporciona un enrutador ligero del lado del cliente que [intercepta la navegación](#proceso-de-navegación-del-lado-del-cliente) y te permite personalizar la transición entre páginas. -El soporte de las transiciones de vistas en Astro está impulsado por la nueva API del navegador [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) y también incluye: +Agrega este componente a un componente `.astro` reutilizable, como un encabezado común o un diseño, para lograr [transiciones animadas de página en todo tu sitio (modo SPA)](#view-transitions-completas-en-todo-el-sitio-modo-spa). -- Algunas [animaciones integradas](#directivas-de-animación-integradas), como `slide` y `fade`. +El soporte de las view transitions en Astro está impulsado por la nueva API del navegador [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) y también incluye: + +- Algunas [opciones de animación integradas](#directivas-de-animación-integradas), como `fade`, `slice` y `none`. - Soporte para animaciones de navegación hacia adelante y hacia atrás. - La capacidad de [personalizar completamente todos los aspectos de la animación de transición](#personalizando-animaciones) y crear tus propias animaciones. -- [Control sobre el comportamiento de respaldo](#control-de-respaldo) para navegadores que aún no admiten las API de Transiciones de Vistas. +- La opción de [impedir la navegación del lado del cliente para enlaces que no sean de página](#previniendo-la-navegación-del-lado-del-cliente). +- [Control sobre el comportamiento de respaldo](#control-de-respaldo) para navegadores que aún no admiten las API de View Transitions. +- Soporte automático para [`prefers-reduced-motion`](#prefers-reduced-motion). -:::caution -Las transiciones de vistas son una función experimental habilitada en Astro 2.9. La API está sujeta a cambios antes de que sea marcada como estable. +:::note +Por defecto, cada página utilizará la navegación normal del navegador, ocupando toda la página. Debes optar por ver las view transitions y puedes usarlas por página o en todo el sitio. ::: -## Habilitando las transiciones de vistas en tu proyecto +## Agregando las View Transitions a una página -Puedes habilitar el soporte para transiciones de página animadas a través de la bandera experimental `viewTransitions` en la configuración de Astro: +Opta por utilizar view transitions en páginas individuales importando y añadiendo el componente de enrutamiento `` dentro del `` en cada página deseada. -```js title="astro.config.mjs" ins={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - viewTransitions: true - } -}); +```astro title="src/pages/index.astro" ins={2,7} +--- +import { ViewTransitions } from 'astro:transitions'; +--- + + + Mi página de inicio + + + +

¡Bienvenido a mi sitio web!

+ + ``` -:::note -Habilitar el soporte para las view transitions no convierte automáticamente todo tu sitio en una SPA (Aplicación de página única). Por defecto, cada página seguirá utilizando la navegación normal del navegador, es decir, recargando la página por completo. - -Para agregar transiciones de página en Astro, utiliza el componente de enrutamiento `` de forma específica para cada página o en todo el sitio. -::: - -## Transiciones completas de vistas en todo el sitio (modo SPA) +## View transitions completas en todo el sitio (modo SPA) Importa y agrega el componente `` a tu componente `` común o de diseño compartido. Astro creará animaciones de página predeterminadas basadas en las similitudes entre la página antigua y la nueva, y también proporcionará un comportamiento de respaldo para los navegadores que no lo admitan. -El ejemplo a continuación muestra cómo agregar transiciones de vista de página en todo el sitio importando y añadiendo este componente a un componente `` de Astro: +El ejemplo a continuación muestra cómo agregar las animaciones de navegación de página predeterminadas de Astro en todo el sitio, incluida la opción de control de respaldo predeterminado para navegadores que no las admiten, importando y agregando este componente a un componente `` de Astro: ```astro title="components/CommonHead.astro" ins={2,12} --- @@ -62,6 +65,10 @@ import { ViewTransitions } from 'astro:transitions'; ``` +¡No es necesario realizar ninguna otra configuración para habilitar la navegación predeterminada del lado del cliente en Astro! + +Utiliza [directivas de transición](#directivas-de-transición) o [anula la navegación predeterminada del lado del cliente](#previniendo-la-navegación-del-lado-del-cliente) en elementos individuales para un control más preciso. + ## Directivas de transición Astro asignará automáticamente a los elementos encontrados tanto en la página antigua como en la nueva un `view-transition-name` compartido y único. Esta pareja de elementos coincidentes es inferida por el tipo de elemento y su ubicación en el DOM. @@ -70,10 +77,10 @@ Utiliza las directivas opcionales `transition:*` en los elementos de la página - `transition:name`: Te permite anular la coincidencia de elementos predeterminada de Astro para la animación del contenido antiguo/nuevo y [especificar un nombre de transición](#nombrando-una-transición) para asociar un par de elementos DOM. - `transition:animate`: Te permite modificar la animación predeterminada de Astro mientras reemplaza el elemento antiguo por el nuevo especificando un tipo de animación. Utiliza las [directivas de animación integradas](#directivas-de-animación-integradas) de Astro o [crea animaciones de transición personalizadas](#personalizando-animaciones). -- `transition: persist`: Te permite anular el reemplazo predeterminado de los elementos antiguos por los nuevos de Astro y, en su lugar, [persistir los componentes y elementos HTML](#mantener-el-estado) al navegar a otra página. +- `transition: persist`: Te permite anular el reemplazo predeterminado de los elementos antiguos por los nuevos de Astro y, en su lugar, [persistir los componentes y elementos HTML](#manteniendo-el-estado) al navegar a otra página. -## Nombrando una transición +### Nombrando una transición En algunos casos, es posible que desees o necesites identificar los elementos de transición de vista correspondientes tú mismo. Puedes especificar un nombre para un par de elementos utilizando la directiva `transition:name`. @@ -85,9 +92,9 @@ En algunos casos, es posible que desees o necesites identificar los elementos de