CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update documentation image styling with consistent height classes (#443)

Browse Source
This commit is contained in:
Zai Shi 2025-02-17 21:05:23 +01:00 committed by GitHub
parent 5824eae0a6
commit 229a936a13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/fern/docs/pages/components/credential-sign-in.mdx
View File

@ -6,7 +6,7 @@ slug: components/credential-sign-in
A component that renders a sign-in form with email and password fields.
<div className="stack-white-image-showcase">
<img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" height={233} />
<img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-250h" />
</div>
Note that if credential sign-in is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.

2
docs/fern/docs/pages/components/credential-sign-up.mdx
View File

@ -6,7 +6,7 @@ slug: components/credential-sign-up
A component that renders a sign-up form with email and password fields.
<div className="stack-white-image-showcase">
<img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" height={233} />
<img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-250h" />
</div>
Note that if credential sign-up is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.

2
docs/fern/docs/pages/components/oauth-button-group.mdx
View File

@ -6,7 +6,7 @@ slug: components/oauth-button-group
Renders all the OAuth buttons enabled on the project dashboard.
<div className="stack-white-image-showcase">
<img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" height={240} />
<img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-250h" />
</div>
<Callout>

2
docs/fern/docs/pages/components/oauth-button.mdx
View File

@ -6,7 +6,7 @@ slug: components/oauth-button
Renders a customized OAuth button for various providers to initiate sign-in or sign-up processes.
<div className="stack-white-image-showcase">
<img src="../imgs/oauth-button.png" alt="OAuthButton" height={60} />
<img src="../imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
</div>
Note that if the specific OAuth provider is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.

18
docs/fern/docs/pages/components/overview.mdx
View File

@ -47,7 +47,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/sign-in.png" alt="SignIn" height={200} />
<img src="../imgs/sign-in.png" alt="SignIn" className="stack-200h" />
</div>
&lt;SignIn /&gt;
</div>
@ -57,7 +57,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/sign-up.png" alt="SignUp" height={200} />
<img src="../imgs/sign-up.png" alt="SignUp" className="stack-200h" />
</div>
&lt;SignUp /&gt;
</div>
@ -67,7 +67,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" height={170} />
<img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-150h" />
</div>
&lt;CredentialSignIn /&gt;
</div>
@ -77,7 +77,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" height={200} />
<img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-200h" />
</div>
&lt;CredentialSignUp /&gt;
</div>
@ -87,7 +87,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/oauth-button.png" alt="OAuthButton" height={50} />
<img src="../imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
</div>
&lt;OAuthButton /&gt;
</div>
@ -97,7 +97,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" height={200} />
<img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-200h" />
</div>
&lt;OAuthButtonGroup /&gt;
</div>
@ -113,7 +113,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
>
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/user-button.png" alt="UserButton" height={200} />
<img src="../imgs/user-button.png" alt="UserButton" className="stack-200h" />
</div>
&lt;UserButton /&gt;
</div>
@ -121,7 +121,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
<Card href="/components/account-settings">
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/account-settings.png" alt="AccountSettings" height={100} />
<img src="../imgs/account-settings.png" alt="AccountSettings" className="stack-100h" />
</div>
&lt;AccountSettings /&gt;
</div>
@ -135,7 +135,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
<Card href="/components/selected-team-switcher">
<div className="components-card-content">
<div className="img-wrapper">
<img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" height={200} />
<img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-200h" />
</div>
&lt;SelectedTeamSwitcher /&gt;
</div>

2
docs/fern/docs/pages/components/selected-team-switcher.mdx
View File

@ -6,7 +6,7 @@ slug: components/selected-team-switcher
A React component for switching between teams. It displays a dropdown of teams and allows the user to select a team.
<div className="stack-white-image-showcase">
<img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" height={285} />
<img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-250h" />
</div>
For a comprehensive guide on using this component, refer to our [Team Selection documentation](../concepts/team-selection.mdx).

2
docs/fern/docs/pages/components/sign-in.mdx
View File

@ -6,7 +6,7 @@ slug: components/sign-in
Renders a sign-in component with customizable options.
<div className="stack-white-image-showcase">
<img src="../imgs/sign-in.png" alt="SignIn" height={376} />
<img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
</div>
For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).

2
docs/fern/docs/pages/components/sign-up.mdx
View File

@ -6,7 +6,7 @@ slug: components/sign-up
A component that renders a sign-up page with various customization options.
<div className="stack-white-image-showcase">
<img src="../imgs/sign-up.png" alt="SignUp" height={376} />
<img src="../imgs/sign-up.png" alt="SignUp" className="stack-350h" />
</div>
For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).

2
docs/fern/docs/pages/components/user-button.mdx
View File

@ -6,7 +6,7 @@ slug: components/user-button
Renders a user button component with optional user information, color mode toggle, and extra menu items.
<div className="stack-white-image-showcase">
<img src="../imgs/user-button.png" alt="UserButton" />
<img src="../imgs/user-button.png" alt="UserButton" className="stack-250h" />
</div>
## Props

2
docs/fern/docs/pages/getting-started/setup.mdx
View File

@ -137,7 +137,7 @@ We recommend using our **setup wizard**, which will automatically detect your pr
## Post-setup
That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup), you will see the Stack sign-up page.
That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup), you will see the sign-up page.
![Stack sign in page](../imgs/sign-in.png)

4
docs/fern/docs/pages/overview.mdx
View File

@ -73,7 +73,9 @@ The user data will update in both the frontend and backend automatically. The up
You also get pages and components for the authentication flow out-of-the-box. This is the sign-in page you get without writing a single line of code:
![Stack sign in page](./imgs/sign-in.png)
<div className="stack-white-image-showcase">
<img src="./imgs/sign-in.png" alt="SignIn" className="stack-350h" />
</div>
Notice, there's no branding on our components. We believe we should grow by building the best product, not by forcing our brand onto your users. This means we **rely on you to spread the word about Stack**. If you like what you're reading, please take a moment to tell one or two of your friends about us.

29
docs/fern/style.css
View File

@ -3,7 +3,6 @@
border-left: 1px solid var(--border);
}
.stack-white-image-showcase {
display: flex;
justify-content: center;
@ -142,6 +141,30 @@ tr.stack-clickable-row-missing {
display: none;
}
.stack-white-image-showcase > img {
object-fit: contain;
.stack-50h {
height: 50px !important;
}
.stack-100h {
height: 100px !important;
}
.stack-150h {
height: 150px !important;
}
.stack-200h {
height: 200px !important;
}
.stack-250h {
height: 250px !important;
}
.stack-300h {
height: 300px !important;
}
.stack-350h {
height: 350px !important;
}