[number] | React.ReactNode;
-export function makeKeywordsClickable(children: React.ReactNode) {
+type MakeKeywordsClickableOptions = {
+ sdkPackage?: string | null;
+};
+
+export function makeKeywordsClickable(
+ children: React.ReactNode,
+ options: MakeKeywordsClickableOptions = {}
+) {
+ const {sdkPackage} = options;
const items = Children.toArray(children);
return items.reduce((arr: ChildrenItem[], child) => {
@@ -18,7 +27,7 @@ export function makeKeywordsClickable(children: React.ReactNode) {
const updatedChild = cloneElement(
child as ReactElement,
{},
- makeKeywordsClickable((child as ReactElement).props.children)
+ makeKeywordsClickable((child as ReactElement).props.children, options)
);
arr.push(updatedChild);
return arr;
@@ -27,9 +36,13 @@ export function makeKeywordsClickable(children: React.ReactNode) {
// Reset regex lastIndex before testing to avoid stale state from previous matches
ORG_AUTH_TOKEN_REGEX.lastIndex = 0;
KEYWORDS_REGEX.lastIndex = 0;
+ SDK_PACKAGE_REGEX.lastIndex = 0;
if (ORG_AUTH_TOKEN_REGEX.test(child)) {
makeOrgAuthTokenClickable(arr, child);
+ } else if (SDK_PACKAGE_REGEX.test(child)) {
+ // Simple string replacement for SDK package (fallback to @sentry/browser on non-platform pages)
+ arr.push(child.replace(SDK_PACKAGE_REGEX, sdkPackage || '@sentry/browser'));
} else if (KEYWORDS_REGEX.test(child)) {
const isDSNKeyword = /___PUBLIC_DSN___/.test(child);
makeProjectKeywordsClickable(arr, child, isDSNKeyword);
diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
index 9390875a78d01..6beddff9cdc98 100644
--- a/src/components/docPage/index.tsx
+++ b/src/components/docPage/index.tsx
@@ -1,6 +1,11 @@
import {ReactNode} from 'react';
-import {getCurrentGuide, getCurrentPlatform, nodeForPath} from 'sentry-docs/docTree';
+import {
+ getCurrentGuide,
+ getCurrentPlatform,
+ getCurrentPlatformOrGuide,
+ nodeForPath,
+} from 'sentry-docs/docTree';
import {serverContext} from 'sentry-docs/serverContext';
import {FrontMatter} from 'sentry-docs/types';
import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode';
@@ -19,6 +24,7 @@ import {Header} from '../header';
import Mermaid from '../mermaid';
import {PaginationNav} from '../paginationNav';
import {PlatformSdkDetail} from '../platformSdkDetail';
+import {getSdkPackageName} from '../platformSdkPackageName';
import {Sidebar} from '../sidebar';
import {SidebarTableOfContents} from '../sidebarTableOfContents';
import {ReaderDepthTracker} from '../track-reader-depth';
@@ -35,7 +41,7 @@ type Props = {
sidebar?: ReactNode;
};
-export function DocPage({
+export async function DocPage({
children,
frontMatter,
notoc = false,
@@ -47,6 +53,8 @@ export function DocPage({
const {rootNode, path} = serverContext();
const currentPlatform = getCurrentPlatform(rootNode, path);
const currentGuide = getCurrentGuide(rootNode, path);
+ const platformOrGuide = getCurrentPlatformOrGuide(rootNode, path);
+ const sdkPackage = await getSdkPackageName(platformOrGuide);
const hasToc = (!notoc && !frontMatter.notoc) || !!(currentPlatform || currentGuide);
const hasGithub = !!path?.length && path[0] !== 'api';
@@ -98,7 +106,9 @@ export function DocPage({
{/* This exact id is important for Algolia indexing */}
- {children}
+
+ {children}
+
diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index 9973978f9b8fb..93bf779ebd626 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -215,6 +215,15 @@
word-break: break-word;
}
}
+
+ }
+
+ // Override for compact tables that don't need min-width
+ .table-fit-content table {
+ td:last-child,
+ th:last-child {
+ min-width: unset;
+ }
}
dt + dd {
diff --git a/src/components/platformSdkPackageName.tsx b/src/components/platformSdkPackageName.tsx
index 51dc20b71ed77..2b0cc4003f0e7 100644
--- a/src/components/platformSdkPackageName.tsx
+++ b/src/components/platformSdkPackageName.tsx
@@ -1,6 +1,7 @@
import getPackageRegistry from 'sentry-docs/build/packageRegistry';
import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
import {serverContext} from 'sentry-docs/serverContext';
+import {Platform, PlatformGuide} from 'sentry-docs/types/platform';
type PlatformSdkPackageNameProps = {
/**
@@ -11,15 +12,14 @@ type PlatformSdkPackageNameProps = {
};
/**
- * Displays the SDK package name for the current platform or guide.
+ * Gets the SDK package name for a platform or guide.
* Example: `@sentry/react`
*/
-export async function PlatformSdkPackageName({fallback}: PlatformSdkPackageNameProps) {
- const fallbackName = fallback || 'Sentry';
- const {rootNode, path} = serverContext();
- const platformOrGuide = getCurrentPlatformOrGuide(rootNode, path);
+export async function getSdkPackageName(
+ platformOrGuide: Platform | PlatformGuide | null | undefined
+): Promise {
if (!platformOrGuide) {
- return {fallbackName} ;
+ return null;
}
const packageRegistry = await getPackageRegistry();
@@ -27,14 +27,26 @@ export async function PlatformSdkPackageName({fallback}: PlatformSdkPackageNameP
const entries = Object.entries(allSdks || {});
const pair = entries.find(([sdkName]) => sdkName === platformOrGuide.sdk);
if (!pair) {
- return {fallbackName} ;
+ return null;
}
const [, sdkData] = pair;
if (!sdkData) {
- return {fallbackName} ;
+ return null;
}
- const prettifiedName = sdkData.canonical.replace(/^npm:/, '');
+ return sdkData.canonical.replace(/^npm:/, '') || null;
+}
+
+/**
+ * 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 = getCurrentPlatformOrGuide(rootNode, path);
+
+ const sdkPackage = await getSdkPackageName(platformOrGuide);
- return {prettifiedName || fallbackName} ;
+ return {sdkPackage || fallbackName} ;
}