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 `