From b90684e9b2b59ce4c26202aeaedfd5577f1bb44f Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Mon, 24 Jun 2024 13:41:40 +0000 Subject: [PATCH 1/4] move content to main guide --- src/content/docs/en/guides/images.mdx | 221 +----------- src/content/docs/en/guides/upgrade-to/v3.mdx | 324 +++++++++++++++++- .../docs/en/guides/view-transitions.mdx | 99 +----- 3 files changed, 324 insertions(+), 320 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 80e77042f4779..b21112bd09037 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -742,223 +742,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. - -## Upgrade to v3.0 from v2.x - -`astro:assets` is no longer behind an experimental flag in Astro v3.0. - -`` is now a built-in component and the previous `@astrojs/image` integration has been removed. - -These and other accompanying changes to using images in Astro may cause some breaking changes when you upgrade your Astro project from an earlier version. - -Please follow the instructions below as appropriate to upgrade an Astro v2.x project to v3.0. - -### Upgrade from `experimental.assets` - -If you had previously enabled the experimental flag for `astro:assets`, you will need to update your project for Astro v3.0 which now includes assets features by default. - -#### Remove `experimental.assets` flag - -Remove the experimental flag: - -```js title="astro.config.mjs" del={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - assets: true - } -}); -``` - -If necessary, also update your `src/env.d.ts` file to replace the `astro/client-image` reference with `astro/client`: - -```ts title="src/env.d.ts" del={1} ins={2} -/// -/// -``` - -#### Remove the `~/assets` import alias - -This import alias is no longer included by default with `astro:assets`. If you were using this alias with experimental assets, you must convert them to relative file paths, or [create your own import aliases](/en/guides/imports/#aliases). - -```astro title="src/pages/posts/post-1.astro" del={2} ins={3} ---- -import rocket from '~/assets/rocket.png'; -import rocket from '../../assets/rocket.png'; ---- -``` - -#### Add simple asset support for Cloudflare, Deno, Vercel Edge and Netlify Edge - - Astro v3.0 allows `astro:assets` to work without errors in Cloudflare, Deno, Vercel Edge and Netlify Edge, which do not support Astro's built-in Squoosh and Sharp image optimization. Note that Astro does not perform any image transformation and processing in these environments. However, you can still enjoy the other benefits of using `astro:assets`, including no Cumulative Layout Shift (CLS), the enforced `alt` attribute, and a consistent authoring experience. - - If you previously avoided using `astro:assets` because of these constraints, you can now use them without issues. You can configure the no-op image service to explicitly opt-in to this behavior: - -```js title="astro.config.mjs" ins={4-8} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - image: { - service: { - entrypoint: 'astro/assets/services/noop' - } - } -}); -``` - -### Decide where to store your images - -See the Images guide to help you decide [where to store your images](#where-to-store-images). You may wish to take advantage of new options for storing your images with the added flexibility `astro:assets` brings. For example, relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `![alt](src)` syntax. - -### Update existing `` tags - -Previously, importing an image would return a simple `string` with the path of the image. Now, imported image assets match the following signature: - -```ts -interface ImageMetadata { - src: string; - width: number; - height: number; - format: string; -} -``` - -You must update the `src` attribute of any existing `` tags (including any [images in UI framework components](#images-in-ui-framework-components)) and you may also update other attributes that are now available to you from the imported image. - -```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6} ---- -import rocket from '../images/rocket.svg'; ---- -A rocketship in space. - -A rocketship in space. -``` - -### Update your Markdown, MDX, and Markdoc files - -Relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `![alt](src)` syntax. - -This allows you to move your images from the `public/` directory to your project `src/` where they will now be processed and optimized. Your existing images in `public/` and remote images are still valid but are not optimized by Astro's build process. - -```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/" -# My Markdown Page - - -![A starry night sky.](../../images/stars.png) - - -![A starry night sky.](./stars.png) -``` - -If you require more control over your image attributes, we recommend using the `.mdx` file format, which allows you to include Astro's `` component or a JSX `` tag in addition to the Markdown syntax. Use the [MDX integration](/en/guides/integrations-guide/mdx/) to add support for MDX to Astro. - -### Remove `@astrojs/image` - - -If you were using the image integration in Astro v2.x, complete the following steps: - - -1. Remove the `@astrojs/image` integration. - - You must [remove the integration](/en/guides/integrations-guide/#removing-an-integration) by uninstalling and then removing it from your `astro.config.mjs` file. - - ```js del={3,7} - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import image from '@astrojs/image'; - - export default defineConfig({ - integrations: [ - image(), - ] - }) - ``` - -2. Update types (if required). - - If you had special types configured for `@astrojs/image` in `src/env.d.ts`, you may need to change them back to the default Astro types if your upgrade to v3 did not complete this step for you. - - ```ts title="src/env.d.ts" del={1} ins={2} - /// - /// - ``` - - Similarly, update `tsconfig.json` if necessary: - - ```json title="tsconfig.json" del={3} ins={4} - { - "compilerOptions": { - "types": ["@astrojs/image/client"] - "types": ["astro/client"] - } - } - ``` - -3. Migrate any existing `` components. - - Change all `import` statements from `@astrojs/image/components` to `astro:assets` in order to use the new built-in `` component. - - Remove any component attributes that are not [currently supported image asset properties](/en/guides/images/#properties). - - For example, `aspectRatio` is no longer supported, as it is now automatically inferred from the `width` and `height` attributes. - - ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3} - --- - import { Image } from '@astrojs/image/components'; - import { Image } from 'astro:assets'; - import localImage from '../assets/logo.png'; - const localAlt = 'The Astro Logo'; - --- - - {localAlt} - ``` - -4. Choose a default image service. - - [Sharp](https://github.com/lovell/sharp) is now the default image service used for `astro:assets`. If you would like to use Sharp, no configuration is required. - - If you would prefer to use [Squoosh](https://github.com/GoogleChromeLabs/squoosh) to transform your images, update your config with the following `image.service` option: - - ```js title="astro.config.mjs" ins={4-6} - import { defineConfig, squooshImageService } from 'astro/config'; - - export default defineConfig({ - image: { - service: squooshImageService(), - }, - }); - ``` - - -### Update Content Collections schemas - -You can now declare an associated image for a content collections entry, such as a blog post's cover image, in your frontmatter using its path relative to the current folder. - -The new `image` helper for content collections lets you validate the image metadata using Zod. Learn more about [how to use images in content collections](/en/guides/images/#images-in-content-collections) - -### Navigating Image Imports in Astro v3.0 - -In Astro v3.0, if you have to preserve the old import behavior for images and require a string representation of the image's URL, append `?url` to the end of your image path when importing it. For example: - -```astro title="src/pages/blog/MyImages.astro" ---- -import Sprite from '../assets/logo.svg?url'; ---- - - - - -``` - -This approach ensures you obtain the URL string. Keep in mind that during development, Astro uses a `src/` path, but upon building, it generates hashed paths like `/_astro/cat.a6737dd3.png`. - -If you prefer to work directly with the image object itself, you can access the `.src` property. This approach is best for tasks like managing image dimensions for Core Web Vitals metrics and preventing CLS. - -If you are transitioning into the new import behavior, combining `?url` and `.src` methods might be the right method for seamless image handling. +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 diff --git a/src/content/docs/en/guides/upgrade-to/v3.mdx b/src/content/docs/en/guides/upgrade-to/v3.mdx index 7530a226483ff..86ae96c169e08 100644 --- a/src/content/docs/en/guides/upgrade-to/v3.mdx +++ b/src/content/docs/en/guides/upgrade-to/v3.mdx @@ -68,8 +68,8 @@ export default defineConfig({ These features are now available by default: -- View Transitions for animated page transitions and persistent islands. See [view transitions API breaking changes and upgrading advice](/en/guides/view-transitions/#upgrade-to-v30-from-v2x) if you were using this experimental flag. -- A new image services API `astro:assets` for using images in Astro, including a new `` component and `getImage()` function. Please read the detailed [image upgrade advice](/en/guides/images/#upgrade-to-v30-from-v2x) **whether or not you were using this experimental flag** to see how this might affect your project. +- View Transitions for animated page transitions and persistent islands. See [view transitions API breaking changes and upgrading advice](#upgrade-view-transitions-to-v3) if you were using this experimental flag. +- A new image services API `astro:assets` for using images in Astro, including a new `` component and `getImage()` function. Please read the detailed [image upgrade advice](#upgrade-images-to-v3) **whether or not you were using this experimental flag** to see how this might affect your project. Read more about these two exciting features and more in [the 3.0 Blog post](https://astro.build/blog/astro-3/)! @@ -669,6 +669,326 @@ const result = await transform(source, { }); ``` +## Feature Upgrades + +### Upgrade images to v3 + +`astro:assets` is no longer behind an experimental flag in Astro v3.0. + +`` is now a built-in component and the previous `@astrojs/image` integration has been removed. + +These and other accompanying changes to using images in Astro may cause some breaking changes when you upgrade your Astro project from an earlier version. + +Please follow the instructions below as appropriate to upgrade an Astro v2.x project to v3.0. + +#### Upgrade from `experimental.assets` + +If you had previously enabled the experimental flag for `astro:assets`, you will need to update your project for Astro v3.0 which now includes assets features by default. + +##### Remove `experimental.assets` flag + +Remove the experimental flag: + +```js title="astro.config.mjs" del={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + experimental: { + assets: true + } +}); +``` + +If necessary, also update your `src/env.d.ts` file to replace the `astro/client-image` reference with `astro/client`: + +```ts title="src/env.d.ts" del={1} ins={2} +/// +/// +``` + +##### Remove the `~/assets` import alias + +This import alias is no longer included by default with `astro:assets`. If you were using this alias with experimental assets, you must convert them to relative file paths, or [create your own import aliases](/en/guides/imports/#aliases). + +```astro title="src/pages/posts/post-1.astro" del={2} ins={3} +--- +import rocket from '~/assets/rocket.png'; +import rocket from '../../assets/rocket.png'; +--- +``` + +##### Add simple asset support for Cloudflare, Deno, Vercel Edge and Netlify Edge + + Astro v3.0 allows `astro:assets` to work without errors in Cloudflare, Deno, Vercel Edge and Netlify Edge, which do not support Astro's built-in Squoosh and Sharp image optimization. Note that Astro does not perform any image transformation and processing in these environments. However, you can still enjoy the other benefits of using `astro:assets`, including no Cumulative Layout Shift (CLS), the enforced `alt` attribute, and a consistent authoring experience. + + If you previously avoided using `astro:assets` because of these constraints, you can now use them without issues. You can configure the no-op image service to explicitly opt-in to this behavior: + +```js title="astro.config.mjs" ins={4-8} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + image: { + service: { + entrypoint: 'astro/assets/services/noop' + } + } +}); +``` + +#### Decide where to store your images + +See the Images guide to help you decide [where to store your images](#where-to-store-images). You may wish to take advantage of new options for storing your images with the added flexibility `astro:assets` brings. For example, relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `![alt](src)` syntax. + +#### Update existing `` tags + +Previously, importing an image would return a simple `string` with the path of the image. Now, imported image assets match the following signature: + +```ts +interface ImageMetadata { + src: string; + width: number; + height: number; + format: string; +} +``` + +You must update the `src` attribute of any existing `` tags (including any [images in UI framework components](#images-in-ui-framework-components)) and you may also update other attributes that are now available to you from the imported image. + +```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6} +--- +import rocket from '../images/rocket.svg'; +--- +A rocketship in space. + +A rocketship in space. +``` + +#### Update your Markdown, MDX, and Markdoc files + +Relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `![alt](src)` syntax. + +This allows you to move your images from the `public/` directory to your project `src/` where they will now be processed and optimized. Your existing images in `public/` and remote images are still valid but are not optimized by Astro's build process. + +```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/" +# My Markdown Page + + +![A starry night sky.](../../images/stars.png) + + +![A starry night sky.](./stars.png) +``` + +If you require more control over your image attributes, we recommend using the `.mdx` file format, which allows you to include Astro's `` component or a JSX `` tag in addition to the Markdown syntax. Use the [MDX integration](/en/guides/integrations-guide/mdx/) to add support for MDX to Astro. + +#### Remove `@astrojs/image` + + +If you were using the image integration in Astro v2.x, complete the following steps: + + +1. Remove the `@astrojs/image` integration. + + You must [remove the integration](/en/guides/integrations-guide/#removing-an-integration) by uninstalling and then removing it from your `astro.config.mjs` file. + + ```js del={3,7} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import image from '@astrojs/image'; + + export default defineConfig({ + integrations: [ + image(), + ] + }) + ``` + +2. Update types (if required). + + If you had special types configured for `@astrojs/image` in `src/env.d.ts`, you may need to change them back to the default Astro types if your upgrade to v3 did not complete this step for you. + + ```ts title="src/env.d.ts" del={1} ins={2} + /// + /// + ``` + + Similarly, update `tsconfig.json` if necessary: + + ```json title="tsconfig.json" del={3} ins={4} + { + "compilerOptions": { + "types": ["@astrojs/image/client"] + "types": ["astro/client"] + } + } + ``` + +3. Migrate any existing `` components. + + Change all `import` statements from `@astrojs/image/components` to `astro:assets` in order to use the new built-in `` component. + + Remove any component attributes that are not [currently supported image asset properties](/en/guides/images/#properties). + + For example, `aspectRatio` is no longer supported, as it is now automatically inferred from the `width` and `height` attributes. + + ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3} + --- + import { Image } from '@astrojs/image/components'; + import { Image } from 'astro:assets'; + import localImage from '../assets/logo.png'; + const localAlt = 'The Astro Logo'; + --- + + {localAlt} + ``` + +4. Choose a default image service. + + [Sharp](https://github.com/lovell/sharp) is now the default image service used for `astro:assets`. If you would like to use Sharp, no configuration is required. + + If you would prefer to use [Squoosh](https://github.com/GoogleChromeLabs/squoosh) to transform your images, update your config with the following `image.service` option: + + ```js title="astro.config.mjs" ins={4-6} + import { defineConfig, squooshImageService } from 'astro/config'; + + export default defineConfig({ + image: { + service: squooshImageService(), + }, + }); + ``` + + +#### Update Content Collections schemas + +You can now declare an associated image for a content collections entry, such as a blog post's cover image, in your frontmatter using its path relative to the current folder. + +The new `image` helper for content collections lets you validate the image metadata using Zod. Learn more about [how to use images in content collections](/en/guides/images/#images-in-content-collections) + +#### Navigating Image Imports in Astro v3.0 + +In Astro v3.0, if you have to preserve the old import behavior for images and require a string representation of the image's URL, append `?url` to the end of your image path when importing it. For example: + +```astro title="src/pages/blog/MyImages.astro" +--- +import Sprite from '../assets/logo.svg?url'; +--- + + + + +``` + +This approach ensures you obtain the URL string. Keep in mind that during development, Astro uses a `src/` path, but upon building, it generates hashed paths like `/_astro/cat.a6737dd3.png`. + +If you prefer to work directly with the image object itself, you can access the `.src` property. This approach is best for tasks like managing image dimensions for Core Web Vitals metrics and preventing CLS. + +If you are transitioning into the new import behavior, combining `?url` and `.src` methods might be the right method for seamless image handling. + + +### Upgrade view transitions to v3 + +View transitions are no longer behind an experimental flag in Astro v3.0. + +If you had **not** enabled this experimental flag in Astro 2.x, this will not cause any breaking changes to your project. The new View Transitions API has no effect on your existing code. + +If you were previously using experimental view transitions, there may be some breaking changes when you upgrade your Astro project from an earlier version. + +Please follow the instructions below as appropriate to upgrade **an Astro v2.x project configured with `experimental.viewTransitions: true`** to v3.0. + +#### Upgrade from `experimental.viewTransitions` + +If you had previously enabled the experimental flag for view transitions, you will need to update your project for Astro v3.0 which now allows view transitions by default. + +##### Remove `experimental.viewTransitions` flag + +Remove the experimental flag: + +```js title="astro.config.mjs" del={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + experimental: { + viewTransitions: true + } +}); +``` + +##### Update import source + +The `` component has been moved from `astro:components` to `astro:transitions`. Update the import source across all occurrences in your project. + +```astro title="src/layouts/BaseLayout.astro" del="astro:components" ins="astro:transitions" +--- +import { ViewTransitions } from "astro:components astro:transitions" +--- + + + My Homepage + + + +

