mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
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:
parent
35b96c79a5
commit
cf7a540e1a
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
24
docs/templates/components/index.mdx
vendored
24
docs/templates/components/index.mdx
vendored
@ -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
|
||||
<SignIn />
|
||||
</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
|
||||
<SignUp />
|
||||
</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
|
||||
<CredentialSignIn />
|
||||
</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
|
||||
<CredentialSignUp />
|
||||
</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
|
||||
<OAuthButton />
|
||||
</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
|
||||
<UserButton />
|
||||
</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">
|
||||
<StackHandler />
|
||||
</div>
|
||||
</Card>
|
||||
<Card href="../components/stack-provider">
|
||||
<Card href="./components/stack-provider">
|
||||
<div className="components-card-content">
|
||||
<StackProvider />
|
||||
</div>
|
||||
</Card>
|
||||
<Card href="../components/stack-theme">
|
||||
<Card href="./components/stack-theme">
|
||||
<div className="components-card-content">
|
||||
<StackTheme />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user