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

fixed fern imgs

Browse Source
This commit is contained in:
Zai Shi 2025-03-12 16:35:56 -07:00
parent 4a52f52721
commit 5c8efbd56a
12 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@ 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" className="stack-250h" />
<div className="stack-white-image-showcase stack-250h">
<img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" />
</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.

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

@ -5,8 +5,8 @@ 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" className="stack-250h" />
<div className="stack-white-image-showcase stack-250h">
<img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" />
</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-template/components/oauth-button-group.mdx
View File

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

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

@ -5,7 +5,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">
<div className="stack-white-image-showcase stack-50h">
<img src="../imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
</div>

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

@ -5,8 +5,8 @@ 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" className="stack-250h" />
<div className="stack-white-image-showcase stack-250h">
<img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" />
</div>
For a comprehensive guide on using this component, refer to our [Team Selection documentation](../concepts/team-selection.mdx).

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

@ -5,8 +5,8 @@ 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" className="stack-350h" />
<div className="stack-white-image-showcase stack-350h">
<img src="../imgs/sign-in.png" alt="SignIn" />
</div>
For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).

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

@ -5,8 +5,8 @@ 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" className="stack-350h" />
<div className="stack-white-image-showcase stack-350h">
<img src="../imgs/sign-up.png" alt="SignUp" />
</div>
For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).

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

@ -5,8 +5,8 @@ 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" className="stack-250h" />
<div className="stack-white-image-showcase stack-250h">
<img src="../imgs/user-button.png" alt="UserButton" />
</div>
## Props

8
docs/fern/docs/pages-template/getting-started/components.mdx
View File

@ -11,8 +11,8 @@ For the full documentation of all available components, please refer to the [com
The `<UserButton />` component shows the user's avatar that opens a dropdown with various user settings on click.
<div className="stack-white-image-showcase">
<img src="../imgs/user-button.png" alt="UserButton" className="stack-200h" />
<div className="stack-white-image-showcase stack-200h">
<img src="../imgs/user-button.png" alt="UserButton" />
</div>
```tsx title="page.tsx"
@ -29,8 +29,8 @@ export default function Page() {
These components show a sign-in and sign-up form, respectively.
<div className="stack-white-image-showcase">
<img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
<div className="stack-white-image-showcase stack-350h">
<img src="../imgs/sign-in.png" alt="SignIn" />
</div>
```tsx title="page.tsx"

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

@ -145,8 +145,8 @@ We recommend using our **setup wizard** for a seamless installation experience.
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/sign-up), you will see the sign-up page.
<div className="stack-white-image-showcase">
<img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
<div className="stack-white-image-showcase stack-350h">
<img src="../imgs/sign-in.png" alt="SignIn" />
</div>
After signing up/in, you will be redirected back to the home page. We will show you how to add user information to it in the next section. You can also check out the [http://localhost:3000/handler/account-settings](http://localhost:3000/handler/account-settings) page which looks like this:
@ -237,8 +237,8 @@ Before getting started, make sure you have a [React project](https://react.dev/l
That's it! Stack is now configured in your React project. If you start your React app and navigate to [http://localhost:5173/handler/sign-up](http://localhost:5173/handler/sign-up), you will see the sign-up page.
<div className="stack-white-image-showcase">
<img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
<div className="stack-white-image-showcase stack-350h">
<img src="../imgs/sign-in.png" alt="SignIn" />
</div>
After signing up/in, you will be redirected back to the home page. We will show you how to add user information to it in the next section. You can also check out the [http://localhost:5173/handler/account-settings](http://localhost:5173/handler/account-settings) page which looks like this:

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

@ -77,8 +77,8 @@ 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:
<div className="stack-white-image-showcase">
<img src="./imgs/sign-in.png" alt="SignIn" className="stack-350h" />
<div className="stack-white-image-showcase stack-350h">
<img src="./imgs/sign-in.png" alt="SignIn" />
</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 depend on your help 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.

14
docs/fern/style.css
View File

@ -141,7 +141,7 @@ svg[icon*="square-u"] {
display: none;
}
.stack-50h {
div.stack-50h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
@ -149,7 +149,7 @@ svg[icon*="square-u"] {
object-fit: contain !important;
}
.stack-100h {
div.stack-100h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
@ -157,7 +157,7 @@ svg[icon*="square-u"] {
object-fit: contain !important;
}
.stack-150h {
div.stack-150h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
@ -165,7 +165,7 @@ svg[icon*="square-u"] {
object-fit: contain !important;
}
.stack-200h {
div.stack-200h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
@ -173,7 +173,7 @@ svg[icon*="square-u"] {
object-fit: contain !important;
}
.stack-250h {
div.stack-250h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
@ -181,7 +181,7 @@ svg[icon*="square-u"] {
object-fit: contain !important;
}
.stack-300h {
div.stack-300h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
@ -189,7 +189,7 @@ svg[icon*="square-u"] {
object-fit: contain !important;
}
.stack-350h {
div.stack-350h > span > span > img {
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;