WIP: Allow to have top level alias for platforms

Author: mydea

docs/platforms/javascript/config.yml

@@ -1,4 +1,5 @@
-title: JavaScript
+title: Browser JavaScript
+topLevelAlias: JavaScript
 caseStyle: camelCase
 supportLevel: production
 sdk: 'sentry.javascript.browser'

src/components/breadcrumbs/index.tsx

@@ -22,7 +22,7 @@ export function Breadcrumbs({leafNode}: BreadcrumbsProps) {
         const to = n.path === '/' ? n.path : `/${n.path}/`;
         return (
           <li className={styles['breadcrumb-item']} key={n.path}>
-            <SmartLink to={to}>{n.frontmatter.title}</SmartLink>
+            <SmartLink to={to}>{n.frontmatter.topLevelAlias ?? n.frontmatter.title}</SmartLink>
           </li>
         );
       })}

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', 'topLevelAlias'];
     const matches_ = matchSorter(platformsAndGuides, filter, {
       keys,
       threshold: rankings.CONTAINS,
@@ -200,7 +200,7 @@ function PlatformWithGuides({
               format="lg"
               className={`${styles.PlatformIcon} !border-none !shadow-none`}
             />
-            {platform.title}
+            {platform.topLevelAlias ?? platform.title}
           </div>
           <button className={styles.ChevronButton}>
             <TriangleRightIcon

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,8 +279,17 @@ function PlatformItem({
       isLastGuide: i === guides.length - 1,
     }));
 
+  const isPlatformWithGuidesAndTopLevelAlias =
+    platform.guides.length > 0 && !!platform.topLevelAlias;
+
   const guides = platform.isExpanded
-    ? markLastGuide(platform.guides.length > 0 ? platform.guides : platform.integrations)
+    ? markLastGuide(
+        platform.guides.length > 0
+          ? isPlatformWithGuidesAndTopLevelAlias
+            ? [platform as unknown as PlatformGuide, ...platform.guides]
+            : platform.guides
+          : platform.integrations
+      )
     : [];
 
   return (
@@ -288,7 +299,11 @@ function PlatformItem({
         <RadixSelect.Label className="flex">
           <Fragment>
             <RadixSelect.Item
-              value={platform.key}
+              value={
+                isPlatformWithGuidesAndTopLevelAlias
+                  ? `${platform.key}-redirect`
+                  : platform.key
+              }
               asChild
               className={styles.item}
               data-platform-with-guides
@@ -303,7 +318,7 @@ function PlatformItem({
                       format="sm"
                       className={styles['platform-icon']}
                     />
-                    {platform.title}
+                    {platform.topLevelAlias ?? platform.title}
                   </span>
                 </RadixSelect.ItemText>
               </ComboboxItem>
@@ -327,7 +342,7 @@ function PlatformItem({
         </RadixSelect.Label>
       </RadixSelect.Group>
       {guides.map(guide => {
-        return <GuideItem key={guide.key} guide={guide} />;
+        return <GuideItem key={guide.key + '-guide'} guide={guide} />;
       })}
     </Fragment>
   );
@@ -339,7 +354,7 @@ type GuideItemProps = {
 function GuideItem({guide}: GuideItemProps) {
   return (
     <RadixSelect.Item
-      key={guide.key}
+      key={guide.key + '-guide'}
       value={guide.key}
       asChild
       className={styles.item}

src/docTree.ts

@@ -253,6 +253,7 @@ function nodeToPlatform(n: DocNode): Platform {
   const caseStyle = platformData?.case_style || n.frontmatter.caseStyle;
   const guides = extractGuides(n);
   const integrations = extractIntegrations(n);
+  const topLevelAlias = n.frontmatter.topLevelAlias;
 
   return {
     key: n.slug,
@@ -267,6 +268,7 @@ function nodeToPlatform(n: DocNode): Platform {
     keywords: n.frontmatter.keywords,
     guides,
     integrations,
+    topLevelAlias,
   };
 }
 

src/types/platform.tsx

@@ -130,11 +130,14 @@ export interface PlatformConfig {
    * Is this a first-party or third-party SDK?
    */
   supportLevel?: PlatformSupportLevel;
-
   /**
    * The human readable name of the platform.
    */
   title?: string;
+  /**
+   * Alias for the top level platform name.
+   */
+  topLevelAlias?: string;
 }
 
 /**