mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 20:27:44 +00:00
chore(docs): misc
This commit is contained in:
Bereket Engida
committed by
Alex Yang
Alex Yang
parent
ccc7c48dee
commit
c456b6a2c5
@@ -16,13 +16,13 @@ import { File, Folder, Files } from "fumadocs-ui/components/files";
|
||||
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
|
||||
import { Pre } from "fumadocs-ui/components/codeblock";
|
||||
import { Glow } from "../_components/default-changelog";
|
||||
import { IconLink } from "../_components/changelog-layout";
|
||||
import { BookIcon, GitHubIcon, XIcon } from "../_components/icons";
|
||||
import { DiscordLogoIcon } from "@radix-ui/react-icons";
|
||||
import { XIcon } from "../_components/icons";
|
||||
import { StarField } from "../_components/stat-field";
|
||||
import Image from "next/image";
|
||||
import { BlogPage } from "../_components/blog-list";
|
||||
import { Callout } from "@/components/ui/callout";
|
||||
import { ArrowLeftIcon, ExternalLink } from "lucide-react";
|
||||
import { Support } from "../_components/support";
|
||||
|
||||
const metaTitle = "Blogs";
|
||||
const metaDescription = "Latest changes , fixes and updates.";
|
||||
@@ -42,99 +42,127 @@ export default async function Page({
|
||||
notFound();
|
||||
}
|
||||
const MDX = page.data?.body;
|
||||
const toc = page.data?.toc;
|
||||
const { title, description, date } = page.data;
|
||||
return (
|
||||
<div className="md:flex min-h-screen items-stretch relative">
|
||||
<div className="bg-gradient-to-tr hidden md:block overflow-hidden px-12 py-24 md:py-0 -mt-[100px] md:h-dvh relative md:sticky top-0 from-transparent dark:via-stone-950/5 via-stone-100/30 to-stone-200/20 dark:to-transparent/10 min-h-screen flex-shrink-0 w-full md:w-1/2">
|
||||
<StarField className="top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2" />
|
||||
<div className="relative min-h-screen">
|
||||
<div className="pointer-events-none absolute inset-0 -z-10">
|
||||
<StarField className="top-1/3 left-1/2 -translate-x-1/2" />
|
||||
<Glow />
|
||||
|
||||
<div className="flex flex-col md:justify-center max-w-xl mx-auto h-full">
|
||||
<Link href="/blog" className="text-gray-600 dark:text-gray-300">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center cursor-pointer gap-x-2 text-xs w-full border-white/20">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2.5em"
|
||||
height="2.5em"
|
||||
className="rotate-180"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 13v-2h16.172l-3.95-3.95l1.414-1.414L22 12l-6.364 6.364l-1.414-1.414l3.95-3.95z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="mt-2 relative font-sans font-semibold tracking-tighter text-4xl mb-2 border-dashed">
|
||||
{title}{" "}
|
||||
</h1>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<p className="text-gray-600 dark:text-gray-300">{description}</p>
|
||||
<div className="text-gray-600 text-sm dark:text-gray-400 flex items-center gap-x-1 text-left">
|
||||
By {page.data?.author.name} | {formatDate(page.data?.date)}
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Image
|
||||
src={page.data?.image}
|
||||
alt={title}
|
||||
width={804}
|
||||
height={452}
|
||||
className="rounded-md border bg-muted transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<hr className="h-px bg-gray-300 mt-5" />
|
||||
<div className="mt-8 flex flex-wrap text-gray-600 dark:text-gray-300 gap-x-1 gap-y-3 sm:gap-x-2">
|
||||
<IconLink
|
||||
href="/docs"
|
||||
icon={BookIcon}
|
||||
className="flex-none text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Documentation
|
||||
</IconLink>
|
||||
<IconLink
|
||||
href="https://github.com/better-auth/better-auth"
|
||||
icon={GitHubIcon}
|
||||
className="flex-none text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
GitHub
|
||||
</IconLink>
|
||||
<IconLink
|
||||
href="https://discord.gg/better-auth"
|
||||
icon={DiscordLogoIcon}
|
||||
className="flex-none text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Community
|
||||
</IconLink>
|
||||
</div>
|
||||
<p className="flex items-baseline absolute bottom-4 max-md:left-1/2 max-md:-translate-x-1/2 gap-x-2 text-[0.8125rem]/6 text-gray-500">
|
||||
<IconLink href="https://x.com/better_auth" icon={XIcon} compact>
|
||||
BETTER-AUTH.
|
||||
</IconLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 h-screen overflow-y-auto px-4 relative md:px-8 pb-12 md:py-12">
|
||||
<div className="absolute top-0 left-0 h-full -translate-x-full w-px bg-gradient-to-b from-black/5 dark:from-white/10 via-black/3 dark:via-white/5 to-transparent"></div>
|
||||
<div className="prose">
|
||||
<div className="relative mx-auto max-w-3xl px-4 md:px-0 pb-24 pt-12">
|
||||
<h1 className="text-center text-3xl md:text-5xl font-semibold tracking-tighter">
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="mt-3 text-center text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
<div className="my-2 flex items-center justify-center gap-3">
|
||||
{page.data?.author?.avatar && (
|
||||
<Image
|
||||
src={page.data.author.avatar}
|
||||
alt={page.data?.author?.name ?? "Author"}
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-full border"
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
{page.data?.author?.name && (
|
||||
<span className="font-medium text-foreground">
|
||||
{page.data.author.name}
|
||||
</span>
|
||||
)}
|
||||
{page.data?.author?.twitter && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<a
|
||||
href={`https://x.com/${page.data.author.twitter}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="inline-flex items-center gap-1 underline decoration-dashed"
|
||||
>
|
||||
<XIcon className="size-3" />@{page.data.author.twitter}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
{date && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<time dateTime={String(date)}>{formatDate(date)}</time>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2 my-4 mb-8">
|
||||
<div className="flex items-center gap-2 opacity-80">
|
||||
<ArrowLeftIcon className="size-4" />
|
||||
<Link href="/blog" className="">
|
||||
Blogs
|
||||
</Link>
|
||||
</div>
|
||||
<hr className="h-1 w-full opacity-80" />
|
||||
</div>
|
||||
|
||||
<article className="prose prose-neutral dark:prose-invert mx-auto max-w-3xl px-4 md:px-0">
|
||||
<MDX
|
||||
components={{
|
||||
...defaultMdxComponents,
|
||||
Link: ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Link>) => (
|
||||
<Link
|
||||
className={cn(
|
||||
"font-medium underline underline-offset-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
a: ({ className, href, children, ...props }: any) => {
|
||||
const isExternal =
|
||||
typeof href === "string" && /^(https?:)?\/\//.test(href);
|
||||
const classes = cn(
|
||||
"inline-flex items-center gap-1 font-medium underline decoration-dashed",
|
||||
className,
|
||||
);
|
||||
if (isExternal) {
|
||||
return (
|
||||
<a
|
||||
className={classes}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ExternalLink className="ms-0.5 inline size-[0.9em] text-fd-muted-foreground" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link className={classes} href={href} {...(props as any)}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
Link: ({ className, href, children, ...props }: any) => {
|
||||
const isExternal =
|
||||
typeof href === "string" && /^(https?:)?\/\//.test(href);
|
||||
const classes = cn(
|
||||
"inline-flex items-center gap-1 font-medium underline decoration-dashed",
|
||||
className,
|
||||
);
|
||||
if (isExternal) {
|
||||
return (
|
||||
<a
|
||||
className={classes}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ExternalLink className="ms-0.5 inline size-[0.9em] text-fd-muted-foreground" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link className={classes} href={href} {...(props as any)}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
Step,
|
||||
Steps,
|
||||
File,
|
||||
@@ -164,9 +192,10 @@ export default async function Page({
|
||||
{children}
|
||||
</Callout>
|
||||
),
|
||||
Support,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user