From 474ecc7be625a0ff2e9bc145af948e75826de025 Mon Sep 17 00:00:00 2001 From: Happydev <81974850+MoustaphaDev@users.noreply.github.com> Date: Tue, 31 Jan 2023 17:50:17 +0100 Subject: [PATCH 1/4] Correct usage of `getImage` function (#6068) --- packages/integrations/image/README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index 213d9d3bb..e33520239 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -422,7 +422,10 @@ This can be helpful if you need to add preload links to a page's ``. --- import { getImage } from '@astrojs/image'; -const { src } = await getImage({src: '../assets/hero.png'}); +const { src } = await getImage({ + src: import('../assets/hero.png'), + alt: "My hero image" + }); --- From 2ab32b59ef0a28d34757f2c2adb9cf2baa86855e Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 31 Jan 2023 17:46:59 -0500 Subject: [PATCH 2/4] [MDX] Syntax highlighting after user plugins (#6050) * fix: load MDX syntax highlighting after user plugins * chore: changeset --- .changeset/orange-carpets-greet.md | 5 +++++ packages/integrations/mdx/src/plugins.ts | 15 +++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 .changeset/orange-carpets-greet.md diff --git a/.changeset/orange-carpets-greet.md b/.changeset/orange-carpets-greet.md new file mode 100644 index 000000000..f862cf784 --- /dev/null +++ b/.changeset/orange-carpets-greet.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': minor +--- + +Fix: load syntax highlighters after MDX remark plugins. This keeps MDX consistent with Astro's markdown behavior. diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts index 8c98e0016..cf30566c4 100644 --- a/packages/integrations/mdx/src/plugins.ts +++ b/packages/integrations/mdx/src/plugins.ts @@ -129,12 +129,7 @@ export async function getRemarkPlugins( config: AstroConfig ): Promise { let remarkPlugins: PluggableList = []; - if (mdxOptions.syntaxHighlight === 'shiki') { - remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]); - } - if (mdxOptions.syntaxHighlight === 'prism') { - remarkPlugins.push(remarkPrism); - } + if (mdxOptions.gfm) { remarkPlugins.push(remarkGfm); } @@ -144,6 +139,14 @@ export async function getRemarkPlugins( remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)]; + // Apply syntax highlighters after user plugins to match `markdown/remark` behavior + if (mdxOptions.syntaxHighlight === 'shiki') { + remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]); + } + if (mdxOptions.syntaxHighlight === 'prism') { + remarkPlugins.push(remarkPrism); + } + // Apply last in case user plugins resolve relative image paths remarkPlugins.push(toRemarkContentRelImageError(config)); From 15f4d96b08caf3fd5db54aaef6255c8af7cbffd1 Mon Sep 17 00:00:00 2001 From: "Nick Buk[0vec]" Date: Tue, 31 Jan 2023 17:21:28 -0800 Subject: [PATCH 3/4] Add links to sharp docs in @astro/image README (#6017) Co-authored-by: Sarah Rainsberger --- packages/integrations/image/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index e33520239..9b369f631 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -259,7 +259,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, **Default:** `'cover'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). How the image should be resized to fit both `height` and `width`. @@ -271,7 +271,7 @@ How the image should be resized to fit both `height` and `width`. **Default:** `'centre'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). Position of the crop when fit is `cover` or `contain`. @@ -392,7 +392,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, **Default:** `'cover'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). How the image should be resized to fit both `height` and `width`. @@ -406,7 +406,7 @@ How the image should be resized to fit both `height` and `width`. **Default:** `'centre'`

-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. +> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize). Position of the crop when fit is `cover` or `contain`. From e3e2498248386169e5b56405f7d19d380cbeb72d Mon Sep 17 00:00:00 2001 From: Bryce Russell Date: Tue, 31 Jan 2023 19:28:14 -0600 Subject: [PATCH 4/4] Add required `alt` to Picture example (#6074) Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com> --- packages/integrations/image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index 9b369f631..89fdbaba8 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -333,7 +333,7 @@ The list of sizes that should be built for responsive images. This is combined w ```astro // Builds three images: 400x400, 800x800, and 1200x1200 - + ``` #### aspectRatio