feat(platform): Add placeholder for automatically detecting js package

docs/contributing/pages/placeholders.mdx

@@ -0,0 +1,12 @@
+---
+title: Placeholders
+noindex: true
+---
+
+
+The following placeholders are available in code blocks and will be replaced at build time:
+
+- `___JS_PACKAGE___`: The current JavaScript package. (e.g. `@sentry/react`)
+- `___PUBLIC_DSN___`: The public DSN for a Sentry project. (will display a dropdown of available projects if the user is logged in)
+
+All placeholders are wrapped with **three underscores**.

docs/platforms/javascript/common/session-replay/index.mdx

@@ -62,7 +62,62 @@ There is currently no PII scrubbing in canvas recordings!
 
 If you want to record HTML canvas elements, you'll need to add an additional integration in your Sentry configuration. The canvas integration is exported from the browser SDK, so no additional package is required. Canvas recording is opt-in and will be tree-shaken from your bundle if it's not being used:
 
-<PlatformContent includePath="session-replay/setup-canvas" />
+<PlatformSection notSupported={["javascript"]}>
+```javascript {13}
+import * as Sentry from "___JS_PACKAGE___";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [
+    // Keep the Replay integration as before
+    Sentry.replayIntegration(),
+
+    // The following is all you need to enable canvas recording with Replay
+    Sentry.replayCanvasIntegration(),
+  ],
+});
+```
+</PlatformSection>
+
+<PlatformSection supported={["javascript"]}>
+```javascript {tabTitle: npm} {13}
+import * as Sentry from "___JS_PACKAGE___";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [
+    // Keep the Replay integration as before
+    Sentry.replayIntegration(),
+
+    // The following is all you need to enable canvas recording with Replay
+    Sentry.replayCanvasIntegration(),
+  ],
+});
+```
+
+```html {tabTitle: CDN}
+<!-- Existing script tag for bundle with replay, error, and tracing -->
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.replay.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.replay.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<!-- New script tag for the canvas replay integration -->
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/replay-canvas.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'replay-canvas.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+```
+</PlatformSection>
+
 
 #### 3D and WebGL Canvases
 

docs/platforms/javascript/guides/aws-lambda/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: AWS Lambda
 description: "Learn about Sentry's integration with AWS Lambda."
-sdk: sentry.javascript.node
+sdk: sentry.javascript.aws-serverless
 fallbackGuide: javascript.node
 categories:
   - serverless

docs/platforms/javascript/guides/gcp-functions/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Google Cloud Functions
 description: "Learn how to use Sentry's Google Cloud Functions SDK."
-sdk: sentry.javascript.node
+sdk: sentry.javascript.google-cloud-serverless
 fallbackGuide: javascript.node
 categories:
   - serverless

src/components/codeBlock/index.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import {useEffect, useRef, useState} from 'react';
+import {useContext, useEffect, useRef, useState} from 'react';
 import {Clipboard} from 'react-feather';
 
 import styles from './code-blocks.module.scss';
 
+import {CodeContext} from '../codeContext';
 import {makeKeywordsClickable} from '../codeKeywords';
 
 export interface CodeBlockProps {
@@ -17,6 +18,7 @@ export interface CodeBlockProps {
 export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
+  const codeContext = useContext(CodeContext);
 
   // Show the copy button after js has loaded
   // otherwise the copy button will not work
@@ -57,7 +59,9 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
       <div className={styles.copied} style={{opacity: showCopied ? 1 : 0}}>
         Copied
       </div>
-      <div ref={codeRef}>{makeKeywordsClickable(children)}</div>
+      <div ref={codeRef}>
+        {makeKeywordsClickable(children, codeContext?.currentJsPackage)}
+      </div>
     </div>
   );
 }