From f7fba0d6316cb1ec92919ad8395d4d2feecbaeb9 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 29 Nov 2023 17:45:46 +0100 Subject: [PATCH 1/2] update landing page --- packages/website/src/components/LandingPage.astro | 2 +- packages/website/src/components/codeblock.mdx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/website/src/components/LandingPage.astro b/packages/website/src/components/LandingPage.astro index 2895f93fc..a1ae41bd8 100644 --- a/packages/website/src/components/LandingPage.astro +++ b/packages/website/src/components/LandingPage.astro @@ -23,7 +23,7 @@ import { Content as CodeBlock } from './codeblock.mdx';
diff --git a/packages/website/src/components/codeblock.mdx b/packages/website/src/components/codeblock.mdx index c6ffa00a1..48293b2ad 100644 --- a/packages/website/src/components/codeblock.mdx +++ b/packages/website/src/components/codeblock.mdx @@ -3,13 +3,13 @@ title: Setup Codeblock --- ```ts -import * as Spotlight from '@spotlightjs/overlay'; +import * as Spotlight from '@spotlightjs/spotlight'; -if (import.meta.env.DEV) { +if (process.env.NODE_ENV === 'development') { Spotlight.init(); } ``` ```shell -npx @spotlightjs/sidecar +npx spotlight-sidecar ``` From 2fcadd8502a8f7baebd259ed004b11b71469819a Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 29 Nov 2023 18:43:42 +0100 Subject: [PATCH 2/2] ref(docs): Update docs for `@spotlightjs/spotlight` --- packages/website/src/content/docs/about.mdx | 9 +++++---- .../src/content/docs/contribute/index.mdx | 19 ++++++++++--------- .../content/docs/reference/configuration.md | 2 +- .../src/content/docs/reference/console.mdx | 2 +- .../src/content/docs/reference/sentry.mdx | 2 +- .../website/src/content/docs/setup/index.mdx | 14 +++++++------- .../website/src/content/docs/sidecar/npx.mdx | 17 ++++++++++++++--- 7 files changed, 39 insertions(+), 26 deletions(-) diff --git a/packages/website/src/content/docs/about.mdx b/packages/website/src/content/docs/about.mdx index e0ffb38c1..ce318c6fc 100644 --- a/packages/website/src/content/docs/about.mdx +++ b/packages/website/src/content/docs/about.mdx @@ -20,16 +20,17 @@ At a high level, Spotlight consists of two components: 2. A proxy server (`@spotlightjs/sidecar`) which enables push-based communication to the overlay. This is achieved via a simple HTTP relay, allowing SDKs to push events to it, and allowing the overlay to receive events using [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events). -This means that adoption in most projects is two simple additions: +For convenience, these packages are combined in a single package (`@spotlightjs/spotlight`), which is the recommended way to use Spotlight. +This means that adoption in most projects is as simple as adding a single dependency: ```shell -npm add @spotlightjs/overlay @spotlightjs/sidecar +npm add @spotlightjs/spotlight ``` Registering Spotlight in your frontend application: ```typescript -import * as Spotlight from '@spotlightjs/overlay'; +import * as Spotlight from '@spotlightjs/spotlight'; // only load Spotlight in dev if (process.env.NODE_ENV === "development") { @@ -40,7 +41,7 @@ if (process.env.NODE_ENV === "development") { Running the sidecar in the background: ```shell -npx @spotlightjs/sidecar +npx @spotlightjs/spotlight ``` The overlay itself behaves a little differently from Sentry. That's intentional both because this is for local diff --git a/packages/website/src/content/docs/contribute/index.mdx b/packages/website/src/content/docs/contribute/index.mdx index 71f7f3ed9..fab8b77dc 100644 --- a/packages/website/src/content/docs/contribute/index.mdx +++ b/packages/website/src/content/docs/contribute/index.mdx @@ -41,18 +41,18 @@ pnpm dev:playground Additionally you may want to link it into an existing project. This is a little brittle, and we're not experts here, so your mileage may vary. -First, when in the Spotlight root directory, you'll need to link the packages you're referencing (likely `@spotlightjs/overlay` and `@spotlightjs/sidecar`): +{/* TODO: Can we just link @spotlightjs/spotlight? Probably?? */} + +First, when in the Spotlight root directory, you'll need to link the packages you're referencing (likely `@spotlightjs/spotlight`): ```shell -pnpm link --global -C packages/overlay -pnpm link --global -C packages/sidecar +pnpm link --global -C packages/spotlight ``` You can now link these within your project. For example if you're using `pnpm`: ```shell -pnpm link --global @spotlightjs/overlay -pnpm link --global @spotlightjs/sidecar +pnpm link --global @spotlightjs/spotlight ``` ## Repository Structure @@ -62,8 +62,9 @@ The monorepo is mostly straight forward, but here's a quick summary: ``` spotlight └── packages - ├── overlay // @spotlightjs/overlay - the main overlay - ├── sidecar // @spotlightjs/sidecar - the sidecar (proxy) for streaming data - ├── tsconfig // @spotlightjs/tsconfig - shared tsconfig - └── website // @spotlightjs/website - the main overlay + ├── overlay // @spotlightjs/overlay - the main overlay + ├── sidecar // @spotlightjs/sidecar - the sidecar (proxy) for streaming data + ├── spotlight // @spotlightjs/spotlight - the main spotlight package, combining overlay and sidecar + ├── tsconfig // @spotlightjs/tsconfig - shared tsconfig + └── website // @spotlightjs/website - the main overlay ``` diff --git a/packages/website/src/content/docs/reference/configuration.md b/packages/website/src/content/docs/reference/configuration.md index b120866ae..c9c769e7b 100644 --- a/packages/website/src/content/docs/reference/configuration.md +++ b/packages/website/src/content/docs/reference/configuration.md @@ -6,7 +6,7 @@ description: All the configuration options for setting up Spotlight ## `init` ```js -import {init, sentry} as Spotlight from '@spotlightjs/overlay'; +import {init, sentry} as Spotlight from '@spotlightjs/spotlight'; init({ integrations: [sentry()], diff --git a/packages/website/src/content/docs/reference/console.mdx b/packages/website/src/content/docs/reference/console.mdx index 3d9f3f1c6..cd501188a 100644 --- a/packages/website/src/content/docs/reference/console.mdx +++ b/packages/website/src/content/docs/reference/console.mdx @@ -6,7 +6,7 @@ description: Interface of ConsoleIntegration The console integration allows you to easily render console logs within Spotlight. ```ts -import { init, console } from "@spotlightjs/overlay"; +import { init, console } from "@spotlightjs/spotlight"; init({ integrations: [console()] diff --git a/packages/website/src/content/docs/reference/sentry.mdx b/packages/website/src/content/docs/reference/sentry.mdx index fa530d308..2db803026 100644 --- a/packages/website/src/content/docs/reference/sentry.mdx +++ b/packages/website/src/content/docs/reference/sentry.mdx @@ -6,7 +6,7 @@ description: Interface of SentryIntegration The Sentry integration is the default in Spotlight. It receives events and envelope formats from Sentry SDKs (when configured with `spotlight=true`) and renders those as Errors and Traces in the overlay. ```ts -import { init, sentry } from "@spotlightjs/overlay"; +import { init, sentry } from "@spotlightjs/spotlight"; init({ integrations: [sentry()], diff --git a/packages/website/src/content/docs/setup/index.mdx b/packages/website/src/content/docs/setup/index.mdx index 0932cdb23..48d77a45d 100644 --- a/packages/website/src/content/docs/setup/index.mdx +++ b/packages/website/src/content/docs/setup/index.mdx @@ -15,23 +15,23 @@ While it's not dependent on Sentry, Spotlight is much more powerful if you're us ## Overlay -Start by installing the `@spotlightjs/overlay` package in your existing frontend application. +Start by installing the `@spotlightjs/spotlight` package in your existing frontend application. ```sh - npm add @spotlightjs/overlay + npm add @spotlightjs/spotlight ``` ```sh - pnpm add @spotlightjs/overlay + pnpm add @spotlightjs/spotlight ``` ```sh - yarn add @spotlightjs/overlay + yarn add @spotlightjs/spotlight ``` @@ -45,7 +45,7 @@ Inject the Spotlight overlay into your application: ```js - import * as Spotlight from '@spotlightjs/overlay'; + import * as Spotlight from '@spotlightjs/spotlight'; // only load Spotlight in dev if (import.meta.env.DEV) { @@ -55,7 +55,7 @@ Inject the Spotlight overlay into your application: ```js - import * as Spotlight from '@spotlightjs/overlay'; + import * as Spotlight from '@spotlightjs/spotlight'; // only load Spotlight in dev if (process.env.NODE_ENV === "development") { @@ -70,7 +70,7 @@ Inject the Spotlight overlay into your application: ```js if (process.env.NODE_ENV === "development") { - import('@spotlightjs/overlay').then((Spotlight) => + import('@spotlightjs/spotlight').then((Spotlight) => Spotlight.init({ injectImmediately: true }) ); } diff --git a/packages/website/src/content/docs/sidecar/npx.mdx b/packages/website/src/content/docs/sidecar/npx.mdx index c5225301d..07c7907d6 100644 --- a/packages/website/src/content/docs/sidecar/npx.mdx +++ b/packages/website/src/content/docs/sidecar/npx.mdx @@ -1,11 +1,22 @@ --- title: Run Sidecar with NPX --- +import { Tabs, TabItem } from '@astrojs/starlight/components'; To run Sidecar independently with NPX, run the following command: -```sh -npx @spotlightjs/sidecar -``` + + + ```sh + npx @spotlightjs/spotlight + ``` + + + ```sh + pnpx @spotlightjs/spotlight + ``` + + + This starts the server on port `8969`. \ No newline at end of file