Update integrations to MDX syntax

src/content/docs/en/guides/integrations-guide/alpinejs.mdx

@@ -6,6 +6,7 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: renderer
 i18nReady: true
 ---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 This **[Astro integration][astro-integration]** adds [Alpine.js](https://alpinejs.dev/) to your project so that you can use Alpine.js anywhere on your page.
 
@@ -15,42 +16,77 @@ This **[Astro integration][astro-integration]** adds [Alpine.js](https://alpinej
 
 The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
 
-```sh
-# Using NPM
-npx astro add alpinejs
-# Using Yarn
-yarn astro add alpinejs
-# Using PNPM
-pnpm astro add alpinejs
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
+<PackageManagerTabs>
+  <Fragment slot="npm">
+    ```sh
+    npx astro add alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="pnpm">
+    ```sh
+    pnpm astro add alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="yarn">
+    ```sh
+    yarn astro add alpinejs
+    ```
+  </Fragment>
+</PackageManagerTabs>
+
+Try the manual installation steps below, and if you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues).
 
 ### Manual Install
 
 First, install the `@astrojs/alpinejs` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
 
-```sh
-npm install @astrojs/alpinejs
-```
+<PackageManagerTabs>
+  <Fragment slot="npm">
+    ```sh
+    npm install @astrojs/alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="pnpm">
+    ```sh
+    pnpm add @astrojs/alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="yarn">
+    ```sh
+    yarn add @astrojs/alpinejs
+    ```
+  </Fragment>
+</PackageManagerTabs>
 
 Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
 
-```sh
-npm install alpinejs @types/alpinejs
-```
+<PackageManagerTabs>
+  <Fragment slot="npm">
+    ```sh
+    npm install alpinejs @types/alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="pnpm">
+    ```sh
+    pnpm add alpinejs @types/alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="yarn">
+    ```sh
+    yarn add alpinejs @types/alpinejs
+    ```
+  </Fragment>
+</PackageManagerTabs>
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```diff lang="js" "alpine()"
-  // astro.config.mjs
+```js ins="alpine()" title="astro.config.mjs" ins={2}
   import { defineConfig } from 'astro/config';
-+ import alpine from '@astrojs/alpinejs';
+  import alpine from '@astrojs/alpinejs';
 
   export default defineConfig({
     // ...
     integrations: [alpine()],
-    //             ^^^^^^^^
   });
 ```
 
@@ -66,9 +102,8 @@ The Alpine.js integration does not give you control over how the script is loade
 
 **It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag:
 
-```astro
+```astro title="src/pages/index.astro"
 ---
-// src/pages/index.astro
 ---
 
 <!-- Example: Load AlpineJS on a single page. -->
@@ -91,20 +126,6 @@ The Alpine.js integration does not support any custom configuration at this time
 
 * The [Astro Alpine.js example](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) shows how to use Alpine.js in an Astro project.
 
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
-
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-## Contributing
-
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
-
-## Changelog
-
-See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/CHANGELOG.md) for a history of changes to this integration.
-
 [astro-integration]: /en/guides/integrations-guide/
 
 [astro-ui-frameworks]: /en/core-concepts/framework-components/#using-framework-components