From 1c7eef308e808aa5ed4662b53e67ec8d1b814d1f Mon Sep 17 00:00:00 2001
From: Subha Chanda <subhachanda88@gmail.com>
Date: Fri, 27 Jan 2023 00:33:00 +0530
Subject: [PATCH] Updated according to new configuration (#5478)

* 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.

* update alpine

* update image

* update lit

* update mdx

* update preact

* update prefetch

* update react

* update sitemap

* update solid

* update svelte

* update tailwind

* update turbolinks

* update vue

* chore: add changeset

* update image

* update svelte readme

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
---
 .changeset/cuddly-donkeys-warn.md          |  17 ++
 packages/integrations/alpinejs/README.md   |   4 +-
 packages/integrations/image/README.md      |  38 ++-
 packages/integrations/lit/README.md        |   7 +-
 packages/integrations/mdx/README.md        | 304 ++++++++++++++++++---
 packages/integrations/preact/README.md     |   7 +-
 packages/integrations/prefetch/README.md   |  21 +-
 packages/integrations/react/README.md      |   7 +-
 packages/integrations/sitemap/README.md    |  27 +-
 packages/integrations/solid/README.md      |  11 +-
 packages/integrations/svelte/README.md     |  21 +-
 packages/integrations/tailwind/README.md   |  19 +-
 packages/integrations/turbolinks/README.md |   7 +-
 packages/integrations/vue/README.md        |  12 +-
 14 files changed, 399 insertions(+), 103 deletions(-)
 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
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';
 
diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
index 748fe2b1872a..455b8430135a 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,33 +449,37 @@ 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 {
+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
 
 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
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
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.
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';
 
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
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
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:
diff --git a/packages/integrations/solid/README.md b/packages/integrations/solid/README.md
index 89579fb4ab70..338951bf236d 100644
--- a/packages/integrations/solid/README.md
+++ b/packages/integrations/solid/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} "solid()"
+import { defineConfig } from 'astro/config';
 import solid from '@astrojs/solid-js';
 
-export default {
-  // ...
-  integrations: [solid()],
-}
+export default defineConfig({
+   // ...
+   integrations: [solid()],
+});
 ```
 
 ## Getting started
diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md
index 5367c8cdbe72..52d1fdc95a5c 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
@@ -94,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: [],
 };
@@ -116,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 {
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).
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
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