mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-06 12:27:44 +00:00
255 lines
8.3 KiB
TypeScript
255 lines
8.3 KiB
TypeScript
import Link from "next/link";
|
||
import { useId } from "react";
|
||
import { cn } from "@/lib/utils";
|
||
import { IconLink } from "./changelog-layout";
|
||
import { BookIcon, GitHubIcon, XIcon } from "./icons";
|
||
import { DiscordLogoIcon } from "@radix-ui/react-icons";
|
||
import { StarField } from "./stat-field";
|
||
import { betterFetch } from "@better-fetch/fetch";
|
||
import Markdown from "react-markdown";
|
||
import defaultMdxComponents from "fumadocs-ui/mdx";
|
||
import rehypeHighlight from "rehype-highlight";
|
||
import "highlight.js/styles/dark.css";
|
||
|
||
export const dynamic = "force-static";
|
||
const ChangelogPage = async () => {
|
||
const { data: releases } = await betterFetch<
|
||
{
|
||
id: number;
|
||
tag_name: string;
|
||
name: string;
|
||
body: string;
|
||
html_url: string;
|
||
prerelease: boolean;
|
||
published_at: string;
|
||
}[]
|
||
>("https://api.github.com/repos/better-auth/better-auth/releases");
|
||
|
||
const messages = releases
|
||
?.filter((release) => !release.prerelease)
|
||
.map((release) => ({
|
||
tag: release.tag_name,
|
||
title: release.name,
|
||
content: getContent(release.body),
|
||
date: new Date(release.published_at).toLocaleDateString("en-US", {
|
||
year: "numeric",
|
||
month: "short",
|
||
day: "numeric",
|
||
}),
|
||
url: release.html_url,
|
||
}));
|
||
|
||
function getContent(content: string) {
|
||
const lines = content.split("\n");
|
||
const newContext = lines.map((line) => {
|
||
if (line.startsWith("- ")) {
|
||
const mainContent = line.split(";")[0];
|
||
const context = line.split(";")[2];
|
||
const mentions = context
|
||
?.split(" ")
|
||
.filter((word) => word.startsWith("@"))
|
||
.map((mention) => {
|
||
const username = mention.replace("@", "");
|
||
const avatarUrl = `https://github.com/${username}.png`;
|
||
return `[](https://github.com/${username})`;
|
||
});
|
||
if (!mentions) {
|
||
return line;
|
||
}
|
||
// Remove  
|
||
return mainContent.replace(/ /g, "") + " – " + mentions.join(" ");
|
||
}
|
||
return line;
|
||
});
|
||
return newContext.join("\n");
|
||
}
|
||
|
||
return (
|
||
<div className="grid md:grid-cols-2 items-start">
|
||
<div className="bg-gradient-to-tr 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">
|
||
<StarField className="top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2" />
|
||
<Glow />
|
||
|
||
<div className="flex flex-col md:justify-center max-w-xl mx-auto h-full">
|
||
<h1 className="mt-14 font-sans font-semibold tracking-tighter text-5xl">
|
||
All of the changes made will be{" "}
|
||
<span className="">available here.</span>
|
||
</h1>
|
||
<p className="mt-4 text-sm text-gray-600 dark:text-gray-300">
|
||
Better Auth is comprehensive authentication library for TypeScript
|
||
that provides a wide range of features to make authentication easier
|
||
and more secure.
|
||
</p>
|
||
<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.com/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="px-4 relative md:px-8 pb-12 md:py-12">
|
||
<div className="absolute top-0 left-0 mb-2 w-2 h-full -translate-x-full bg-gradient-to-b from-black/10 dark:from-white/20 from-50% to-50% to-transparent bg-[length:100%_5px] bg-repeat-y"></div>
|
||
|
||
<div className="max-w-2xl relative">
|
||
<Markdown
|
||
rehypePlugins={[[rehypeHighlight]]}
|
||
components={{
|
||
pre: (props) => (
|
||
<defaultMdxComponents.pre
|
||
{...props}
|
||
className={cn(props.className, " ml-10 my-2")}
|
||
/>
|
||
),
|
||
h2: (props) => (
|
||
<h2
|
||
id={props.children?.toString().split("date=")[0].trim()} // Extract ID dynamically
|
||
className="text-2xl relative mb-6 font-bold flex-col flex justify-center tracking-tighter before:content-[''] before:block before:h-[65px] before:-mt-[10px]"
|
||
{...props}
|
||
>
|
||
<div className="sticky top-0 left-[-9.9rem] hidden md:block">
|
||
<time className="flex gap-2 items-center text-gray-500 dark:text-white/80 text-sm md:absolute md:left-[-9.8rem] font-normal tracking-normal">
|
||
{props.children?.toString().includes("date=") &&
|
||
props.children?.toString().split("date=")[1]}
|
||
|
||
<div className="w-4 h-[1px] dark:bg-white/60 bg-black" />
|
||
</time>
|
||
</div>
|
||
<Link
|
||
href={
|
||
props.children
|
||
?.toString()
|
||
.split("date=")[0]
|
||
.trim()
|
||
.endsWith(".00")
|
||
? `/changelogs/${props.children
|
||
?.toString()
|
||
.split("date=")[0]
|
||
.trim()}`
|
||
: `#${props.children
|
||
?.toString()
|
||
.split("date=")[0]
|
||
.trim()}`
|
||
}
|
||
>
|
||
{props.children?.toString().split("date=")[0].trim()}
|
||
</Link>
|
||
<p className="text-xs font-normal opacity-60 hidden">
|
||
{props.children?.toString().includes("date=") &&
|
||
props.children?.toString().split("date=")[1]}
|
||
</p>
|
||
</h2>
|
||
),
|
||
h3: (props) => (
|
||
<h3 className="text-xl tracking-tighter py-1" {...props}>
|
||
{props.children?.toString()?.trim()}
|
||
<hr className="h-[1px] my-1 mb-2 bg-input" />
|
||
</h3>
|
||
),
|
||
p: (props) => <p className="my-0 ml-10 text-sm" {...props} />,
|
||
ul: (props) => (
|
||
<ul
|
||
className="list-disc ml-10 text-[0.855rem] text-gray-600 dark:text-gray-300"
|
||
{...props}
|
||
/>
|
||
),
|
||
li: (props) => <li className="my-1" {...props} />,
|
||
a: ({ className, ...props }: any) => (
|
||
<Link
|
||
target="_blank"
|
||
className={cn("font-medium underline", className)}
|
||
{...props}
|
||
/>
|
||
),
|
||
strong: (props) => (
|
||
<strong className="font-semibold" {...props} />
|
||
),
|
||
img: (props) => (
|
||
<img
|
||
className="rounded-full w-6 h-6 border opacity-70 inline-block"
|
||
{...props}
|
||
style={{ maxWidth: "100%" }}
|
||
/>
|
||
),
|
||
}}
|
||
>
|
||
{messages
|
||
?.map((message) => {
|
||
return `
|
||
## ${message.title} date=${message.date}
|
||
|
||
${message.content}
|
||
`;
|
||
})
|
||
.join("\n")}
|
||
</Markdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ChangelogPage;
|
||
|
||
export function Glow() {
|
||
let id = useId();
|
||
|
||
return (
|
||
<div className="absolute inset-0 -z-10 overflow-hidden bg-gradient-to-tr from-transparent dark:via-stone-950/5 via-stone-100/30 to-stone-200/20 dark:to-transparent/10">
|
||
<svg
|
||
className="absolute -bottom-48 left-[-40%] h-[80rem] w-[180%] lg:-right-40 lg:bottom-auto lg:left-auto lg:top-[-40%] lg:h-[180%] lg:w-[80rem]"
|
||
aria-hidden="true"
|
||
>
|
||
<defs>
|
||
<radialGradient id={`${id}-desktop`} cx="100%">
|
||
<stop offset="0%" stopColor="rgba(41, 37, 36, 0.4)" />
|
||
<stop offset="53.95%" stopColor="rgba(28, 25, 23, 0.09)" />
|
||
<stop offset="100%" stopColor="rgba(0, 0, 0, 0)" />
|
||
</radialGradient>
|
||
<radialGradient id={`${id}-mobile`} cy="100%">
|
||
<stop offset="0%" stopColor="rgba(41, 37, 36, 0.3)" />
|
||
<stop offset="53.95%" stopColor="rgba(28, 25, 23, 0.09)" />
|
||
<stop offset="100%" stopColor="rgba(0, 0, 0, 0)" />
|
||
</radialGradient>
|
||
</defs>
|
||
<rect
|
||
width="100%"
|
||
height="100%"
|
||
fill={`url(#${id}-desktop)`}
|
||
className="hidden lg:block"
|
||
/>
|
||
<rect
|
||
width="100%"
|
||
height="100%"
|
||
fill={`url(#${id}-mobile)`}
|
||
className="lg:hidden"
|
||
/>
|
||
</svg>
|
||
<div className="absolute inset-x-0 bottom-0 right-0 h-px dark:bg-white/5 mix-blend-overlay lg:left-auto lg:top-0 lg:h-auto lg:w-px" />
|
||
</div>
|
||
);
|
||
}
|