Skip to content

Bret/update quickstart line marks #2720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Bret/update quickstart line marks #2720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fc57b56
fix: Line marks for Next.js Pages Router
BretHudson Oct 17, 2025
a724883
fix: Update React quickstart src/App.tsx to match generated file
BretHudson Oct 17, 2025
09e4450
fix: Update line marks on Expo quickstart
BretHudson Oct 17, 2025
1c7c096
fix: Update Astro quickstart line marks
BretHudson Oct 17, 2025
a7481da
Trim Layout.astro code, fold CSS block
BretHudson Oct 20, 2025
4a805cd
Run Prettier
BretHudson Oct 20, 2025
1b83e68
Merge branch 'main' into bret/update-quickstart-line-marks
SarahSoutoul Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions docs/getting-started/quickstart.astro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,9 @@ sdk: astro
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).

```astro {{ filename: 'src/layouts/Layout.astro' }}
```astro {{ filename: 'src/layouts/Layout.astro', mark: [[1, 3], [15, 22]], fold: [[27, 34]] }}
---
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components'

const { title } = Astro.props
---

<!doctype html>
Expand All @@ -131,15 +129,12 @@ sdk: astro
</head>
<body>
<header>
<h1>{title}</h1>
<nav>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</nav>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<slot />
</body>
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/quickstart.expo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ sdk: expo

Add the component to your root layout as shown in the following example:

```tsx {{ filename: 'app/_layout.tsx' }}
```tsx {{ filename: 'app/_layout.tsx', mark: [1, 6, 8] }}
import { ClerkProvider } from '@clerk/clerk-expo'
import { Slot } from 'expo-router'

Expand Down
46 changes: 36 additions & 10 deletions docs/getting-started/quickstart.react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,21 +153,47 @@ This tutorial will demonstrate how to create a new React app using Vite and add
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).

```tsx {{ filename: 'src/App.tsx', mark: [1, [6, 11]] }}
```tsx {{ filename: 'src/App.tsx', mark: [2, [12, 19]], fold: [[3, 6], [21, 40]] }}
import { useState } from 'react'
import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
Comment on lines +159 to +161
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment with these imports.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why add all of this tho? Think we want to keep the snippet as straightforward as possible.

I agree that keeping snippets straightforward is ideal. I've also noticed that many of the quickstart guides include the rest of the generated file from the `npx create-[...]-app" results in the snippet, and then fold them, as I've done here.

Where exactly should I draw the line between "make sure this snippet is representative of the generated file" and "remove anything irrelevant from the generated file"?

For example, is persisting the template's React & Vite logos necessary?

Copy link
Contributor

@SarahSoutoul SarahSoutoul Oct 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fair. I think this one is particularly flagrant to me because of the count code that is irrelevant to the rest of the code compared to other setup code in other SDKs. IMO, keeping the imports at the start would be fine, but I don't think we need all the code related to the count stuff.

A user experience is usually to copy the snippet and paste that into the file, which then removes the initial code anyway. So to me, that makes sense. I'd be keen to hear @alexisintech thoughts on this actually.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think adding syntax highlighting is fine, but let's not add anything else to the quickstart


function App() {
const [count, setCount] = useState(0)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this too.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cont] Is App.css something we should remove?


export default function App() {
return (
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<>
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">Click on the Vite and React logos to learn more</p>
</>
Comment on lines +177 to +192
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why add all of this tho? Think we want to keep the snippet as straightforward as possible.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Answered in the below comments because I think I'm making certain assumptions that I shouldn't 😅 ‍

)
}

export default App
```

## Create your first user
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/quickstart/pages-router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ sdk: nextjs
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).

```tsx {{ filename: 'pages/_app.tsx', mark: [[7, 15]] }}
```tsx {{ filename: 'pages/_app.tsx', mark: [2, [7, 18], 20] }}
import '@/styles/globals.css'
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import type { AppProps } from 'next/app'
Expand Down