diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx index 3fffc314686fe3..acc60bf975943c 100644 --- a/src/content/docs/en/reference/configuration-reference.mdx +++ b/src/content/docs/en/reference/configuration-reference.mdx @@ -197,15 +197,15 @@ Your final, deployed URL. Astro uses this full URL to generate your sitemap and

**Type:** `boolean`
-**Default:** `false` +**Default:** `true`

-This is an option to minify your HTML output and reduce the size of your HTML files. When enabled, Astro removes all whitespace from your HTML, including line breaks, from `.astro` components. This occurs both in development mode and in the final build. -To enable this, set the `compressHTML` flag to `true`. +This is an option to minify your HTML output and reduce the size of your HTML files. By default, Astro removes all whitespace from your HTML, including line breaks, from `.astro` components. This occurs both in development mode and in the final build. +To disable HTML compression, set the `compressHTML` flag to `false`. ```js { - compressHTML: true + compressHTML: false } ``` @@ -229,12 +229,7 @@ In the example below, `astro dev` will start your server at `/docs`. When using this option, all of your static asset imports and URLs should add the base as a prefix. You can access this value via `import.meta.env.BASE_URL`. -By default, the value of `import.meta.env.BASE_URL` includes a trailing slash. If you have the [`trailingSlash`](/en/reference/configuration-reference/#trailingslash) option set to `'never'`, you will need to add it manually in your static asset imports and URLs. - -```astro -About - -``` +The value of `import.meta.env.BASE_URL` respects your `trailingSlash` config and will include a trailing slash if you explicitly include one or if `trailingSlash: "always"` is set. If `trailingSlash: "never"` is set, `BASE_URL` will not include a trailing slash, even if `base` includes one. ### trailingSlash @@ -268,17 +263,19 @@ You can also set this if you prefer to be more strict yourself, so that URLs wit

-**Type:** `'where' | 'class'`
-**Default:** `'where'`
+**Type:** `'where' | 'class' | 'attribute'`
+**Default:** `'attribute'`

Specify the strategy used for scoping styles within Astro components. Choose from: - - `'where'` - Use `:where` selectors, causing no specifity increase. - - `'class'` - Use class-based selectors, causing a +1 specifity increase. + - `'where'` - Use `:where` selectors, causing no specifity increase. + - `'class'` - Use class-based selectors, causing a +1 specifity increase. + - `'attribute'` - Use `data-` attributes, causing no specifity increase. 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. ### adapter @@ -508,7 +505,7 @@ configuration files for redirects and do not need/want HTML based redirects.

**Type:** `'always' | 'auto' | 'never'`
-**Default:** `never`
+**Default:** `auto`

@@ -520,7 +517,7 @@ Control whether project styles are sent to the browser in a separate css file or ```js { build: { - inlineStylesheets: `auto`, + inlineStylesheets: `never`, }, } ``` @@ -531,24 +528,12 @@ Control whether project styles are sent to the browser in a separate css file or

**Type:** `boolean`
-**Default:** `false`
- +**Default:** `false`

-Defines how the SSR code should be bundled when built. +The build config option `build.split` has been replaced by the adapter configuration option [`functionPerRoute`](/en/reference/adapter-reference/#functionperroute). -When `split` is `true`, Astro will emit a file for each page. -Each file emitted will render only one page. The pages will be emitted -inside a `dist/pages/` directory, and the emitted files will keep the same file paths -of the `src/pages` directory. - -```js -{ - build: { - split: true - } -} -``` +Please see your [SSR adapter's documentation](/en/guides/integrations-guide/#official-integrations) for using `functionPerRoute` to define how your SSR code is bundled. ### build.excludeMiddleware @@ -556,21 +541,12 @@ of the `src/pages` directory.

**Type:** `boolean`
-**Default:** `false`
- +**Default:** `false`

-Defines whether or not any SSR middleware code will be bundled when built. +The build config option `build.excludeMiddleware` has been replaced by the adapter configuration option [`edgeMiddleware`](/en/reference/adapter-reference/#edgemiddleware). -When enabled, middleware code is not bundled and imported by all pages during the build. To instead execute and import middleware code manually, set `build.excludeMiddleware: true`: - -```js -{ - build: { - excludeMiddleware: true - } -} -``` +Please see your [SSR adapter's documentation](/en/guides/integrations-guide/#official-integrations) for using `edgeMiddleware` to define whether or not any SSR middleware code will be bundled when built. ## Server Options @@ -588,7 +564,7 @@ To set different configuration based on the command run ("dev", "preview") a fun ```js { // Example: Use the function syntax to customize based on command - server: ({ command }) => ({ port: command === 'dev' ? 3000 : 4000 }) + server: ({ command }) => ({ port: command === 'dev' ? 4321 : 4000 }) } ``` @@ -612,7 +588,7 @@ Set which network IP addresses the server should listen on (i.e. non-localhost I

**Type:** `number`
-**Default:** `3000` +**Default:** `4321`

Set which port the server should listen on. @@ -645,7 +621,7 @@ Set custom HTTP response headers to be sent in `astro dev` and `astro preview`.

**Type:** `Object`
-**Default:** `{entrypoint: 'astro/assets/services/squoosh', config?: {}}`
+**Default:** `{entrypoint: 'astro/assets/services/sharp', config?: {}}`

@@ -884,7 +860,7 @@ Pass options to [remark-rehype](https://github.com/remarkjs/remark-rehype#api). ## Integrations -Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown and Turbolinks). +Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown). Read our [Integrations Guide](/en/guides/integrations-guide/) for help getting started with Astro Integrations. @@ -936,28 +912,6 @@ in the latest version, so that you can continue to upgrade and take advantage of Astro offers experimental flags to give users early access to new features. These flags are not guaranteed to be stable. -### experimental.assets - -

- -**Type:** `boolean`
-**Default:** `false`
- -

- -Enable experimental support for optimizing and resizing images. With this enabled, a new `astro:assets` module will be exposed. - -To enable this feature, set `experimental.assets` to `true` in your Astro config: - -```js -{ - experimental: { - assets: true, - }, -} -``` - - ### experimental.viewTransitions