Skip to content

Commit 44e5e57

Browse files
yanthomasdevyanthomasdev
authored
Merge branch 'main' into flnzba-markdown-content
2 parents 2e4b01a + 9766167 commit 44e5e57

38 files changed

Lines changed: 2141 additions & 2998 deletions

‎src/content/docs/en/guides/images.mdx‎

Lines changed: 94 additions & 353 deletions
Large diffs are not rendered by default.

‎src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ See more about [Styling in Astro](/en/guides/styling/).
320320

321321
### Gatsby Image Plugin to Astro
322322

323-
Convert Gatsby's `<StaticImage />` and `<GatsbyImage />` components to [Astro's own image integration components](/en/guides/images/#image--astroassets), or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
323+
Convert Gatsby's `<StaticImage />` and `<GatsbyImage />` components to [Astro's own image integration components](/en/guides/images/), or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
324324

325325
```astro title="src/pages/index.astro"
326326
---
@@ -331,7 +331,7 @@ import rocket from '../assets/rocket.png';
331331
<img src={rocket.src} alt="A rocketship in space.">
332332
```
333333

334-
Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Gatsby's attributes.
334+
Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/reference/modules/astro-assets/#image-properties) and note that several will differ from Gatsby's attributes.
335335

336336
To continue using [images in Markdown (`.md`) files](/en/guides/images/#images-in-markdown-files) using standard Markdown syntax (`![]()`), you may need to update the link. Using the HTML `<img>` tag directly is not supported in `.md` files for local images, and must be converted to Markdown syntax.
337337

‎src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -422,9 +422,9 @@ See more about [Styling in Astro](/en/guides/styling/).
422422

423423
### Next Image Plugin to Astro
424424

425-
Convert any Next `<Image />` components to [Astro's own image component](/en/guides/images/#image--astroassets) in `.astro` or `.mdx` files, or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
425+
Convert any Next `<Image />` components to [Astro's own image component](/en/guides/images/) in `.astro` or `.mdx` files, or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
426426

427-
Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Next's attributes.
427+
Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/reference/modules/astro-assets/#image-properties) and note that several will differ from Next's attributes.
428428

429429
```astro title="src/pages/index.astro"
430430
---

‎src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -487,9 +487,9 @@ See more about [Styling in Astro](/en/guides/styling/).
487487

488488
### Nuxt Image Plugin to Astro
489489

490-
Convert any [Nuxt `<nuxt-img/>` or `<nuxt-picture/>` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro's own image component](/en/guides/images/#image--astroassets) in `.astro` or `.mdx` files, or to a [standard HTML `<img>`](/en/guides/images/#images-in-ui-framework-components) or `<picture>` tag as appropriate in your Vue components.
490+
Convert any [Nuxt `<nuxt-img/>` or `<nuxt-picture/>` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro's own image component](/en/guides/images/) in `.astro` or `.mdx` files, or to a [standard HTML `<img>`](/en/guides/images/#images-in-ui-framework-components) or `<picture>` tag as appropriate in your Vue components.
491491

492-
Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Nuxt's attributes.
492+
Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/reference/modules/astro-assets/#image-properties) and note that several will differ from Nuxt's attributes.
493493

494494
```astro title="src/pages/index.astro"
495495
---

‎src/content/docs/en/guides/upgrade-to/v3.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -827,7 +827,7 @@ If you were using the image integration in Astro v2.x, complete the following st
827827

828828
Change all `import` statements from `@astrojs/image/components` to `astro:assets` in order to use the new built-in `<Image />` component.
829829

830-
Remove any component attributes that are not [currently supported image asset properties](/en/guides/images/#properties).
830+
Remove any component attributes that are not [currently supported image asset properties](/en/reference/modules/astro-assets/#image-properties).
831831

832832
For example, `aspectRatio` is no longer supported, as it is now automatically inferred from the `width` and `height` attributes.
833833

‎src/content/docs/en/reference/components-reference.mdx‎

Lines changed: 1 addition & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -115,136 +115,7 @@ import { Prism } from '@astrojs/prism';
115115

116116
This component provides language-specific syntax highlighting for code blocks by applying Prism's CSS classes. Note that **you need to provide a Prism CSS stylesheet** (or bring your own) for syntax highlighting to appear! See the [Prism configuration section](/en/guides/markdown-content/#prism-configuration) for more details.
117117

118-
See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`!
119-
120-
## `<Image />`
121-
122-
```astro title="src/components/MyComponent.astro"
123-
---
124-
// import the Image component and the image
125-
import { Image } from 'astro:assets';
126-
import myImage from "../assets/my_image.png"; // Image is 1600x900
127-
---
128-
129-
<!-- `alt` is mandatory on the Image component -->
130-
<Image src={myImage} alt="A description of my image." />
131-
```
132-
133-
```html
134-
<!-- Output -->
135-
<!-- Image is optimized, proper attributes are enforced -->
136-
<img
137-
src="/_astro/my_image.hash.webp"
138-
width="1600"
139-
height="900"
140-
decoding="async"
141-
loading="lazy"
142-
alt="A description of my image."
143-
/>
144-
```
145-
### Properties
146-
147-
- src (required)
148-
- alt (required)
149-
- width and height (required for `public/` and remote images)
150-
- format
151-
- quality
152-
- densities
153-
- widths
154-
155-
In addition to the properties above, the `<Image />` component accepts all properties accepted by the HTML `<img>` tag.
156-
157-
See more in the [Images Guide](/en/guides/images/#image--astroassets).
158-
159-
## `<Picture />`
160-
161-
<p><Since v="3.3.0" /></p>
162-
163-
Use the built-in `<Picture />` Astro component to display a responsive image with multiple formats and/or sizes.
164-
165-
```astro title="src/pages/index.astro"
166-
---
167-
import { Picture } from 'astro:assets';
168-
import myImage from "../assets/my_image.png"; // Image is 1600x900
169-
---
170-
171-
<!-- `alt` is mandatory on the Picture component -->
172-
<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />
173-
```
174-
175-
```html
176-
<!-- Output -->
177-
<picture>
178-
<source srcset="/_astro/my_image.hash.avif" type="image/avif" />
179-
<source srcset="/_astro/my_image.hash.webp" type="image/webp" />
180-
<img
181-
src="/_astro/my_image.hash.png"
182-
width="1600"
183-
height="900"
184-
decoding="async"
185-
loading="lazy"
186-
alt="A description of my image."
187-
/>
188-
</picture>
189-
```
190-
191-
See more in the [Images Guide](/en/guides/images/#picture-).
192-
193-
### Properties
194-
195-
`<Picture />` accepts all the properties of the `<Image />` component, plus the following:
196-
197-
#### `formats`
198-
199-
An array of image formats to use for the `<source>` tags. By default, this is set to `['webp']`.
200-
201-
#### `fallbackFormat`
202-
203-
Format to use as a fallback value for the `<img>` tag. Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files.
204-
205-
#### `pictureAttributes`
206-
207-
An object of attributes to be added to the `<picture>` tag. Use this property to apply attributes to the outer `<picture>` element itself. Attributes applied to the `<Picture />` component directly will apply to the inner `<img>` element, except for those used for image transformation.
208-
209-
210-
## `<Content />`
211-
212-
A generic component used to render the content of a [content collection entry](/en/guides/content-collections/#what-are-content-collections).
213-
214-
First, query one or more entries using `getCollection()` or `getEntry()`. Then, the `entry.render()` function can return the `<Content />` component for use in a `.astro` file template.
215-
216-
```astro title="src/pages/render-example.astro" {4, 7}
217-
---
218-
import { getEntry } from 'astro:content';
219-
const entry = await getEntry('blog', 'post-1');
220-
const { Content } = await entry.render();
221-
---
222-
<p>Published on: {entry.data.published.toDateString()}</p>
223-
<Content />
224-
```
225-
226-
## `<ViewTransitions />`
227-
228-
<p><Since v="2.9.0" /></p>
229-
230-
Opt in to using view transitions on individual pages by importing and adding the `<ViewTransitions />` routing component to `<head>` on every desired page.
231-
232-
```astro title="src/pages/index.astro" ins={2,7}
233-
---
234-
import { ViewTransitions } from 'astro:transitions';
235-
---
236-
<html lang="en">
237-
<head>
238-
<title>My Homepage</title>
239-
<ViewTransitions />
240-
</head>
241-
<body>
242-
<h1>Welcome to my website!</h1>
243-
</body>
244-
</html>
245-
```
246-
247-
See more about how to [control the router](/en/guides/view-transitions/#router-control) and [add transition directives](/en/guides/view-transitions/#transition-directives) to page elements and components.
118+
See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`.
248119

249120
## `<Debug />`
250121

‎src/content/docs/en/reference/errors/image-missing-alt.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ If the image is merely decorative (i.e. doesn’t contribute to the understandin
2222

2323
**See Also:**
2424
- [Images](/en/guides/images/)
25-
- [Image component](/en/guides/images/#image--astroassets)
26-
-  [Image component#alt](/en/guides/images/#alt-required)
25+
- [Image component](/en/reference/modules/astro-assets/#image-)
26+
-  [Image component#alt](/en/reference/modules/astro-assets/#alt-required)
2727

2828

‎src/content/docs/en/reference/errors/missing-image-dimension.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ import DontEditWarning from '~/components/DontEditWarning.astro'
1616
> Missing width and height attributes for `IMAGE_URL`. When using remote images, both dimensions are required in order to avoid cumulative layout shift (CLS).
1717
1818
## What went wrong?
19-
For remote images, `width` and `height` cannot automatically be inferred from the original file. To avoid cumulative layout shift (CLS), either specify these two properties, or set [`inferSize`](/en/guides/images/#infersize) to `true` to fetch a remote image's original dimensions.
19+
For remote images, `width` and `height` cannot automatically be inferred from the original file. To avoid cumulative layout shift (CLS), either specify these two properties, or set [`inferSize`](/en/reference/modules/astro-assets/#infersize) to `true` to fetch a remote image's original dimensions.
2020

2121
If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](/en/guides/imports/#other-assets).
2222

2323
**See Also:**
2424
- [Images](/en/guides/images/)
25-
- [Image component#width-and-height-required](/en/guides/images/#width-and-height-required-for-images-in-public)
25+
- [Image component#width-and-height-required](/en/reference/modules/astro-assets/#width-and-height-required-for-images-in-public)
2626

2727

‎src/content/docs/en/reference/errors/missing-sharp.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export default defineConfig({
3131

3232
**See Also:**
3333
- [Default Image Service](/en/guides/images/#default-image-service)
34-
- [Image Component](/en/guides/images/#image--astroassets)
3534
- [Image Services API](/en/reference/image-service-reference/)
3635

3736

0 commit comments

Comments
 (0)