First pass at doc improvements

packages/website/astro.config.mjs

@@ -45,7 +45,7 @@ export default defineConfig({
  },
  sidebar: [
  {
- label: 'Start here',
+ label: 'About',
  items: [
  {
  label: 'What is Spotlight?',
@@ -76,15 +76,6 @@ export default defineConfig({
  directory: 'sidecar',
  },
  },
- {
- label: 'Guides',
- items: [
- {
- label: 'Write an integration',
- link: '/guides/integration/',
- },
- ],
- },
  {
  label: 'Integrations',
  autogenerate: {

packages/website/package.json

@@ -12,26 +12,26 @@
  "astro": "astro"
  },
  "dependencies": {
- "@astrojs/react": "^3.0.5",
- "@astrojs/starlight": "^0.11.2",
- "@astrojs/starlight-tailwind": "^2.0.0",
+ "@astrojs/react": "^3.0.6",
+ "@astrojs/starlight": "^0.13.0",
+ "@astrojs/starlight-tailwind": "^2.0.1",
  "@astrojs/tailwind": "^5.0.2",
  "@astrojs/vercel": "^5.2.0",
- "@fontsource/raleway": "^5.0.8",
- "@sentry/astro": "^7.80.0",
+ "@fontsource/raleway": "^5.0.15",
+ "@sentry/astro": "^7.81.1",
  "@spotlightjs/astro": "workspace:*",
  "@spotlightjs/core": "workspace:*",
- "@types/react": "^18.2.37",
- "@types/react-dom": "^18.2.15",
- "astro": "^3.5.4",
+ "@types/react": "^18.2.38",
+ "@types/react-dom": "^18.2.17",
+ "astro": "^3.6.0",
  "react": "^18.2.0",
- "react-dom": "^18.0.0",
+ "react-dom": "^18.2.0",
  "sharp": "^0.32.6",
- "tailwindcss": "^3.0.24"
+ "tailwindcss": "^3.3.5"
  },
  "devDependencies": {
  "@tailwindcss/typography": "^0.5.10",
- "typescript": "^5.0.2",
+ "typescript": "^5.3.2",
  "vite-plugin-inspect": "^0.7.42"
  },
  "volta": {

packages/website/src/content/docs/about.mdx

@@ -1,5 +1,8 @@
 ---
-title: What is Spotlight?
+title: About Spotlight
+sidebar:
+ label: What is Spotlight?
+ order: 0
 ---
 
 Spotlight started out as a Hackweek project at Sentry:

packages/website/src/content/docs/guides/integration.md → packages/website/src/content/docs/integrations/build-your-own.md

@@ -1,6 +1,9 @@
 ---
 title: Write your own Integration
 description: A guide how to write a Spotlight Integration
+sidebar:
+ label: 'Building an Integration'
+ order: 999
 ---
 
 An integration in Spotlight is rather powerful. It can completely change the behavior, add, remove functionality from

packages/website/src/content/docs/integrations/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Integrations
+sidebar:
+ label: What are integrations?
+ order: 0
+---
+
+Integrations are how Spotlight exposes behavior in the Overlay. For example, the default [Sentry integration](./builtins/sentry/) enables the Errors and Traces panels.

packages/website/src/content/docs/setup/index.mdx

@@ -1,16 +1,21 @@
 ---
-title: Using Spotlight in your Environment
+title: Setup Spotlight
 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. See other guides like [Astro](/setup/astro/) if you want to use Spotlight with a specific framework.
+Spotlight can be used with a variety of frameworks and even in your custom environment. 
 
+While it's not dependent on Sentry, Spotlight is much more powerful if you're using Sentry's SDKs. It will leverage the error and traces they collect and render them locally.
 
-While it's not dependent on Sentry's SDKs it's recommended to use them to get the most out of Spotlight.
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
-## Frontend
+<LinkCard title="Spotlight for Astro" description="Astro specific instructions for setting up Spotlight." href="/setup/astro/" />
 
-### Install
+## Overlay
+
+You'll start by registering the Spotlight package in your existing frontend application.
+
+Install the `@spotlightjs/core` package:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
@@ -32,47 +37,46 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
  </TabItem>
 </Tabs>
 
-### Setup
+Inject Spotlight into your application:
 
 ```js
 import * as Spotlight from '@spotlightjs/core';
 
 Spotlight.init();
 ```
 
+Upon loading your UI you should now see the Spotlight toolbar in bottom-right corner of your application.
+
+For more options on how to configure Spotlight's UI, see [Configuration](/reference/configuration/).
+
+:::tip
+Spotlight will automatically configure [Sentry's Browser SDK](https://docs.sentry.io/platforms/javascript/) to send data to the default Sidecar.
+
+If you are using additional runtimes, such as [Node.js](https://docs.sentry.io/platforms/node/), [PHP](https://docs.sentry.io/platforms/php/), or [Python](https://docs.sentry.io/platforms/python/), you should take a look at Sentry's SDKs on how to enable Spotlight. Generally this as easy as `spotlight = true` in `Sentry.init()`:
+
+
+```js
+Sentry.init({
+ // ...
+ spotlight: true
+})
+```
+
+:::
+
 ---
 
+## Sidecar
 
-## Backend
 
-If you run Sentry also on your backend you need to tell the SDK to connect to Spotlight.
 
-### Install
+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.
 
-<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
+<LinkCard title="Node.js (No Framework)" href="/sidecar/npx/" />
+
+<CardGrid>
+ <LinkCard title="Vite" href="/sidecar/vite/" />
+ <LinkCard title="Webpack" href="/sidecar/webpack/" />
+</CardGrid>
 
-```js
-import * as Sentry from '@sentry/node';
-import { connect } from '@spotlightjs/sidecar/connect'
-// ....
-Sentry.init({...});
-connect(Sentry.getCurrentHub()); // call connect right after Sentry.init
-```