From 3505067676bf55e20333d4959aa4a4001c092399 Mon Sep 17 00:00:00 2001
From: Subha Chanda <subhachanda88@gmail.com>
Date: Fri, 25 Nov 2022 23:35:43 +0530
Subject: [PATCH 01/20] Updated according to new configuration

Astro imports the `defineConfig` function from `astro/config`. The `integrations` key needs to be passed into the `defineConfig` function, but it is not shown in the README. Updated the README according to the CLI example.
---
 packages/integrations/solid/README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/integrations/solid/README.md b/packages/integrations/solid/README.md
index 89579fb4ab70..8cb50f4fad29 100644
--- a/packages/integrations/solid/README.md
+++ b/packages/integrations/solid/README.md
@@ -44,12 +44,13 @@ Now, apply this integration to your `astro.config.*` file using the `integration
 __`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import solid from '@astrojs/solid-js';
 
-export default {
-  // ...
-  integrations: [solid()],
-}
+export default defineConfig({
+   // ...
+   integrations: [solid()],
+});
 ```
 
 ## Getting started

From 8b0b61f0bad272591abd8117eaefa686eb434e5b Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 07:59:06 -0600
Subject: [PATCH 02/20] update alpine

---
 packages/integrations/alpinejs/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/integrations/alpinejs/README.md b/packages/integrations/alpinejs/README.md
index 235bfab33cd0..6b13e3fd7daa 100644
--- a/packages/integrations/alpinejs/README.md
+++ b/packages/integrations/alpinejs/README.md
@@ -43,9 +43,9 @@ npm install alpinejs @types/alpinejs
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
+__`astro.config.mjs`__
 
-```js ins={3} "alpine()"
-// astro.config.mjs
+```js ins={2} "alpine()"
 import { defineConfig } from 'astro/config';
 import alpine from '@astrojs/alpinejs';
 

From 7ad1d0c6f9930c4b8f6addf5fe4af19893ee187c Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 07:59:10 -0600
Subject: [PATCH 03/20] update image

---
 packages/integrations/image/README.md | 34 ++++++++++++++++++---------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
index 748fe2b1872a..bb377c8387a8 100644
--- a/packages/integrations/image/README.md
+++ b/packages/integrations/image/README.md
@@ -63,13 +63,14 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "image()"
+import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [image()],
-}
+});
 ```
 
 ### Installing `sharp` (optional)
@@ -82,16 +83,18 @@ npm install sharp
 
 Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
 
-```js ins={2,7}
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js ins={3,8}
+import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [image({
     serviceEntryPoint: '@astrojs/image/sharp'
   })],
-}
+})
 ```
 
 ### Update `env.d.ts`
@@ -446,8 +449,10 @@ The integration can be configured to run with a different image service, either
 
 The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
 
+__`astro.config.mjs`__
+
 ```js
-// astro.config.mjs
+import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
 export default {
@@ -462,17 +467,19 @@ export default {
 
 The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build.
 
+__`astro.config.mjs`__
+
 ```js
-// astro.config.mjs
+import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
-export default {
+export default defineConfig({
   integrations: [image({
     // supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
     // default: 'info'
     logLevel: 'debug'
   })],
-}
+})
 ```
 
 ### config.cacheDir
@@ -483,7 +490,12 @@ Local images will be cached for 1 year and invalidated when the original image f
 
 By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options.
 
+__`astro.config.mjs`__
+
 ```js