Welcome to my website!

+ + +``` + +#### Update `transition:animate` directives + +**Changed:** The `transition:animate` value `morph` has been renamed to `initial`. Also, this is no longer the default animation. If no `transition:animate` directive is specified, your animations will now default to `fade`. + +1. Rename any `morph` animations to `initial`. + ```astro title="src/components/MyComponent.astro" del="morph" ins="initial" +
+ ``` +2. To keep any animations that were previously using `morph` by default, explicitly add `transition:animate="initial"` + + ```astro title="src/components/MyComponent.astro" ins='transition:animate="initial"' +
+ ``` +3. You can safely remove any animations explicitly set to `fade`. This is now the default behavior: + + ```astro title="src/components/MyComponent.astro" del="transition:animate=\"fade\"" +
+ ``` + +**Added:** Astro also supports a new `transition:animate` value, `none`. This value can be used on a page's `` element to disable animated full-page transitions on an entire page. This will only override **default animation behavior** on page elements without an animation directive. You can still set animations on individual elements, and these specific animations will occur. + +4. You may now disable all default transitions on an individual page, animating only elements that explicitly use a `transition:animate` directive: + + ```astro ins="transition:animate=\"none\"" + + + +

Hello world!

+ + + ``` + +##### Update event names + +The event `astro:load` has been renamed to `astro:page-load`. Rename all occurrences in your project. + +```astro title="src/components/MyComponent.astro" del="astro:load" ins="astro:page-load" + +``` + +The event `astro:beforeload` has been renamed to `astro:after-swap`. Rename all occurrences in your project. + +```astro title="src/components/MyComponent.astro" del="astro:beforeload" ins="astro:after-swap" + +``` + + ## Community Resources Know a good resource for Astro v3.0? [Edit this page](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v3.mdx) and add a link below! diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index cbe876af285e7..293153e4eef41 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -659,101 +659,4 @@ We strongly recommend you always include a `` in each page for accessibil ### `prefers-reduced-motion` -Astro's `<ViewTransitions />` component includes a CSS media query that disables *all* view transition animations, including fallback animation, whenever the [`prefer-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting is detected. Instead, the browser will simply swap the DOM elements without an animation. - -## Upgrade to v3.0 from v2.x - -View transitions are no longer behind an experimental flag in Astro v3.0. - -If you had **not** enabled this experimental flag in Astro 2.x, this will not cause any breaking changes to your project. The new View Transitions API has no effect on your existing code. - -If you were previously using experimental view transitions, there may be some breaking changes when you upgrade your Astro project from an earlier version. - -Please follow the instructions below as appropriate to upgrade **an Astro v2.x project configured with `experimental.viewTransitions: true`** to v3.0. - -### Upgrade from `experimental.viewTransitions` - -If you had previously enabled the experimental flag for view transitions, you will need to update your project for Astro v3.0 which now allows view transitions by default. - -#### Remove `experimental.viewTransitions` flag - -Remove the experimental flag: - -```js title="astro.config.mjs" del={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - viewTransitions: true - } -}); -``` - -#### Update import source - -The `<ViewTransitions />` component has been moved from `astro:components` to `astro:transitions`. Update the import source across all occurrences in your project. - -```astro title="src/layouts/BaseLayout.astro" del="astro:components" ins="astro:transitions" ---- -import { ViewTransitions } from "astro:components astro:transitions" ---- -<html lang="en"> - <head> - <title>My Homepage - - - -

