feat: Add PlatformOrGuideName and PlatformSdkPackageName components (#9200)

Author: Lms24

docs/platforms/javascript/common/profiling/index.mdx

@@ -26,15 +26,15 @@ Note that since the profiling API is currently only exposed in Chromium, profile
 
 To get started with JavaScript browser profiling, you'll need to:
 
-- Install the @sentry/browser SDK, minimum version 7.60.0
+- Install the <PlatformSdkPackageName fallback="@sentry/browser"/> SDK, minimum version 7.60.0
 - Configure the document response header to include `Document-Policy: js-profiling`
 - Configure the SDK to use the `BrowserProfilingIntegration` and set `profilesSampleRate`
 
-## Step 1: Install the JavaScript Browser SDK
+## Step 1: Install the <PlatformOrGuideName/> SDK
 
 <PlatformSection notSupported={["javascript.electron"]}>
 
-Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
+Install our <PlatformOrGuideName/> SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
 
 </PlatformSection>
 

src/components/platformOrGuideName.tsx

@@ -0,0 +1,25 @@
+import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
+import {serverContext} from 'sentry-docs/serverContext';
+
+type PlatformOrGuideNameProps = {
+  /**
+   * The fallback value to display if the platform or guide name is not found.
+   * @default 'Sentry'
+   */
+  fallback?: string;
+};
+
+/**
+ * Displays a readable name of the currently selected platform or guide.
+ * Example: `Next.js`.
+ */
+export function PlatformOrGuideName({fallback}: PlatformOrGuideNameProps) {
+  const fallbackName = fallback || 'Sentry';
+  const {rootNode, path} = serverContext();
+  const platformOrGuide = rootNode && getCurrentPlatformOrGuide(rootNode, path);
+  if (!platformOrGuide) {
+    return fallbackName;
+  }
+
+  return `${platformOrGuide.title || fallbackName} `;
+}

src/components/platformSdkPackageName.tsx

@@ -0,0 +1,40 @@
+import getPackageRegistry from 'sentry-docs/build/packageRegistry';
+import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
+import {serverContext} from 'sentry-docs/serverContext';
+
+type PlatformSdkPackageNameProps = {
+  /**
+   * The fallback value to display if the SDK package name is not found.
+   * @default 'Sentry'
+   */
+  fallback?: string;
+};
+
+/**
+ * Displays the SDK package name for the current platform or guide.
+ * Example: `@sentry/react`
+ */
+export async function PlatformSdkPackageName({fallback}: PlatformSdkPackageNameProps) {
+  const fallbackName = fallback || 'Sentry';
+  const {rootNode, path} = serverContext();
+  const platformOrGuide = rootNode && getCurrentPlatformOrGuide(rootNode, path);
+  if (!platformOrGuide) {
+    return <code>{fallbackName} </code>;
+  }
+
+  const packageRegistry = await getPackageRegistry();
+  const allSdks = packageRegistry.data;
+  const entries = Object.entries(allSdks || {});
+  const pair: any = entries.find(([sdkName]) => sdkName === platformOrGuide.sdk);
+  if (!pair) {
+    return <code>{fallbackName} </code>;
+  }
+  const [, sdkData] = pair;
+  if (!sdkData) {
+    return <code>{fallbackName} </code>;
+  }
+
+  const prettifiedName = sdkData.canonical.replace(/^npm:/, '');
+
+  return <code>{prettifiedName || fallbackName} </code>;
+}

src/mdxComponents.ts

@@ -20,6 +20,8 @@ import {PlatformGrid} from './components/platformGrid';
 import {PlatformIdentifier} from './components/platformIdentifier';
 import {PlatformLink} from './components/platformLink';
 import {PlatformLinkWithLogo} from './components/platformLinkWithLogo';
+import {PlatformOrGuideName} from './components/platformOrGuideName';
+import {PlatformSdkPackageName} from './components/platformSdkPackageName';
 import {PlatformSection} from './components/platformSection';
 import {RelayMetrics} from './components/relayMetrics';
 import {SandboxLink} from './components/sandboxLink';
@@ -55,6 +57,8 @@ export function mdxComponents(
     PlatformLink,
     PlatformLinkWithLogo,
     PlatformSection,
+    PlatformOrGuideName,
+    PlatformSdkPackageName,
     RelayMetrics,
     SandboxLink,
     SignInNote,