From 678572b507d0f470909425263d84a6c17781483f Mon Sep 17 00:00:00 2001
From: Daniel Griesser <daniel.griesser.86@gmail.com>
Date: Tue, 21 Nov 2023 21:26:19 +0100
Subject: [PATCH] Add bunch of docs

---
 packages/website/astro.config.mjs             |  8 +-
 .../website/src/content/docs/architecture.mdx |  4 +-
 .../website/src/content/docs/setup/astro.mdx  | 59 +++++++++++++-
 .../website/src/content/docs/setup/index.mdx  | 78 ++++++++++++++++++-
 4 files changed, 137 insertions(+), 12 deletions(-)

diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs
index 0cc0b114..e7bc89be 100644
--- a/packages/website/astro.config.mjs
+++ b/packages/website/astro.config.mjs
@@ -57,12 +57,12 @@ export default defineConfig({
           label: 'Setup',
           items: [
             {
-              label: 'for Astro',
-              link: '/setup/astro/',
+              label: 'Spotlight',
+              link: '/setup/',
             },
             {
-              label: 'for your project',
-              link: '/setup/',
+              label: 'for Astro',
+              link: '/setup/astro/',
             },
           ],
         },
diff --git a/packages/website/src/content/docs/architecture.mdx b/packages/website/src/content/docs/architecture.mdx
index f84af953..e7cb6086 100644
--- a/packages/website/src/content/docs/architecture.mdx
+++ b/packages/website/src/content/docs/architecture.mdx
@@ -2,4 +2,6 @@
 title: Architecture of Spotlight
 ---
 
-<iframe width="768" height="900" style="height: 800px" src="https://miro.com/app/live-embed/uXjVMh0lFXQ=/?moveToViewport=-3733,-2906,7742,4070&embedId=897918117576" frameborder="0" scrolling="no" allow="fullscreen; clipboard-read; clipboard-write" allowfullscreen></iframe>
+TODO
+
+Here will be a simple drawing of the different parts of Spotlight and how they interact.
\ No newline at end of file
diff --git a/packages/website/src/content/docs/setup/astro.mdx b/packages/website/src/content/docs/setup/astro.mdx
index badefd52..4a3329ed 100644
--- a/packages/website/src/content/docs/setup/astro.mdx
+++ b/packages/website/src/content/docs/setup/astro.mdx
@@ -1,8 +1,10 @@
 ---
-title: Setup Spotlight for Astro
+title: Using Spotlight with Astro
 description: A guide how to setup Spotlight for Astro
 ---
 
+## Install Sentry
+
 To install Spotlight for Astro call:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
@@ -10,17 +12,66 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 <Tabs>
   <TabItem label="npm">
   ```sh 
-  npx astro add @spotlightjs/core 
+  npx astro add @sentry/astro 
   ```
   </TabItem>
   <TabItem label="pnpm">
   ```sh 
-  pnpm astro add @spotlightjs/core
+  pnpm astro add @sentry/astro
   ```
   </TabItem>
   <TabItem label="yarn">
   ```sh 
-  yarn astro add @spotlightjs/core 
+  yarn astro add @sentry/astro
   ```
   </TabItem>
 </Tabs>
+
+After that, Astro should add the Spotlight integration to your `astro.config.mjs` file and should look something like this.
+
+```js
+import { defineConfig } from 'astro/config';   
+
+import sentry from "@sentry/astro";
+                                                 
+// https://astro.build/config                  
+export default defineConfig({                  
+  integrations: [sentry()]                
+});
+```
+
+## Install Spotlight
+
+To install Spotlight for Astro call:
+
+<Tabs>
+  <TabItem label="npm">
+  ```sh 
+  npx astro add @spotlightjs/astro 
+  ```
+  </TabItem>
+  <TabItem label="pnpm">
+  ```sh 
+  pnpm astro add @spotlightjs/astro
+  ```
+  </TabItem>
+  <TabItem label="yarn">
+  ```sh 
+  yarn astro add @spotlightjs/astro 
+  ```
+  </TabItem>
+</Tabs>
+
+After that, Astro should add the Spotlight integration to your `astro.config.mjs` file and should look something like this.
+
+```js
+import { defineConfig } from 'astro/config';   
+
+import sentry from "@sentry/astro";
+import spotlightjs from "@spotlightjs/astro";  
+                                                 
+// https://astro.build/config                  
+export default defineConfig({                  
+  integrations: [sentry(), spotlightjs()]                
+});
+```
\ No newline at end of file
diff --git a/packages/website/src/content/docs/setup/index.mdx b/packages/website/src/content/docs/setup/index.mdx
index 13a91999..864d2b2a 100644
--- a/packages/website/src/content/docs/setup/index.mdx
+++ b/packages/website/src/content/docs/setup/index.mdx
@@ -1,6 +1,78 @@
 ---
-title: Using Spotlight with your Framework
-description: A guide how to setup Spotlight for Astro
+title: Using Spotlight in your Environment
+description: A guide how to setup Spotlight in your environment
 ---
 
-Spotlight can be used with a variety of frameworks and even in your custom environment.
\ No newline at end of file
+Spotlight can be used with a variety of frameworks and even in your custom environment. See other guides like [Astro](/setup/astro/) if you want to use Spotlight with a specific framework.
+
+
+While it's not dependent on Sentry's SDKs it's recommended to use them to get the most out of Spotlight.
+
+## Frontend
+
+### Install
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+  <TabItem label="npm">
+  ```sh 
+  npm add --save-dev @spotlightjs/core 
+  ```
+  </TabItem>
+  <TabItem label="pnpm">
+  ```sh 
+  pnpm add -D @spotlightjs/core
+  ```
+  </TabItem>
+  <TabItem label="yarn">
+  ```sh 
+  yarn add @spotlightjs/core -D
+  ```
+  </TabItem>
+</Tabs>
+
+### Setup
+
+```js
+import * as Spotlight from '@spotlightjs/core';
+
+Spotlight.init();
+```
+
+---
+
+
+## Backend
+
+If you run Sentry also on your backend you need to tell the SDK to connect to Spotlight.
+
+### Install
+
+<Tabs>
+  <TabItem label="npm">
+  ```sh 
+  npm add --save-dev @spotlightjs/sidecar 
+  ```
+  </TabItem>
+  <TabItem label="pnpm">
+  ```sh 
+  pnpm add -D @spotlightjs/sidecar
+  ```
+  </TabItem>
+  <TabItem label="yarn">
+  ```sh 
+  yarn add @spotlightjs/sidecar -D
+  ```
+  </TabItem>
+</Tabs>
+
+### Setup
+
+```js
+import * as Sentry from '@sentry/node';
+import { connect } from '@spotlightjs/sidecar/connect'
+// ....
+Sentry.init({...});
+connect(Sentry.getCurrentHub()); // call connect right after Sentry.init
+```
\ No newline at end of file