Merge branch 'main' into endpoint-context-api

.github/hacktoberfest.md

@@ -21,4 +21,12 @@ To have your review of a translation PR recognized for Hacktoberfest, open a PR
 These awesome people reviewed i18n PRs for us. Thank you! 💜
 
 - @agustinmulet reviewed #1609
-- 
+- @moustaphadev reviewed #1668
+- @moustaphadev reviewed #1654
+- @AbrahamX3 reviewed #1713
+- @AbrahamX3 reviewed #1747
+- @AbrahamX3 reviewed #1711
+- @AbrahamX3 reviewed #1712
+- @AbrahamX3 reviewed #1706
+- @AbrahamX3 reviewed #1710
+- @AbrahamX3 reviewed #1705

src/i18n/en/nav.ts

@@ -53,6 +53,7 @@ export default [
 		key: 'guides/server-side-rendering',
 	},
 	{ text: 'CSS & Styling', slug: 'guides/styling', key: 'guides/styling' },
+	{ text: 'Authoring Content', slug: 'guides/content', key: 'guides/content' },
 	{ text: 'Images', slug: 'guides/images', key: 'guides/images' },
 	{ text: 'Fonts', slug: 'guides/fonts', key: 'guides/fonts' },
 	{

src/pages/en/concepts/mpa-vs-spa.md

@@ -44,7 +44,7 @@ SPAs can also offer more powerful transitions across page navigation because the
 
 #### Server state management (MPA) vs. client state management (SPA)
 
-SPAs are the superior architecture for websites that deal with complex, multi-page state management (think: Gmail). This is because an SPA runs the entire website as a single JavaScript application, which lets the application maintain state and memory across multiple pages. Interactive, data-driven experiences like inboxes and admin dashboards do well as SPAs because the website itself is inherently "app-like".
+SPAs are the superior architecture for websites that deal with complex, multi-page state management (think: Gmail). This is because a SPA runs the entire website as a single JavaScript application, which lets the application maintain state and memory across multiple pages. Interactive, data-driven experiences like inboxes and admin dashboards do well as SPAs because the website itself is inherently "app-like".
 
 
 ## Are MPAs Better than SPAs?

src/pages/en/core-concepts/framework-components.md

@@ -93,7 +93,7 @@ Most framework-specific accessibility patterns should work the same when these c
 
 ### Available Hydration Directives
 
-There are serveral hydration directives available for UI framework components: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` and `client:only={FRAMEWORK}`.
+There are several hydration directives available for UI framework components: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` and `client:only={FRAMEWORK}`.
 
 📚 See our [directives reference](/en/reference/directives-reference/#client-directives) page for a full description of these hydration directives, and their usage.
 

src/pages/en/getting-started.md

@@ -35,7 +35,7 @@ Check out our detailed [Why Astro](/en/concepts/why-astro/) breakdown to learn m
 Visit [astro.new](https://astro.new/) and choose from a variety of templates to get started. Play around with a full, working version of Astro right in your browser!
 
 <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-    <Button href="https://astro.new/basics?on=stackblitz">Quickstart!</Button>
+    <Button href="https://astro.new/basics?on=stackblitz">Launch basic template</Button>
     <Button variant="outline" href="https://astro.new/">View all templates →</Button>
 </div>
 

src/pages/en/guides/content.md

@@ -0,0 +1,51 @@
+---
+layout: ~/layouts/MainLayout.astro
+title: Authoring Content
+description: "Astro is a perfect choice for your content-focused site: blogs, marketing sites, portfolios, and more! Author your content directly in your project, or connect your CMS of choice."
+i18nReady: false
+---
+Astro is a perfect choice for your content-focused site: blogs, marketing sites, portfolios, and more!
+
+Astro helps you author and present your content. You can write a blog post directly in Astro using Markdown/MDX, or fetch your content from a headless CMS. Astro lets you build a site around your content: you can add a layout to your pages, create an index of posts, and set up an RSS feed to allow readers to subscribe.
+
+## Writing Content
+
+In Astro, you can author your content in a variety of ways: 
+- In Markdown (`.md`) files, designed to make it easy to write rich text content.
+- In MDX (`.mdx`) files, which let you include components and dynamic expressions in your document.
+- Using a third-party content management system (CMS), then pulling that content into a `.astro` page.
+- Other options (less commonly used for content-heavy pages) include [`.astro` files](/en/core-concepts/astro-pages/#astro-pages) and [`.html` files](/en/core-concepts/astro-pages/#html-pages).
+
+### Markdown Authoring
+Markdown is a convenient syntax for writing rich text with basic formatting and common elements like headers, lists, and images. Astro has built-in support for Markdown files in your project.
+
+Create and write a new `.md` file in your code editor or bring in an existing file written in your favorite Markdown editor. Some online Markdown editors like [StackEdit](https://stackedit.io/) and [Dillinger](https://dillinger.io) will even allow you to edit and sync your work with your Astro repository stored on GitHub.
+
+📚 Learn more about [writing Markdown content in Astro](/en/guides/markdown-content/).
+
+### MDX Authoring
+If you add the MDX integration to your project, you can also write content using `.mdx` files, which let you include JavaScript expressions and custom components within your Markdown. This includes both static [Astro components](/en/core-concepts/astro-components/) and interactive [framework components](/en/core-concepts/framework-components/). Add UI elements such as a banner or an interactive carousel right in your text to turn your content into full-fledged web pages.
+
+Write and edit `.mdx` files directly in your code editor, alongside your project files.
+
+📚 Learn more about [using MDX with Astro](/en/guides/integrations-guide/mdx/).
+
+### Headless CMS Authoring
+
+Write blog posts in your existing Content Management System (CMS) such as Storyblok, WordPress, or Contentful. Some CMSes, like Storyblok, provide an official [Astro integration](https://www.storyblok.com/mp/announcing-storyblok-astro). Others expose a JavaScript SDK that Astro pages can use to [fetch your remote content](/en/guides/data-fetching/#fetch-from-a-headless-cms).
+
+## Managing content pages
+
+Markdown and MDX files that live in your `src/pages` directory will automatically generate pages on your site using Astro's [file-based routing](/en/core-concepts/routing/), built at a URL corresponding to the post's file path. 
+
+You can also choose to keep your Markdown and MDX files outside of the `src/pages` directory, and instead [import their content](/en/guides/markdown-content/#importing-markdown) into `.astro` pages.
+
+If you're writing your content in a CMS, you can fetch your posts and use [dynamic routing](/en/core-concepts/routing/#dynamic-routes) to use one `.astro` file to generate a route for each post. In Astro's default static mode, these routes are generated at build time. If you opt-in to [SSR mode](/en/guides/server-side-rendering/), you respond to a request at runtime and fetch the content on demand.
+
+## Showcasing your content
+
+To build common features to organize and display your content, such as a blog archive or a page for each blog tag, Astro allows you to [fetch filenames and metadata](/en/reference/api-reference/#astroglob) from your Markdown and MDX frontmatter and use these to generate page content and routes.
+
+## Community Integrations
+
+In addition to the official [`@astrojs/mdx`](/en/guides/integrations-guide/mdx/) integration, there are several third-party [community integrations](https://astro.build/integrations/css+ui/?q=content) for working with content in your Astro project.

src/pages/en/guides/deploy/deno.md

@@ -158,7 +158,7 @@ If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno
         "start": "astro dev",
         "build": "astro build",
         "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
-        "deploy-deno": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs"
+        "deno-deploy": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs"
       }
     }
     ```

src/pages/en/guides/integrations-guide/image.md

@@ -429,7 +429,7 @@ This can be helpful if you need to add preload links to a page's `<head>`.
 ---
 import { getImage } from '@astrojs/image';
 
-const { src } = await getImage('../assets/hero.png');
+const { src } = await getImage({src: '../assets/hero.png'});
 ---
 
 <html>

src/pages/en/reference/configuration-reference.md

@@ -132,7 +132,7 @@ Your final, deployed URL. Astro uses this full URL to generate your sitemap and
 **Type:** `string`
 </p>
 
-The base path you're deploying to. Astro will match this pathname during development so that your development experience matches your build environment as closely as possible. In the example below, `astro dev` will start your server at `/docs`.
+The base path to deploy to. Astro will build your pages and assets using this path as the root. Currently, this has no effect during development.
 
 ```js
 {

src/pages/es/core-concepts/astro-components.md

@@ -13,7 +13,7 @@ La sintaxis del componente de Astro es un superconjunto de HTML. Fue [diseñada
 
 Los componentes de Astro son extremadamente flexibles. Un componente de Astro puede contener **UI reutilizable**, tal como encabezados o una tarjeta de perfil. También puede contener un fragmento pequeño de HTML, o una colección de etiquetas `<meta>` para facilitar nuestro trabajo con el SEO. Los componentes de Astro también pueden contener el layout de una página.
 
-Lo más importante acerca de los componentes de Astro es que **se renderizan a HTML durante la construccion del proyecto**. Aún si posees código JavaScript dentro de tus componentes, este código solo se ejecuta al construir tu projecto, siendo removido de la página final que se enviará al usuario. El resultado es un sitio web más rápido y sin rastros de JavaScript.
+Lo más importante acerca de los componentes de Astro es que **se renderizan a HTML durante la compilación del proyecto**. Aún si posees código JavaScript dentro de tus componentes, este código solo se ejecuta al construir tu proyecto, siendo removido de la página final que se enviará al usuario. El resultado es un sitio web más rápido y sin rastros de JavaScript.
 
 
 ## Estructura de un componente
@@ -45,7 +45,7 @@ import Button from './Button.astro';
 
 Astro utiliza una valla de código (`---`) para identificar el script del componente Astro. Si has escrito Markdown anteriormente deberías estar familiarizado con un concepto similar llamado *frontmatter*. El script del componente de Astro fue inspirado por este concepto.
 
-Puedes utilizar el script del componente para escribir cualquier código de Javascript que necesites para renderizar el maquetado. Esto puede incluir:
+Puedes utilizar el script del componente para escribir cualquier código de JavaScript que necesites para renderizar el maquetado. Esto puede incluir:
 
 - Importar otros componentes Astro
 - Importar componentes de otros frameworks, como React
@@ -88,12 +88,12 @@ Sin embargo, la sintaxis de maquetado del componente de Astro también es compat
 import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
 const misPokemonesFavoritos = [/* ... */];
 ---
-<!-- Soporta comentarios HTML! -->
+<!-- ¡Soporta comentarios HTML! -->
 
-<h1>Hola mundo!</h1>
+<h1>¡Hola mundo!</h1>
 
 <!-- Utiliza props y otras variables definidas en el script del componente: -->
-<p>Mi pokemon favorito es: {Astro.props.title}</p>
+<p>Mi Pokémon favorito es: {Astro.props.title}</p>
 
 <!-- Incluye otros componentes con la directiva de hidratación `client:`: -->
 <ReactPokemonComponent client:visible />
@@ -126,7 +126,7 @@ Las variables locales pueden ser agregadas al maquetado usando la sintaxis de ll
 const nombre = "Astro";
 ---
 <div>
-  <h1>Hola {nombre}!</h1> <!-- <h1>Hola Astro!</h1> -->
+  <h1>¡Hola {nombre}!</h1> <!-- <h1>¡Hola Astro!</h1> -->
 </div>
 ```
 
@@ -179,7 +179,7 @@ import MyComponent from "./MyComponent.astro";
 const Element = 'div'
 const Component = MyComponent;
 ---
-<Element>Hola!</Element> <!-- es renderizado como <div>Hola!</div> -->
+<Element>¡Hola!</Element> <!-- es renderizado como <div>¡Hola!</div> -->
 <Component /> <!-- es renderizado como <MyComponent /> -->
 ```
 
@@ -385,7 +385,7 @@ import Wrapper from '../components/Wrapper.astro';
 Utiliza un atributo `slot="mi-slot"` en el elemento hijo que quieras enviar junto con su `<slot name="mi-slot" />` emparejado en tu componente.
 
 :::tip
-Los slots con nombre tambien se pueden pasar a [componentes de framework](/es/core-concepts/framework-components/) en archivos Astro.
+Los slots con nombre también se pueden pasar a [componentes de framework](/es/core-concepts/framework-components/) en archivos Astro.
 :::
 
 ### Contenido alternativo para slots
@@ -449,7 +449,7 @@ Por defecto, las etiquetas `<script>` son procesadas por Astro.
 
 ```astro
 <script>
-  // Procesado! Comprimido! Soporta Typescript! Funciona la importación de ESM, aun si son paquetes npm.
+  // ¡Procesado! ¡Comprimido! ¡Soporta Typescript! Funciona la importación de ESM, aun si son paquetes npm.
 </script>
 ```
 
@@ -496,7 +496,7 @@ Astro detecta los módulos JavaScript importados del lado del cliente y luego co
 
 ## Componentes HTML
 
-Astro soporta importar y usar archivos `.html` como componentes o colocarlos dentro del subdirectorio `src/pages`. Es posible que quieras usar componentes HTML si estás reusando código de un sitio existente construido sin usar freamwors, o si quieres aseguarte que tu componente no tiene características dinámicas.
+Astro soporta importar y usar archivos `.html` como componentes o colocarlos dentro del subdirectorio `src/pages`. Es posible que quieras usar componentes HTML si estás reusando código de un sitio existente construido sin usar frameworks, o si quieres asegurarte que tu componente no tiene características dinámicas.
 
 Los componentes HTML solo deben contener HTML válido, y por lo tanto le faltarán características claves de los componentes de Astro.
 - Ellos no soportan el frontmatter, importaciones del lado del servidor, o expresiones dinámicas.

src/pages/es/core-concepts/astro-pages.md

@@ -20,7 +20,7 @@ Astro es compatible con los siguientes tipos de archivos en el directorio `src/p
 
 ## Enrutamiento basado en archivos
 
-Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto deacuerdo a su ruta.
+Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto de acuerdo a su ruta.
 
 Escriba elementos HTML [`<a>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/a) estándar en el maquetado del componente para vincular entre páginas.
 

src/pages/es/core-concepts/framework-components.md

@@ -36,7 +36,7 @@ export default defineConfig({
 });
 ```
 
-⚙️ Consulte la [guía de integraciones](/es/guides/integrations-guide/) para obtener más informarción sobre la instalación y configuración de las integraciones de Astro.
+⚙️ Consulte la [guía de integraciones](/es/guides/integrations-guide/) para obtener más información sobre la instalación y configuración de las integraciones de Astro.
 
 ⚙️ ¿Quieres ver un ejemplo del framework de tu elección? Visite [astro.new](https://astro.new/) y seleccione la plantilla de framework correspondiente.
 
@@ -66,7 +66,7 @@ Un componente de framework puede hacerse interactivo (hidratado) usando una de l
 
 Esta [directiva del cliente](/es/reference/directives-reference/#directivas-del-cliente) describe si su componente se debe renderizar o no al momento de la compilación, además de cuándo el navegador debe cargar el JavaScript del componente.
 
-La mayoría de las directivas renderizarán el componente en el servidor al momento de la compilación. El JavaScript del componente se enviará al cliente de acuerdo a la directiva especificada. El componente se hidratará cuando su JavaScript haya terminado de importarse.
+La mayoría de las directivas renderizarán el componente en el servidor al momento de la compilación. El JavaScript del componente se enviará al cliente de acuerdo con la directiva especificada. El componente se hidratará cuando su JavaScript haya terminado de importarse.
 
 ```astro title="src/pages/interactive-components.astro" /client:\S+/
 ---
@@ -83,7 +83,7 @@ el usuario se desplace hacia abajo y el componente sea visible en la página -->
 ```
 
 :::caution
-Cualquier renderizador de JavaScript necesario para renderizar el componente de framework (por ejemplo, React, Svelte) se descargará con la página. Las directivas `client:*` solo dictan cuándo se importa el _componente de JavaScript_ y cuándo se hidrata el _componente_.
+El JavaScript necesario para renderizar el componente del framework (por ejemplo, React, Svelte) se descargará con la página. Las directivas `client:*` solo dictan cuándo se importa el _JavaScript del componente_ y cuándo se hidrata el _componente_.
 :::
 
 :::note[Accesibilidad]

src/pages/es/core-concepts/project-structure.md

@@ -60,7 +60,7 @@ La carpeta `src/` es donde se encuentra el código fuente de tu proyecto. Esto i
 
 Astro procesa, optimiza y empaqueta los archivos en `src/` para crear la website final que será desplegada al navegador. A diferencia de la carpeta estática `public/`, los archivos en `src/` serán procesados por Astro.
 
-Algunos archivos (como los componentes de Astro) no serán enviados al navegador como fueron escritos sino que serán renderizados a HTML estático. Otros archivos (como CSS) serán enviados directamete al navegador pero antes serán optimizados o empaquetados con otros archivos para un mejor rendimiento.
+Algunos archivos (como los componentes de Astro) no serán enviados al navegador como fueron escritos, sino que serán renderizados a HTML estático. Otros archivos (como CSS) serán enviados directamente al navegador, pero antes serán optimizados o empaquetados con otros archivos para un mejor rendimiento.
 
 ### `src/components`