Fixing JS framework formatting for redirect pages (#14914)

## DESCRIBE YOUR PR
**Summary**
Enhanced the platform redirect system to show individual JavaScript
frameworks (React, Vue, Angular, etc.) as separate, nested options under
the main JavaScript platform. This provides users with a more customized
and framework-specific experience when selecting their platform. Also
added better logic to check for guide paths because Dart also wasn't
showing up due to being nested.

**Problem**
When users clicked platform-redirect links (like
/platform-redirect/?next=/session-replay/privacy/), they only saw
top-level platforms (JavaScript, Android, React Native). This didn't
reflect that many JavaScript frameworks have different support levels
for specific features, and users couldn't easily select their specific
framework for a more tailored experience. They also did not see Dart,
which was nested under a Dart/Flutter guide.

**Solution**
- Automatic Framework Detection: The system now reads the `notSupported`
frontmatter from JavaScript documentation pages to determine which
frameworks support each feature. Added more robust logic to search for
guides under each platform if main platform paths are empty.

- Visual Nesting: JavaScript frameworks are indented under the main
JavaScript platform for clear hierarchy
Smart Positioning: JavaScript and its frameworks appear at the end of
the platform list
Framework-Specific URLs: Each framework links to the main JavaScript
documentation for that feature

Example pages: 

https://sentry-docs-git-platform-redirect-privacy-fix.sentry.dev/platform-redirect/?next=/session-replay/configuration/#network-details


https://sentry-docs-git-platform-redirect-privacy-fix.sentry.dev/platform-redirect/?next=/session-replay/privacy/

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [x] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

---------

Co-authored-by: Shannon Anahata <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Abdellah Hariti <[email protected]>

Author: 4 people

app/platform-redirect/page.tsx

@@ -37,35 +37,104 @@ export default async function Page(props: {
     "The page you are looking for is customized for each platform. Select your platform below and we'll direct you to the most specific documentation on it.";
   let title = defaultTitle;
 
-  // get rid of irrelevant platforms for the `next` path
-  const platformList = extractPlatforms(rootNode).filter(platform_ => {
-    const node = nodeForPath(rootNode, [
+  // Build a list of platforms or guides that have the content for the `next` path
+  type PlatformOrGuide = {
+    icon: string;
+    key: string;
+    title: string;
+    url: string;
+    parentPlatform?: string;
+    shouldBeNested?: boolean;
+  };
+
+  const platformOrGuideList: PlatformOrGuide[] = [];
+
+  for (const platformEntry of extractPlatforms(rootNode)) {
+    // Check if the main platform path has the content
+    const mainPlatformNode = nodeForPath(rootNode, [
       'platforms',
-      platform_.key,
+      platformEntry.key,
       ...pathname.split('/').filter(Boolean),
     ]);
 
-    // extract title and description for displaying it on page
-    if (node && title === defaultTitle && pathname.length > 0) {
-      title = node.frontmatter.title ?? title;
-      description = node.frontmatter.description || '';
+    // Extract title and description from the first valid node we find
+    if (mainPlatformNode && title === defaultTitle && pathname.length > 0) {
+      title = mainPlatformNode.frontmatter.title ?? title;
+      description = mainPlatformNode.frontmatter.description || '';
+    }
+
+    // Check which guides have the content
+    const supportedGuides: typeof platformEntry.guides = [];
+    if (platformEntry.guides) {
+      for (const guide of platformEntry.guides) {
+        const guideNode = nodeForPath(rootNode, [
+          'platforms',
+          platformEntry.key,
+          'guides',
+          guide.name,
+          ...pathname.split('/').filter(Boolean),
+        ]);
+
+        if (guideNode) {
+          supportedGuides.push(guide);
+
+          // Extract title and description if we haven't yet
+          if (title === defaultTitle && pathname.length > 0) {
+            title = guideNode.frontmatter.title ?? title;
+            description = guideNode.frontmatter.description || '';
+          }
+        }
+      }
     }
 
-    return !!node;
-  });
+    // Check notSupported list to filter out unsupported guides (for platforms like JavaScript)
+    let filteredGuides = supportedGuides;
+    if (mainPlatformNode?.frontmatter.notSupported && supportedGuides.length > 0) {
+      const notSupported = mainPlatformNode.frontmatter.notSupported;
+      filteredGuides = supportedGuides.filter(
+        guide => !notSupported.includes(`${platformEntry.key}.${guide.name}`)
+      );
+    }
+
+    // Include platform if main path exists OR if any guides exist
+    if (mainPlatformNode || filteredGuides.length > 0) {
+      // Add the main platform entry only if it has content
+      if (mainPlatformNode) {
+        platformOrGuideList.push({
+          key: platformEntry.key,
+          title: platformEntry.title ?? platformEntry.key ?? '',
+          url: platformEntry.url ?? '',
+          icon: platformEntry.icon ?? platformEntry.key,
+        });
+      }
+
+      // Add guide entries as nested items (only if main platform exists)
+      // or as top-level items (if only guides have content)
+      for (const guide of filteredGuides) {
+        platformOrGuideList.push({
+          key: `${platformEntry.key}.${guide.name}`,
+          title: guide.title ?? guide.name ?? '',
+          url: guide.url ?? '', // Always use the guide-specific URL
+          icon: `${platformEntry.key}-${guide.name}`,
+          shouldBeNested: mainPlatformNode ? true : false, // Only nest if parent exists
+          parentPlatform: platformEntry.key,
+        });
+      }
+    }
+  }
 
-  if (platformList.length === 0) {
+  if (platformOrGuideList.length === 0) {
     // try to redirect the user to the page directly, might result in 404
     return redirect(next);
   }
 
   const requestedPlatform = Array.isArray(platform) ? platform[0] : platform;
   if (requestedPlatform) {
-    const isValidPlatform = platformList.some(
+    const validPlatform = platformOrGuideList.find(
       p => p.key === requestedPlatform?.toLowerCase()
     );
-    if (isValidPlatform) {
-      return redirect(`/platforms/${requestedPlatform}${pathname}`);
+    if (validPlatform) {
+      return redirect(`${validPlatform.url}${pathname}`);
     }
   }
 
@@ -82,12 +151,12 @@ export default async function Page(props: {
       <Alert>{platformInfo}</Alert>
 
       <ul>
-        {platformList.map(p => (
-          <li key={p.key}>
-            <SmartLink to={`/platforms/${p.key}${pathname}`}>
+        {platformOrGuideList.map(p => (
+          <li key={p.key} style={{marginLeft: p.shouldBeNested ? '20px' : '0'}}>
+            <SmartLink to={`${p.url}${pathname}`}>
               <PlatformIcon
                 size={16}
-                platform={p.icon ?? p.key}
+                platform={p.icon}
                 style={{marginRight: '0.5rem'}}
                 format="sm"
               />