v5.1.0 (#2970)

* chore(release): v5.1.0

* feat: implement resume thumbnails

* fix: remove unused mcp tools

* docs: fix formatting of docs

apps/web/src/routes/$username/$slug.tsx

@@ -0,0 +1,41 @@
+import type { ResumeData } from "@reactive-resume/schema/resume/data";
+import type { RouterOutput } from "@/libs/orpc/client";
+import { ORPCError } from "@orpc/client";
+import { createFileRoute, lazyRouteComponent, notFound, redirect } from "@tanstack/react-router";
+import { orpc } from "@/libs/orpc/client";
+
+type LoaderData = Omit<RouterOutput["resume"]["getBySlug"], "data"> & { data: ResumeData };
+
+export const Route = createFileRoute("/$username/$slug")({
+	component: lazyRouteComponent(() => import("./-components/public-resume"), "PublicResumeRoute"),
+	loader: async ({ context, params }) => {
+		const { username, slug } = params;
+		const resume = await context.queryClient.ensureQueryData(
+			orpc.resume.getBySlug.queryOptions({ input: { username, slug } }),
+		);
+
+		return { resume: resume as LoaderData };
+	},
+	head: ({ loaderData }) => {
+		const resume = loaderData?.resume;
+		const title = resume ? resume.name || resume.data.basics.name || "Resume" : "Reactive Resume";
+		return { meta: [{ title: `${title} - Reactive Resume` }] };
+	},
+	onError: (error) => {
+		if (error instanceof ORPCError && error.code === "NEED_PASSWORD") {
+			const data = error.data as { username?: string; slug?: string } | undefined;
+			const username = data?.username;
+			const slug = data?.slug;
+
+			if (username && slug) {
+				throw redirect({
+					to: "/auth/resume-password",
+					search: { redirect: `/${username}/${slug}` },
+				});
+			}
+		}
+
+		throw notFound();
+	},
+	ssr: "data-only",
+});

apps/web/src/routes/$username/-components/public-resume.tsx

@@ -0,0 +1,72 @@
+import { t } from "@lingui/core/macro";
+import { CircleNotchIcon, DownloadSimpleIcon } from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
+import { Button } from "@reactive-resume/ui/components/button";
+import { downloadWithAnchor, generateFilename } from "@reactive-resume/utils/file";
+import { LoadingScreen } from "@/components/layout/loading-screen";
+import { ResumePreview } from "@/components/resume/preview";
+import { orpc } from "@/libs/orpc/client";
+import { createResumePdfBlob } from "@/libs/resume/pdf-document";
+
+const publicResumeRoute = getRouteApi("/$username/$slug");
+
+export function PublicResumeRoute() {
+	const { username, slug } = publicResumeRoute.useParams();
+
+	const { data: resume } = useQuery(orpc.resume.getBySlug.queryOptions({ input: { username, slug } }));
+	const [isPrinting, setIsPrinting] = useState(false);
+
+	const onDownloadPDF = useCallback(async () => {
+		if (!resume) return;
+
+		const filename = generateFilename(resume.name || resume.data.basics.name || resume.slug, "pdf");
+		const toastId = toast.loading(t`Please wait while your PDF is being generated...`);
+
+		setIsPrinting(true);
+
+		try {
+			const blob = await createResumePdfBlob(resume.data);
+			downloadWithAnchor(blob, filename);
+		} catch {
+			toast.error(t`There was a problem while generating the PDF, please try again.`);
+		} finally {
+			setIsPrinting(false);
+			toast.dismiss(toastId);
+		}
+	}, [resume]);
+
+	if (!resume) return <LoadingScreen />;
+
+	return (
+		<>
+			<div className="mx-auto my-12 flex flex-col items-center gap-12 print:m-0 print:block print:max-w-full print:px-0">
+				<ResumePreview
+					pageGap="1rem"
+					pageScale={1.25}
+					pageLayout="vertical"
+					pageClassName="print:w-full! w-full max-w-full"
+				/>
+
+				<footer className="flex justify-center print:hidden">
+					<BrandIcon variant="icon" className="size-8 opacity-60" />
+				</footer>
+			</div>
+
+			<Button
+				size="icon-lg"
+				variant="outline"
+				disabled={isPrinting}
+				onClick={onDownloadPDF}
+				aria-label={t`Download PDF`}
+				title={t`Download PDF`}
+				className="fixed right-6 bottom-6 z-50 rounded-full bg-background/95 opacity-70 shadow-lg backdrop-blur transition-opacity hover:opacity-100 print:hidden"
+			>
+				{isPrinting ? <CircleNotchIcon className="size-5 animate-spin" /> : <DownloadSimpleIcon className="size-5" />}
+			</Button>
+		</>
+	);
+}