From e9ca58d263eb9bf38ebf778b492f1646eae62c8c Mon Sep 17 00:00:00 2001
From: delucis <delucis@users.noreply.github.com>
Date: Sun, 27 Aug 2023 12:03:55 +0000
Subject: [PATCH] ci: update integration docs

---
 .../guides/integrations-guide/cloudflare.mdx  | 30 +++++++++++-----
 .../en/guides/integrations-guide/markdoc.mdx  | 30 ++++++++++++++++
 .../en/guides/integrations-guide/netlify.mdx  | 33 ++++-------------
 .../en/guides/integrations-guide/node.mdx     |  2 +-
 .../en/guides/integrations-guide/preact.mdx   | 35 +++++++++++++++++++
 .../en/guides/integrations-guide/react.mdx    | 33 +++++++++++++++++
 .../en/guides/integrations-guide/solid-js.mdx | 35 +++++++++++++++++++
 .../en/guides/integrations-guide/vercel.mdx   | 34 ++++++------------
 8 files changed, 174 insertions(+), 58 deletions(-)

diff --git a/src/content/docs/en/guides/integrations-guide/cloudflare.mdx b/src/content/docs/en/guides/integrations-guide/cloudflare.mdx
index a000c5203b6cb..a1aa2003c87c0 100644
--- a/src/content/docs/en/guides/integrations-guide/cloudflare.mdx
+++ b/src/content/docs/en/guides/integrations-guide/cloudflare.mdx
@@ -65,23 +65,37 @@ export default defineConfig({
 
 default `"advanced"`
 
-Cloudflare Pages has 2 different modes for deploying functions, `advanced` mode which picks up the `_worker.js` in `dist`, or a directory mode where pages will compile the worker out of a functions folder in the project root.
+Cloudflare Pages has 2 different modes for deploying functions, `advanced` mode which picks up the `_worker.js` in `dist`, or a directory mode where pages will compile the worker out of a functions folder in the project root. For most projects the adapter default of `advanced` will be sufficient; the `dist` folder will contain your compiled project.
 
-For most projects the adapter default of `advanced` will be sufficient; the `dist` folder will contain your compiled project. Switching to directory mode allows you to use [pages plugins](https://developers.cloudflare.com/pages/platform/functions/plugins/) such as [Sentry](https://developers.cloudflare.com/pages/platform/functions/plugins/sentry/) or write custom code to enable logging.
+#### `mode:directory`
 
-In directory mode, the adapter will compile the client side part of your app the same way by default, but moves the worker script into a `functions` folder in the project root. In this case, the adapter will only ever place a `[[path]].js` in that folder, allowing you to add additional plugins and pages middleware which can be checked into version control.
-
-With the build configuration `split: true`, the adapter instead compiles a separate bundle for each page. This option requires some manual maintenance of the `functions` folder. Files emitted by Astro will overwrite existing `functions` files with identical names, so you must choose unique file names for each file you manually add. Additionally, the adapter will never empty the `functions` folder of outdated files, so you must clean up the folder manually when you remove pages.
-
-Note that this adapter does not support using [Cloudflare Pages Middleware](https://developers.cloudflare.com/pages/platform/functions/middleware/). Astro will bundle the [Astro middleware](/en/guides/middleware/) into each page.
+Switching to directory mode allows you to use [pages plugins](https://developers.cloudflare.com/pages/platform/functions/plugins/) such as [Sentry](https://developers.cloudflare.com/pages/platform/functions/plugins/sentry/) or write custom code to enable logging.
 
 ```ts
-// directory mode
+// astro.config.mjs
 export default defineConfig({
   adapter: cloudflare({ mode: 'directory' }),
 });
 ```
 
+In `directory` mode, the adapter will compile the client-side part of your app the same way as in `advanced` mode by default, but moves the worker script into a `functions` folder in the project root. In this case, the adapter will only ever place a `[[path]].js` in that folder, allowing you to add additional plugins and pages middleware which can be checked into version control.
+
+To instead compile a separate bundle for each page, set the `functionPerPath` option in your Cloudflare adapter config. This option requires some manual maintenance of the `functions` folder. Files emitted by Astro will overwrite existing `functions` files with identical names, so you must choose unique file names for each file you manually add. Additionally, the adapter will never empty the `functions` folder of outdated files, so you must clean up the folder manually when you remove pages.
+
+```diff
+import {defineConfig} from "astro/config";
+import cloudflare from '@astrojs/cloudflare';
+
+export default defineConfig({
+     adapter: cloudflare({
+        mode: 'directory',
++       functionPerRoute: true
+    })
+})
+```
+
+Note that this adapter does not support using [Cloudflare Pages Middleware](https://developers.cloudflare.com/pages/platform/functions/middleware/). Astro will bundle the [Astro middleware](/en/guides/middleware/) into each page.
+
 ## Enabling Preview
 
 In order for preview to work you must install `wrangler`
diff --git a/src/content/docs/en/guides/integrations-guide/markdoc.mdx b/src/content/docs/en/guides/integrations-guide/markdoc.mdx
index 8eab45a82a823..0358456dfeb63 100644
--- a/src/content/docs/en/guides/integrations-guide/markdoc.mdx
+++ b/src/content/docs/en/guides/integrations-guide/markdoc.mdx
@@ -356,6 +356,36 @@ Now, you can call this function from any Markdoc content entry:
 
 📚 [See the Markdoc documentation](https://markdoc.dev/docs/functions#creating-a-custom-function) for more on using variables or functions in your content.
 
+### Markdoc Language Server
+
+If you are using VS Code, there is an official [Markdoc language extension](https://marketplace.visualstudio.com/items?itemName=Stripe.markdoc-language-support) that includes syntax highlighting and autocomplete for configured tags. [See the language server on GitHub](https://github.com/markdoc/language-server.git) for more information.
+
+To set up the extension, create a `markdoc.config.json` file into the project root with following content:
+
+```json
+[
+  {
+    "id": "my-site",
+    "path": "src/content",
+    "schema": {
+      "path": "markdoc.config.mjs",
+      "type": "esm",
+      "property": "default",
+      "watch": true
+    }
+  }
+]
+```
+
+The `schema` property contains all information to configure the language server for Astro content collections. It accepts following properties:
+
+*   `path`: The path to the configuration file.
+*   `type`: The type of module your configuration file uses (`esm` allows `import` syntax).
+*   `property`: The exported property name that contains the configuration object.
+*   `watch`: Tell the server to watch for changes in the configuration.
+
+The top-level `path` property tells the server where content is located. Since Markdoc is specific to content collections, you can use `src/content`.
+
 ### Pass Markdoc variables
 
 You may need to pass [variables][markdoc-variables] to your content. This is useful when passing SSR parameters like A/B tests.
diff --git a/src/content/docs/en/guides/integrations-guide/netlify.mdx b/src/content/docs/en/guides/integrations-guide/netlify.mdx
index cac5f43d478d8..8cb81749ffee8 100644
--- a/src/content/docs/en/guides/integrations-guide/netlify.mdx
+++ b/src/content/docs/en/guides/integrations-guide/netlify.mdx
@@ -69,28 +69,11 @@ If you prefer to install the adapter manually instead, complete the following tw
     });
     ```
 
-### Edge Functions
-
-Netlify has two serverless platforms, [Netlify Functions](https://docs.netlify.com/functions/overview/) and [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/). With Edge Functions your code is distributed closer to your users, lowering latency.
-
-To deploy with Edge Functions, use `netlify/edge-functions` in the Astro config file instead of `netlify/functions`.
-
-```js ins={3}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import netlify from '@astrojs/netlify/edge-functions';
-
-export default defineConfig({
-  output: 'server',
-  adapter: netlify(),
-});
-```
-
 ### Run middleware in Edge Functions
 
 When deploying to Netlify Functions, you can choose to use an Edge Function to run your Astro middleware.
 
-To enable this, set the `build.excludeMiddleware` Astro config option to `true`:
+To enable this, set the `edgeMiddleware` config option to `true`:
 
 ```js ins={9}
 // astro.config.mjs
@@ -99,10 +82,9 @@ import netlify from '@astrojs/netlify/functions';
 
 export default defineConfig({
   output: 'server',
-  adapter: netlify(),
-  build: {
-    excludeMiddleware: true,
-  },
+  adapter: netlify({
+    edgeMiddleware: true,
+  }),
 });
 ```
 
@@ -148,10 +130,9 @@ import netlify from '@astrojs/netlify/functions';
 
 export default defineConfig({
   output: 'server',
-  adapter: netlify(),
-  build: {
-    split: true,
-  },
+  adapter: netlify({
+    functionPerRoute: true,
+  }),
 });
 ```
 
diff --git a/src/content/docs/en/guides/integrations-guide/node.mdx b/src/content/docs/en/guides/integrations-guide/node.mdx
index 6390c8d9fbeee..4708c89af5163 100644
--- a/src/content/docs/en/guides/integrations-guide/node.mdx
+++ b/src/content/docs/en/guides/integrations-guide/node.mdx
@@ -174,7 +174,7 @@ For standalone mode the server handles file servering in addition to the page an
 You can override the host and port the standalone server runs on by passing them as environment variables at runtime:
 
 ```shell
-HOST=0.0.0.0 PORT=3000 node ./dist/server/entry.mjs
+HOST=0.0.0.0 PORT=4321 node ./dist/server/entry.mjs
 ```
 
 #### HTTPS
diff --git a/src/content/docs/en/guides/integrations-guide/preact.mdx b/src/content/docs/en/guides/integrations-guide/preact.mdx
index 4aa862623bcf9..3d02d9e0f22cf 100644
--- a/src/content/docs/en/guides/integrations-guide/preact.mdx
+++ b/src/content/docs/en/guides/integrations-guide/preact.mdx
@@ -128,6 +128,41 @@ Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and
 Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
 :::
 
+## Options
+
+### Combining multiple JSX frameworks
+
+When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed.
+
+Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths.
+
+We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
+
+```js
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+
+export default defineConfig({
+  // Enable many frameworks to support all different kinds of components.
+  // No `include` is needed if you are only using a single JSX framework!
+  integrations: [
+    preact({
+      include: ['**/preact/*'],
+    }),
+    react({
+      include: ['**/react/*'],
+    }),
+    solid({
+      include: ['**/solid/*'],
+    }),
+  ],
+});
+```
+
 ## Examples
 
 *   The [Astro Preact example](https://github.com/withastro/astro/tree/latest/examples/framework-preact) shows how to use an interactive Preact component in an Astro project.
diff --git a/src/content/docs/en/guides/integrations-guide/react.mdx b/src/content/docs/en/guides/integrations-guide/react.mdx
index 0fdf9257fbcfe..11f07bb6446fc 100644
--- a/src/content/docs/en/guides/integrations-guide/react.mdx
+++ b/src/content/docs/en/guides/integrations-guide/react.mdx
@@ -84,6 +84,39 @@ To use your first React component in Astro, head to our [UI framework documentat
 
 ## Options
 
+### Combining multiple JSX frameworks
+
+When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed.
+
+Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths.
+
+We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
+
+```js
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+
+export default defineConfig({
+  // Enable many frameworks to support all different kinds of components.
+  // No `include` is needed if you are only using a single JSX framework!
+  integrations: [
+    preact({
+      include: ['**/preact/*'],
+    }),
+    react({
+      include: ['**/react/*'],
+    }),
+    solid({
+      include: ['**/solid/*'],
+    }),
+  ],
+});
+```
+
 ### Children parsing
 
 Children passed into a React component from an Astro component are parsed as plain strings, not React nodes.
diff --git a/src/content/docs/en/guides/integrations-guide/solid-js.mdx b/src/content/docs/en/guides/integrations-guide/solid-js.mdx
index 68c766632aea8..b4d9baf047a2a 100644
--- a/src/content/docs/en/guides/integrations-guide/solid-js.mdx
+++ b/src/content/docs/en/guides/integrations-guide/solid-js.mdx
@@ -82,6 +82,41 @@ To use your first SolidJS component in Astro, head to our [UI framework document
 *   💧 client-side hydration options, and
 *   🤝 opportunities to mix and nest frameworks together
 
+## Options
+
+### Combining multiple JSX frameworks
+
+When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed.
+
+Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths.
+
+We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
+
+```js
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+
+export default defineConfig({
+  // Enable many frameworks to support all different kinds of components.
+  // No `include` is needed if you are only using a single JSX framework!
+  integrations: [
+    preact({
+      include: ['**/preact/*'],
+    }),
+    react({
+      include: ['**/react/*'],
+    }),
+    solid({
+      include: ['**/solid/*'],
+    }),
+  ],
+});
+```
+
 ## Troubleshooting
 
 For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
diff --git a/src/content/docs/en/guides/integrations-guide/vercel.mdx b/src/content/docs/en/guides/integrations-guide/vercel.mdx
index 2e3c88f528f71..bd2b68f2edb7e 100644
--- a/src/content/docs/en/guides/integrations-guide/vercel.mdx
+++ b/src/content/docs/en/guides/integrations-guide/vercel.mdx
@@ -73,18 +73,12 @@ If you prefer to install the adapter manually instead, complete the following tw
 
 You can deploy to different targets:
 
-*   `edge`: SSR inside an [Edge function](https://vercel.com/docs/concepts/functions/edge-functions).
 *   `serverless`: SSR inside a [Node.js function](https://vercel.com/docs/concepts/functions/serverless-functions).
 *   `static`: generates a static website following Vercel's output formats, redirects, etc.
 
-:::note
-deploying to the Edge has [its limitations](https://vercel.com/docs/concepts/functions/edge-functions#known-limitations). An edge function can't be more than 1 MB in size and they don't support native Node.js APIs, among others.
-:::
-
 You can change where to target by changing the import:
 
 ```js
-import vercel from '@astrojs/vercel/edge';
 import vercel from '@astrojs/vercel/serverless';
 import vercel from '@astrojs/vercel/static';
 ```
@@ -107,7 +101,7 @@ To configure this adapter, pass an object to the `vercel()` function call in `as
 ### analytics
 
 **Type:** `boolean`<br/>
-**Available for:** Serverless, Edge, Static<br/>
+**Available for:** Serverless, Static<br/>
 **Added in:** `@astrojs/vercel@3.1.0`
 
 You can enable [Vercel Analytics](https://vercel.com/analytics) (including Web Vitals and Audiences) by setting `analytics: true`. This will inject Vercel’s tracking scripts into all your pages.
@@ -128,7 +122,7 @@ export default defineConfig({
 ### imagesConfig
 
 **Type:** `VercelImageConfig`<br/>
-**Available for:** Edge, Serverless, Static
+**Available for:** Serverless, Static
 **Added in:** `@astrojs/vercel@3.3.0`
 
 Configuration options for [Vercel's Image Optimization API](https://vercel.com/docs/concepts/image-optimization). See [Vercel's image configuration documentation](https://vercel.com/docs/build-output-api/v3/configuration#images) for a complete list of supported parameters.
@@ -151,7 +145,7 @@ export default defineConfig({
 ### imageService
 
 **Type:** `boolean`<br/>
-**Available for:** Edge, Serverless, Static
+**Available for:** Serverless, Static
 **Added in:** `@astrojs/vercel@3.3.0`
 
 When enabled, an [Image Service](/en/reference/image-service-reference/) powered by the Vercel Image Optimization API will be automatically configured and used in production. In development, a built-in Squoosh-based service will be used instead.
@@ -192,7 +186,7 @@ import astroLogo from '../assets/logo.png';
 ### includeFiles
 
 **Type:** `string[]`<br/>
-**Available for:** Edge, Serverless
+**Available for:** Serverless
 
 Use this property to force files to be bundled with your function. This is helpful when you notice missing files.
 
@@ -209,10 +203,6 @@ export default defineConfig({
 });
 ```
 
-:::note
-When building for the Edge, all the dependencies get bundled in a single file to save space. **No extra file will be bundled**. So, if you *need* some file inside the function, you have to specify it in `includeFiles`.
-:::
-
 ### excludeFiles
 
 **Type:** `string[]`<br/>
@@ -244,10 +234,9 @@ import vercel from '@astrojs/vercel/serverless';
 
 export default defineConfig({
   output: 'server',
-  adapter: vercel(),
-  build: {
-    split: true,
-  },
+  adapter: vercel({
+    functionPerRoute: true,
+  }),
 });
 ```
 
@@ -286,7 +275,7 @@ You can use Vercel Edge middleware to intercept a request and redirect before se
 
 The `@astrojs/vercel/serverless` adapter can automatically create the Vercel Edge middleware from an Astro middleware in your code base.
 
-This is an opt-in feature, and the `build.excludeMiddleware` option needs to be set to `true`:
+This is an opt-in feature, and the `edgeMiddleware` option needs to be set to `true`:
 
 ```js
 // astro.config.mjs
@@ -294,10 +283,9 @@ import { defineConfig } from 'astro/config';
 import vercel from '@astrojs/vercel';
 export default defineConfig({
   output: 'server',
-  adapter: vercel(),
-  build: {
-    excludeMiddleware: true,
-  },
+  adapter: vercel({
+    edgeMiddleware: true,
+  }),
 });
 ```