mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-07 04:19:22 +00:00
292 lines
8.8 KiB
TypeScript
292 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight, GitCommit, Zap, Shield, Copy } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card } from "@/components/ui/card";
|
|
import { ShipText } from "./_components/v1-text";
|
|
import { ReactNode } from "react";
|
|
import { BackgroundLines } from "./bg-line";
|
|
import Link from "next/link";
|
|
import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
|
|
|
|
export default function V1Ship() {
|
|
return (
|
|
<div className="min-h-screen bg-transparnt overflow-hidden">
|
|
<div className="h-[50vh] bg-transparent/10 relative">
|
|
<BackgroundLines>
|
|
<div className="absolute bottom-1/3 left-1/2 transform -translate-x-1/2 text-center">
|
|
<h1 className="text-5xl mb-4">V1.0 - nov.22.2024</h1>
|
|
<p className="text-lg text-gray-400 max-w-xl mx-auto">
|
|
We are excited to announce the Better Auth V1.0 release.
|
|
</p>
|
|
</div>
|
|
</BackgroundLines>
|
|
</div>
|
|
|
|
<div className="relative py-24">
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="grid grid-cols-12 h-full">
|
|
{Array(12)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="border-l border-dashed border-stone-100 dark:border-white/10 h-full"
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="grid grid-rows-12 w-full absolute top-0">
|
|
{Array(12)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="border-t border-dashed border-stone-100 dark:border-stone-900/60 w-full"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="max-w-6xl mx-auto px-6 relative z-10">
|
|
<h2 className="text-3xl font-bold mb-12 font-geist text-center">
|
|
What does V1 means?
|
|
</h2>
|
|
<p>
|
|
Hey there! Thanks for stopping by. Since announcing Better Auth,
|
|
your excitement has been incredibly motivating—thank you! <br />
|
|
<br />
|
|
V1 is an important milestone for us, but it simply means we believe
|
|
you can use it in production. We'll continue improving, adding new
|
|
features, and fixing bugs at the same pace as before. While we
|
|
strive to make this version as stable and secure as possible, we
|
|
don't expect it to be perfect. <br /> <br />
|
|
If you're using Better Auth, we recommend updating to V1 as soon as
|
|
possible. There are some breaking changes, but join us on{" "}
|
|
<Link
|
|
href="https://discord.gg/GYC3W7tZzb"
|
|
className="underline"
|
|
target="_blank"
|
|
>
|
|
Discord
|
|
</Link>
|
|
, and we'll gladly help if you've been using Better Auth in
|
|
production.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ReleaseRelated />
|
|
|
|
{/* <div className="max-w-6xl mx-auto px-6 py-24">
|
|
<motion.div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
>
|
|
<FeatureCard
|
|
icon={<Zap className="w-6 h-6" />}
|
|
title="Enhanced Performance"
|
|
description="50% faster load times and optimized resource usage"
|
|
/>
|
|
<FeatureCard
|
|
icon={<Shield className="w-6 h-6" />}
|
|
title="Advanced Security"
|
|
description="End-to-end encryption and improved authentication"
|
|
/>
|
|
<FeatureCard
|
|
icon={<GitCommit className="w-6 h-6" />}
|
|
title="New Architecture"
|
|
description="Rebuilt from ground up for better scalability"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="text-center mt-20"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.4 }}
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-white text-black hover:bg-gray-200 font-medium"
|
|
>
|
|
Get Started <ArrowRight className="ml-2 w-4 h-4" />
|
|
</Button>
|
|
</motion.div>
|
|
</div> */}
|
|
|
|
<div className="border-t border-white/10">
|
|
<div className="max-w-4xl mx-auto px-6 py-24">
|
|
<h2 className="text-3xl font-bold mb-12 font-geist">Changelog</h2>
|
|
<div className="space-y-8">
|
|
<ChangelogItem
|
|
version="1.0.0"
|
|
date="2024"
|
|
changes={[
|
|
"feat: Open API Docs Plugin",
|
|
"docs: Sign In Box Builder",
|
|
"fix: Bug fixes and performance improvements",
|
|
"feat: New server only endpoints for Organization and Two Factor plugins",
|
|
"refactor: all core tables now have `createdAt` and `updatedAt` fields",
|
|
"refactor: session id and token are now stored in separate fields",
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ReleaseRelated() {
|
|
return (
|
|
<div className="relative dark:bg-transparent/10 bg-zinc-100 border-b-2 border-white/10 rounded-none py-24">
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="grid grid-rows-12 w-full absolute top-0">
|
|
{Array(12)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="border-t border-dashed border-white/10 w-full"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="max-w-6xl mx-auto px-6 relative z-10">
|
|
<h2 className="text-7xl font-bold mb-16 font-geist leading-tight">
|
|
What will you
|
|
<br />
|
|
do next?
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-4">Install Latest</h3>
|
|
<div className="dark:bg-white/5 bg-black/10 rounded-lg p-4 mb-2">
|
|
<code className="text-sm font-mono">
|
|
npm i better-auth@latest
|
|
</code>
|
|
</div>
|
|
<p className="text-sm text-gray-400">
|
|
Get the latest{" "}
|
|
<a href="#" className="underline">
|
|
Node.js and npm
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-4">Adopt the new Schema</h3>
|
|
<div className="dark:bg-white/5 bg-black/10 rounded-lg p-4 mb-2">
|
|
<code className="text-sm font-mono ">
|
|
pnpx @better-auth/cli migrate
|
|
<br />
|
|
</code>
|
|
</div>
|
|
<p className="text-sm text-gray-400">
|
|
Ensure you have the latest{" "}
|
|
<code className="text-xs dark:bg-white/5 bg-black/10 px-1 py-0.5 rounded">
|
|
schema required
|
|
</code>{" "}
|
|
by Better Auth.
|
|
<code className="text-xs dark:bg-white/5 bg-black/10 px-1 py-0.5 rounded">
|
|
You can also
|
|
</code>{" "}
|
|
add them manually. Read the{" "}
|
|
<a
|
|
href="/docs/concepts/database#core-schema"
|
|
className="underline"
|
|
>
|
|
Core Schema
|
|
</a>{" "}
|
|
for full instructions.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-4">
|
|
Check out the change log, the new UI Builder, OpenAPI Docs, and ⭐
|
|
on GitHub (if you haven't already)
|
|
</h3>
|
|
<p className="text-sm text-gray-400 mb-4">
|
|
We have some exciting new features and updates that you should
|
|
check out.
|
|
</p>
|
|
<Button variant="outline" className="w-full justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<GitHubLogoIcon fontSize={10} />
|
|
Star on GitHub
|
|
</div>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-between border-t-0"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<DiscordLogoIcon />
|
|
Join Discord
|
|
</div>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FeatureCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
}: { icon: ReactNode; title: string; description: string }) {
|
|
return (
|
|
<div className="p-6 rounded-none border border-white/10 bg-white/5 hover:bg-white/10 transition-colors">
|
|
<div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center mb-4">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-2 font-geist">{title}</h3>
|
|
<p className="text-gray-400">{description}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChangelogItem({
|
|
version,
|
|
date,
|
|
changes,
|
|
}: { version: string; date: string; changes: string[] }) {
|
|
return (
|
|
<div className="border-l-2 border-white/10 pl-6 relative">
|
|
<div className="absolute w-3 h-3 bg-white rounded-full -left-[7px] top-2" />
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<h3 className="text-xl font-bold font-geist">{version}</h3>
|
|
<span className="text-sm text-gray-400">{date}</span>
|
|
</div>
|
|
<ul className="space-y-3">
|
|
{changes.map((change, i) => (
|
|
<li key={i} className="text-gray-400">
|
|
{change}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChangeCard({
|
|
title,
|
|
description,
|
|
}: { title: string; description: string }) {
|
|
return (
|
|
<Card className="bg-white/5 rounded-none border-white/10 hover:bg-white/10 transition-colors">
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold mb-2 font-geist-mono">{title}</h3>
|
|
<p className="text-gray-400 font-geist-mono">{description}</p>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|