feat(web): llms.txt, convex live stats, switch to vercel and improved ui (#460)

apps/web/src/components/ai/page-actions.tsx

@@ -0,0 +1,184 @@
+"use client";
+import { cva } from "class-variance-authority";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "fumadocs-ui/components/ui/popover";
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
+import {
+	Check,
+	ChevronDown,
+	Copy,
+	ExternalLinkIcon,
+	MessageCircleIcon,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { cn } from "../../../lib/cn";
+
+const cache = new Map<string, string>();
+
+export function LLMCopyButton({
+	/**
+	 * A URL to fetch the raw Markdown/MDX content of page
+	 */
+	markdownUrl,
+}: {
+	markdownUrl: string;
+}) {
+	const [isLoading, setLoading] = useState(false);
+	const [checked, onClick] = useCopyButton(async () => {
+		const cached = cache.get(markdownUrl);
+		if (cached) return navigator.clipboard.writeText(cached);
+
+		setLoading(true);
+
+		try {
+			await navigator.clipboard.write([
+				new ClipboardItem({
+					"text/plain": fetch(markdownUrl).then(async (res) => {
+						const content = await res.text();
+						cache.set(markdownUrl, content);
+
+						return content;
+					}),
+				}),
+			]);
+		} finally {
+			setLoading(false);
+		}
+	});
+
+	return (
+		<button
+			type="button"
+			disabled={isLoading}
+			className={cn(
+				buttonVariants({
+					color: "secondary",
+					size: "sm",
+					className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground",
+				}),
+			)}
+			onClick={onClick}
+		>
+			{checked ? <Check /> : <Copy />}
+			Copy Markdown
+		</button>
+	);
+}
+
+const optionVariants = cva(
+	"inline-flex items-center gap-2 rounded-lg p-2 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4",
+);
+
+export function ViewOptions({
+	markdownUrl,
+	githubUrl,
+}: {
+	/**
+	 * A URL to the raw Markdown/MDX content of page
+	 */
+	markdownUrl: string;
+
+	/**
+	 * Source file URL on GitHub
+	 */
+	githubUrl: string;
+}) {
+	const items = useMemo(() => {
+		const fullMarkdownUrl =
+			typeof window !== "undefined"
+				? new URL(markdownUrl, window.location.origin)
+				: "loading";
+		const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`;
+
+		return [
+			{
+				title: "Open in GitHub",
+				href: githubUrl,
+				icon: (
+					<svg fill="currentColor" role="img" viewBox="0 0 24 24">
+						<title>GitHub</title>
+						<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+					</svg>
+				),
+			},
+			{
+				title: "Open in ChatGPT",
+				href: `https://chatgpt.com/?${new URLSearchParams({
+					hints: "search",
+					q,
+				})}`,
+				icon: (
+					<svg
+						role="img"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>OpenAI</title>
+						<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+					</svg>
+				),
+			},
+			{
+				title: "Open in Claude",
+				href: `https://claude.ai/new?${new URLSearchParams({
+					q,
+				})}`,
+				icon: (
+					<svg
+						fill="currentColor"
+						role="img"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>Anthropic</title>
+						<path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
+					</svg>
+				),
+			},
+			{
+				title: "Open in T3 Chat",
+				href: `https://t3.chat/new?${new URLSearchParams({
+					q,
+				})}`,
+				icon: <MessageCircleIcon />,
+			},
+		];
+	}, [githubUrl, markdownUrl]);
+
+	return (
+		<Popover>
+			<PopoverTrigger
+				className={cn(
+					buttonVariants({
+						color: "secondary",
+						size: "sm",
+						className: "gap-2",
+					}),
+				)}
+			>
+				Open
+				<ChevronDown className="size-3.5 text-fd-muted-foreground" />
+			</PopoverTrigger>
+			<PopoverContent className="flex flex-col overflow-auto">
+				{items.map((item) => (
+					<a
+						key={item.href}
+						href={item.href}
+						rel="noreferrer noopener"
+						target="_blank"
+						className={cn(optionVariants())}
+					>
+						{item.icon}
+						{item.title}
+						<ExternalLinkIcon className="ms-auto size-3.5 text-fd-muted-foreground" />
+					</a>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/web/src/components/providers.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { Toaster } from "@/components/ui/sonner";
+
+const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL || "");
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+	return (
+		<>
+			<ConvexProvider client={convex}>
+				<NuqsAdapter>{children}</NuqsAdapter>
+			</ConvexProvider>
+			<Toaster />
+		</>
+	);
+}

apps/web/src/components/search.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { create } from "@orama/orama";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+	SearchDialog,
+	SearchDialogClose,
+	SearchDialogContent,
+	SearchDialogHeader,
+	SearchDialogIcon,
+	SearchDialogInput,
+	SearchDialogList,
+	SearchDialogOverlay,
+	type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+import { customSearchItems, filterCustomItems } from "@/lib/search-config";
+
+function initOrama() {
+	return create({
+		schema: {
+			_: "string",
+		},
+		language: "english",
+	});
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+	const { search, setSearch, query } = useDocsSearch({
+		type: "static",
+		initOrama,
+	});
+
+	const filteredCustomItems = filterCustomItems(
+		customSearchItems,
+		search || "",
+	);
+
+	const combinedResults =
+		query.data === "empty" || !query.data
+			? null
+			: [
+					...query.data,
+					...filteredCustomItems.map((item, index) => ({
+						id: `custom-${index}`,
+						title: item.title,
+						url: item.url,
+						content: item.content,
+						type: "page" as const,
+					})),
+				];
+
+	return (
+		<SearchDialog
+			search={search}
+			onSearchChange={setSearch}
+			isLoading={query.isLoading}
+			{...props}
+		>
+			<SearchDialogOverlay />
+			<SearchDialogContent>
+				<SearchDialogHeader>
+					<SearchDialogIcon />
+					<SearchDialogInput />
+					<SearchDialogClose />
+				</SearchDialogHeader>
+				<SearchDialogList items={combinedResults} />
+			</SearchDialogContent>
+		</SearchDialog>
+	);
+}

apps/web/src/components/special-sponsor-banner.tsx

@@ -53,7 +53,13 @@ export function SpecialSponsorBanner() {
 		<div className="">
 			<div className="flex flex-col gap-2">
 				{specialSponsors.map((sponsor) => (
-					<div key={sponsor.sponsor.login} className="flex items-center gap-3">
+					<a
+						key={sponsor.sponsor.login}
+						className="flex items-center gap-3"
+						href={sponsor.sponsor.websiteUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						<Image
 							src={sponsor.sponsor.customLogoUrl || sponsor.sponsor.avatarUrl}
 							alt={sponsor.sponsor.name || sponsor.sponsor.login}
@@ -67,7 +73,7 @@ export function SpecialSponsorBanner() {
 								{sponsor.sponsor.name || sponsor.sponsor.login}
 							</h4>
 						</div>
-					</div>
+					</a>
 				))}
 			</div>
 		</div>

apps/web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 font-medium text-sm data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("-mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"ml-auto text-muted-foreground text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};