+import { defineConfig } from 'astro/config';
+import image from '@astrojs/image';
+
 export default defineConfig({
 	integrations: [image({
     // may be useful if your hosting provider allows caching between CI builds

From 7f6cdeaf82e4a6665a2dc870536d080581d59a8d Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 07:59:59 -0600
Subject: [PATCH 04/20] update lit

---
 packages/integrations/lit/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/lit/README.md b/packages/integrations/lit/README.md
index 13842957bdc8..fe99f3e2fa90 100644
--- a/packages/integrations/lit/README.md
+++ b/packages/integrations/lit/README.md
@@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "lit()"
+import { defineConfig } from 'astro/config';
 import lit from '@astrojs/lit';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [lit()],
-}
+});
 ```
 
 ## Getting started

From c4368a703b181722301690cd54531c9a02e119c4 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:05:06 -0600
Subject: [PATCH 05/20] update mdx

---
 packages/integrations/mdx/README.md | 304 ++++++++++++++++++++++++----
 1 file changed, 270 insertions(+), 34 deletions(-)

diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md
index e3830272a04a..30f3e4c545d1 100644
--- a/packages/integrations/mdx/README.md
+++ b/packages/integrations/mdx/README.md
@@ -42,9 +42,9 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+__`astro.config.mjs`__
 
-```js
+```js ins={2} "mdx()"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -92,8 +92,9 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -102,19 +103,47 @@ import rehypeMinifyHtml from 'rehype-minify-html';
 export default defineConfig({
   integrations: [
     mdx({
-      syntaxHighlight: 'shiki',
-      shikiConfig: { theme: 'dracula' },
-      remarkPlugins: [remarkToc],
-      rehypePlugins: [rehypeMinifyHtml],
-      remarkRehype: { footnoteLabel: 'Footnotes' },
-      gfm: false,
-    })
-  ]
-})
+      remarkPlugins: [exampleRemarkPlugin],
+    }),
+  ],
+});
+```
+
+…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
+
+### Layouts
+Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so:
+
+```yaml
+---
+layout: '../layouts/BaseLayout.astro' 
+title: 'My Blog Post'
+---
 ```
 
-:::caution
-MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
+Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots). See [layout props](#layout-props) for a complete list of props available.
+
+```astro title="src/layouts/BaseLayout.astro"
+---
+const { frontmatter, url } = Astro.props;
+---
+<html>
+  <head>
+    <meta rel="canonical" href={new URL(url, Astro.site).pathname}>
+    <title>{frontmatter.title}</title>
+  </head>
+  <body>
+    <h1>{frontmatter.title}</h1>
+    <!-- Rendered MDX will be passed into the default slot. -->
+    <slot />
+  </body>
+</html>
+```
+
+You can set a layout’s [`Props` type](/en/guides/typescript/#component-props) with the `MDXLayoutProps` helper.
+
+:::note
+`MDXLayoutProps` is the same as the `MarkdownLayoutProps` utility type with `rawContent()` and `compiledContent()` removed (since these are not available for `.mdx` files). Feel free to **use `MarkdownLayoutProps` instead** when sharing a layout across `.md` and `.mdx` files.
 :::
 
 📚 See the [Markdown Options reference](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) for a complete list of options.
@@ -128,8 +157,80 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-```ts
-// astro.config.mjs
+```html
+<blockquote>
+  <p>A blockquote with <em>some</em> emphasis.</p>
+</blockquote>
+```
+
+But what if you want to specify your own markup for these blockquotes? In the above example, you could create a custom `<Blockquote />` component (in any language) that either has a `<slot />` component or accepts a `children` prop.
+
+```astro title="src/components/Blockquote.astro"
+---
+const props = Astro.props;
+---
+
+<blockquote {...props} class="bg-blue-50 p-4">
+  <span class="text-4xl text-blue-600 mb-2">“</span>
+  <slot />
+</blockquote>
+```
+
+Then in the MDX file you import the component and export it to the `components` export.
+
+```mdx title="src/pages/posts/post-1.mdx" {2}
+import Blockquote from '../components/Blockquote.astro';
+export const components = { blockquote: Blockquote };
+```
+
+Now, writing the standard Markdown blockquote syntax (`>`) will use your custom `<Blockquote />` component instead. No need to use a component in Markdown, or write a remark/rehype plugin! Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list of HTML elements that can be overwritten as custom components.
+
+#### Custom components with imported `mdx`
+
+When rendering imported MDX content, custom components can be passed via the `components` prop.
+
+Note: An MDX file's exported components will _not_ be used unless you manually import and pass them via the `components` property. See the example below:
+
+```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
+---
+import { Content, components } from '../content.mdx';
+import Heading from '../Heading.astro';
+---
+
+<Content components={{...components, h1: Heading }} />
+```
+
+### Syntax highlighting
+
+The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
+
+We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  markdown: {
+    shikiConfig: {
+      theme: 'dracula',
+    },
+  },
+  integrations: [mdx()],
+});
+```
+
+Visit [our Shiki configuration docs](https://docs.astro.build/en/guides/markdown-content/#shiki-configuration) for more on using Shiki with Astro.
+
+#### Switch to Prism
+
+You can also use the [Prism](https://prismjs.com/) syntax highlighter by setting `markdown.syntaxHighlight` to `'prism'` in your `astro.config` like so:
+
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -139,38 +240,149 @@ export default defineConfig({
     remarkPlugins: [remarkPlugin1],
     gfm: true,
   },
+  integrations: [mdx()],
+});
+```
+
+This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro.
+
+#### Switch to a custom syntax highlighter
+
+You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash):
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import shikiTwoslash from 'remark-shiki-twoslash';
+
+export default defineConfig({
+  markdown: {
+    syntaxHighlight: false,
+  },
   integrations: [
     mdx({
-      // `syntaxHighlight` inherited from Markdown
-
-      // Markdown `remarkPlugins` ignored,
-      // only `remarkPlugin2` applied.
-      remarkPlugins: [remarkPlugin2],
-      // `gfm` overridden to `false`
-      gfm: false,
+      remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }],
     })
-  ]
+  ],
+});
+```
+
+## Configuration
+
+### remarkPlugins
+
+[Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) allow you to extend your Markdown with new capabilities. This includes [auto-generating a table of contents](https://github.com/remarkjs/remark-toc), [applying accessible emoji labels](https://github.com/florianeckerstorfer/remark-a11y-emoji), and more. We encourage you to browse [awesome-remark](https://github.com/remarkjs/awesome-remark) for a full curated list!
+
+This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import remarkToc from 'remark-toc';
+
+export default defineConfig({
+  integrations: [mdx({
+    remarkPlugins: [remarkToc],
+  })],
+});
+```
+
+### rehypePlugins
+
+[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!
+
+We apply our own (non-removable) [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin. This applies IDs to all headings (i.e. `h1 -> h6`) in your MDX files to [link to headings via anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
+
+This example applies the [`rehype-minify`](https://github.com/rehypejs/rehype-minify) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import rehypeMinifyHtml from 'rehype-minify';
+
+export default defineConfig({
+  integrations: [mdx({
+    rehypePlugins: [rehypeMinifyHtml],
+  })],
+});
+```
+
+### extendPlugins
+
+**Type:** `'markdown' | 'astroDefaults' | false`
+
+**Default:** `'markdown'`
+
+#### `markdown` (default)
+
+By default, Astro inherits all [remark](#remarkplugins) and [rehype](#rehypeplugins) plugins from [the `markdown` option in your Astro config](https://docs.astro.build/en/guides/markdown-content/#markdown-plugins). This also respects the [`markdown.extendDefaultPlugins`](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins) option to extend Astro's defaults. Any additional plugins you apply in your MDX config will be applied _after_ your configured Markdown plugins.
+
+This example applies [`remark-toc`](https://github.com/remarkjs/remark-toc) to Markdown _and_ MDX, and [`rehype-minify`](https://github.com/rehypejs/rehype-minify) to MDX alone:
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import remarkToc from 'remark-toc';
+import rehypeMinify from 'rehype-minify';
+
+export default defineConfig({
+  markdown: {
+    // Applied to .md and .mdx files
+    remarkPlugins: [remarkToc],
+  },
+  integrations: [mdx({
+    // Applied to .mdx files only
+    rehypePlugins: [rehypeMinify],
+  })],
 });
 ```
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js "extendPlugins: 'astroDefaults'"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
+import remarkToc from 'remark-toc';
 
 export default defineConfig({
   markdown: {
     remarkPlugins: [remarkPlugin1],
   },
-  integrations: [
-    mdx({
-      // Markdown config now ignored
-      extendMarkdownConfig: false,
-      // No `remarkPlugins` applied
-    })
-  ]
+  integrations: [mdx({
+    remarkPlugins: [remarkToc],
+    // Astro defaults applied
+    extendPlugins: 'astroDefaults',
+  })],
+});
+```
+
+#### `false`
+
+If you don't want to extend any plugins, set `extendPlugins` to `false`:
+
+__`astro.config.mjs`__
+
+```js "extendPlugins: false"
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import remarkToc from 'remark-toc';
+
+export default defineConfig({
+  integrations: [mdx({
+    remarkPlugins: [remarkToc],
+    // Astro defaults not applied
+    extendPlugins: false,
+  })],
 });
 ```
 
@@ -180,6 +392,30 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
+### remarkRehype
+
+Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
+
+You can use remark-rehype options in your MDX integration config file like so:
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  integrations: [mdx({
+    remarkRehype: {
+      footnoteLabel: 'Catatan kaki',
+      footnoteBackLabel: 'Kembali ke konten',
+    },
+  })],
+});
+```
+
+This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.
+
 ## Examples
 
 *   The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.

From 063cb8a75e86bd3685dec2f0990ffc9501ae42e9 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:06:08 -0600
Subject: [PATCH 06/20] update preact

---
 packages/integrations/preact/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/preact/README.md b/packages/integrations/preact/README.md
index 319aa4ae937f..9b8a5ecfd3ba 100644
--- a/packages/integrations/preact/README.md
+++ b/packages/integrations/preact/README.md
@@ -55,7 +55,7 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "preact()"
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 
@@ -86,8 +86,9 @@ You can enable `preact/compat`, Preact’s compatibility layer for rendering Rea
 
 To do so, pass an object to the Preact integration and set `compat: true`.
 
-```js
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js "compat: true"
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 

From 61137aa440843fd1270c633fef78adc61e402ca6 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:07:16 -0600
Subject: [PATCH 07/20] update prefetch

---
 packages/integrations/prefetch/README.md | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/integrations/prefetch/README.md b/packages/integrations/prefetch/README.md
index 1d4a5ff05546..ba0c2eb1a7d2 100644
--- a/packages/integrations/prefetch/README.md
+++ b/packages/integrations/prefetch/README.md
@@ -41,13 +41,14 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "prefetch()"
+import { defineConfig } from 'astro/config';
 import prefetch from '@astrojs/prefetch';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [prefetch()],
-}
+});
 ```
   
 
@@ -63,31 +64,37 @@ The Astro Prefetch integration handles which links on the site are prefetched an
   
 By default the prefetch script searches the page for any links that include a `rel="prefetch"` attribute, ex: `<a rel="prefetch" />` or `<a rel="nofollow prefetch" />`. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links. 
 
+__`astro.config.mjs`__
+
 ```js
+import { defineConfig } from 'astro/config';
 import prefetch from '@astrojs/prefetch';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [prefetch({
     // Only prefetch links with an href that begins with `/products`
     selector: "a[href^='/products']"
   })],
-}
+});
 ```
 ### config.throttle
   
 By default the prefetch script will only prefetch one link at a time. This behavior can be changed in your `astro.config.*` file to increase the limit for concurrent downloads.
 
+__`astro.config.mjs`__
+
 ```js
