mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-10 04:19:32 +00:00
docs: imporvements
This commit is contained in:
Bereket Engida
@@ -2,128 +2,135 @@ import React from "react";
|
||||
import { useId } from "react";
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<div className="py-2">
|
||||
<div className="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-10 md:gap-2 max-w-7xl mx-auto">
|
||||
{grid.map((feature) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 overflow-hidden"
|
||||
>
|
||||
<Grid size={20} />
|
||||
<p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
|
||||
{feature.title}
|
||||
</p>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="py-2">
|
||||
<div className="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-10 md:gap-2 max-w-7xl mx-auto">
|
||||
{grid.map((feature, i) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white px-6 py-2 overflow-hidden"
|
||||
>
|
||||
<Grid size={i * 5 + 10} />
|
||||
<p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
|
||||
{feature.title}
|
||||
</p>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-base font-normal relative z-20">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const grid = [
|
||||
{
|
||||
title: "Framework Agnostic",
|
||||
description:
|
||||
"Supports your favorite frontend, backend and meta frameworks, including React, Vue, Svelte, Solid, Next.js, Nuxt.js, Hono, and more.",
|
||||
},
|
||||
{
|
||||
title: "Automatic Database Management",
|
||||
description:
|
||||
"better auth will automatically manage required tables for authentication, just configure the database and better auth will do the rest.",
|
||||
},
|
||||
{
|
||||
title: "Email & Password Authentication",
|
||||
description:
|
||||
"Builtin support for email and password authentication, with secure password hashing and account management features.",
|
||||
},
|
||||
{
|
||||
title: "Social Sign-on",
|
||||
description:
|
||||
"Allow users to sign in with their accounts, including Github, Google, Discord, Twitter, and more.",
|
||||
},
|
||||
{
|
||||
title: "Organization & Access Control",
|
||||
description:
|
||||
"Manage users and their access to resources within your application.",
|
||||
},
|
||||
{
|
||||
title: "Plugin Ecosystem",
|
||||
description:
|
||||
"Enhance your application with our official plugins and those created by the community.",
|
||||
},
|
||||
{
|
||||
title: "Framework Agnostic",
|
||||
description: "Support for most popular frameworks",
|
||||
},
|
||||
{
|
||||
title: "Email & Password",
|
||||
description:
|
||||
"Built-in support for secure email and password authentication",
|
||||
},
|
||||
{
|
||||
title: "Account & Session Management",
|
||||
description: "Manage user accounts and sessions with ease",
|
||||
},
|
||||
{
|
||||
title: "Built In Rate Limiter",
|
||||
description: "Built in rate limiter with custom rules",
|
||||
},
|
||||
{
|
||||
title: "Automatic Database Management",
|
||||
description: "Automatic database management and migrations",
|
||||
},
|
||||
{
|
||||
title: "Social Sign-on",
|
||||
description: "multiple social sign-on providers",
|
||||
},
|
||||
{
|
||||
title: "Organization & Access Control",
|
||||
description: "Manage organizations and access control",
|
||||
},
|
||||
{
|
||||
title: "Two Factor Authentication",
|
||||
description: "Secure your users with two factor authentication",
|
||||
},
|
||||
{
|
||||
title: "Plugin Ecosystem",
|
||||
description: "Even more capabilities with plugins",
|
||||
},
|
||||
];
|
||||
|
||||
export const Grid = ({
|
||||
pattern,
|
||||
size,
|
||||
pattern,
|
||||
size,
|
||||
}: {
|
||||
pattern?: number[][];
|
||||
size?: number;
|
||||
pattern?: number[][];
|
||||
size?: number;
|
||||
}) => {
|
||||
const p = pattern ?? [
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
];
|
||||
return (
|
||||
<div className="pointer-events-none absolute left-1/2 top-0 -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
|
||||
<div className="absolute inset-0 bg-gradient-to-r [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
|
||||
<GridPattern
|
||||
width={size ?? 20}
|
||||
height={size ?? 20}
|
||||
x="-12"
|
||||
y="4"
|
||||
squares={p}
|
||||
className="absolute inset-0 h-full w-full mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const p = pattern ?? [
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||
];
|
||||
return (
|
||||
<div className="pointer-events-none absolute left-1/2 top-0 -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
|
||||
<div className="absolute inset-0 bg-gradient-to-r [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
|
||||
<GridPattern
|
||||
width={size ?? 20}
|
||||
height={size ?? 20}
|
||||
x="-12"
|
||||
y="4"
|
||||
squares={p}
|
||||
className="absolute inset-0 h-full w-full mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function GridPattern({ width, height, x, y, squares, ...props }: any) {
|
||||
const patternId = useId();
|
||||
const patternId = useId();
|
||||
|
||||
return (
|
||||
<svg aria-hidden="true" {...props}>
|
||||
<defs>
|
||||
<pattern
|
||||
id={patternId}
|
||||
width={width}
|
||||
height={height}
|
||||
patternUnits="userSpaceOnUse"
|
||||
x={x}
|
||||
y={y}
|
||||
>
|
||||
<path d={`M.5 ${height}V.5H${width}`} fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
strokeWidth={0}
|
||||
fill={`url(#${patternId})`}
|
||||
/>
|
||||
{squares && (
|
||||
<svg x={x} y={y} className="overflow-visible">
|
||||
{squares.map(([x, y]: any) => (
|
||||
<rect
|
||||
strokeWidth="0"
|
||||
key={`${x}-${y}`}
|
||||
width={width + 1}
|
||||
height={height + 1}
|
||||
x={x * width}
|
||||
y={y * height}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
return (
|
||||
<svg aria-hidden="true" {...props}>
|
||||
<defs>
|
||||
<pattern
|
||||
id={patternId}
|
||||
width={width}
|
||||
height={height}
|
||||
patternUnits="userSpaceOnUse"
|
||||
x={x}
|
||||
y={y}
|
||||
>
|
||||
<path d={`M.5 ${height}V.5H${width}`} fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
strokeWidth={0}
|
||||
fill={`url(#${patternId})`}
|
||||
/>
|
||||
{squares && (
|
||||
<svg x={x} y={y} className="overflow-visible">
|
||||
{squares.map(([x, y]: any) => (
|
||||
<rect
|
||||
strokeWidth="0"
|
||||
key={`${x}-${y}`}
|
||||
width={width + 1}
|
||||
height={height + 1}
|
||||
x={x * width}
|
||||
y={y * height}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,13 +7,6 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
|
||||
type TechStackIconType = {
|
||||
[key: string]: {
|
||||
name: string;
|
||||
icon: any;
|
||||
};
|
||||
};
|
||||
export const TechStackDisplay = ({
|
||||
skills,
|
||||
className,
|
||||
@@ -22,10 +15,15 @@ export const TechStackDisplay = ({
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn("flex gap-7 flex-wrap mt-3 justify-center items-center max-w-4xl", className)}>
|
||||
<div
|
||||
className={cn(
|
||||
"flex gap-7 flex-wrap mt-3 justify-center items-center max-w-4xl",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{skills.map((icon) => {
|
||||
return (
|
||||
<TooltipProvider key={icon} >
|
||||
<TooltipProvider key={icon}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="transform duration-300 hover:rotate-12 transition-transform">
|
||||
@@ -41,4 +39,4 @@ export const TechStackDisplay = ({
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -41,9 +41,9 @@ export default function Features() {
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Supports your favorite frontend, backend and meta frameworks,
|
||||
including React, Vue, Svelte, Solid, Next.js, Nuxt.js, Hono, and
|
||||
more{" "}
|
||||
<a className="text-gray-50" href=".docs" target="_blank">
|
||||
including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js,
|
||||
Hono, and more{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
@@ -188,6 +188,7 @@ export default function Features() {
|
||||
"nextJs",
|
||||
"nuxt",
|
||||
"svelteKit",
|
||||
"astro",
|
||||
"solidStart",
|
||||
"react",
|
||||
"hono",
|
||||
|
||||
@@ -8,7 +8,7 @@ interface RippleProps {
|
||||
|
||||
export const Ripple = React.memo(function Ripple({
|
||||
mainCircleSize = 180,
|
||||
mainCircleOpacity = 0.20,
|
||||
mainCircleOpacity = 0.2,
|
||||
numCircles = 10,
|
||||
}: RippleProps) {
|
||||
return (
|
||||
@@ -43,4 +43,4 @@ export const Ripple = React.memo(function Ripple({
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -60,36 +60,54 @@ export default function ArticleLayout() {
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="docs" className="h-12">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.3em"
|
||||
height="1.3em"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7 16h2V4H7zm-1 6q-1.25 0-2.125-.875T3 19V5q0-1.25.875-2.125T6 2h11v16H6q-.425 0-.712.288T5 19t.288.713T6 20h13V4h2v18z"
|
||||
d="M4.727 2.733c.306-.308.734-.508 1.544-.618C7.105 2.002 8.209 2 9.793 2h4.414c1.584 0 2.688.002 3.522.115c.81.11 1.238.31 1.544.618c.305.308.504.74.613 1.557c.112.84.114 1.955.114 3.552V18H7.426c-1.084 0-1.462.006-1.753.068c-.513.11-.96.347-1.285.667c-.11.108-.164.161-.291.505A1.3 1.3 0 0 0 4 19.7V7.842c0-1.597.002-2.711.114-3.552c.109-.816.308-1.249.613-1.557"
|
||||
opacity=".5"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20 18H7.426c-1.084 0-1.462.006-1.753.068c-.513.11-.96.347-1.285.667c-.11.108-.164.161-.291.505s-.107.489-.066.78l.022.15c.11.653.31.998.616 1.244c.307.246.737.407 1.55.494c.837.09 1.946.092 3.536.092h4.43c1.59 0 2.7-.001 3.536-.092c.813-.087 1.243-.248 1.55-.494c.2-.16.354-.362.467-.664H8a.75.75 0 0 1 0-1.5h11.975c.018-.363.023-.776.025-1.25M7.25 7A.75.75 0 0 1 8 6.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 7M8 9.75a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"
|
||||
></path>
|
||||
</svg>
|
||||
Docs
|
||||
</div>
|
||||
<p className="text-xs">getting started, concepts, and plugins</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
getting started, concepts, and plugins
|
||||
</p>
|
||||
</SelectItem>
|
||||
<SelectItem value="examples">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
className="mx-1"
|
||||
viewBox="0 0 14 14"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M1.5 0h3.375v14H1.5A1.5 1.5 0 0 1 0 12.5v-11A1.5 1.5 0 0 1 1.5 0m4.625 7.625V14H12.5a1.5 1.5 0 0 0 1.5-1.5V7.625zM14 6.375H6.125V0H12.5A1.5 1.5 0 0 1 14 1.5z"
|
||||
clipRule="evenodd"
|
||||
d="M12 2c4.714 0 7.071 0 8.535 1.464c1.08 1.08 1.364 2.647 1.439 5.286L22 9.5H2.026v-.75c.075-2.64.358-4.205 1.438-5.286C4.93 2 7.286 2 12 2"
|
||||
opacity=".5"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M13 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-3 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0M7 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 12c0 4.714 0 7.071 1.464 8.535c1.01 1.01 2.446 1.324 4.786 1.421L9 22V9.5H2.026l-.023.75Q2 11.066 2 12"
|
||||
opacity=".7"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22c-.819 0-2.316 0-3-.008V9.5h13l-.003.75Q22 11.066 22 12"
|
||||
></path>
|
||||
</svg>
|
||||
Examples
|
||||
|
||||
@@ -1,36 +1,37 @@
|
||||
|
||||
import {Icons} from './icons'
|
||||
import { Icons } from "./icons";
|
||||
type TechStackIconType = {
|
||||
[key: string]: {
|
||||
name: string;
|
||||
icon: any;
|
||||
};
|
||||
[key: string]: {
|
||||
name: string;
|
||||
icon: any;
|
||||
};
|
||||
};
|
||||
export const techStackIcons: TechStackIconType = {
|
||||
nextJs: {
|
||||
name: "Nextjs",
|
||||
icon: <Icons.nextJS className="w-10 h-10" />,
|
||||
},
|
||||
nuxt: {
|
||||
name: "Nuxt",
|
||||
icon: <Icons.nuxt className="w-10 h-10" />,
|
||||
},
|
||||
svelteKit: {
|
||||
name: "Svelte Kit",
|
||||
icon: <Icons.svelteKit className="w-10 h-10" />,
|
||||
},
|
||||
solidStart: {
|
||||
name: "Solid Start",
|
||||
icon: <Icons.solidStart className="w-10 h-10" />,
|
||||
},
|
||||
react: {
|
||||
name: "Reaact",
|
||||
icon: <Icons.react className="w-10 h-10" />,
|
||||
},
|
||||
hono: {
|
||||
name: "Hono",
|
||||
icon: <Icons.hono className="w-10 h-10" />,
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
nextJs: {
|
||||
name: "Nextjs",
|
||||
icon: <Icons.nextJS className="w-10 h-10" />,
|
||||
},
|
||||
nuxt: {
|
||||
name: "Nuxt",
|
||||
icon: <Icons.nuxt className="w-10 h-10" />,
|
||||
},
|
||||
svelteKit: {
|
||||
name: "Svelte Kit",
|
||||
icon: <Icons.svelteKit className="w-10 h-10" />,
|
||||
},
|
||||
solidStart: {
|
||||
name: "Solid Start",
|
||||
icon: <Icons.solidStart className="w-10 h-10" />,
|
||||
},
|
||||
react: {
|
||||
name: "Reaact",
|
||||
icon: <Icons.react className="w-10 h-10" />,
|
||||
},
|
||||
hono: {
|
||||
name: "Hono",
|
||||
icon: <Icons.hono className="w-10 h-10" />,
|
||||
},
|
||||
astro: {
|
||||
name: "Astro",
|
||||
icon: <Icons.astro className="w-10 h-10" />,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user