From dc692367bf3598dd90d43ebb9268d5dca488d2f6 Mon Sep 17 00:00:00 2001
From: Daniel Griesser <daniel.griesser.86@gmail.com>
Date: Fri, 24 Nov 2023 16:07:16 +0100
Subject: [PATCH] Content for running Spotlight with Sentry

---
 packages/website/astro.config.mjs             |  4 ++
 .../website/src/content/docs/setup/astro.mdx  |  2 +-
 .../website/src/content/docs/setup/index.mdx  | 10 +--
 .../website/src/content/docs/setup/sentry.mdx | 72 +++++++++++++++++++
 .../website/src/content/docs/sidecar/npx.mdx  |  6 +-
 .../website/src/content/docs/sidecar/vite.mdx |  3 +-
 6 files changed, 90 insertions(+), 7 deletions(-)
 create mode 100644 packages/website/src/content/docs/setup/sentry.mdx

diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs
index f1ee6bee..e23d171b 100644
--- a/packages/website/astro.config.mjs
+++ b/packages/website/astro.config.mjs
@@ -94,6 +94,10 @@ export default defineConfig({
               label: 'Spotlight',
               link: '/setup/',
             },
+            {
+              label: 'with Sentry',
+              link: '/setup/sentry/',
+            },
             {
               label: 'for Astro',
               link: '/setup/astro/',
diff --git a/packages/website/src/content/docs/setup/astro.mdx b/packages/website/src/content/docs/setup/astro.mdx
index bbb0e8c7..ed3810c1 100644
--- a/packages/website/src/content/docs/setup/astro.mdx
+++ b/packages/website/src/content/docs/setup/astro.mdx
@@ -52,7 +52,7 @@ See [Sentry's documentation](https://docs.sentry.io/platforms/javascript/guides/
 You final Sentry config should look something like this:
 
 ```js
-// ...
+// astro.config.mjs
 sentry({
     dsn: "DSN",
     sourceMapsUploadOptions: {
diff --git a/packages/website/src/content/docs/setup/index.mdx b/packages/website/src/content/docs/setup/index.mdx
index 44d50d46..7e9190f1 100644
--- a/packages/website/src/content/docs/setup/index.mdx
+++ b/packages/website/src/content/docs/setup/index.mdx
@@ -60,23 +60,25 @@ If you are using additional runtimes, such as [Node.js](https://docs.sentry.io/p
 
 ```js
 Sentry.init({
-  // ...
   spotlight: true
 })
 ```
 
 :::
 
+<LinkCard title="Setup Spotlight with Sentry" description="Instructions for Node, Python, PHP & Ruby" href="/setup/sentry/" />
+
 ---
 
 ## Sidecar
 
-
-
 Spotlight's [architecture](/architecture/) require's a sidecar to be running alongside your service. This is to enable streaming data collection from your backend services into the Spotlight overlay.
 
 
-<LinkCard title="Node.js (No Framework)" href="/sidecar/npx/" />
+<CardGrid>
+  <LinkCard title="Sidecar" href="/sidecar/" />
+  <LinkCard title="Node.js (No Framework)" href="/sidecar/npx/" />
+</CardGrid>
 
 <CardGrid>
   <LinkCard title="Vite" href="/sidecar/vite/" />
diff --git a/packages/website/src/content/docs/setup/sentry.mdx b/packages/website/src/content/docs/setup/sentry.mdx
new file mode 100644
index 00000000..262097ea
--- /dev/null
+++ b/packages/website/src/content/docs/setup/sentry.mdx
@@ -0,0 +1,72 @@
+---
+title: Setup Spotlight with Sentry's SDKs
+description: Use Spotlight with Sentry
+---
+
+Spotlight is built that you don't need Sentry to run it, it can contain any kind of integration. However, Sentry is the first integration we've built for Spotlight and it's a great way to get started.
+
+As mentioned on the previous page, if you want that you Sentry SDKs talk to the Sidecar, enable the `spotlight` setting:
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+  <TabItem label="JavaScript">
+  In the Browser you don't need to set `spotlight: true`, `Spotlight.init()` will automatically detect if Sentry is available and if so, hook into the SDK.
+  ```javascript 
+    Sentry.init({
+      dsn: 'DSN',
+    });
+    // In the frontend it's important that you init Spotlight after Sentry
+    Spotlight.init();
+  ```
+  </TabItem>
+  <TabItem label="Node">
+  ```javascript
+    Sentry.init({
+        dsn: 'DSN',
+        spotlight: true,
+    });
+  ```
+  </TabItem>
+  <TabItem label="Python">
+  ```python 
+    sentry_sdk.init(
+        dsn="DSN",
+        spotlight=True,
+    )
+  ```
+  </TabItem>
+  <TabItem label="PHP">
+  ```php 
+    Sentry\init([
+        'dsn' => 'DSN',
+        'spotlight' => true,
+    ]);
+  ```
+  </TabItem>
+  <TabItem label="Ruby">
+  ```ruby 
+    Sentry.init do |config|
+        config.dsn = 'DSN'
+        config.spotlight = true
+    end
+  ```
+  </TabItem>
+</Tabs>
+
+
+:::note
+
+It's recommended to use the `spotlight` setting only in development.
+Please add a check to make sure you only enable it in development.
+For example this:
+
+```javascript
+  Sentry.init({
+    dsn: 'DSN',
+    spotlight: process.env.NODE_ENV === 'development',
+  });
+```
+
+Depending on your setup & language this might be different.
+:::
\ No newline at end of file
diff --git a/packages/website/src/content/docs/sidecar/npx.mdx b/packages/website/src/content/docs/sidecar/npx.mdx
index 8e1321e8..c5225301 100644
--- a/packages/website/src/content/docs/sidecar/npx.mdx
+++ b/packages/website/src/content/docs/sidecar/npx.mdx
@@ -2,6 +2,10 @@
 title: Run Sidecar with NPX
 ---
 
+To run Sidecar independently with NPX, run the following command:
+
 ```sh
 npx @spotlightjs/sidecar
-```
\ No newline at end of file
+```
+
+This starts the server on port `8969`.
\ No newline at end of file
diff --git a/packages/website/src/content/docs/sidecar/vite.mdx b/packages/website/src/content/docs/sidecar/vite.mdx
index 00e8b1f9..2f0ad524 100644
--- a/packages/website/src/content/docs/sidecar/vite.mdx
+++ b/packages/website/src/content/docs/sidecar/vite.mdx
@@ -2,6 +2,8 @@
 title: Run Sidecar with Vite
 ---
 
+We provide a Vite plugin that automatically starts & stops Sidecar for you when starting your Vite dev server.
+
 ```sh
 npm install @spotlightjs/sidecar --save-dev
 ```
@@ -14,5 +16,4 @@ import spotlightSidecar from '@spotlightjs/sidecar/vite-plugin';
 export default defineConfig({
   plugins: [spotlightSidecar()],
 })
-
 ```
\ No newline at end of file