mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
f3d0a68720
<!-- Make sure you've read the CONTRIBUTING.md guidelines: https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md --> feat(docs): centralize code examples with dynamic variant tabs This PR introduces a system for managing code examples centrally while supporting file-based variant tabs (like html/script) within a single code block. ## Changes - **Extended variant system**: `PlatformCodeblock` now supports custom variant names beyond just 'server'/'client', enabling tabs for any file grouping (e.g., html/script pairs) - **Vite example migration**: Moved vite-example.mdx code to `code-examples/vite-example.ts` with html/script variants - **LLM copy support**: The "Copy Markdown" button now expands `PlatformCodeblock` components to inline the actual code, so LLMs receive the full code examples instead of component references ## How it works Code examples with variants are now displayed with filename-based tabs: - Define examples with `variant: 'html'` and `variant: 'script'` in `code-examples/` - The tab labels automatically use the `filename` property - When copying markdown for LLMs, all variants are included with their filenames <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Documentation** * Added a Vite JavaScript example guide with grouped auth examples (init, index, password, OTP, OAuth) and wired examples into the getting-started navigation. * Removed the previous multi-page example guide and replaced it with the new Vite-focused page. * Documentation generation now expands platform code blocks to inline concrete examples for clearer rendered docs. * **Refactor** * Improved code-example variant handling to support flexible variant names for better tabbed/code-sample organization. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
446 lines
12 KiB
TypeScript
446 lines
12 KiB
TypeScript
import { CodeExample } from '../lib/code-examples';
|
|
|
|
export const viteExamples = {
|
|
'vite-example': {
|
|
'init-app': [
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
code: `import { StackClientApp } from "@stackframe/js";
|
|
|
|
// Add type declaration for Vite's import.meta.env
|
|
declare global {
|
|
interface ImportMeta {
|
|
env: {
|
|
VITE_STACK_API_URL: string;
|
|
VITE_STACK_PROJECT_ID: string;
|
|
VITE_STACK_PUBLISHABLE_CLIENT_KEY: string;
|
|
};
|
|
}
|
|
}
|
|
|
|
export const stackClientApp = new StackClientApp({
|
|
baseUrl: import.meta.env.VITE_STACK_API_URL,
|
|
projectId: import.meta.env.VITE_STACK_PROJECT_ID,
|
|
publishableClientKey: import.meta.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY,
|
|
tokenStore: "cookie",
|
|
urls: {
|
|
oauthCallback: window.location.origin + "/oauth",
|
|
},
|
|
});`,
|
|
highlightLanguage: 'typescript',
|
|
filename: 'stack/client.ts'
|
|
}
|
|
] as CodeExample[],
|
|
|
|
'index-page': [
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'html',
|
|
code: `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stack Auth JS Examples</title>
|
|
</head>
|
|
<body>
|
|
<h1>Stack Auth JS Examples</h1>
|
|
|
|
<div id="authOptions">
|
|
<p>Choose an authentication example:</p>
|
|
<ul>
|
|
<li><a href="/password-sign-in">Sign in with Password</a></li>
|
|
<li><a href="/password-sign-up">Create Account with Password</a></li>
|
|
<li><a href="/otp-sign-in">Sign in with OTP Code</a></li>
|
|
<li><a href="/oauth">Sign in with Google</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="userInfo" style="display: none;">
|
|
<h2>User Information</h2>
|
|
<p>Email: <span id="userEmail"></span></p>
|
|
<button id="signOut">Sign Out</button>
|
|
</div>
|
|
|
|
<script type="module" src="/index-script.ts"></script>
|
|
</body>
|
|
</html>`,
|
|
highlightLanguage: 'html',
|
|
filename: 'index.html'
|
|
},
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'script',
|
|
code: `import { stackClientApp } from "./stack/client";
|
|
|
|
const updateUIState = (user: any | null) => {
|
|
const authOptions = document.getElementById("authOptions");
|
|
const userInfo = document.getElementById("userInfo");
|
|
const userEmailSpan = document.getElementById("userEmail");
|
|
|
|
if (user) {
|
|
if (authOptions) authOptions.style.display = "none";
|
|
if (userInfo) userInfo.style.display = "block";
|
|
if (userEmailSpan) userEmailSpan.textContent = user.primaryEmail || "";
|
|
} else {
|
|
if (authOptions) authOptions.style.display = "block";
|
|
if (userInfo) userInfo.style.display = "none";
|
|
}
|
|
};
|
|
|
|
// Check if user is already signed in
|
|
stackClientApp.getUser().then(updateUIState);
|
|
|
|
// Handle Sign Out
|
|
document.getElementById("signOut")?.addEventListener("click", async () => {
|
|
const user = await stackClientApp.getUser();
|
|
if (user) {
|
|
await user.signOut();
|
|
updateUIState(null);
|
|
}
|
|
});`,
|
|
highlightLanguage: 'typescript',
|
|
filename: 'index-script.ts'
|
|
}
|
|
] as CodeExample[],
|
|
|
|
'password-sign-in': [
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'html',
|
|
code: `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Password Sign In</title>
|
|
</head>
|
|
<body>
|
|
<h1>Password Sign In</h1>
|
|
<p><a href="/">← Back to home</a></p>
|
|
|
|
<div id="loginForm">
|
|
<h2>Sign In</h2>
|
|
<input type="email" id="emailInput" placeholder="Email" />
|
|
<input type="password" id="passwordInput" placeholder="Password" />
|
|
<button id="signIn">Sign In</button>
|
|
<div>
|
|
<p>Don't have an account? <a href="/password-sign-up">Create account</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/password-sign-in-script.ts"></script>
|
|
</body>
|
|
</html>`,
|
|
highlightLanguage: 'html',
|
|
filename: 'password-sign-in.html'
|
|
},
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'script',
|
|
code: `import { stackClientApp } from "./stack/client";
|
|
|
|
// Check if user is already signed in
|
|
stackClientApp.getUser().then((user) => {
|
|
if (user) {
|
|
window.location.href = "/";
|
|
}
|
|
});
|
|
|
|
document.getElementById("showSignUp")?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
document.getElementById("loginForm")?.classList.add("hidden");
|
|
document.getElementById("signUpForm")?.classList.remove("hidden");
|
|
});
|
|
|
|
document.getElementById("showSignIn")?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
document.getElementById("loginForm")?.classList.remove("hidden");
|
|
document.getElementById("signUpForm")?.classList.add("hidden");
|
|
});
|
|
|
|
document.getElementById("signIn")?.addEventListener("click", async () => {
|
|
const emailInput = document.getElementById("emailInput") as HTMLInputElement;
|
|
const passwordInput = document.getElementById("passwordInput") as HTMLInputElement;
|
|
|
|
const result = await stackClientApp.signInWithCredential({
|
|
email: emailInput.value,
|
|
password: passwordInput.value,
|
|
});
|
|
|
|
if (result.status === "error") {
|
|
alert("Sign in failed. Please check your email and password and try again.");
|
|
} else {
|
|
window.location.href = "/";
|
|
}
|
|
});
|
|
|
|
document.getElementById("signUp")?.addEventListener("click", async () => {
|
|
const emailInput = document.getElementById("signUpEmail") as HTMLInputElement;
|
|
const passwordInput = document.getElementById("signUpPassword") as HTMLInputElement;
|
|
|
|
const result = await stackClientApp.signUpWithCredential({
|
|
email: emailInput.value,
|
|
password: passwordInput.value,
|
|
});
|
|
|
|
if (result.status === "error") {
|
|
alert("Sign up failed. Please try again.");
|
|
return;
|
|
}
|
|
|
|
const signInResult = await stackClientApp.signInWithCredential({
|
|
email: emailInput.value,
|
|
password: passwordInput.value,
|
|
});
|
|
|
|
if (signInResult.status === "error") {
|
|
alert("Account created but sign in failed. Please sign in manually.");
|
|
} else {
|
|
window.location.href = "/";
|
|
}
|
|
});`,
|
|
highlightLanguage: 'typescript',
|
|
filename: 'password-sign-in-script.ts'
|
|
}
|
|
] as CodeExample[],
|
|
|
|
'password-sign-up': [
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'html',
|
|
code: `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Password Sign Up</title>
|
|
</head>
|
|
<body>
|
|
<h1>Password Sign Up</h1>
|
|
<p><a href="/">← Back to home</a></p>
|
|
|
|
<div id="signUpForm">
|
|
<h2>Sign Up</h2>
|
|
<input type="email" id="signUpEmail" placeholder="Email" />
|
|
<input type="password" id="signUpPassword" placeholder="Password" />
|
|
<button id="signUp">Sign Up</button>
|
|
<div>
|
|
<p>Already have an account? <a href="/password-sign-in">Sign in</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/password-sign-up-script.ts"></script>
|
|
</body>
|
|
</html>`,
|
|
highlightLanguage: 'html',
|
|
filename: 'password-sign-up.html'
|
|
},
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'script',
|
|
code: `import { stackClientApp } from "./stack/client";
|
|
|
|
// Check if user is already signed in
|
|
stackClientApp.getUser().then((user) => {
|
|
if (user) {
|
|
window.location.href = "/";
|
|
}
|
|
});
|
|
|
|
document.getElementById("signUp")?.addEventListener("click", async () => {
|
|
const emailInput = document.getElementById("signUpEmail") as HTMLInputElement;
|
|
const passwordInput = document.getElementById("signUpPassword") as HTMLInputElement;
|
|
|
|
const result = await stackClientApp.signUpWithCredential({
|
|
email: emailInput.value,
|
|
password: passwordInput.value,
|
|
});
|
|
|
|
if (result.status === "error") {
|
|
alert("Sign up failed. Please try again.");
|
|
return;
|
|
}
|
|
|
|
const signInResult = await stackClientApp.signInWithCredential({
|
|
email: emailInput.value,
|
|
password: passwordInput.value,
|
|
});
|
|
|
|
if (signInResult.status === "error") {
|
|
alert("Account created but sign in failed. Please sign in manually.");
|
|
window.location.href = "/password-sign-in";
|
|
} else {
|
|
window.location.href = "/";
|
|
}
|
|
});`,
|
|
highlightLanguage: 'typescript',
|
|
filename: 'password-sign-up-script.ts'
|
|
}
|
|
] as CodeExample[],
|
|
|
|
'otp-sign-in': [
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'html',
|
|
code: `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OTP Sign In</title>
|
|
</head>
|
|
<body>
|
|
<h1>OTP Sign In</h1>
|
|
<p><a href="/">← Back to home</a></p>
|
|
|
|
<div id="otpForm">
|
|
<h2>Sign In with Email Code</h2>
|
|
<div id="emailStep">
|
|
<input type="email" id="emailInput" placeholder="Email" />
|
|
<button id="sendCode">Send Code</button>
|
|
</div>
|
|
|
|
<div id="codeStep" style="display: none;">
|
|
<p>Enter the code sent to your email</p>
|
|
<input type="text" id="codeInput" placeholder="Enter code" />
|
|
<button id="verifyCode">Verify Code</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/otp-sign-in-script.ts"></script>
|
|
</body>
|
|
</html>`,
|
|
highlightLanguage: 'html',
|
|
filename: 'otp-sign-in.html'
|
|
},
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'script',
|
|
code: `import { stackClientApp } from "./stack/client";
|
|
|
|
// Check if user is already signed in
|
|
stackClientApp.getUser().then((user) => {
|
|
if (user) {
|
|
window.location.href = "/";
|
|
}
|
|
});
|
|
|
|
document.getElementById("sendCode")?.addEventListener("click", async () => {
|
|
const emailInput = document.getElementById("emailInput") as HTMLInputElement;
|
|
|
|
await stackClientApp.sendMagicLinkEmail({
|
|
email: emailInput.value,
|
|
});
|
|
|
|
document.getElementById("emailStep")!.style.display = "none";
|
|
document.getElementById("codeStep")!.style.display = "block";
|
|
});
|
|
|
|
document.getElementById("verifyCode")?.addEventListener("click", async () => {
|
|
const codeInput = document.getElementById("codeInput") as HTMLInputElement;
|
|
|
|
const result = await stackClientApp.signInWithMagicLink({
|
|
code: codeInput.value,
|
|
});
|
|
|
|
if (result.status === "error") {
|
|
alert("Verification failed. Please check the code and try again.");
|
|
} else {
|
|
window.location.href = "/";
|
|
}
|
|
});`,
|
|
highlightLanguage: 'typescript',
|
|
filename: 'otp-sign-in-script.ts'
|
|
}
|
|
] as CodeExample[],
|
|
|
|
'oauth': [
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'html',
|
|
code: `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OAuth Authentication</title>
|
|
<style>
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>OAuth Authentication</h1>
|
|
<p><a href="/">← Back to home</a></p>
|
|
|
|
<div id="loginButtons">
|
|
<h2>Sign In with OAuth</h2>
|
|
<button id="googleSignIn">Sign in with Google</button>
|
|
</div>
|
|
|
|
<script type="module" src="/oauth-script.ts"></script>
|
|
</body>
|
|
</html>`,
|
|
highlightLanguage: 'html',
|
|
filename: 'oauth.html'
|
|
},
|
|
{
|
|
language: 'JavaScript',
|
|
framework: 'Vanilla JavaScript',
|
|
variant: 'script',
|
|
code: `import { stackClientApp } from "./stack/client";
|
|
|
|
// Check if user is already signed in
|
|
stackClientApp.getUser().then((user) => {
|
|
if (user) {
|
|
window.location.href = "/";
|
|
}
|
|
});
|
|
|
|
// Handle Google Sign In
|
|
document.getElementById("googleSignIn")?.addEventListener("click", async () => {
|
|
try {
|
|
await stackClientApp.signInWithOAuth('google');
|
|
} catch (error) {
|
|
console.error("Google sign in failed:", error);
|
|
alert("Failed to initialize Google sign in");
|
|
}
|
|
});
|
|
|
|
// Handle OAuth redirect
|
|
window.addEventListener("load", async () => {
|
|
try {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const code = params.get("code");
|
|
const state = params.get("state");
|
|
|
|
if (code && state) {
|
|
const user = await stackClientApp.callOAuthCallback();
|
|
if (user) {
|
|
window.location.href = "/";
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to handle OAuth redirect:", error);
|
|
alert("Authentication failed. Please try again.");
|
|
}
|
|
});`,
|
|
highlightLanguage: 'typescript',
|
|
filename: 'oauth-script.ts'
|
|
}
|
|
] as CodeExample[],
|
|
}
|
|
};
|