LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-07 20:37:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: github stat ui

Browse Source 
* feat: github stat

* fix: lint as always

* fix: style

* fix: unwanted ref
This commit is contained in:
Kinfe Michael Tariku
2024-09-30 06:51:28 +03:00
committed by GitHub
parent c92fb47321
commit bdb3794354
3 changed files with 250 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/app/page.tsx
View File

@@ -1,7 +1,28 @@
import Section from "@/components/landing/section"; import Section from "@/components/landing/section";
import Hero from "@/components/landing/hero"; import Hero from "@/components/landing/hero";
import Features from "@/components/features"; import Features from "@/components/features";
export default function HomePage() { async function getGitHubStars() {
try {
const response = await fetch(
"https://api.github.com/repos/better-auth/better-auth",
{
next: {
revalidate: 60,
},
},
);
if (!response?.ok) {
return null;
}
const json = await response.json();
const stars = parseInt(json.stargazers_count).toLocaleString();
return stars;
} catch {
return null;
}
}
export default async function HomePage() {
const stars = await getGitHubStars();
return ( return (
<main className="h-min mx-auto "> <main className="h-min mx-auto ">
<Section <Section
@@ -12,7 +33,7 @@ export default function HomePage() {
id="hero" id="hero"
> >
<Hero /> <Hero />
<Features /> <Features stars={stars} />
<hr className="h-px bg-gray-200" /> <hr className="h-px bg-gray-200" />
</Section> </Section>
</main> </main>

402
docs/components/features.tsx
View File

@@ -1,14 +1,14 @@
"use client"; "use client";
import { import {
CheckIcon, CheckIcon,
Globe2Icon, Globe2Icon,
PlugIcon, PlugIcon,
PlugZap2Icon, PlugZap2Icon,
Plus, Plus,
RabbitIcon, RabbitIcon,
ShieldCheckIcon, ShieldCheckIcon,
Webhook, Webhook,
XIcon, XIcon,
} from "lucide-react"; } from "lucide-react";
import { GitHubLogoIcon, LockClosedIcon } from "@radix-ui/react-icons"; import { GitHubLogoIcon, LockClosedIcon } from "@radix-ui/react-icons";
import Link from "next/link"; import Link from "next/link";
@@ -16,209 +16,191 @@ import { Button } from "./ui/button";
import React, { useState } from "react"; import React, { useState } from "react";
import { TechStackDisplay } from "./display-techstack"; import { TechStackDisplay } from "./display-techstack";
import { Ripple } from "./ripple"; import { Ripple } from "./ripple";
import { GithubStat } from "./github-stat";
export default function Features() { export default function Features({ stars }: { stars: string | null }) {
return ( return (
<div className="md:w-10/12 overflow-hidden mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2"> <div className="md:w-10/12 overflow-hidden mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2">
<Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
<div className="grid grid-cols-1 md:grid-cols-3 md:mx-0 grid-rows-4 md:grid-rows-4 w-full"> <div className="grid grid-cols-1 md:grid-cols-3 md:mx-0 grid-rows-4 md:grid-rows-4 w-full">
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 overflow-clip"> <div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 overflow-clip">
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
<div className="flex gap-2 items-center my-1"> <div className="flex gap-2 items-center my-1">
<PlugZap2Icon className="w-4 h-4" /> <PlugZap2Icon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400"> <p className="text-gray-600 dark:text-gray-400">
Framework Agnostic{" "} Framework Agnostic{" "}
</p> </p>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-xl md:text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-xl md:text-2xl tracking-tighter font-normal max-w-lg">
Supports popular <strong>frameworks</strong> Supports popular <strong>frameworks</strong>
</p> </p>
</div> </div>
</div> </div>
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
Supports your favorite frontend, backend and meta frameworks, Supports your favorite frontend, backend and meta frameworks,
including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js, including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js,
Hono, and more{" "} Hono, and more{" "}
<a className="text-gray-50" href="/docs" target="_blank"> <a className="text-gray-50" href="/docs" target="_blank">
Learn more Learn more
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10"> <div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10">
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
<div className="flex gap-2 items-center my-1"> <div className="flex gap-2 items-center my-1">
<LockClosedIcon className="w-4 h-4" /> <LockClosedIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">Authentication</p> <p className="text-gray-600 dark:text-gray-400">Authentication</p>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
Email & Password <strong>Authentication</strong> Email & Password <strong>Authentication</strong>
</p> </p>
</div> </div>
</div> </div>
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
Builtin support for email and password authentication, with secure Builtin support for email and password authentication, with secure
password hashing and account management features{" "} password hashing and account management features{" "}
<a className="text-gray-50" href="/docs" target="_blank"> <a className="text-gray-50" href="/docs" target="_blank">
Learn more Learn more
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="relative items-start justify-start md:border-l-[0.2px] border-t-[1.2px] md:border-t-0 flex flex-col p-10"> <div className="relative items-start justify-start md:border-l-[0.2px] border-t-[1.2px] md:border-t-0 flex flex-col p-10">
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
<div className="flex gap-2 items-center my-1"> <div className="flex gap-2 items-center my-1">
<Webhook className="w-4 h-4" /> <Webhook className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">Social Sign-on</p> <p className="text-gray-600 dark:text-gray-400">Social Sign-on</p>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
Support multiple <strong>OAuth providers.</strong> Support multiple <strong>OAuth providers.</strong>
</p> </p>
</div> </div>
</div> </div>
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
Allow users to sign in with their accounts, including Github, Allow users to sign in with their accounts, including Github,
Google, Discord, Twitter, and more.{" "} Google, Discord, Twitter, and more.{" "}
<a className="text-gray-50" href="#" target="_blank"> <a className="text-gray-50" href="#" target="_blank">
Learn more Learn more
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 "> <div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
<div className="flex gap-2 items-center my-1"> <div className="flex gap-2 items-center my-1">
<ShieldCheckIcon className="w-4 h-4" /> <ShieldCheckIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">Two Factor</p> <p className="text-gray-600 dark:text-gray-400">Two Factor</p>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
Two Factor <strong>Authentication</strong> Two Factor <strong>Authentication</strong>
</p> </p>
</div> </div>
</div> </div>
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
With our built-in two factor authentication plugin, you can add an With our built-in two factor authentication plugin, you can add an
extra layer of security to your account.{" "} extra layer of security to your account.{" "}
<Link className="text-gray-50" href="/docs" target="_blank"> <Link className="text-gray-50" href="/docs" target="_blank">
Learn more Learn more
</Link> </Link>
</p> </p>
</div> </div>
</div> </div>
<div className="items-start justify-staart border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 "> <div className="items-start justify-staart border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
<div className="flex gap-2 items-center my-1"> <div className="flex gap-2 items-center my-1">
<RabbitIcon className="w-4 h-4" /> <RabbitIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400"> <p className="text-gray-600 dark:text-gray-400">
Organization & Access Control{" "} Organization & Access Control{" "}
</p> </p>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
Gain and manage <strong>access.</strong> Gain and manage <strong>access.</strong>
</p> </p>
</div> </div>
</div> </div>
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
Manage users and their access to resources within your Manage users and their access to resources within your
application.{" "} application.{" "}
<a className="text-gray-50" href="/docs" target="_blank"> <a className="text-gray-50" href="/docs" target="_blank">
Learn more Learn more
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] transform-gpu relative flex flex-col p-10 "> <div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] transform-gpu relative flex flex-col p-10 ">
<div className="flex gap-2 items-center my-1"> <div className="flex gap-2 items-center my-1">
<PlugIcon className="w-4 h-4" /> <PlugIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400"> <p className="text-gray-600 dark:text-gray-400">
Plugin Ecosystem{" "} Plugin Ecosystem{" "}
</p> </p>
</div> </div>
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
Pluggable with <strong>custom.</strong> Pluggable with <strong>custom.</strong>
</p> </p>
</div> </div>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
Enhance your application with our official plugins and those Enhance your application with our official plugins and those
created by the community.{" "} created by the community.{" "}
<a className="text-gray-50" href="/docs" target="_blank"> <a className="text-gray-50" href="/docs" target="_blank">
Learn more Learn more
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20 "> <div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20 ">
<div className="p-16 pt-10 md:px-10 h-full md:absolute top-0 left-0 w-full"> <div className="p-16 pt-10 md:px-10 h-full md:absolute top-0 left-0 w-full">
<div className="flex flex-col gap-3 justify-center h-full items-center w-full"> <div className="flex flex-col gap-3 justify-center h-full items-center w-full">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Globe2Icon className="w-4 h-4" /> <Globe2Icon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400"> <p className="text-gray-600 dark:text-gray-400">
Own your auth Own your auth
</p> </p>
</div> </div>
<p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center"> <p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center">
<strong>Roll your own auth with confidence in minutes!</strong> <strong>Roll your own auth with confidence in minutes!</strong>
</p> </p>
<div className="flex mt-[10px] z-20 justify-center items-start"> <div className="flex mt-[10px] z-20 justify-center items-start">
<TechStackDisplay <TechStackDisplay
skills={[ skills={[
"nextJs", "nextJs",
"nuxt", "nuxt",
"svelteKit", "svelteKit",
"astro", "astro",
"solidStart", "solidStart",
"react", "react",
"hono", "hono",
]} ]}
/> />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Link href="/docs" className="z-50"> <GithubStat stars={stars} />
<Button </div>
className="mt-4 rounded-none p-5 ml-auto" <Ripple />
variant="secondary" </div>
> </div>
Start now </div>
</Button> </div>
</Link> </div>
<Link );
href="https://github.com/better-auth/better-auth"
className="z-50"
>
<Button
className="mt-4 rounded-none p-5 ml-auto gap-2"
variant="outline"
>
<GitHubLogoIcon />
Github
</Button>
</Link>
</div>
<Ripple />
</div>
</div>
</div>
</div>
</div>
);
} }

35
docs/components/github-stat.tsx Normal file
View File

@@ -0,0 +1,35 @@
export function GithubStat({ stars }: { stars: string | null }) {
return (
<a
href="https://github.com/better-auth/better-auth"
className="flex mt-4 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground rounded-none h-10 p-5 ml-auto z-50 overflow-hidden items-center text-sm font-medium focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 bg-transprent text-white px-4 py-2 max-w-52 whitespace-pre md:flex group relative w-full justify-center gap-2 transition-all duration-300 ease-out hover:ring-black "
>
<span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white/60 opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
<div className="flex items-center">
<svg className="w-4 h-4 fill-current" viewBox="0 0 438.549 438.549">
<path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>
</svg>
<span className="ml-2 text-white">Star on GitHub</span>
</div>
<div className="ml-2 flex items-center gap-1 text-sm md:flex">
<svg
className="w-4 h-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300"
data-slot="icon"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
fill-rule="evenodd"
></path>
</svg>
<span className="inline-block tabular-nums tracking-wider font-display font-medium text-white">
{stars}
</span>
</div>
</a>
);
}