+import { defineConfig } from 'astro/config';
 import prefetch from '@astrojs/prefetch';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [prefetch({
     // Allow up to three links to be prefetched concurrently
     throttle: 3
   })],
-}
+});
 ```
 
 ## Troubleshooting

From 99e2f89a2a3f0b6342ca04b56a41963d86275554 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:07:57 -0600
Subject: [PATCH 08/20] update react

---
 packages/integrations/react/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/react/README.md b/packages/integrations/react/README.md
index 721d622832a2..42d524ee05bf 100644
--- a/packages/integrations/react/README.md
+++ b/packages/integrations/react/README.md
@@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "react()"
+import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [react()],
-}
+});
 ```
 
 ## Getting started

From da9071eaf1bd58b6f863b444d0e0cdc88f464c76 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:09:44 -0600
Subject: [PATCH 09/20] update sitemap

---
 packages/integrations/sitemap/README.md | 27 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/integrations/sitemap/README.md b/packages/integrations/sitemap/README.md
index dc6d2af4029f..80ed6a9c34e2 100644
--- a/packages/integrations/sitemap/README.md
+++ b/packages/integrations/sitemap/README.md
@@ -47,7 +47,7 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "sitemap()"
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -114,8 +114,11 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli-
 To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`.
 
 __`astro.config.mjs`__
+
 ```js
