fixing JS framework formatting for redirect pages

Author: Shannon Anahata

app/platform-redirect/page.tsx

@@ -39,12 +39,31 @@ export default async function Page(props: {
 
   // get rid of irrelevant platforms for the `next` path
   const platformList = extractPlatforms(rootNode).filter(platform_ => {
-    const node = nodeForPath(rootNode, [
+    // First check the main platform path
+    let node = nodeForPath(rootNode, [
       'platforms',
       platform_.key,
       ...pathname.split('/').filter(Boolean),
     ]);
 
+    // If not found, check if it's a guide (like dart/guides/flutter)
+    if (!node && platform_.guides) {
+      for (const guide of platform_.guides) {
+        node = nodeForPath(rootNode, [
+          'platforms',
+          platform_.key,
+          'guides',
+          guide.name,
+          ...pathname.split('/').filter(Boolean),
+        ]);
+        if (node) {
+          // Update the platform URL to point to the guide
+          platform_.url = guide.url;
+          break;
+        }
+      }
+    }
+
     // extract title and description for displaying it on page
     if (node && title === defaultTitle && pathname.length > 0) {
       title = node.frontmatter.title ?? title;
@@ -54,18 +73,78 @@ export default async function Page(props: {
     return !!node;
   });
 
-  if (platformList.length === 0) {
+  // For JavaScript platforms, also include individual frameworks that support the content
+  const expandedPlatformList = [...platformList];
+  
+  // Find JavaScript platform and add its supported frameworks
+  // Check both the filtered platformList and all platforms to find JavaScript
+  const javascriptPlatform = platformList.find(p => p.key === 'javascript') || 
+                            extractPlatforms(rootNode).find(p => p.key === 'javascript');
+  
+  if (javascriptPlatform && (
+    pathname.startsWith('/session-replay/') ||
+    pathname.startsWith('/tracing/') ||
+    pathname.startsWith('/profiling/') ||
+    pathname.startsWith('/logs/')
+  )) {
+    // Get the JavaScript page to check which frameworks are supported
+    const jsPageNode = nodeForPath(rootNode, [
+      'platforms',
+      'javascript',
+      ...pathname.split('/').filter(Boolean),
+    ]);
+    
+    if (jsPageNode && jsPageNode.frontmatter.notSupported) {
+      const notSupported = jsPageNode.frontmatter.notSupported;
+      
+      // Remove JavaScript from the main list temporarily
+      const otherPlatforms = expandedPlatformList.filter(p => p.key !== 'javascript');
+      
+      // Add supported JavaScript frameworks as separate entries
+      const jsFrameworks = [];
+      javascriptPlatform.guides?.forEach(guide => {
+        const guideKey = `javascript.${guide.name}`;
+        if (!notSupported.includes(guideKey)) {
+          jsFrameworks.push({
+            key: guideKey,
+            name: guide.name,
+            type: 'platform' as const,
+            url: javascriptPlatform.url,
+            title: guide.title,
+            caseStyle: guide.caseStyle,
+            sdk: guide.sdk,
+            fallbackPlatform: guide.fallbackPlatform,
+            language: guide.language,
+            categories: guide.categories,
+            keywords: guide.keywords,
+            guides: [],
+            integrations: [],
+            icon: `javascript-${guide.name}`,
+          });
+        }
+      });
+      
+      // Rebuild the list with JavaScript and its frameworks at the end
+      expandedPlatformList.length = 0; // Clear the array
+      expandedPlatformList.push(...otherPlatforms); // Add other platforms first
+      expandedPlatformList.push(javascriptPlatform); // Add JavaScript platform
+      expandedPlatformList.push(...jsFrameworks); // Add JavaScript frameworks last
+    }
+  }
+
+  if (expandedPlatformList.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 = expandedPlatformList.find(
       p => p.key === requestedPlatform?.toLowerCase()
     );
-    if (isValidPlatform) {
-      return redirect(`/platforms/${requestedPlatform}${pathname}`);
+    if (validPlatform) {
+      // Use the platform's URL (which may have been updated to point to a guide)
+      return redirect(`${validPlatform.url}${pathname}`);
     }
   }
 
@@ -82,19 +161,24 @@ export default async function Page(props: {
       <Alert>{platformInfo}</Alert>
 
       <ul>
-        {platformList.map(p => (
-          <li key={p.key}>
-            <SmartLink to={`/platforms/${p.key}${pathname}`}>
-              <PlatformIcon
-                size={16}
-                platform={p.icon ?? p.key}
-                style={{marginRight: '0.5rem'}}
-                format="sm"
-              />
-              <h4 style={{display: 'inline-block'}}>{p.title}</h4>
-            </SmartLink>
-          </li>
-        ))}
+        {expandedPlatformList.map(p => {
+          // Check if this is a JavaScript framework (has javascript. prefix)
+          const isJSFramework = p.key.startsWith('javascript.');
+          
+          return (
+            <li key={p.key} style={{marginLeft: isJSFramework ? '20px' : '0'}}>
+              <SmartLink to={`${p.url}${pathname}`}>
+                <PlatformIcon
+                  size={16}
+                  platform={p.icon ?? p.key}
+                  style={{marginRight: '0.5rem'}}
+                  format="sm"
+                />
+                <h4 style={{display: 'inline-block'}}>{p.title}</h4>
+              </SmartLink>
+            </li>
+          );
+        })}
       </ul>
     </DocPage>
   );