docs(js): Use split layout in Remix quick start guide (#17286)

<!-- Use this checklist to make sure your PR is ready for merge. You may
delete any sections you don't need. -->

## DESCRIBE YOUR PR
This branch updates the following quick start guides to use the new
split layout:

- Remix wizard
- Remix manual setup
- Remix on Cloudflare

I also created new include files for the split layout, which I'll clean
up once all guides are updated :)

Closes: #17263


## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [x] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

## LEGAL BOILERPLATE

<!-- Sentry employees and contractors can delete or ignore this section.
-->

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

## EXTRA RESOURCES

- [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)

Author: inventarSarah

docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx

@@ -8,7 +8,9 @@ description: "Learn how to instrument your Remix app on Cloudflare Workers and P
   platform="javascript.remix"
 />
 
-## Step 1: Install
+<StepConnector selector="h2" showNumbers={true}>
+
+## Install
 
 Choose the features you want to configure, and this guide will show you how:
 
@@ -26,8 +28,15 @@ Choose the features you want to configure, and this guide will show you how:
 
 ### Install the Sentry SDK
 
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
 Run the command for your preferred package manager to add the Sentry SDK to your application:
 
+</SplitSectionText>
+<SplitSectionCode>
+
 ```bash {tabTitle:npm}
 npm install @sentry/remix --save
 ```
@@ -40,7 +49,13 @@ yarn add @sentry/remix
 pnpm add @sentry/remix
 ```
 
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
+
 <PlatformContent
   includePath="getting-started-complete"
   platform="javascript.remix"
 />
+
+</StepConnector>

docs/platforms/javascript/guides/remix/index.mdx

@@ -11,15 +11,28 @@ categories:
 
 <PlatformContent includePath="getting-started-prerequisites" />
 
-## Step 1: Install
+<StepConnector selector="h2" showNumbers={true}>
+
+## Install
+
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
 
 To install Sentry using the installation wizard, run the following command within your project:
 
+The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+
+</SplitSectionText>
+<SplitSectionCode>
+
 ```bash
 npx @sentry/wizard@latest -i remix
 ```
 
-The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
 <Include name="quick-start-features-expandable" />
 
@@ -36,10 +49,17 @@ This guide assumes that you enable all features and allow the wizard to create a
 
 </Expandable>
 
-## Step 2: Server-Side Performance Monitoring
+## Configure Server-Side Performance Monitoring
+
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
 
 To capture performance data on the server side, wrap your Remix root component (`root.tsx`) with `withSentry`:
 
+</SplitSectionText>
+<SplitSectionCode>
+
 ```tsx {filename: root.tsx}
 import {
   Links,
@@ -72,11 +92,15 @@ function App() {
 export default withSentry(App);
 ```
 
-## Step 3: Avoid Ad Blockers With Tunneling (Optional)
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
-<PlatformContent includePath="getting-started-tunneling" />
+## Avoid Ad Blockers With Tunneling (Optional)
 
-## Step 4: Verify Your Setup
+<PlatformContent includePath="getting-started-tunneling-splitlayout" />
+
+## Verify Your Setup
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard:
 
@@ -115,3 +139,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</StepConnector>

docs/platforms/javascript/guides/remix/manual-setup.mdx

@@ -14,7 +14,9 @@ description: "Learn how to manually set up Sentry in your Remix app and capture
   platform="javascript.remix"
 />
 
-## Step 1: Install
+<StepConnector selector="h2" showNumbers={true}>
+
+## Install
 
 Choose the features you want to configure, and this guide will show you how:
 
@@ -33,8 +35,15 @@ Choose the features you want to configure, and this guide will show you how:
 
 ### Install the Sentry SDK
 
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
 Run the command for your preferred package manager to add the Sentry SDK to your application:
 
+</SplitSectionText>
+<SplitSectionCode>
+
 <OnboardingOption optionId="profiling" hideForThisOption>
 
 ```bash {tabTitle:npm}
@@ -66,4 +75,10 @@ pnpm add @sentry/remix @sentry/profiling-node
 
 </OnboardingOption>
 
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
+
 <PlatformContent includePath="getting-started-complete" />
+
+</StepConnector>

includes/vite-loadenv-hint-splitlayout.mdx

@@ -0,0 +1,35 @@
+<Expandable title="Using environment variables in Vite configs">
+
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
+Vite doesn't automatically load `.env` files into `process.env` when evaluating the config file. If you store your auth token in a `.env` file and want to access it via `process.env.SENTRY_AUTH_TOKEN`, use Vite's [`loadEnv`](https://vite.dev/guide/api-javascript#loadenv) helper.
+
+Alternatively, use a `.env.sentry-build-plugin` file, which the Sentry plugin reads automatically.
+
+</SplitSectionText>
+<SplitSectionCode>
+
+```javascript {filename:vite.config.js}
+import { defineConfig, loadEnv } from "vite";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
+    plugins: [
+      sentryVitePlugin({
+        authToken: env.SENTRY_AUTH_TOKEN,
+        // ...
+      }),
+    ],
+  };
+});
+```
+
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
+
+</Expandable>