-...
+import { defineConfig } from 'astro/config';
+import sitemap from '@astrojs/sitemap';
+
 export default defineConfig({
   integrations: [sitemap({
     filter: ...
@@ -172,16 +175,17 @@ The maximum number entries per sitemap file. The default value is 45000. A sitem
 __`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
-export default {
+export default defineConfig({
   site: 'https://stargazers.club',
   integrations: [
     sitemap({
       entryLimit: 10000,
     }),
   ],
-}
+});
 ```
 
 ### changefreq, lastmod, and priority
@@ -196,9 +200,10 @@ Note that `changefreq` and `priority` are ignored by Google.
 __`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
-export default {
+export default defineConfig({
   site: 'https://stargazers.club',
   integrations: [
     sitemap({
@@ -207,7 +212,7 @@ export default {
       lastmod: new Date('2022-02-24'),
     }),
   ],
-}
+});
 ```
 
 ### serialize
@@ -232,9 +237,10 @@ The example below shows the ability to add sitemap specific properties individua
 __`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
-export default {
+export default defineConfig({
   site: 'https://stargazers.club',
   integrations: [
     sitemap({
@@ -251,7 +257,7 @@ export default {
       },
     }),
   ],
-}
+});
 ```
 
 ### i18n
@@ -270,9 +276,10 @@ This object has two required properties:
 __`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
-export default {
+export default defineConfig({
   site: 'https://stargazers.club',
   integrations: [
     sitemap({  
@@ -286,7 +293,7 @@ export default {
       },
     }),
   ],
-};
+});
 ```
 
 The resulting sitemap looks like this:

From a1191673bbb1a0b3a7614c08eb8508eb38b7267e Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:10:04 -0600
Subject: [PATCH 10/20] update solid

---
 packages/integrations/solid/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/integrations/solid/README.md b/packages/integrations/solid/README.md
index 8cb50f4fad29..338951bf236d 100644
--- a/packages/integrations/solid/README.md
+++ b/packages/integrations/solid/README.md
@@ -43,7 +43,7 @@ Now, apply this integration to your `astro.config.*` file using the `integration
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "solid()"
 import { defineConfig } from 'astro/config';
 import solid from '@astrojs/solid-js';
 

From 7bc9f49cf7ff4cdb2b6220516f4369a5763de134 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:10:56 -0600
Subject: [PATCH 11/20] update svelte

---
 packages/integrations/svelte/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md
index 5367c8cdbe72..7bd516838cb8 100644
--- a/packages/integrations/svelte/README.md
+++ b/packages/integrations/svelte/README.md
@@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "svelte()"
+import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [svelte()],
-}
+});
 ```
 
 ## Getting started

From f6d9871e41061140ba8f35b9921cd61ce75ccf6e Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:11:40 -0600
Subject: [PATCH 12/20] update tailwind

---
 packages/integrations/tailwind/README.md | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index 3d333a95f66a..8ec23cc69f01 100644
--- a/packages/integrations/tailwind/README.md
+++ b/packages/integrations/tailwind/README.md
@@ -52,7 +52,7 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "tailwind()"
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 
@@ -91,16 +91,18 @@ If you want to use a different Tailwind configuration file instead of the defaul
 > **Warning**
 > Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
 
+__`astro.config.mjs`__
+
 ```js
-// astro.config.mjs
+import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 
-export default {
+export default defineConfig({
   integrations: [tailwind({
     // Example: Provide a custom path to a Tailwind config file
     config: { path: './custom-config.cjs' },
   })],
-}
+});
 ```
 
 #### config.applyBaseStyles
@@ -116,15 +118,18 @@ export default {
 
 To disable this default behavior, set `config.applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
 
+__`astro.config.mjs`__
+
 ```js
-// astro.config.mjs
-export default {
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
   integrations: [tailwind({
     // Example: Disable injecting a basic `base.css` import on every page.
     // Useful if you need to define and/or import your own custom `base.css`.
     config: { applyBaseStyles: false },
   })],
-}
+});
 ```
 
 You can now [import your own `base.css` as a local stylesheet](https://docs.astro.build/en/guides/styling/#import-a-local-stylesheet).

From 421243b01cc6990f385ae364aedf1ebd4edeeb6b Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:12:04 -0600
Subject: [PATCH 13/20] update turbolinks

---
 packages/integrations/turbolinks/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/turbolinks/README.md b/packages/integrations/turbolinks/README.md
index ed974010da65..a173cd2c8e0a 100644
--- a/packages/integrations/turbolinks/README.md
+++ b/packages/integrations/turbolinks/README.md
@@ -45,15 +45,16 @@ npm install @astrojs/turbolinks
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-__astro.config.mjs__
+__`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import turbolinks from '@astrojs/turbolinks';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [turbolinks()],
-}
+});
 ```
 
 ## Getting started

From 7f94dee1951e265d1283821d430aeaaec2f75d50 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:12:55 -0600
Subject: [PATCH 14/20] update vue

---
 packages/integrations/vue/README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md
index cc1613efbfff..08c8c6780f6f 100644
--- a/packages/integrations/vue/README.md
+++ b/packages/integrations/vue/README.md
@@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
 
 __`astro.config.mjs`__
 
-```js
+```js ins={2} "vue()"
+import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [vue()],
-}
+});
 ```
 
 ## Getting started
@@ -79,9 +80,10 @@ This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compil
 __`astro.config.mjs`__
 
 ```js
+import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 
-export default {
+export default defineConfig({
   // ...
   integrations: [vue({
     template: {
@@ -92,7 +94,7 @@ export default {
     }
     // ...
   })],
-}
+});
 ```
 
 ### appEntrypoint

From 24ad46cdef6c17f1ff07be68a477602610237fb1 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:22:33 -0600
Subject: [PATCH 15/20] chore: add changeset

---
 .changeset/cuddly-donkeys-warn.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 .changeset/cuddly-donkeys-warn.md

diff --git a/.changeset/cuddly-donkeys-warn.md b/.changeset/cuddly-donkeys-warn.md
new file mode 100644
index 000000000000..43d578ee6522
--- /dev/null
+++ b/.changeset/cuddly-donkeys-warn.md
@@ -0,0 +1,17 @@
+---
+'@astrojs/alpinejs': patch
+'@astrojs/image': patch
+'@astrojs/lit': patch
+'@astrojs/mdx': patch
+'@astrojs/preact': patch
+'@astrojs/prefetch': patch
+'@astrojs/react': patch
+'@astrojs/sitemap': patch
+'@astrojs/solid-js': patch
+'@astrojs/svelte': patch
+'@astrojs/tailwind': patch
+'@astrojs/turbolinks': patch
+'@astrojs/vue': patch
+---
+
+Update READMEs for consistency

From 3961779d34d42335616cf228d0642a563159923e Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 08:39:36 -0600
Subject: [PATCH 16/20] update image

---
 packages/integrations/image/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
index bb377c8387a8..455b8430135a 100644
--- a/packages/integrations/image/README.md
+++ b/packages/integrations/image/README.md
@@ -455,12 +455,12 @@ __`astro.config.mjs`__
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
-export default {
+export default defineConfig({
   integrations: [image({
     // Example: The entrypoint for a third-party image service installed from NPM
     serviceEntryPoint: 'my-image-service/astro.js'
   })],
-}
+});
 ```
 
 ### config.logLevel
@@ -479,7 +479,7 @@ export default defineConfig({
     // default: 'info'
     logLevel: 'debug'
   })],
-})
+});
 ```
 
 ### config.cacheDir

From 4a9c64cc747be730e378165721db6adeb7261547 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 26 Jan 2023 11:26:21 -0600
Subject: [PATCH 17/20] update svelte readme

---
 packages/integrations/svelte/README.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md
index 7bd516838cb8..52d1fdc95a5c 100644
--- a/packages/integrations/svelte/README.md
+++ b/packages/integrations/svelte/README.md
@@ -95,17 +95,20 @@ Providing your own `preprocess` options **will** override the [`vitePreprocess()
 
 You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. Either of these would override the default `preprocess` setting:
 
+__`astro.config.mjs`__
+
 ```js
-// astro.config.mjs
+import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
 
-export default {
+export default defineConfig({
   integrations: [svelte({ preprocess: [] })],
-};
+});
 ```
 
+__`svelte.config.js`__
+
 ```js
-// svelte.config.js
 export default {
   preprocess: [],
 };
@@ -117,8 +120,9 @@ export default {
 
 If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file so that the Svelte IDE extension can correctly parse the Svelte files.
 
+__`svelte.config.js`__
+
 ```js
-// svelte.config.js
 import { vitePreprocess } from '@astrojs/svelte';
 
 export default {

From e0d05a13eb021ab1f675f527e18d9ebba1be0547 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Tue, 31 Jan 2023 15:28:03 +0100
Subject: [PATCH 18/20] Revert "update mdx"

This reverts commit c4368a703b181722301690cd54531c9a02e119c4.
---
 packages/integrations/mdx/README.md | 304 ++++------------------------
 1 file changed, 34 insertions(+), 270 deletions(-)

diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md
index 30f3e4c545d1..e3830272a04a 100644
--- a/packages/integrations/mdx/README.md
+++ b/packages/integrations/mdx/README.md
@@ -42,9 +42,9 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-__`astro.config.mjs`__
+**`astro.config.mjs`**
 
-```js ins={2} "mdx()"
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -92,9 +92,8 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-__`astro.config.mjs`__
-
-```js
+```ts
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -103,47 +102,19 @@ import rehypeMinifyHtml from 'rehype-minify-html';
 export default defineConfig({
   integrations: [
     mdx({
-      remarkPlugins: [exampleRemarkPlugin],
-    }),
-  ],
-});
-```
-
-…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
-
-### Layouts
-Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so:
-
-```yaml
----
-layout: '../layouts/BaseLayout.astro' 
-title: 'My Blog Post'
----
-```
-
-Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots). See [layout props](#layout-props) for a complete list of props available.
-
-```astro title="src/layouts/BaseLayout.astro"
----
-const { frontmatter, url } = Astro.props;
----
-<html>
-  <head>
-    <meta rel="canonical" href={new URL(url, Astro.site).pathname}>
-    <title>{frontmatter.title}</title>
-  </head>
-  <body>
-    <h1>{frontmatter.title}</h1>
-    <!-- Rendered MDX will be passed into the default slot. -->
-    <slot />
-  </body>
-</html>
+      syntaxHighlight: 'shiki',
+      shikiConfig: { theme: 'dracula' },
+      remarkPlugins: [remarkToc],
+      rehypePlugins: [rehypeMinifyHtml],
+      remarkRehype: { footnoteLabel: 'Footnotes' },
+      gfm: false,
+    })
+  ]
+})
 ```
 
-You can set a layout’s [`Props` type](/en/guides/typescript/#component-props) with the `MDXLayoutProps` helper.
-
-:::note
-`MDXLayoutProps` is the same as the `MarkdownLayoutProps` utility type with `rawContent()` and `compiledContent()` removed (since these are not available for `.mdx` files). Feel free to **use `MarkdownLayoutProps` instead** when sharing a layout across `.md` and `.mdx` files.
+:::caution
+MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
 :::
 
 📚 See the [Markdown Options reference](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) for a complete list of options.
@@ -157,80 +128,8 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-```html
-<blockquote>
-  <p>A blockquote with <em>some</em> emphasis.</p>
-</blockquote>
-```
-
-But what if you want to specify your own markup for these blockquotes? In the above example, you could create a custom `<Blockquote />` component (in any language) that either has a `<slot />` component or accepts a `children` prop.
-
-```astro title="src/components/Blockquote.astro"
----
-const props = Astro.props;
----
-
-<blockquote {...props} class="bg-blue-50 p-4">
-  <span class="text-4xl text-blue-600 mb-2">“</span>
-  <slot />
-</blockquote>
-```
-
-Then in the MDX file you import the component and export it to the `components` export.
-
-```mdx title="src/pages/posts/post-1.mdx" {2}
-import Blockquote from '../components/Blockquote.astro';
-export const components = { blockquote: Blockquote };
-```
-
-Now, writing the standard Markdown blockquote syntax (`>`) will use your custom `<Blockquote />` component instead. No need to use a component in Markdown, or write a remark/rehype plugin! Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list of HTML elements that can be overwritten as custom components.
-
-#### Custom components with imported `mdx`
-
-When rendering imported MDX content, custom components can be passed via the `components` prop.
-
-Note: An MDX file's exported components will _not_ be used unless you manually import and pass them via the `components` property. See the example below:
-
-```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
----
-import { Content, components } from '../content.mdx';
-import Heading from '../Heading.astro';
----
-
-<Content components={{...components, h1: Heading }} />
-```
-
-### Syntax highlighting
-
-The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
-
-We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
-
-__`astro.config.mjs`__
-
-```js
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  markdown: {
-    shikiConfig: {
-      theme: 'dracula',
-    },
-  },
-  integrations: [mdx()],
-});
-```
-
-Visit [our Shiki configuration docs](https://docs.astro.build/en/guides/markdown-content/#shiki-configuration) for more on using Shiki with Astro.
-
-#### Switch to Prism
-
-You can also use the [Prism](https://prismjs.com/) syntax highlighter by setting `markdown.syntaxHighlight` to `'prism'` in your `astro.config` like so:
-
-__`astro.config.mjs`__
-
-```js
+```ts
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -240,149 +139,38 @@ export default defineConfig({
     remarkPlugins: [remarkPlugin1],
     gfm: true,
   },
-  integrations: [mdx()],
-});
-```
-
-This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro.
-
-#### Switch to a custom syntax highlighter
-
-You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash):
-
-__`astro.config.mjs`__
-
-```js
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import shikiTwoslash from 'remark-shiki-twoslash';
-
-export default defineConfig({
-  markdown: {
-    syntaxHighlight: false,
-  },
   integrations: [
     mdx({
-      remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }],
-    })
-  ],
-});
-```
-
-## Configuration
-
-### remarkPlugins
+      // `syntaxHighlight` inherited from Markdown
 
