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 0a5337de8c. 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>
This commit is contained in:
Madison 2025-07-23 21:13:30 -05:00 committed by GitHub
parent 35b96c79a5
commit cf7a540e1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 42 additions and 21 deletions

View File

@ -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);
}

View File

@ -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 {

View File

@ -42,7 +42,7 @@ 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" />
@ -50,7 +50,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
&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" />
@ -58,7 +58,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
&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" />
@ -66,7 +66,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
&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" />
@ -74,7 +74,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
&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" />
@ -82,7 +82,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
&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,7 +96,7 @@ 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" />
@ -104,7 +104,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
&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>