Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-26 01:44:53 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: make nested lists work in PDF renderer, resolves #2993

Browse Source
This commit is contained in:
Amruth Pillai
2026-05-08 12:29:16 +02:00
parent bf1a540fd1
commit 296f7951ec
63 changed files with 277 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/builder/$resumeId/-components/dock.tsx
+15 -31
View File
@@ -1,8 +1,9 @@
import type { Icon } from "@phosphor-icons/react";
import type { BuilderPreviewPageLayout } from "./page-layout";
import { t } from "@lingui/core/macro";
import {
ArrowUUpLeftIcon,
ArrowUUpRightIcon,
AlignCenterHorizontalIcon,
AlignTopIcon,
CircleNotchIcon,
CubeFocusIcon,
FileDocIcon,
@@ -12,7 +13,6 @@ import {
MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon,
} from "@phosphor-icons/react";
import { useHotkeys } from "@tanstack/react-hotkeys";
import { motion } from "motion/react";
import { useCallback, useMemo, useState } from "react";
import { useControls } from "react-zoom-pan-pinch";
@@ -23,11 +23,16 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/com
import { downloadWithAnchor, generateFilename } from "@reactive-resume/utils/file";
import { buildDocx } from "@reactive-resume/utils/resume/docx";
import { cn } from "@reactive-resume/utils/style";
import { useCurrentResume, useResumeHistory } from "@/components/resume/use-resume";
import { useCurrentResume } from "@/components/resume/use-resume";
import { authClient } from "@/libs/auth/client";
import { createResumePdfBlob } from "@/libs/resume/pdf-document";
export function BuilderDock() {
type BuilderDockProps = {
pageLayout: BuilderPreviewPageLayout;
onTogglePageLayout: () => void;
};
export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps) {
const { data: session } = authClient.useSession();
const resume = useCurrentResume();
@@ -36,13 +41,6 @@ export function BuilderDock() {
const [isPrinting, setIsPrinting] = useState(false);
const { undo, redo, canUndo, canRedo } = useResumeHistory();
useHotkeys([
{ hotkey: "Mod+Z", callback: () => undo() },
{ hotkey: "Mod+Y", callback: () => redo() },
]);
const publicUrl = useMemo(() => {
if (!session?.user.username || !resume?.slug) return "";
return `${window.location.origin}/${session.user.username}/${resume.slug}`;
@@ -102,28 +100,14 @@ export function BuilderDock() {
transition={{ duration: 0.2, ease: "easeOut" }}
className="flex items-center rounded-r-full rounded-l-full bg-popover px-2 shadow-xl will-change-[transform,opacity]"
>
<DockIcon
disabled={!canUndo}
onClick={() => undo()}
icon={ArrowUUpLeftIcon}
title={t({
context: "'Ctrl' may be replaced with the locale-specific equivalent (e.g. 'Strg' for QWERTZ layouts).",
message: "Undo (Ctrl+Z)",
})}
/>
<DockIcon
disabled={!canRedo}
onClick={() => redo()}
icon={ArrowUUpRightIcon}
title={t({
context: "'Ctrl' may be replaced with the locale-specific equivalent (e.g. 'Strg' for QWERTZ layouts).",
message: "Redo (Ctrl+Y)",
})}
/>
<div className="mx-1 h-8 w-px bg-border" />
<DockIcon icon={MagnifyingGlassPlusIcon} title={t`Zoom in`} onClick={() => zoomIn(0.1)} />
<DockIcon icon={MagnifyingGlassMinusIcon} title={t`Zoom out`} onClick={() => zoomOut(0.1)} />
<DockIcon icon={CubeFocusIcon} title={t`Center view`} onClick={() => centerView()} />
<DockIcon
icon={pageLayout === "horizontal" ? AlignTopIcon : AlignCenterHorizontalIcon}
title={t`Toggle page stacking`}
onClick={onTogglePageLayout}
/>
<div className="mx-1 h-8 w-px bg-border" />
<DockIcon icon={LinkSimpleIcon} title={t`Copy URL`} onClick={() => onCopyUrl()} />
<DockIcon icon={FileJsIcon} title={t`Download JSON`} onClick={() => onDownloadJSON()} />
apps/web/src/routes/builder/$resumeId/-components/page-layout.ts
+6
View File
@@ -0,0 +1,6 @@
export type BuilderPreviewPageLayout = "horizontal" | "vertical";
export const DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT: BuilderPreviewPageLayout = "horizontal";
export const getNextBuilderPreviewPageLayout = (pageLayout: BuilderPreviewPageLayout): BuilderPreviewPageLayout =>
pageLayout === "horizontal" ? "vertical" : "horizontal";
apps/web/src/routes/builder/$resumeId/-components/preview-page.tsx
+11 -3
View File
@@ -1,14 +1,17 @@
import { t } from "@lingui/core/macro";
import { FloppyDiskIcon } from "@phosphor-icons/react";
import { useHotkey } from "@tanstack/react-hotkeys";
import { Suspense } from "react";
import { Suspense, useState } from "react";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import { toast } from "sonner";
import { LoadingScreen } from "@/components/layout/loading-screen";
import { ResumePreview } from "@/components/resume/preview";
import { BuilderDock } from "./dock";
import { DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT, getNextBuilderPreviewPageLayout } from "./page-layout";
export function PreviewPage() {
const [pageLayout, setPageLayout] = useState(DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT);
useHotkey("Mod+S", () => {
toast.info(t`Your changes are saved automatically.`, { id: "auto-save", icon: <FloppyDiskIcon /> });
});
@@ -25,10 +28,15 @@ export function PreviewPage() {
wheel={{ step: 0.001 }}
>
<TransformComponent wrapperClass="h-full! w-full!">
<ResumePreview pageGap="2rem" showPageNumbers />
<ResumePreview pageGap="2rem" pageLayout={pageLayout} showPageNumbers />
</TransformComponent>
<BuilderDock />
<BuilderDock
pageLayout={pageLayout}
onTogglePageLayout={() => {
setPageLayout((current) => getNextBuilderPreviewPageLayout(current));
}}
/>
</TransformWrapper>
</div>
</Suspense>