mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 20:27:44 +00:00
docs: add github icon on nav
This commit is contained in:
Bereket Engida
@@ -27,6 +27,23 @@ export const Navbar = () => {
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
))}
|
||||
<NavLink
|
||||
href="https://github.com/better-auth/better-auth"
|
||||
className=" bg-muted/20"
|
||||
external
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 496 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2"
|
||||
></path>
|
||||
</svg>
|
||||
</NavLink>
|
||||
</ul>
|
||||
<ThemeToggle />
|
||||
<NavbarMobileBtn />
|
||||
@@ -53,6 +70,6 @@ export const navMenu = [
|
||||
},
|
||||
{
|
||||
name: "community",
|
||||
path: "https://discord.gg/GYC3W7tZzb",
|
||||
path: "https://github.com/better-auth/better-auth",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -6,15 +6,17 @@ import { useSelectedLayoutSegment } from "next/navigation";
|
||||
type Props = {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
external?: boolean;
|
||||
};
|
||||
|
||||
export const NavLink = ({ href, children }: Props) => {
|
||||
export const NavLink = ({ href, children, className, external }: Props) => {
|
||||
const segment = useSelectedLayoutSegment();
|
||||
const isActive =
|
||||
segment === href.slice(1) || (segment === null && href === "/");
|
||||
|
||||
return (
|
||||
<li className="relative group">
|
||||
<li className={cn("relative group", className)}>
|
||||
<Link
|
||||
href={href}
|
||||
className={cn(
|
||||
@@ -22,6 +24,7 @@ export const NavLink = ({ href, children }: Props) => {
|
||||
"group-hover:text-foreground",
|
||||
isActive ? "text-foreground" : "text-muted-foreground",
|
||||
)}
|
||||
target={external ? "_blank" : "_parent"}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
|
||||
@@ -17,6 +17,10 @@ import {
|
||||
} from "./ui/select";
|
||||
import { loglib } from "@loglib/tracker";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { GitHubIcon } from "@/app/changelogs/_components/icons";
|
||||
import Link from "next/link";
|
||||
import { Button } from "./ui/button";
|
||||
import { Separator } from "./ui/separator";
|
||||
|
||||
export default function ArticleLayout() {
|
||||
const [currentOpen, setCurrentOpen] = useState<number>(0);
|
||||
@@ -44,173 +48,183 @@ export default function ArticleLayout() {
|
||||
|
||||
return (
|
||||
<div className="fixed top-0">
|
||||
<aside className="border-r border-lines md:block hidden w-[--fd-sidebar-width] overflow-y-auto absolute top-[58px] h-[92dvh]">
|
||||
<Select
|
||||
defaultValue="docs"
|
||||
value={group}
|
||||
onValueChange={(val) => {
|
||||
loglib.track("sidebar-group-change", { group: val });
|
||||
setGroup(val);
|
||||
if (val === "docs") {
|
||||
router.push("/docs");
|
||||
} else {
|
||||
router.push("/docs/examples");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="rounded-none h-16 border-none border-b border">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="docs" className="h-12">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
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 text-muted-foreground">
|
||||
get 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="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
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
|
||||
</div>
|
||||
<p className="text-xs">examples and guides</p>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div
|
||||
className="flex items-center gap-2 p-2 px-4 border-b bg-gradient-to-br dark:from-stone-900 dark:to-stone-950/80"
|
||||
onClick={() => {
|
||||
setOpenSearch(true);
|
||||
loglib.track("sidebar-search-open");
|
||||
}}
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
<p className="text-sm bg-gradient-to-tr from-gray-500 to-stone-400 bg-clip-text text-transparent">
|
||||
Search documentation...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<MotionConfig transition={{ duration: 0.4, type: "spring", bounce: 0 }}>
|
||||
<div className="flex flex-col">
|
||||
{cts.map((item, index) => (
|
||||
<div key={item.title}>
|
||||
<button
|
||||
className="border-b w-full hover:underline border-lines text-sm px-5 py-2.5 text-left flex items-center gap-2"
|
||||
onClick={() => {
|
||||
if (currentOpen === index) {
|
||||
setCurrentOpen(-1);
|
||||
} else {
|
||||
setCurrentOpen(index);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<item.Icon className="w-5 h-5" />
|
||||
<span className="grow">{item.title}</span>
|
||||
<motion.div
|
||||
animate={{ rotate: currentOpen === index ? 180 : 0 }}
|
||||
<aside className="border-r border-lines md:flex hidden w-[--fd-sidebar-width] overflow-y-auto absolute top-[58px] h-[92dvh] flex-col justify-between">
|
||||
<div>
|
||||
<Select
|
||||
defaultValue="docs"
|
||||
value={group}
|
||||
onValueChange={(val) => {
|
||||
loglib.track("sidebar-group-change", { group: val });
|
||||
setGroup(val);
|
||||
if (val === "docs") {
|
||||
router.push("/docs");
|
||||
} else {
|
||||
router.push("/docs/examples");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="rounded-none h-16 border-none border-b border">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="docs" className="h-12">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
</button>
|
||||
<AnimatePresence initial={false}>
|
||||
{currentOpen === index && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="relative overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
// initial={{ opacity: 0, y: -20 }}
|
||||
// animate={{ opacity: 1, y: 0 }}
|
||||
className="text-sm"
|
||||
>
|
||||
{item.list.map((listItem, j) => (
|
||||
<div
|
||||
key={listItem.title}
|
||||
onClick={() => {
|
||||
loglib.track("sidebar-link-click", {
|
||||
title: listItem.title,
|
||||
href: listItem.href,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<>Loading...</>}>
|
||||
{listItem.group ? (
|
||||
<div className="flex flex-row gap-2 items-center mx-5 my-1 ">
|
||||
<p className="text-sm bg-gradient-to-tr dark:from-gray-100 dark:to-stone-200 bg-clip-text text-transparent from-gray-900 to-stone-900">
|
||||
{listItem.title}
|
||||
</p>
|
||||
<div className="flex-grow h-px bg-gradient-to-r from-stone-800/90 to-stone-800/60" />
|
||||
</div>
|
||||
) : (
|
||||
<AsideLink
|
||||
href={listItem.href}
|
||||
startWith="/docs"
|
||||
title={listItem.title}
|
||||
className="break-words w-[--fd-sidebar-width]"
|
||||
>
|
||||
<listItem.icon className="w-4 h-4 text-stone-950 dark:text-white" />
|
||||
{listItem.title}
|
||||
</AsideLink>
|
||||
)}
|
||||
</Suspense>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
))}
|
||||
<path
|
||||
fill="currentColor"
|
||||
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 text-muted-foreground">
|
||||
get 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="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
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
|
||||
</div>
|
||||
<p className="text-xs">examples and guides</p>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div
|
||||
className="flex items-center gap-2 p-2 px-4 border-b bg-gradient-to-br dark:from-stone-900 dark:to-stone-950/80"
|
||||
onClick={() => {
|
||||
setOpenSearch(true);
|
||||
loglib.track("sidebar-search-open");
|
||||
}}
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
<p className="text-sm bg-gradient-to-tr from-gray-500 to-stone-400 bg-clip-text text-transparent">
|
||||
Search documentation...
|
||||
</p>
|
||||
</div>
|
||||
</MotionConfig>
|
||||
|
||||
<MotionConfig
|
||||
transition={{ duration: 0.4, type: "spring", bounce: 0 }}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
{cts.map((item, index) => (
|
||||
<div key={item.title}>
|
||||
<button
|
||||
className="border-b w-full hover:underline border-lines text-sm px-5 py-2.5 text-left flex items-center gap-2"
|
||||
onClick={() => {
|
||||
if (currentOpen === index) {
|
||||
setCurrentOpen(-1);
|
||||
} else {
|
||||
setCurrentOpen(index);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<item.Icon className="w-5 h-5" />
|
||||
<span className="grow">{item.title}</span>
|
||||
<motion.div
|
||||
animate={{ rotate: currentOpen === index ? 180 : 0 }}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
</button>
|
||||
<AnimatePresence initial={false}>
|
||||
{currentOpen === index && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="relative overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
// initial={{ opacity: 0, y: -20 }}
|
||||
// animate={{ opacity: 1, y: 0 }}
|
||||
className="text-sm"
|
||||
>
|
||||
{item.list.map((listItem, j) => (
|
||||
<div
|
||||
key={listItem.title}
|
||||
onClick={() => {
|
||||
loglib.track("sidebar-link-click", {
|
||||
title: listItem.title,
|
||||
href: listItem.href,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<>Loading...</>}>
|
||||
{listItem.group ? (
|
||||
<div className="flex flex-row gap-2 items-center mx-5 my-1 ">
|
||||
<p className="text-sm bg-gradient-to-tr dark:from-gray-100 dark:to-stone-200 bg-clip-text text-transparent from-gray-900 to-stone-900">
|
||||
{listItem.title}
|
||||
</p>
|
||||
<div className="flex-grow h-px bg-gradient-to-r from-stone-800/90 to-stone-800/60" />
|
||||
</div>
|
||||
) : (
|
||||
<AsideLink
|
||||
href={listItem.href}
|
||||
startWith="/docs"
|
||||
title={listItem.title}
|
||||
className="break-words w-[--fd-sidebar-width]"
|
||||
>
|
||||
<listItem.icon className="w-4 h-4 text-stone-950 dark:text-white" />
|
||||
{listItem.title}
|
||||
</AsideLink>
|
||||
)}
|
||||
</Suspense>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</MotionConfig>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 py-4">
|
||||
<div className="flex items-center w-full gap-2 px-4">
|
||||
<GitHubIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<Separator className="" />
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,12 @@ title: Basic Usage
|
||||
description: Getting started with Better Auth
|
||||
---
|
||||
|
||||
## v1.0 date=Nov 22, 2024
|
||||
|
||||
The first stable release of Better Auth is now available!
|
||||
|
||||
[Read the release notes](https://better-auth.com/v1).
|
||||
|
||||
## v0.6.0 date=Oct 26, 2024
|
||||
|
||||
- Email OTP Plugin
|
||||
|
||||
@@ -75,6 +75,12 @@ export interface BetterAuthOptions {
|
||||
| {
|
||||
dialect: Dialect;
|
||||
type: KyselyDatabaseType;
|
||||
/**
|
||||
* casing for table names
|
||||
*
|
||||
* @default "camel"
|
||||
*/
|
||||
casing?: "snake" | "camel";
|
||||
}
|
||||
| {
|
||||
/**
|
||||
@@ -85,6 +91,12 @@ export interface BetterAuthOptions {
|
||||
* Database type between postgres, mysql and sqlite
|
||||
*/
|
||||
type: KyselyDatabaseType;
|
||||
/**
|
||||
* casing for table names
|
||||
*
|
||||
* @default "camel"
|
||||
*/
|
||||
casing?: "snake" | "camel";
|
||||
};
|
||||
/**
|
||||
* Secondary storage configuration
|
||||
|
||||
Reference in New Issue
Block a user