From 2d2a6d7cd50a3fbc85520706b6c9c107e9b7906a Mon Sep 17 00:00:00 2001 From: Madison Date: Mon, 15 Sep 2025 15:37:14 -0500 Subject: [PATCH] [Docs][UI] - Fix unclickable links in tabbed content (#883) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit image ---- > [!IMPORTANT] > Fixes unclickable links in tabbed content by updating CSS and improves readability in `production.mdx`. > > - **Behavior**: > - Fixes unclickable links in `TabsContent` by adding `before:pointer-events-none` to CSS in `tabs.tsx`. > - **Documentation**: > - Reformats callback URL sections in `production.mdx` for better readability by adding line breaks and code blocks. > > This description was created by [Ellipsis](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral) for b4dba1dcbccba5c9125ce910cfd9bddddbe76128. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed. ## Review by RecurseML _🔍 Review performed on [9318e2b..b4dba1d](https://github.com/stack-auth/stack-auth/compare/9318e2b6ce47bbca5bc524cf8fd75e7ea0d7ee28...b4dba1dcbccba5c9125ce910cfd9bddddbe76128)_ ✨ No bugs found, your code is sparkling clean
✅ Files analyzed, no issues (1) • `docs/src/components/ui/tabs.tsx`
⏭️ Files skipped (trigger manually) (1) | Locations | Trigger Analysis | |-----------|------------------| `docs/templates/getting-started/production.mdx` | [![Analyze](https://img.shields.io/badge/Analyze-238636?style=plastic)](https://squash-322339097191.europe-west3.run.app/interactive/b1018883a522f85ae27f3e65364f5c6175912708132d3b08a1b0f7189cd5d4a3/?repo_owner=stack-auth&repo_name=stack-auth&pr_number=883)
[![Need help? Join our Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U) ## Summary by CodeRabbit * Bug Fixes * Fixed an overlay issue in Tabs that blocked interactions, ensuring tab content is clickable and responsive. * Documentation * Reformatted OAuth Callback URLs into clear code blocks across all provider tabs (Google, GitHub, Facebook, Microsoft, Spotify, GitLab, Bitbucket, LinkedIn, X). * Updated select provider links for accuracy (including Google anchor and GitHub canonical path). * Improved readability and consistency of setup instructions without changing behavior. --------- Co-authored-by: Konsti Wohlwend --- docs/src/components/ui/tabs.tsx | 2 +- docs/templates/getting-started/production.mdx | 117 +++++++++++------- 2 files changed, 73 insertions(+), 46 deletions(-) diff --git a/docs/src/components/ui/tabs.tsx b/docs/src/components/ui/tabs.tsx index 9f3703b74..3c8261cf1 100644 --- a/docs/src/components/ui/tabs.tsx +++ b/docs/src/components/ui/tabs.tsx @@ -62,7 +62,7 @@ const TabsContent = React.forwardRef< {...props} className={cn( "relative p-3 text-sm bg-fd-background outline-none", - "before:absolute before:inset-0 before:opacity-0 before:transition-opacity before:duration-300", + "before:absolute before:inset-0 before:opacity-0 before:transition-opacity before:duration-300 before:pointer-events-none", "focus-visible:before:opacity-100", props.className, )} diff --git a/docs/templates/getting-started/production.mdx b/docs/templates/getting-started/production.mdx index d91dc68d3..2f1365f2e 100644 --- a/docs/templates/getting-started/production.mdx +++ b/docs/templates/getting-started/production.mdx @@ -48,59 +48,86 @@ To use your own OAuth provider setups in production, follow these steps for each X - - [Google OAuth Setup Guide](https://developers.google.com/identity/protocols/oauth2#1.-obtain-oauth-2.0-credentials-from-the-dynamic_data.setvar.console_name-.) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/google` - + + [Google OAuth Setup Guide](https://developers.google.com/identity/protocols/oauth2#1.-obtain-oauth-2.0-credentials-from-the-dynamic_data.setvar.console_name-.) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/google + ``` + - - [GitHub OAuth Setup Guide](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/github` - + + [GitHub OAuth Setup Guide](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/github + ``` + - - [Facebook OAuth Setup Guide](https://developers.facebook.com/docs/development/create-an-app/facebook-login-use-case) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/facebook` - + + [Facebook OAuth Setup Guide](https://developers.facebook.com/docs/development/create-an-app/facebook-login-use-case) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/facebook + ``` + - - [Microsoft Azure OAuth Setup Guide](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/microsoft` - + + [Microsoft Azure OAuth Setup Guide](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/microsoft + ``` + - - [Spotify OAuth Setup Guide](https://developer.spotify.com/documentation/general/guides/app-settings/) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/spotify` - + + [Spotify OAuth Setup Guide](https://developer.spotify.com/documentation/general/guides/app-settings/) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/spotify + ``` + - - [Gitlab OAuth Setup Guide](https://docs.gitlab.com/ee/integration/oauth_provider.html) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/gitlab` - + + [Gitlab OAuth Setup Guide](https://docs.gitlab.com/ee/integration/oauth_provider.html) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/gitlab + ``` + - - [Bitbucket OAuth Setup Guide](https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/bitbucket` - + + [Bitbucket OAuth Setup Guide](https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/bitbucket + ``` + - - [LinkedIn OAuth Setup Guide](https://learn.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin%2Fcontext&tabs=HTTPS1) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/linkedin` - + + [LinkedIn OAuth Setup Guide](https://learn.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin%2Fcontext&tabs=HTTPS1) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/linkedin + ``` + - - [X OAuth Setup Guide](https://developer.x.com/en/docs/apps/overview) - Callback URL: - `https://api.stack-auth.com/api/v1/auth/oauth/callback/x` - + + [X OAuth Setup Guide](https://developer.x.com/en/docs/apps/overview) + + Callback URL: + ``` + https://api.stack-auth.com/api/v1/auth/oauth/callback/x + ``` + ## Enter OAuth Credentials