-[Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) allow you to extend your Markdown with new capabilities. This includes [auto-generating a table of contents](https://github.com/remarkjs/remark-toc), [applying accessible emoji labels](https://github.com/florianeckerstorfer/remark-a11y-emoji), and more. We encourage you to browse [awesome-remark](https://github.com/remarkjs/awesome-remark) for a full curated list!
-
-This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
-
-__`astro.config.mjs`__
-
-```js
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import remarkToc from 'remark-toc';
-
-export default defineConfig({
-  integrations: [mdx({
-    remarkPlugins: [remarkToc],
-  })],
-});
-```
-
-### rehypePlugins
-
-[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!
-
-We apply our own (non-removable) [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin. This applies IDs to all headings (i.e. `h1 -> h6`) in your MDX files to [link to headings via anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
-
-This example applies the [`rehype-minify`](https://github.com/rehypejs/rehype-minify) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
-
-__`astro.config.mjs`__
-
-```js
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import rehypeMinifyHtml from 'rehype-minify';
-
-export default defineConfig({
-  integrations: [mdx({
-    rehypePlugins: [rehypeMinifyHtml],
-  })],
-});
-```
-
-### extendPlugins
-
-**Type:** `'markdown' | 'astroDefaults' | false`
-
-**Default:** `'markdown'`
-
-#### `markdown` (default)
-
-By default, Astro inherits all [remark](#remarkplugins) and [rehype](#rehypeplugins) plugins from [the `markdown` option in your Astro config](https://docs.astro.build/en/guides/markdown-content/#markdown-plugins). This also respects the [`markdown.extendDefaultPlugins`](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins) option to extend Astro's defaults. Any additional plugins you apply in your MDX config will be applied _after_ your configured Markdown plugins.
-
-This example applies [`remark-toc`](https://github.com/remarkjs/remark-toc) to Markdown _and_ MDX, and [`rehype-minify`](https://github.com/rehypejs/rehype-minify) to MDX alone:
-
-__`astro.config.mjs`__
-
-```js
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import remarkToc from 'remark-toc';
-import rehypeMinify from 'rehype-minify';
-
-export default defineConfig({
-  markdown: {
-    // Applied to .md and .mdx files
-    remarkPlugins: [remarkToc],
-  },
-  integrations: [mdx({
-    // Applied to .mdx files only
-    rehypePlugins: [rehypeMinify],
-  })],
+      // Markdown `remarkPlugins` ignored,
+      // only `remarkPlugin2` applied.
+      remarkPlugins: [remarkPlugin2],
+      // `gfm` overridden to `false`
+      gfm: false,
+    })
+  ]
 });
 ```
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-__`astro.config.mjs`__
-
-```js "extendPlugins: 'astroDefaults'"
+```ts
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
-import remarkToc from 'remark-toc';
 
 export default defineConfig({
   markdown: {
     remarkPlugins: [remarkPlugin1],
   },
-  integrations: [mdx({
-    remarkPlugins: [remarkToc],
-    // Astro defaults applied
-    extendPlugins: 'astroDefaults',
-  })],
-});
-```
-
-#### `false`
-
-If you don't want to extend any plugins, set `extendPlugins` to `false`:
-
-__`astro.config.mjs`__
-
-```js "extendPlugins: false"
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import remarkToc from 'remark-toc';
-
-export default defineConfig({
-  integrations: [mdx({
-    remarkPlugins: [remarkToc],
-    // Astro defaults not applied
-    extendPlugins: false,
-  })],
+  integrations: [
+    mdx({
+      // Markdown config now ignored
+      extendMarkdownConfig: false,
+      // No `remarkPlugins` applied
+    })
+  ]
 });
 ```
 
@@ -392,30 +180,6 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
-### remarkRehype
-
-Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
-
-You can use remark-rehype options in your MDX integration config file like so:
-
-__`astro.config.mjs`__
-
-```js
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  integrations: [mdx({
-    remarkRehype: {
-      footnoteLabel: 'Catatan kaki',
-      footnoteBackLabel: 'Kembali ke konten',
-    },
-  })],
-});
-```
-
-This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.
-
 ## Examples
 
 *   The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.

From 5945693fb83ce0fa41fefaccd41db86b87bc0aea Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Tue, 31 Jan 2023 15:33:04 +0100
Subject: [PATCH 19/20] Update cuddly-donkeys-warn.md

---
 .changeset/cuddly-donkeys-warn.md | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/.changeset/cuddly-donkeys-warn.md b/.changeset/cuddly-donkeys-warn.md
index 43d578ee6522..b3980fb2d478 100644
--- a/.changeset/cuddly-donkeys-warn.md
+++ b/.changeset/cuddly-donkeys-warn.md
@@ -1,17 +1,5 @@
 ---
-'@astrojs/alpinejs': patch
-'@astrojs/image': patch
-'@astrojs/lit': patch
 '@astrojs/mdx': patch
-'@astrojs/preact': patch
-'@astrojs/prefetch': patch
-'@astrojs/react': patch
-'@astrojs/sitemap': patch
-'@astrojs/solid-js': patch
-'@astrojs/svelte': patch
-'@astrojs/tailwind': patch
-'@astrojs/turbolinks': patch
-'@astrojs/vue': patch
 ---
 
-Update READMEs for consistency
+Update MDX README

From e20bd5794f20519c794a1c809c631b4d82b4a7ac Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Tue, 31 Jan 2023 15:36:15 +0100
Subject: [PATCH 20/20] Reinstate code sample changes

---
 packages/integrations/mdx/README.md | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md
index e3830272a04a..53c3c9be95b9 100644
--- a/packages/integrations/mdx/README.md
+++ b/packages/integrations/mdx/README.md
@@ -42,9 +42,9 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+__`astro.config.mjs`__
 
-```js
+```js ins={2} "mdx()"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -92,8 +92,9 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -128,8 +129,9 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -155,8 +157,9 @@ export default defineConfig({
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';