Skip to content

Commit 2d2a6d7

Browse files
madster456N2D4
madster456
and
N2D4
authored
[Docs][UI] - Fix unclickable links in tabbed content (#883)
<!-- Make sure you've read the CONTRIBUTING.md guidelines: https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md --> <img width="928" height="173" alt="image" src="https://github.com/user-attachments/assets/bd277770-c200-42a6-8ed5-752becfbb178" /> <!-- ELLIPSIS_HIDDEN --> ---- > [!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. > > <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 b4dba1d. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed.</sup> <!-- ELLIPSIS_HIDDEN --> <!-- RECURSEML_SUMMARY:START --> ## Review by RecurseML _🔍 Review performed on [9318e2b..b4dba1d](9318e2b...b4dba1dcbccba5c9125ce910cfd9bddddbe76128)_ ✨ No bugs found, your code is sparkling clean <details> <summary>✅ Files analyzed, no issues (1)</summary> • `docs/src/components/ui/tabs.tsx` </details> <details> <summary>⏭️ Files skipped (trigger manually) (1)</summary> | 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) </details> [![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) <!-- RECURSEML_SUMMARY:END --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
1 parent bba4db2 commit 2d2a6d7

2 files changed

Lines changed: 73 additions & 46 deletions

File tree

‎docs/src/components/ui/tabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const TabsContent = React.forwardRef<
6262
{...props}
6363
className={cn(
6464
"relative p-3 text-sm bg-fd-background outline-none",
65-
"before:absolute before:inset-0 before:opacity-0 before:transition-opacity before:duration-300",
65+
"before:absolute before:inset-0 before:opacity-0 before:transition-opacity before:duration-300 before:pointer-events-none",
6666
"focus-visible:before:opacity-100",
6767
props.className,
6868
)}

‎docs/templates/getting-started/production.mdx‎

Lines changed: 72 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -48,59 +48,86 @@ To use your own OAuth provider setups in production, follow these steps for each
4848
<TabsTrigger value="x">X</TabsTrigger>
4949
</TabsList>
5050

51-
<TabsContent value="google">
52-
[Google OAuth Setup Guide](https://developers.google.com/identity/protocols/oauth2#1.-obtain-oauth-2.0-credentials-from-the-dynamic_data.setvar.console_name-.)
53-
Callback URL:
54-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/google`
55-
</TabsContent>
51+
<TabsContent value="google">
52+
[Google OAuth Setup Guide](https://developers.google.com/identity/protocols/oauth2#1.-obtain-oauth-2.0-credentials-from-the-dynamic_data.setvar.console_name-.)
53+
54+
Callback URL:
55+
```
56+
https://api.stack-auth.com/api/v1/auth/oauth/callback/google
57+
```
58+
</TabsContent>
5659

57-
<TabsContent value="github">
58-
[GitHub OAuth Setup Guide](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
59-
Callback URL:
60-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/github`
61-
</TabsContent>
60+
<TabsContent value="github">
61+
[GitHub OAuth Setup Guide](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
62+
63+
Callback URL:
64+
```
65+
https://api.stack-auth.com/api/v1/auth/oauth/callback/github
66+
```
67+
</TabsContent>
6268

63-
<TabsContent value="facebook">
64-
[Facebook OAuth Setup Guide](https://developers.facebook.com/docs/development/create-an-app/facebook-login-use-case)
65-
Callback URL:
66-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/facebook`
67-
</TabsContent>
69+
<TabsContent value="facebook">
70+
[Facebook OAuth Setup Guide](https://developers.facebook.com/docs/development/create-an-app/facebook-login-use-case)
71+
72+
Callback URL:
73+
```
74+
https://api.stack-auth.com/api/v1/auth/oauth/callback/facebook
75+
```
76+
</TabsContent>
6877

69-
<TabsContent value="microsoft">
70-
[Microsoft Azure OAuth Setup Guide](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app)
71-
Callback URL:
72-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/microsoft`
73-
</TabsContent>
78+
<TabsContent value="microsoft">
79+
[Microsoft Azure OAuth Setup Guide](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app)
80+
81+
Callback URL:
82+
```
83+
https://api.stack-auth.com/api/v1/auth/oauth/callback/microsoft
84+
```
85+
</TabsContent>
7486

75-
<TabsContent value="spotify">
76-
[Spotify OAuth Setup Guide](https://developer.spotify.com/documentation/general/guides/app-settings/)
77-
Callback URL:
78-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/spotify`
79-
</TabsContent>
87+
<TabsContent value="spotify">
88+
[Spotify OAuth Setup Guide](https://developer.spotify.com/documentation/general/guides/app-settings/)
89+
90+
Callback URL:
91+
```
92+
https://api.stack-auth.com/api/v1/auth/oauth/callback/spotify
93+
```
94+
</TabsContent>
8095

81-
<TabsContent value="gitlab">
82-
[Gitlab OAuth Setup Guide](https://docs.gitlab.com/ee/integration/oauth_provider.html)
83-
Callback URL:
84-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/gitlab`
85-
</TabsContent>
96+
<TabsContent value="gitlab">
97+
[Gitlab OAuth Setup Guide](https://docs.gitlab.com/ee/integration/oauth_provider.html)
98+
99+
Callback URL:
100+
```
101+
https://api.stack-auth.com/api/v1/auth/oauth/callback/gitlab
102+
```
103+
</TabsContent>
86104

87-
<TabsContent value="bitbucket">
88-
[Bitbucket OAuth Setup Guide](https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud)
89-
Callback URL:
90-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/bitbucket`
91-
</TabsContent>
105+
<TabsContent value="bitbucket">
106+
[Bitbucket OAuth Setup Guide](https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud)
107+
108+
Callback URL:
109+
```
110+
https://api.stack-auth.com/api/v1/auth/oauth/callback/bitbucket
111+
```
112+
</TabsContent>
92113

93-
<TabsContent value="linkedin">
94-
[LinkedIn OAuth Setup Guide](https://learn.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin%2Fcontext&tabs=HTTPS1)
95-
Callback URL:
96-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/linkedin`
97-
</TabsContent>
114+
<TabsContent value="linkedin">
115+
[LinkedIn OAuth Setup Guide](https://learn.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin%2Fcontext&tabs=HTTPS1)
116+
117+
Callback URL:
118+
```
119+
https://api.stack-auth.com/api/v1/auth/oauth/callback/linkedin
120+
```
121+
</TabsContent>
98122

99-
<TabsContent value="x">
100-
[X OAuth Setup Guide](https://developer.x.com/en/docs/apps/overview)
101-
Callback URL:
102-
`https://api.stack-auth.com/api/v1/auth/oauth/callback/x`
103-
</TabsContent>
123+
<TabsContent value="x">
124+
[X OAuth Setup Guide](https://developer.x.com/en/docs/apps/overview)
125+
126+
Callback URL:
127+
```
128+
https://api.stack-auth.com/api/v1/auth/oauth/callback/x
129+
```
130+
</TabsContent>
104131
</Tabs>
105132
<Step>
106133
## Enter OAuth Credentials

0 commit comments

Comments
 (0)