Welcome to my website!

- - -``` - -#### Update `transition:animate` directives - -**Changed:** The `transition:animate` value `morph` has been renamed to `initial`. Also, this is no longer the default animation. If no `transition:animate` directive is specified, your animations will now default to `fade`. - -1. Rename any `morph` animations to `initial`. - ```astro title="src/components/MyComponent.astro" del="morph" ins="initial" -
- ``` -2. To keep any animations that were previously using `morph` by default, explicitly add `transition:animate="initial"` - - ```astro title="src/components/MyComponent.astro" ins='transition:animate="initial"' -
- ``` -3. You can safely remove any animations explicitly set to `fade`. This is now the default behavior: - - ```astro title="src/components/MyComponent.astro" del="transition:animate=\"fade\"" -
- ``` - -**Added:** Astro also supports a new `transition:animate` value, `none`. This value can be used on a page's `` element to disable animated full-page transitions on an entire page. This will only override **default animation behavior** on page elements without an animation directive. You can still set animations on individual elements, and these specific animations will occur. - -4. You may now disable all default transitions on an individual page, animating only elements that explicitly use a `transition:animate` directive: - - ```astro ins="transition:animate=\"none\"" - - - -

Hello world!

- - - ``` - -#### Update event names - -The event `astro:load` has been renamed to `astro:page-load`. Rename all occurrences in your project. - -```astro title="src/components/MyComponent.astro" del="astro:load" ins="astro:page-load" - -``` - -The event `astro:beforeload` has been renamed to `astro:after-swap`. Rename all occurrences in your project. - -```astro title="src/components/MyComponent.astro" del="astro:beforeload" ins="astro:after-swap" - -``` +Astro's `` component includes a CSS media query that disables *all* view transition animations, including fallback animation, whenever the [`prefer-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting is detected. Instead, the browser will simply swap the DOM elements without an animation. \ No newline at end of file From c999607b8a5be115357c8aaa9a8dc87954113056 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Mon, 24 Jun 2024 14:13:34 +0000 Subject: [PATCH 2/4] fix more internal links --- src/content/docs/en/guides/upgrade-to/v3.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/guides/upgrade-to/v3.mdx b/src/content/docs/en/guides/upgrade-to/v3.mdx index 86ae96c169e08..5ded0ed8acc60 100644 --- a/src/content/docs/en/guides/upgrade-to/v3.mdx +++ b/src/content/docs/en/guides/upgrade-to/v3.mdx @@ -129,9 +129,9 @@ Astro v3.0 removes this integration from the codebase entirely. Astro's new solu Remove the `@astrojs/image` integration from your project. You will need to not only uninstall the integration but also update or remove any import statements and existing `` and `` components. You might also need to configure a preferred default image processing service. -You will find [complete, step-by-step instructions for removing the old image integration](/en/guides/images/#remove-astrojsimage) in our Images guide. +You will find [complete, step-by-step instructions for removing the old image integration](#remove-astrojsimage) in our Images guide. -Migrating to `astro:assets` will also bring some new image options and features that you may now wish to use. Please see the full [v3.0 Image Upgrade Advice](/en/guides/images/#upgrade-to-v30-from-v2x) for full details! +Migrating to `astro:assets` will also bring some new image options and features that you may now wish to use. Please see the full [v3.0 Image Upgrade Advice](#upgrade-images-to-v3) for full details! ```js del={3,7} // astro.config.mjs @@ -196,7 +196,7 @@ Astro v3.0 removes this export entirely. #### What should I do? -If you are using the deprecated `image()` from `astro:content`, remove it as this no longer exists. Validate images through [the `image` helper from `schema`](/en/guides/images/#update-content-collections-schemas) instead: +If you are using the deprecated `image()` from `astro:content`, remove it as this no longer exists. Validate images through [the `image` helper from `schema`](#update-content-collections-schemas) instead: ```ts title="src/content/config.ts" del={1} ins={2} "({ image })" import { defineCollection, z, image } from "astro:content"; @@ -737,7 +737,7 @@ export default defineConfig({ #### Decide where to store your images -See the Images guide to help you decide [where to store your images](#where-to-store-images). You may wish to take advantage of new options for storing your images with the added flexibility `astro:assets` brings. For example, relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `![alt](src)` syntax. +See the Images guide to help you decide [where to store your images](/en/guides/images/#where-to-store-images). You may wish to take advantage of new options for storing your images with the added flexibility `astro:assets` brings. For example, relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `![alt](src)` syntax. #### Update existing `` tags @@ -752,7 +752,7 @@ interface ImageMetadata { } ``` -You must update the `src` attribute of any existing `` tags (including any [images in UI framework components](#images-in-ui-framework-components)) and you may also update other attributes that are now available to you from the imported image. +You must update the `src` attribute of any existing `` tags (including any [images in UI framework components](/en/guides/images/#images-in-ui-framework-components)) and you may also update other attributes that are now available to you from the imported image. ```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6} --- From ef1950e3d88acc7a013305ada453a3bc6e348e02 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Mon, 24 Jun 2024 14:33:14 +0000 Subject: [PATCH 3/4] de link removals --- src/content/docs/de/guides/upgrade-to/v3.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/content/docs/de/guides/upgrade-to/v3.mdx b/src/content/docs/de/guides/upgrade-to/v3.mdx index 03a1ce781d87a..8ad43c79ee294 100644 --- a/src/content/docs/de/guides/upgrade-to/v3.mdx +++ b/src/content/docs/de/guides/upgrade-to/v3.mdx @@ -67,8 +67,8 @@ export default defineConfig({ Diese Features sind jetzt standardmäßig verfügbar: -- View Transitions für animierte Seitenübergänge und persistente Astro-Inseln. Siehe die [Breaking Changes von der View Transitions API und Upgrade-Ratschläge](/de/guides/view-transitions/#upgrade-to-v30-from-v2x), wenn du diese experimentelle Option verwendet hast. -- Eine neue Bildservices-API `astro:assets` für das Verwenden von Bildern in Astro, einschließlich einer neuen ``-Komponente und der `getImage()`-Funktion. Bitte lies den detaillierten [Bilder Upgrade-Ratgeber](/de/guides/images/#upgrade-to-v30-from-v2x) **unabhängig davon, ob du diese experimentelle Option verwendet hast**, um zu sehen, wie sich dies auf dein Projekt auswirken könnte. +- View Transitions für animierte Seitenübergänge und persistente Astro-Inseln. +- Eine neue Bildservices-API `astro:assets` für das Verwenden von Bildern in Astro, einschließlich einer neuen ``-Komponente und der `getImage()`-Funktion. Lies mehr über diese zwei interessanten Features und mehr im [Astro 3.0 Blogbeitrag](https://astro.build/blog/astro-3/)! @@ -126,9 +126,7 @@ Mit Astro v3.0 wurde diese Integration komplett entfernt. Die neue Lösung für Entferne die `@astrojs/image`-Integration aus deinem Projekt. Du musst nicht nur die Integration deinstallieren, sondern auch alle Import-Anweisungen sowie die vorhandenen ``- und ``-Komponenten aktualisieren oder entfernen. Möglicherweise musst du auch einen bevorzugten Standardbildverarbeitungsdienst konfigurieren. -Du findest eine [Schritt-für-Schritt-Anleitung zum Entfernen der alten Bildintegration](/de/guides/images/#remove-astrojsimage) in unserer Bilder-Anleitung. - -Die Migration zu `astro:assets` bringt auch einige neue Bildoptionen und Features mit sich, die du vielleicht nutzen möchtest. Bitte sieh dir den vollständigen [Upgrade-Ratgeber für Bilder in Version 3.0](/de/guides/images/#upgrade-to-v30-from-v2x) für alle Details an! +Die Migration zu `astro:assets` bringt auch einige neue Bildoptionen und Features mit sich, die du vielleicht nutzen möchtest. ```js del={3,7} // astro.config.mjs @@ -192,7 +190,7 @@ Astro v3.0 entfernt diesen Export vollständig. #### Was soll ich tun? -Wenn du das veraltete `image()` aus `astro:content` verwendest, entferne es, da es nicht mehr existiert. Überprüfe Bilder stattdessen über [den `image`-Helfer aus `schema`](/de/guides/images/#update-content-collections-schemas): +Wenn du das veraltete `image()` aus `astro:content` verwendest, entferne es, da es nicht mehr existiert. Überprüfe Bilder stattdessen über den `image`-Helfer aus `schema`: ```ts title="src/content/config.ts" del={1} ins={2} "({ image })" import { defineCollection, z, image } from "astro:content"; From e5b3b0409c270afe8a3bad00060502d37b8f05eb Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Mon, 24 Jun 2024 14:37:33 +0000 Subject: [PATCH 4/4] ru link removals --- src/content/docs/ru/guides/upgrade-to/v3.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/content/docs/ru/guides/upgrade-to/v3.mdx b/src/content/docs/ru/guides/upgrade-to/v3.mdx index 053f43e991fad..3252415e498d7 100644 --- a/src/content/docs/ru/guides/upgrade-to/v3.mdx +++ b/src/content/docs/ru/guides/upgrade-to/v3.mdx @@ -67,8 +67,8 @@ export default defineConfig({ Эти функции теперь доступны по умолчанию: -- Анимации Переходов для анимированных переходов между страницами и постоянных островов. Смотрите [API анимации переходов - изменения и советы по обновлению](/ru/guides/view-transitions/#обновление-до-v30-с-v2x), если вы использовали этот экспериментальный флаг. -- Новый API сервисов изображений `astro:assets` для использования изображений в Astro, включая новый компонент `` и функцию `getImage()`. Пожалуйста, прочитайте подробные [рекомендации по обновлению изображений](/ru/guides/images/#upgrade-to-v30-from-v2x) **вне зависимости от того, использовали ли вы этот экспериментальный флаг**, чтобы понять, как это может повлиять на ваш проект. +- Анимации Переходов для анимированных переходов между страницами и постоянных островов. +- Новый API сервисов изображений `astro:assets` для использования изображений в Astro, включая новый компонент `` и функцию `getImage()`. Подробнее об этих двух интересных функциях и многом другом читайте в [посте блога 3.0](https://astro.build/blog/astro-3/)! @@ -130,9 +130,7 @@ npm install typescript@latest --save-dev Удалите интеграцию `@astrojs/image` из вашего проекта. Вам нужно будет не только удалить интеграцию, но и обновить или удалить все операторы импорта и существующие компоненты `` и ``. Также может потребоваться настройка предпочтительной службы обработки изображений по умолчанию. -Вы найдете [полные пошаговые инструкции по удалению старой интеграции изображений](/ru/guides/images/#remove-astrojsimage) в нашем руководстве по изображениям. - -Переход на `astro:assets` также принесет некоторые новые опции и возможности работы с изображениями, которые вы, возможно, захотите использовать. Пожалуйста, ознакомьтесь с полным руководством [v3.0 Image Upgrade Advice](/ru/guides/images/#upgrade-to-v30-from-v2x) для получения подробной информации! +Переход на `astro:assets` также принесет некоторые новые опции и возможности работы с изображениями, которые вы, возможно, захотите использовать. ```js del={3,7} // astro.config.mjs @@ -197,7 +195,7 @@ import Markdown from '@astrojs/markdown-component'; #### Что мне делать? -Если вы используете устаревший экспорт `image()` из `astro:content`, удалите его, так как он больше не существует. Вместо этого проверяйте изображения через [помощник `image` из `schema`](/ru/guides/images/#update-content-collections-schemas): +Если вы используете устаревший экспорт `image()` из `astro:content`, удалите его, так как он больше не существует. Вместо этого проверяйте изображения через помощник `image` из `schema`: ```ts title="src/content/config.ts" del={1} ins={2} "({ image })" import { defineCollection, z, image } from "astro:content";