diff --git a/docs/platforms/javascript/config.yml b/docs/platforms/javascript/config.yml
index 02896bf79c77b8..4c0efe9e618baa 100644
--- a/docs/platforms/javascript/config.yml
+++ b/docs/platforms/javascript/config.yml
@@ -1,4 +1,5 @@
-title: JavaScript
+title: Browser JavaScript
+platformTitle: JavaScript
caseStyle: camelCase
supportLevel: production
sdk: 'sentry.javascript.browser'
diff --git a/src/components/breadcrumbs/index.tsx b/src/components/breadcrumbs/index.tsx
index 6fd1e19f2e8772..cfc74c2bcf2b85 100644
--- a/src/components/breadcrumbs/index.tsx
+++ b/src/components/breadcrumbs/index.tsx
@@ -9,20 +9,26 @@ type BreadcrumbsProps = {
};
export function Breadcrumbs({leafNode}: BreadcrumbsProps) {
- const nodes: DocNode[] = [];
+ const breadcrumbs: {title: string; to: string}[] = [];
+
for (let node: DocNode | undefined = leafNode; node; node = node.parent) {
if (node && !node.missing) {
- nodes.unshift(node);
+ const to = node.path === '/' ? node.path : `/${node.path}/`;
+ const title = node.frontmatter.platformTitle ?? node.frontmatter.title;
+
+ breadcrumbs.unshift({
+ to,
+ title,
+ });
}
}
return (
- {nodes.map(n => {
- const to = n.path === '/' ? n.path : `/${n.path}/`;
+ {breadcrumbs.map(b => {
return (
- -
- {n.frontmatter.title}
+
-
+ {b.title}
);
})}
diff --git a/src/components/platformFilter/client.tsx b/src/components/platformFilter/client.tsx
index 9b9594779c8d6f..dd4a98fffd6675 100644
--- a/src/components/platformFilter/client.tsx
+++ b/src/components/platformFilter/client.tsx
@@ -62,7 +62,7 @@ export function PlatformFilterClient({platforms}: {platforms: Platform[]}) {
return platformsAndGuides;
}
// any of these fields can be used to match the search value
- const keys = ['title', 'aliases', 'name', 'sdk', 'keywords'];
+ const keys = ['title', 'aliases', 'name', 'sdk', 'keywords', 'platformTitle'];
const matches_ = matchSorter(platformsAndGuides, filter, {
keys,
threshold: rankings.CONTAINS,
@@ -195,7 +195,14 @@ function PlatformWithGuides({
const guides = useMemo(() => {
const showPlatformInContent = matchKeys.includes(platform.key);
- return showPlatformInContent ? [platform, ...platform.guides] : platform.guides;
+
+ // This is the case if `platformTitle` is configured for a platform
+ // In this case, we do not need to add the platform to the list of guides
+ const hasGuideWithPlatformKey = platform.guides.some(g => g.key === platform.key);
+
+ return showPlatformInContent && !hasGuideWithPlatformKey
+ ? [platform, ...platform.guides]
+ : platform.guides;
}, [matchKeys, platform]);
return (
diff --git a/src/components/platformSelector/index.tsx b/src/components/platformSelector/index.tsx
index cce5d995d0d9d5..85a97fcbf270d1 100644
--- a/src/components/platformSelector/index.tsx
+++ b/src/components/platformSelector/index.tsx
@@ -92,7 +92,9 @@ export function PlatformSelector({
const router = useRouter();
const onPlatformChange = (platformKey: string) => {
- const platform_ = platformsAndGuides.find(platform => platform.key === platformKey);
+ const platform_ = platformsAndGuides.find(
+ platform => platform.key === platformKey.replace('-redirect', '')
+ );
if (platform_) {
localStorage.setItem('active-platform', platform_.key);
router.push(platform_.url);
@@ -277,6 +279,11 @@ function PlatformItem({
isLastGuide: i === guides.length - 1,
}));
+ // This is the case if `platformTitle` is configured for a platform
+ // In this case, the top-level select item should get the `-redirect` suffix,
+ // as we can't have two items with the same key
+ const hasGuideWithPlatformKey = platform.guides.some(g => g.key === platform.key);
+
const guides = platform.isExpanded
? markLastGuide(platform.guides.length > 0 ? platform.guides : platform.integrations)
: [];
@@ -288,7 +295,7 @@ function PlatformItem({
!isVersioned(path))
.map(n => nodeToGuide(platformNode.slug, n));
+
+ return defaultGuide ? [defaultGuide, ...childGuides] : childGuides;
}
const extractIntegrations = (p: DocNode): PlatformIntegration[] => {
diff --git a/src/types/platform.tsx b/src/types/platform.tsx
index d04dc366d8fedb..cf6e92c0f45972 100644
--- a/src/types/platform.tsx
+++ b/src/types/platform.tsx
@@ -118,6 +118,12 @@ export interface PlatformConfig {
* Keywords used for search etc.
*/
keywords?: string[];
+ /**
+ * The title of the platform as it should be displayed in the sidebar.
+ * In most cases, you do not need to define this, as the title is used.
+ * However, in some cases - e.g. JavaScript - the Platform title (JavaScript) is different from the default guide (Browser JavaScript).
+ */
+ platformTitle?: string;
/**
* Used to map a platform to a specific SDK as defined by the SDK registry.
*/
@@ -130,7 +136,6 @@ export interface PlatformConfig {
* Is this a first-party or third-party SDK?
*/
supportLevel?: PlatformSupportLevel;
-
/**
* The human readable name of the platform.
*/