fix links and redirect issues on components index page (#796)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

Fixes broken links on /docs/{platform}/components pagse to now work, and
fixes redirect when switching off of react-like platforms when on
components or sdk pages.
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Fixes broken links and redirect issues on components index page by
updating paths and improving URL handling logic.
> 
>   - **Behavior**:
> - Fixes broken links on `/docs/{platform}/components` pages by
updating relative paths in `index.mdx`.
> - Corrects redirect logic when switching platforms on components or
SDK pages in `docs-layout-router.tsx`.
>   - **Functions**:
> - Adds `joinUrlPath()` in `generate-platform-navigation.js` to safely
join URL path segments.
> - Updates `pageExistsForPlatform()` in
`generate-platform-navigation.js` to handle `/index.mdx` paths.
>   - **Misc**:
> - Adds type safety checks for platform handling in
`docs-layout-router.tsx`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 0a5337d. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>

Author: madster456

docs/scripts/generate-platform-navigation.js

@@ -61,7 +61,7 @@ function joinUrlPath(...segments: string[]): string {
   return segments
     .filter(segment => segment && segment.length > 0)
     .join('/')
-    .replace(/\/+/g, '/'); // Remove duplicate slashes
+    .replace(/\\/+/g, '/'); // Remove duplicate slashes
 }
 
 /**
@@ -79,7 +79,7 @@ export function pageExistsForPlatform(path: string, platform: Platform): boolean
   if (!page && !pathWithExt.includes('/index.mdx')) {
     const indexPath = normalizedPath.endsWith('.mdx')
       ? normalizedPath.replace('.mdx', '/index.mdx')
-      : joinUrlPath(normalizedPath, 'index.mdx');
+      : \`\${normalizedPath}/index.mdx\`;
     page = PLATFORM_PAGES.find(p => p.path === indexPath);
   }
 

docs/src/components/layouts/docs-layout-router.tsx

@@ -30,8 +30,8 @@ import type { PageTree } from 'fumadocs-core/server';
 import { usePathname } from 'next/navigation';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
-import { getSmartRedirectUrl } from '../../lib/navigation-utils';
-import { getCurrentPlatform, PLATFORMS } from '../../lib/platform-utils';
+import { getSmartRedirectUrl, platformSupportsComponents, platformSupportsSDK } from '../../lib/navigation-utils';
+import { getCurrentPlatform, PLATFORMS, type Platform } from '../../lib/platform-utils';
 import type { Option } from '../layout/root-toggle';
 import { PlatformRedirect } from '../platform-redirect';
 import { ApiSidebarContent } from './api/api-sidebar';
@@ -149,18 +149,39 @@ export function DynamicDocsLayout({ children, ...props }: DynamicDocsLayoutProps
     // Extract current platform from pathname
     const currentPlatform = getCurrentPlatform(pathname);
 
+    // Helper function to safely cast platform to Platform type
+    const isPlatform = (platform: string): platform is Platform => {
+      return ['next', 'react', 'js', 'python'].includes(platform);
+    };
+
     return PLATFORMS.map(platform => {
+      // Safe type guard - if this fails, something is seriously wrong with PLATFORMS constant
+      if (!isPlatform(platform)) {
+        console.error(`Invalid platform in PLATFORMS array: ${platform}`);
+        // Fallback to a safe default to prevent runtime errors
+        platform = 'next';
+      }
+
+      const platformType = platform as Platform;
       let url: string;
 
       if (isInSdkSection(pathname)) {
-        // For SDK section: /docs/platform/sdk
-        url = `/docs/${platform}/sdk`;
+        // For SDK section: check if platform supports SDK, otherwise use smart redirect
+        if (platformSupportsSDK(platformType)) {
+          url = `/docs/${platform}/sdk`;
+        } else {
+          url = getSmartRedirectUrl(pathname, platformType);
+        }
       } else if (isInComponentsSection(pathname)) {
-        // For Components section: /docs/platform/components
-        url = `/docs/${platform}/components`;
+        // For Components section: check if platform supports components, otherwise use smart redirect
+        if (platformSupportsComponents(platformType)) {
+          url = `/docs/${platform}/components`;
+        } else {
+          url = getSmartRedirectUrl(pathname, platformType);
+        }
       } else {
         // For normal docs: use smart redirect
-        url = getSmartRedirectUrl(pathname, platform);
+        url = getSmartRedirectUrl(pathname, platformType);
       }
 
       return {

docs/templates/components/index.mdx

@@ -42,47 +42,47 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
   ## Sign In and Sign Up
 
   <CardGroup>
-    <Card href="../components/sign-in" >
+    <Card href="./components/sign-in" >
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/sign-in.png" alt="SignIn" className="stack-200h" />
         </div>
         &lt;SignIn /&gt;
       </div>
     </Card>
-    <Card href="../components/sign-up">
+    <Card href="./components/sign-up">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/sign-up.png" alt="SignUp" className="stack-200h" />
         </div>
         &lt;SignUp /&gt;
       </div>
     </Card>
-    <Card href="../components/credential-sign-in">
+    <Card href="./components/credential-sign-in">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-150h" />
         </div>
         &lt;CredentialSignIn /&gt;
       </div>
     </Card>
-    <Card href="../components/credential-sign-up">
+    <Card href="./components/credential-sign-up">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-200h" />
         </div>
         &lt;CredentialSignUp /&gt;
       </div>
     </Card>
-    <Card href="../components/oauth-button">
+    <Card href="./components/oauth-button">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
         </div>
         &lt;OAuthButton /&gt;
       </div>
     </Card>
-    <Card href="../components/oauth-button-group">
+    <Card href="./components/oauth-button-group">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-200h" />
@@ -96,15 +96,15 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
   ## User
 
   <CardGroup>
-    <Card href="../components/user-button">
+    <Card href="./components/user-button">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/user-button.png" alt="UserButton" className="stack-200h" />
         </div>
         &lt;UserButton /&gt;
       </div>
     </Card>
-    <Card href="../components/account-settings">
+    <Card href="./components/account-settings">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/account-settings.png" alt="AccountSettings" className="stack-100h" />
@@ -118,7 +118,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     ## Teams & Organizations
 
   <CardGroup>
-    <Card href="../components/selected-team-switcher">
+    <Card href="./components/selected-team-switcher">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-200h" />
@@ -131,17 +131,17 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
   ## Utilities
 
   <CardGroup>
-    <Card href="../components/stack-handler">
+    <Card href="./components/stack-handler">
       <div className="components-card-content">
         &lt;StackHandler /&gt;
       </div>
     </Card>
-    <Card href="../components/stack-provider">
+    <Card href="./components/stack-provider">
       <div className="components-card-content">
         &lt;StackProvider /&gt;
       </div>
     </Card>
-    <Card href="../components/stack-theme">
+    <Card href="./components/stack-theme">
       <div className="components-card-content">
         &lt;StackTheme /&gt;
       </div>