diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx
index b21112bd09037..c05f039b24d4a 100644
--- a/src/content/docs/en/guides/images.mdx
+++ b/src/content/docs/en/guides/images.mdx
@@ -129,7 +129,7 @@ The format of the `src` value of your image file depends on where your image fil
src="https://example.com/remote-image.jpg"
alt="descriptive text"
width="200"
- height="150"
+ height="150"
/>
```
@@ -143,7 +143,7 @@ If an image is merely decorative (i.e. doesn't contribute to the understanding o
These properties define the dimensions to use for the image.
-When using images in their original aspect ratio, `width` and `height` are optional. These dimensions can be automatically inferred from image files located in `src/` and from remote images with [`inferSize` set to `true`](#infersize).
+When using images in their original aspect ratio, `width` and `height` are optional. These dimensions can be automatically inferred from image files located in `src/`. For remote images, add [the `inferSize` attribute set to `true`](#infersize) on the `` or `` component or use [`inferRemoteSize()` function](#inferremotesize).
However, both of these properties are required for images stored in your `public/` folder as Astro is unable to analyze these files.
@@ -266,6 +266,17 @@ import { Image } from 'astro:assets';
`inferSize` can fetch the dimensions of a [remote image from a domain that has not been authorized](#authorizing-remote-images), however the image itself will remain unprocessed.
+###### inferRemoteSize()
+
+
+
+A function to infer the dimensions of remote images. This can be used as an alternative to passing the `inferSize` property.
+
+```ts
+import { inferRemoteSize } from 'astro:assets';
+const {width, height} = await inferRemoteSize("https://example.com/cat.png");
+```
+
##### Additional properties
In addition to the properties above, the `` component accepts all properties accepted by the HTML `
` tag.
@@ -742,4 +753,4 @@ export default defineConfig({
## Community Integrations
-There are several third-party [community image integrations](https://astro.build/integrations?search=images) for optimizing and working with images in your Astro project.
\ No newline at end of file
+There are several third-party [community image integrations](https://astro.build/integrations?search=images) for optimizing and working with images in your Astro project.
diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx
index 2ea6a8f0555b5..37c79fa3be221 100644
--- a/src/content/docs/en/guides/markdown-content.mdx
+++ b/src/content/docs/en/guides/markdown-content.mdx
@@ -601,6 +601,10 @@ export default defineConfig({
light: 'github-light',
dark: 'github-dark',
},
+ // Disable the default colors
+ // https://shiki.style/guide/dual-themes#without-default-color
+ // (Added in v4.12.0)
+ defaultColor: false,
// Add custom languages
// Note: Shiki has countless langs built-in, including .astro!
// https://shiki.style/languages
@@ -616,7 +620,7 @@ export default defineConfig({
```
:::note[Customizing Shiki themes]
-Astro code blocks are styled using the `.astro-code` class. When following Shiki's documentation (e.g. to [customize light/dark dual or multiple themes](https://shiki.style/guide/dual-themes#query-based-dark-mode)), be sure to replace the `.shiki` class in the examples with `.astro-code`
+Astro code blocks are styled using the `.astro-code` class. When following Shiki's documentation (e.g. to [customize light/dark dual or multiple themes](https://shiki.style/guide/dual-themes#query-based-dark-mode)), be sure to replace the `.shiki` class in the examples with `.astro-code`.
:::
#### Adding your own theme
diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx
index a9b2d01aa4dbb..93963224c7229 100644
--- a/src/content/docs/en/reference/api-reference.mdx
+++ b/src/content/docs/en/reference/api-reference.mdx
@@ -1007,6 +1007,22 @@ Get the URL of the previous page (will be `undefined` if on page 1). If a value
Get the URL of the next page (will be `undefined` if no more pages). If a value is set for [`base`](/en/reference/configuration-reference/#base), prepend the base path to the URL.
+##### `page.url.first`
+
+
+**Type:** `string | undefined`
+
+
+Get the URL of the first page (will be `undefined` if on page 1). If a value is set for [`base`](/en/reference/configuration-reference/#base), prepend the base path to the URL.
+
+##### `page.url.last`
+
+
+**Type:** `string | undefined`
+
+
+Get the URL of the last page (will be `undefined` if no more pages). If a value is set for [`base`](/en/reference/configuration-reference/#base), prepend the base path to the URL.
+
## `import.meta`
All ESM modules include a `import.meta` property. Astro adds `import.meta.env` through [Vite](https://vitejs.dev/guide/env-and-mode.html).
@@ -1699,9 +1715,15 @@ import { Code } from 'astro:components';
will be rendered inline.
+
+
```
-This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, and [transformers](#transformers) by passing them to the `theme`, `lang`, and `transformers` attributes respectively.
+This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, [transformers](#transformers), and [default colors](https://shiki.style/guide/dual-themes#without-default-color) by passing them to the `theme`, `lang`, `transformers`, and `defaultColor` attributes respectively.
+
+:::note
+This component **does not** inherit the settings from your [Shiki configuration](/en/guides/markdown-content/#shiki-configuration). You will have to set them using the component props.
+:::
#### Transformers
diff --git a/src/content/docs/en/reference/cli-reference.mdx b/src/content/docs/en/reference/cli-reference.mdx
index 33d3ba68c802c..83d17170db318 100644
--- a/src/content/docs/en/reference/cli-reference.mdx
+++ b/src/content/docs/en/reference/cli-reference.mdx
@@ -250,6 +250,10 @@ For example, running `astro check --minimumSeverity warning` will show errors an
Specifies not to clear the ouput between checks when in watch mode.
+#### `--noSync`
+
+Specifies not to run `astro sync` before checking the project.
+
Read more about [type checking in Astro](/en/guides/typescript/#type-checking).
## `astro sync`
diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx
index a4a1be3fa0204..644c8363216e2 100644
--- a/src/content/docs/en/reference/configuration-reference.mdx
+++ b/src/content/docs/en/reference/configuration-reference.mdx
@@ -1669,3 +1669,67 @@ export default defineConfig({
})
```
+### experimental.serverIslands
+
+
+
+**Type:** `boolean`
+**Default:** `false`
+
+
+
+Enables experimental Server Island features.
+Server Islands offer the ability to defer a component to render asynchronously after the page has already rendered.
+
+To enable, configure an [on-demand server rendering `output` mode](/en/basics/rendering-modes/#on-demand-rendered) with an adapter, and add the `serverIslands` flag to the `experimental` object:
+
+```js
+{
+ output: 'hybrid', // or 'server'
+ adapter: nodejs({ mode: 'standalone' }),
+ experimental: {
+ serverIslands: true,
+ },
+}
+```
+
+Use the `server:defer` directive on any Astro component to delay initial rendering:
+
+```astro "server:defer"
+---
+import Avatar from '~/components/Avatar.astro';
+---
+
+```
+
+The outer page will be rendered, either at build-time (`hybrid`) or at runtime (`server`) with the island content omitted and a `