Merge branch 'main' into feat/generated-hook

netlify.toml

@@ -13,6 +13,18 @@
     from = "/en/core-concepts/component-hydration"
     to = "/en/concepts/islands"
 
+  [[redirects]]
+    from = "/en/getting-started/quick-start"
+    to = "/en/install/auto"
+
+  [[redirects]]
+    from = "/docs/*"
+    to = "/:splat"
+
+  [[redirects]]
+    from = "/:lang/docs/*"
+    to = "/:lang/:splat"
+
   [[redirects]]
     from = "/:lang/core-concepts/partial-hydration"
     to = "/:lang/concepts/islands"

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

@@ -183,9 +183,11 @@ const Component = MyComponent;
 <Component /> <!-- renders as <MyComponent /> -->
 ```
 
-:::note
-Variable names must be capitalized (`Element`, not `element`), for this to work. Otherwise, Astro will try to render your variable name as a literal HTML tag.
-:::
+When using dynamic tags:
+
+- **Variable names must be capitalized.** For example, use `Element`, not `element`. Otherwise, Astro will try to render your variable name as a literal HTML tag.
+
+- **Hydration directives are not supported.** When using [`client:*` hydration directives](/en/core-concepts/framework-components/#hydrating-interactive-components), Astro needs to know which components to bundle for production, and the dynamic tag pattern prevents this from working.
 
 ### Fragments & Multiple Elements
 

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

@@ -16,7 +16,8 @@ Astro leverages an opinionated folder layout for your project. Every Astro proje
 - `src/*` - Your project source code (components, pages, styles, etc.)
 - `public/*` - Your non-code, unprocessed assets (fonts, icons, etc.)
 - `package.json` - A project manifest.
-- `astro.config.mjs` - An Astro configuration file. (optional)
+- `astro.config.mjs` - An Astro configuration file. (recommended)
+- `tsconfig.json` - A TypeScript configuration file. (recommended)
 
 ### Example Project Tree
 
@@ -42,7 +43,8 @@ A common Astro project directory might look like this:
 │   ├── favicon.svg
 │   └-─ social-image.png
 ├── astro.config.mjs
-└── package.json
+├── package.json
+└── tsconfig.json
 
 ```
 
@@ -53,7 +55,7 @@ The `src/` folder is where most of your project source code lives. This includes
 - [Pages](/en/core-concepts/astro-pages/)
 - [Layouts](/en/core-concepts/layouts/)
 - [Astro components](/en/core-concepts/astro-components/)
-- [Frontend components (React, etc.)](/en/core-concepts/framework-components/)
+- [UI framework components (React, etc.)](/en/core-concepts/framework-components/)
 - [Styles (CSS, Sass)](/en/guides/styling/)
 - [Markdown](/en/guides/markdown-content/)
 
@@ -63,13 +65,13 @@ Some files (like Astro components) are not even sent to the browser as written b
 
 ### `src/components`
 
-**Components** are reusable units of code for your HTML pages. These could be [Astro components](/en/core-concepts/astro-components/), or [Frontend components](/en/core-concepts/framework-components/) like React or Vue.  It is common to group and organize all of your project components together in this folder.
+**Components** are reusable units of code for your HTML pages. These could be [Astro components](/en/core-concepts/astro-components/), or [UI framework components](/en/core-concepts/framework-components/) like React or Vue.  It is common to group and organize all of your project components together in this folder.
 
 This is a common convention in Astro projects, but it is not required. Feel free to organize your components however you like!
 
 ### `src/layouts`
 
-[Layouts](/en/core-concepts/layouts/) are a special kind of component that wrap some content in a larger page layout. These are most often used by [Astro pages](/en/core-concepts/astro-pages/) and [Markdown pages](/en/guides/markdown-content/) to define the layout of the page.
+[Layouts](/en/core-concepts/layouts/) are a special kind of component that wrap some content in a larger page layout. These are most often used by [Astro pages](/en/core-concepts/astro-pages/) and [Markdown or MDX pages](/en/guides/markdown-content/) to define the layout of the page.
 
 Just like `src/components`, this directory is a common convention but not required.
 
@@ -109,4 +111,10 @@ For help creating a new `package.json` file for your project, check out the [man
 
 This file is generated in every starter template and includes configuration options for your Astro project. Here you can specify integrations to use, build options, server options, and more.
 
-See the [Configuration Reference](/en/reference/configuration-reference/#article) for details on setting configurations.
+See the [Configuring Astro Guide](/en/guides/configuring-astro/) for details on setting configurations.
+
+### `tsconfig.json`
+
+This file is generated in every starter template and includes TypeScript configuration options for your Astro project. Some features (like npm package imports) aren’t fully supported in the editor without a `tsconfig.json` file. 
+
+See the [TypeScript Guide](/en/guides/typescript/) for details on setting configurations.

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

@@ -26,8 +26,13 @@ An SSR adapter for use with Cloudflare Pages Functions targets. Write your code
 
 Add the Cloudflare adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
 
-```bash
+```sh
+# Using NPM
 npx astro add cloudflare
+# Using Yarn
+yarn astro add cloudflare
+# Using PNPM
+pnpm astro add cloudflare
 ```
 
 If you prefer to install the adapter manually instead, complete the following two steps:

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

@@ -36,8 +36,13 @@ If you wish to [use server-side rendering (SSR)](/en/guides/server-side-renderin
 
 Add the Deno adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
 
-```bash
+```sh
+# Using NPM
 npx astro add deno
+# Using Yarn
+yarn astro add deno
+# Using PNPM
+pnpm astro add deno
 ```
 
 If you prefer to install the adapter manually instead, complete the following two steps:

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

@@ -214,15 +214,17 @@ A `number` can also be provided, useful when the aspect ratio is calculated at b
 
 </p>
 
-The background color to use for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
+The background color is used to fill the remaining background when using `contain` for the `fit` property.
+
+The background color is also used for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
 doesn't support transparency (i.e. `jpeg`), it's advisable to include a background color, otherwise black will be used
 as default replacement for transparent pixels.
 
 The parameter accepts a `string` as value.
 
 The parameter can be a [named HTML color](https://www.w3schools.com/tags/ref_colornames.asp), a hexadecimal
-color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, or an RGB definition in the form
-`rgb(100,100,100)`.
+color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, an RGB definition in the form
+`rgb(100,100,100)`, an RGBA definition in the form `rgba(100,100,100, 0.5)`.
 
 #### fit
 

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

@@ -36,8 +36,13 @@ If you wish to [use server-side rendering (SSR)](/en/guides/server-side-renderin
 
 Add the Netlify adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
 
-```bash
+```sh
+# Using NPM
 npx astro add netlify
+# Using Yarn
+yarn astro add netlify
+# Using PNPM
+pnpm astro add netlify
 ```
 
 If you prefer to install the adapter manually instead, complete the following two steps:

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

@@ -34,8 +34,13 @@ If you wish to [use server-side rendering (SSR)](/en/guides/server-side-renderin
 
 Add the Node adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
 
-```bash
+```sh
+# Using NPM
 npx astro add node
+# Using Yarn
+yarn astro add node
+# Using PNPM
+pnpm astro add node
 ```
 
 If you prefer to install the adapter manually instead, complete the following two steps:

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

@@ -36,8 +36,13 @@ If you wish to [use server-side rendering (SSR)](/en/guides/server-side-renderin
 
 Add the Vercel adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
 
-```bash
+```sh
+# Using NPM
 npx astro add vercel
+# Using Yarn
+yarn astro add vercel
+# Using PNPM
+pnpm astro add vercel
 ```
 
 If you prefer to install the adapter manually instead, complete the following two steps:

src/pages/en/install/manual.md

@@ -146,7 +146,26 @@ If you want to include [UI framework components](/en/core-concepts/framework-com
 
 📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for more information.
 
-## 6. Next Steps
+## 6. Create `tsconfig.json`
+
+Typescript is configured using `tsconfig.json`. Even if you don’t write TypeScript code, this file is important so that tools like Astro and VS Code know how to understand your project. Some features (like npm package imports) aren’t fully supported in the editor without a `tsconfig.json` file. 
+
+If you do intend to write TypeScript code, using Astro's `strict` or `strictest` template is recommended. You can view and compare the three template configurations at [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).
+
+Create `tsconfig.json` at the root of your project, and copy the code below into it. (You can use `base`, `strict` or `strictest` for your TypeScript template):
+
+```json title="tsconfig.json" "base"
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "types": ["astro/client"]
+  }
+}
+```
+
+📚 Read Astro's [TypeScript setup guide](/en/guides/typescript/#setup) for more information.
+
+## 7. Next Steps
 
 If you have followed the steps above, your project directory should now look like this:
 
@@ -159,7 +178,8 @@ If you have followed the steps above, your project directory should now look lik
 │       └── index.astro
 ├── astro.config.mjs
 ├── package-lock.json (or: yarn.lock, pnpm-lock.yaml, etc.)
-└── package.json
+├── package.json
+└── tsconfig.json
 ```
 
 Congratulations, you're now set up to use Astro!

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

@@ -360,7 +360,7 @@ The `getStaticPaths()` function executes in its own isolated scope once, before
 
 The `params` key of every returned object tells Astro what routes to build. The returned params must map back to the dynamic parameters and rest parameters defined in your component filepath.
 
-`params` are encoded into the URL, so only strings and numbers are supported as values. The value for each `params` object must match the parameters used in the page name.
+`params` are encoded into the URL, so only strings are supported as values. The value for each `params` object must match the parameters used in the page name.
 
 For example, suppose that you have a page at `src/pages/posts/[id].astro`. If you export `getStaticPaths` from this page and return the following for paths:
 
@@ -370,7 +370,7 @@ export async function getStaticPaths() {
   return [
     { params: { id: '1' } },
     { params: { id: '2' } },
-    { params: { id:  3  } }  // Can be a number too!
+    { params: { id: '3' } }
   ];
 }
 

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

@@ -500,6 +500,7 @@ Los componentes HTML solo deben contener HTML válido, y por lo tanto le faltar
 - Ellos no soportan el frontmatter, importaciones del lado del servidor, o expresiones dinámicas.
 - Cualquier etiqueta `<script>` quedan sin agrupar, son tratados como si tuvieran `in:inline`
 - Ellos solo pueden referenciar recursos que están en la carpeta [`public/`](/es/guides/images/#public).
+
 :::note
 Un [elemento `<slot/>`](/es/core-concepts/astro-components/#slots) dentro de un componente HTML trabajar como lo haría en un componente de Astro. En cambio, para poder usar el elemento [Componente Web HTML Slot](https://developer.mozilla.org/es/docs/Web/HTML/Element/slot) añade `is:inline` al elemento `slot`.
 :::