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 images

Browse Source
This commit is contained in:
Zai Shi 2025-03-04 17:32:40 -08:00
parent 66d4e0ad5c
commit a53fa873b1
3 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,9 @@ 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.
![UserButton](../imgs/user-button.png)
<div className="stack-white-image-showcase">
<img src="../imgs/user-button.png" alt="UserButton" className="stack-200h" />
</div>
```tsx title="page.tsx"
import { UserButton } from '@stackframe/stack';
@ -27,7 +29,9 @@ export default function Page() {
These components show a sign-in and sign-up form, respectively.
![Sign-in Component](../imgs/sign-in.png)
<div className="stack-white-image-showcase">
<img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
</div>
```tsx title="page.tsx"
import { SignIn } from '@stackframe/stack';

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

@ -145,14 +145,15 @@ 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.
![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>
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:
![Stack account settings page](../imgs/account-settings.png)
## Next steps
Next up, we will show you how to [retrieve and update user information](./users.mdx), and how to [protect a page](../concepts/backend-integration.mdx) from unauthorized access.
@ -236,7 +237,9 @@ 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.
![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>
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:

21
docs/fern/style.css
View File

@ -142,50 +142,57 @@ tr.stack-clickable-row-missing {
}
.stack-50h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 50px !important;
object-fit: contain !important;
}
.stack-100h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 100px !important;
object-fit: contain !important;
}
.stack-150h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 150px !important;
object-fit: contain !important;
}
.stack-200h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 200px !important;
object-fit: contain !important;
}
.stack-250h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 250px !important;
object-fit: contain !important;
}
.stack-300h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 300px !important;
object-fit: contain !important;
}
.stack-350h {
aspect-ratio: unset !important;
aspect-ratio: auto !important;
height: unset !important;
width: unset !important;
height: 350px !important;
object-fit: contain !important;
}