Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-24 15:22:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(pdf): roll out shared RTL layout to all templates

Browse Source 
Introduce createRtlStyleHelpers and a single rtl flag on RenderProvider,
migrate every template page to mirrored layout styles, and rename
alignRight to alignEnd. Fix plain rich text rendering via PdfText
paragraph renderers and map legacy Times New Roman to Times-Roman.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Amruth Pillai
2026-05-25 16:29:50 +02:00
co-authored by Cursor
parent 86fff7237f
commit 24c882fa9f
28 changed files with 501 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/pdf/src/templates/leafish/LeafishPage.tsx
+16 -11
View File
@@ -12,6 +12,7 @@ import { getTemplateMetrics } from "../shared/metrics";
import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { createRtlStyleHelpers } from "../shared/rtl";
import { Section } from "../shared/sections";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -140,9 +141,10 @@ const getPrimaryAlpha = (primaryColor: string, opacity: number): string => {
};
const useLeafishTemplate = (): LeafishTemplate => {
const { picture, metadata } = useRender();
const { picture, metadata, rtl } = useRender();
return useMemo(() => {
const r = createRtlStyleHelpers(rtl);
const foreground = rgbaStringToHex(metadata.design.colors.text);
const background = rgbaStringToHex(metadata.design.colors.background);
const primary = rgbaStringToHex(metadata.design.colors.primary);
@@ -157,6 +159,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
fontWeight: metadata.typography.body.fontWeights[0] ?? "400",
lineHeight: metadata.typography.body.lineHeight,
color: foreground,
...r.text,
} satisfies Style;
const baseStyles = StyleSheet.create({
@@ -166,6 +169,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
fontFamily: metadata.typography.body.fontFamily,
fontSize: metadata.typography.body.fontSize,
lineHeight: metadata.typography.body.lineHeight,
direction: r.pageDirection,
},
text: bodyText,
heading: {
@@ -174,24 +178,25 @@ const useLeafishTemplate = (): LeafishTemplate => {
fontWeight: metadata.typography.heading.fontWeights.at(-1) ?? "600",
lineHeight: metadata.typography.heading.lineHeight,
color: foreground,
...r.text,
},
div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) },
inline: { flexDirection: "row", alignItems: "center", columnGap: metrics.gapX(1 / 3) },
inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) },
link: { textDecoration: "none", color: foreground },
small: { fontSize: metadata.typography.body.fontSize * 0.875 },
bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" },
richParagraph: { margin: 0, ...bodyText },
richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" },
richListItemMarker: { width: metadata.typography.body.fontSize, textAlign: "right", ...bodyText },
richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign },
richListItemContent: { flex: 1, ...bodyText },
splitRow: {
flexDirection: "row",
flexDirection: r.row,
flexWrap: "wrap",
alignItems: "flex-start",
justifyContent: "space-between",
columnGap: metrics.gapX(2 / 3),
},
alignRight: { textAlign: "right", minWidth: 0, maxWidth: "100%", flexShrink: 1 },
alignEnd: { ...r.alignEnd },
section: { flexDirection: "column", rowGap: metrics.gapY(0.25) },
sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary },
item: { rowGap: metrics.gapY(0.125) },
@@ -205,7 +210,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
paddingVertical: metrics.page.paddingVertical,
},
headerBody: {
flexDirection: "row",
flexDirection: r.row,
alignItems: "center",
columnGap: metrics.gapX(1),
},
@@ -213,7 +218,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
flex: 1,
rowGap: metrics.gapY(0.5),
},
headerIdentity: { textAlign: "left", alignItems: "flex-start", rowGap: metrics.gapY(0.35) },
headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
headerContactBand: {
backgroundColor: primaryTintDark,
@@ -221,13 +226,13 @@ const useLeafishTemplate = (): LeafishTemplate => {
paddingVertical: metrics.page.paddingVertical,
},
contactList: {
flexDirection: "row",
flexDirection: r.row,
flexWrap: "wrap",
rowGap: metrics.gapY(0.125),
columnGap: metrics.gapX(1),
},
contactItem: {
flexDirection: "row",
flexDirection: r.row,
alignItems: "center",
columnGap: metrics.gapX(1 / 6),
},
@@ -244,7 +249,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
transform: `rotate(${picture.rotation}deg)`,
},
body: {
flexDirection: "row",
flexDirection: r.row,
columnGap: metrics.columnGap,
paddingHorizontal: metrics.page.paddingHorizontal,
paddingTop: metrics.page.paddingVertical,
@@ -269,5 +274,5 @@ const useLeafishTemplate = (): LeafishTemplate => {
}),
} satisfies LeafishStyles,
};
}, [picture, metadata]);
}, [picture, metadata, rtl]);
};